Blog

記事一覧

サムネイルがありません
  • お知らせ

名古屋市のおすすめホームページ制作会社10選にてご紹介いただきました!

株式会社WebClimb様の記事にて弊社がご紹介いただきました!

記事はこちら
https://www.webclimb.co.jp/hp-nagoya/#ex-field

ご紹介いただいている通り、エクスフィールドでは完成以降のことも視野に入れた制作も得意としております!
ホームページのリニューアルや新規制作だけではなく、広告運用なども得意としています。

また、ホームページだけではなくLINEスタンプの制作や、ポスター・チラシなどのDTP制作も得意です。
中日ドラゴンズ様のポスターやLINEスタンプなどもリリースさせていただいておりますので、
ぜひ制作実績をご覧いただけますと幸いです。

エクスフィールドはどんなに些細なことでもご対応いたします。
何かお困りごとがありましたら是非一度ご相談ください!

簡単!Photoshopでキラキラ背景の作り方

みなさま、こんにちは!

暑い日々が続いておりますが、いかがお過ごしでしょうか?
この時期、熱中症予防や水分補給など、暑さ対策はとても重要ですね。
十分な水分を摂り、こまめに休息を取りながら、夏を乗り切りましょう〜!

今回は、Photoshopの使い方に関するTipsをご紹介いたします。
皆さんはキラキラと輝く美しい背景を作成する方法について興味はありませんか?

キラキラする背景を作りたくて素材を探しても、なかなかイメージ通りの素材が見つからないということがありますよね。
イメージとは違う写真でも、Photoshopの機能を使えば、イメージに近いキラキラ背景を作成することができますよ!

それでは、キラキラ背景の作り方をご紹介いたします。

STEP1

まずはキラキラしている写真を用意します。

STEP2

イメージに近い色の長方形を作成します。

STEP3

作った長方形に、写真をクリッピングマスクします。
写真のレイヤーの描画モードをオーバーレイにします。

STEP4

ピンク色のキラキラ背景ができました。
オーバーレイ以外の描画モードを選択すると、雰囲気が変わるので、
色々触ってみて、イメージに近い描画モードを選択してみてください!

先ほどの写真を使用して、下記のようなバナーを作ってみました。
色を水色に変えて、描画モードはオーバーレイで作成しました。

キラキラ背景があると、高級感溢れる画像が作れるので、便利ですね!
いろんな写真や描画モードを組み合わせることで、表現の幅が広がるので、ぜひお試しください!

うちの部長も光を浴びて嬉しそうです!

暑さが続く日々ではありますが、このブログが少しでも皆さまのリフレッシュの一助となれば幸いです。どうぞよろしくお願いいたします!

熱中症にはくれぐれもお気をつけください。涼しい場所でお過ごしくださいね!

  • デザイン
  • ブログ

弊社からリリースしたスタンプが中日スポーツ様で紹介されました!

本日発売の中日スポーツ様の紙面に弊社で制作した中日ドラゴンズの柳裕也選手のスタンプを紹介していただきました!

柳選手のスタンプの購入はこちらから購入いただけます!

第一弾として岡林勇希選手もリリースしていますので合わせてご確認ください!
こちらから購入いただけます!

今後も高橋宏斗選手や石川昂弥選手、根尾昂選手、鵜飼航丞選手のスタンプもリリース予定ですので、是非お気に入りの選手のスタンプでいろんな方と交流していただければと思います!

現役デザイナーに聞いた!FigmaとXDどっち使ってる?

こんにちは!
エクスフィールドです。
ジメジメな梅雨、まだまだ続きそうですね!雨が降っても気温は高く、バテやすい時期ですが、エクスフィールドでは新しいデザイナーさんが仲間入り!新たな風が吹いて活気に溢れております。デザイナーの悩みなどお話しする機会も増え。。。気になることが一つ!デザイナーさんはfigmaとXDどちらを使っていますか?

FigmaとXDどっち使ってる?

Webデザイナーに衝撃が走った2022年9月。AdobeがFigmaを買収したというニュース。
私はXDユーザーでXDが生き残ると、、、思っていました。(思いたかった)ですが、2023年1月。AdobeXD販売終了という悲しい事実が耳に入ってきました。
ほとんどの案件をXD(たまにPhotoshop)で制作していたので、かなりショックでした。
弊社ではどうなのか?結果は、、、
まだXDを使用しているデザイナーさんの方が多い印象です!

FigmaとXDどう違う?

FigmaとXD、実際のことろ違いはあるのでしょうか?実は、機能にそこまでの違いはありません。
XDは、Adobeユーザーで、PhotoshopやIllustratorを使用している方は、操作が似ているので直感的に作業できて使いやすいかも!
ではAdobeユーザーにとってfigmaは使いにくいのか?
そんなことはないです。デザイナーにとってXDからfigmaに移行するのは、そこまでハードルは高くないと思います。
私は、XDからfigmaに移行しつつある段階で、まだまだfigmaの機能を使いこなすまでには至っていませんが、基本的にはXDと似ています。

例えば、左側にレイヤー、真ん中に作業エリア、右側にフォントやカラーなどが変更できる操作エリア。
コンポーネントやショートカット機能などもほとんど同じです。

Figmaのメリット

figmaのメリットは?
・Web上で共同作業
複数のデザイナーが同じファイルにアクセスしてリアルタイムで共同作業できます。
・リンクで共有
デザインツールを持っていない方でもアクセス可能です。
・プラグインが充実
こんなことしたい!が大体叶います。
・オートレイアウト機能
作業時間が大幅カットできます。

次回詳しく解説します!

魅力がたくさんのFigmaの機能については、また詳しく解説させていただきます!これからデザインを勉強する方は、無料でできるので、ぜひ触ってみてください。

  • AI

進化の早過ぎるchat GPT

いつもお世話になっております。
エクスフィールドです。

突然ですが、、、
chatGPTの進化が早過ぎる!!

chatGPTが話題になりだした当初に少し触って、あとはニュースや記事をたまに見かけては流し見する程度でしたが、
言葉も知らない、ハイハイくらいしか出来ない赤ちゃんがものの数ヶ月で小学生くらいになってました。

今回は今週エコノス株式会社さんで6/27に開催されていた、
「みんなが知らないChatGPT活用法」の感想を軸に所感を書ければなと思います。

・GPT-4がすごい

chat GPTは無料版がGPT-3.5、2023年3月に公開された有料版のGPT-4の2種類があります。
有料版は約20ドルで利用できるようです。
また、Microsoftが提供しているBingというブラウザを使えば無料でGPT-4を体験できるようです。

少しずれてしまいましたが、GPT-4はより人間に近い言葉で返事を返してくれるのが特徴で、
無料版のGPT-3.5の回答と比べると精度もかなり高いように感じました。

また、chat GPT-4ではプラグイン機能が使えるようになっていて、
リンク先のページの内容や動画の内容を読み取って文字化してくれたり、日本のサービスだと「食べログ」がいち早く開発に取り組んでいるようで、
「今日の19時から入れる居酒屋」のように入力すると、5つ程度提案してくれて予約できるというサービスのようです。
他にも今はいろんな会社がAI開発を進めているようで、すごい速度で発展しているなあという感想です。

・chat GPTとかけあわせた.bubbleがすごい

chat GPTは学習したものを溜め込んでアップデートして再利用するという性質があるため、
通常の業務に組み込もうと思うと情報漏洩の危険性が高まります。
そこで、bubbleのような外部システムから利用することで情報漏洩のリスクを下げることが可能になります。

また、chat GPTのみで利用しようと思うと、「どういったシステムなのか」、「前提条件はなにか」、「詳細な内容はなにか」などなど
詳細な質問を投げないと最適な解答が返ってきませんが、bubbleなどの外部システムを使えば、半自動である程度のシステムを生成できるので、
開発の効率をあげることも可能になっています。

bubbleと使い方などを紹介してくれている記事もたくさん出てきますので、興味のある方は是非調べてみてください。

bubble公式はこちら

・まとめ

少し情報収集をしてなかっただけでここまで進化しているとは驚きでした・・。
仕事用のPCにもchatGPTのアプリを入れたのでこれからはどんどんchatGPTを使いながら、しっかりアンテナを貼ろうと思います!

  • お知らせ
  • ホームページ制作

名古屋市の優良ホームページ制作会社として紹介していただきました!

優良WEB様にて名古屋市の優良なホームページ制作会社として紹介していただきました!

記事の詳細はこちら。

ご紹介いただきありがとうございました!

  • お知らせ

優良WEB様で弊社の紹介をしていただきました!

優良WEB様で弊社の紹介記事を作成していただきました!

優良WEBとは?

優良WEBサービスは掲載数No,1の日本最大級のホームページ制作会社検索サイトになります。
地域・業種・特徴・予算などを掛け合わせて自身の条件にあった会社を検索することが可能です!

しかも掲載数はなんと10,913社(6/16時点)もあり、47都道府県から検索できます。

優良WEBのここがすごい

優良WEBではどの業種やどんなサービスに強いかが一目で分かる記事が豊富にあります。
特徴別記事一覧
業種別記事一覧
地域別記事一覧

また、地域別一覧が用意されているように、各県それぞれに紹介ページが用意されていて、「日本最大級」は伊達じゃ無いなあと感じました!

上記の企業紹介ページ以外にも、たくさんコラムが投稿されています。
中には流行りの「ChatGPT」の記事なども用意されていて、守備範囲の広さに驚きました。

まとめ

優良WEBというサービスは、仕事を依頼したい企業の人はもちろんのこと、
制作会社目線でもコラムなどから新しい発見があり、サービス名にもあるようにまさに”優良”WEBでした。
みなさんも是非一度拝見してみてはいかかでしょうか?

優良WEB
https://yuryoweb.com/
コラム一覧
https://yuryoweb.com/column/

  • 広告運用

ホームページからの問い合わせを10倍にすることができた理由

6月、季節は夏直前でもうすぐで2023年も半年が終わると考えると恐ろしいですね。
今回はその半年間で急成長のお手伝いをさせていただくことができたクライアント様を
自分の所感と備忘録などもかねてご紹介をしたいと思います。
今回弊社へご依頼いただいてから問い合わせ件数が10倍、売り上げで見ると前年から4倍も上がったとのことでした。
これは弊社のなかでもかなり良い結果を出せたなと思っていますし、今もなおどんどん右肩上がりに成長しています。嬉しい限りです。

目次

・何故ここまで成長できたのか?
・成功したきっかけはなんだったのか?
・気をつけた点はなにか?

ある程度記事を見ていただいて伸びそうであればさらに細分化して記事を投稿していこうと思います。
それではよろしくお願いします。

何故ここまで成長できたのか?

これは様々な理由が考えられますが、商材が「車」と分かりやすくほとんどの人が必要としている物だったというのが強いと考えています。
言い方を変えると、その商材についてどれだけ知っているか、どういう人がその商材を欲しいと思っているのか、どういう人が買おうとしているのかなどの
ペルソナを想像しやすかっということになります。
ペルソナを想像できれば見た人を惹きつける広告の打ち方や見せ方ができる訳ですね。

成功したきっかけはなんだったのか?

きっかけというよりは「積み重ねが実った」という表現のほうが正しいと思います。
その積み重ねですが、とにかく毎日広告の管理画面を見て数値に異常はないかの確認をして、
キーワードの選定や広告の見出しなどを改善していったことです。
成果が目にみえるまでは辛い作業ですが、とにかくトライ&エラーあるのみです。
ですが、闇雲に色々変更するのではなくある程度テーマを決めてから変更をかけると、
何がダメで何が良かったのかが自分の中でも分かりやすいのでおすすめです。

気をつけた点はなにか?

これは2個目とすこし被るところもありますが、とにかく広告と向き合い続けて、
改善を忘れないということです。
これは今現在でも続けていることで、どうすればもっとコンバージョンが増えるのか。
競合他社が現れた時どう対策するのが得策か。など毎日考えています。

■まとめ

つらつらと概要だけ書きまとめましたが、また機会があれば各項目の詳細も書いていければと思っています。
広告のコンバージョンが出るまでは不安で仕方ない事が多いです。これは他社さんとかの話を聞いていてもみんな大体同じ感覚なんだなあという印象です。
制作会社の一ディレクターの感想文のような記事になってしまいましたが、少しでも誰かの助けになれていたら幸いです。

  • ホームページ制作

ホームページ制作会社的観点のコーディングで注意していること

お久しぶりです!随分ご無沙汰してしまいましたが、表題の通りホームページを制作する上で注意していることを制作会社的観点でメモも兼ねて書き記していこうと思います。(諸説あり)

1.ホームページの全体像の把握

どんな作業でもなるべく効率化したいというのは世の常だと思います。
ここで重要なのは「どのページにどんなパーツがあるのか」、「どのパーツは使い回しが効きそうなのか」です。これは「手を抜く」という訳では決してなく、上記のようなことを把握しておけば力の入れるべきページに100%以上の力を使えると言う考え方です。

2.ではどうやって共通化できるパーツを管理するのかを考える

共通化できるパーツとしてすぐに思い浮かぶものが「ヘッダー」と「フッター」かと思います。
これはまあ日本語で言うと頭と足で、頭がへんてこだとぱっと見の印象が最悪ですし、足がへんてこだとページ全体の締まりがめちゃくちゃ悪くなります。
また、ヘッダーに関してはページ全体を行き来するためのメニューなども大体の場合は内包しているので、ここの使い勝手が悪いとページ全体の印象も悪くなります。
そういった観点からここは毎回そこそこ時間を取って作ってます。

ヘッダーとフッターもそうですが、flexboxを使って横並びにするボックスなどは
ホームページでは多々出てくると思います。(諸説あり)
こういったものはモジュール化してしまってパーツごとにCSSを小分けに作成して、
微調整をページ固有のCSSで行うようにしています。

他にも共通化できるものはたくさんあります。
・ページのメインカラーやサブカラー
・コンテンツのインナーの横幅
・テキストサイズ
・ブレイクポイント

この辺の細かい設定はホームページを作り始める一番最初に全体のベースとなるCSSを作成して、
Scssの変数として全て入力してしまいます。
結構めんどくさい作業ですけど、これやっておくと毎回カラーコードの確認したりとか、
ページごとにちょっとずつコンテンツ幅が変わって気持ち悪い感じには絶対ならないので、やって損はないです。まじで。

この辺の内容に関しては過去の記事でも紹介しているので、
興味が湧いた方は是非ご覧ください!
CSS設計ってどんなもの?

3.idやclassなどの命名規則のすり合わせを忘れない

これ忘れると大事故になります!!絶対にやってください。
バイトとかで制作会社に行ってる方とかもディレクターとか上司の人にしっかりどうするか聞いてあげるとにっこりしてくれますよ。多分。
まあそれくらい大事なことだと思ってるんですけど何が大事なんだいという話。
ちゃんとすり合わせしておかないと、管理がめちゃくちゃにめんどくさくなります。

色々なケースがありすぎるので、よくありそうな事例だけあげますが、
・どこに何のスタイルが効いているか全然わからない。
・修正箇所を特定するための検索がすごく不便になる、

ページ数が多くなればなるほど関わる人も増えると思います。
だからここはしっかり擦り合わせて分かりやすくて可読性のあるコーディングをしましょう!

まとめ

今回はTipsというよりかは何を考えてホームページ制作を行うのがいいのかということを書いてみました。自分が何を考えてコーディングしたいのかを再度整理できていい機会になりました。
もちろんこの辺の考え方は制作会社によって様々だと思うので、あくまで一ホームページ制作会社の考え方として
参考にしていただければ幸いです!!

Contact

猫と本棚

エクスフィールドへのお問い合わせ。

ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか?ご相談は無料ですので、いつでもお伺いいたします。

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

受付時間:10:00~18:00(平日)

PAGE
TOP