こんにちは！ASUE株式会社広報のN村です。

さて、Webマーケティング業界で働いている方なら一度くらい"あの力"を欲しいと思った方も多いのではないでしょうか。そう、あの力です。

かく言うわたしも、ASUEに入社以来ずっと欲しています。が、社内には経験豊富なデザイナーさんもいますし「できれば身につけたいが緊急ではない」ものとしてうすぼんやりと片隅に追いやられておりました。実務未経験で入社した当初は制作課でサイトの保守・運用をしていたため、ちょっとした画像デザイン経験などもありますし、広報に移ってからはブログの画像やアイキャッチを自分で作ることもありましたが、そのときそのときの必要分だけ学ぶくらいで体系的にデザインを学んだわけではないので、ただただ「なんとなくイラストレーターが使える人」になっておりました。

そんなある日、こんな声が聞こえたのです————。

力が……欲しいか……？

欲しい……ッ！！！！

※事実とは異なる場合がございます。

社内でデザイナーによるバナー作成講座がスタート！

ということで、弊社Webデザイナー・デザキが広告運用者や広報、Webコーダーなどの非デザイナー向けにデザインの基礎を学ぶためのバナー制作講座を開催してくれました！

というか、現在進行形で開催中です！
ありがたや。

このご時世、大人数が顔を突き合わせて話を聴いたり……という形の勉強会はできないですし、デザインスキルを身につけるには実際に体験するのも大事だよね！ということで、課題が出されてそれをこなしてフィードバックをもらえるという形式で実施し、このブログを執筆している現在は2つ目の課題まで終了し、3つ目の課題が出されたところです。

ここまでの話ぶりからお察しの通り、広報であるわたしも現在参加中！
本ブログでは、わたしが参加して実際に作ったバナーや学んだことなどをご紹介します。

フォントの選び方のコツは？

最初の課題の前にウォームアップとしてクイズが出されました。

さて、そのクイズ内容がこちら————「次の3つのフォントのうち、親しみやすいフォントはどれ？」。

……1. かなぁ？

このお題はチャット内で軽く答えただけだったので、当時の正確な心境は思い出せないのですが、なんとなくどれも「ぽい」と感じつつも、その中で一番読みやすそう・使いやすそうなフォントを選んだ気がします。

さて正解は……

全部かーーーーーい！

今回のクイズで情報は「親しみやすい」のみでした。例えばかわいい猫や子どもに感じる親しみやすさもあれば、居酒屋の店員さんが元気よく話しかけてくれるときに感じる親しみやすさもあって、親しみやすさにもいろんな親しみやすさがあります。それはフォントを選ぶ上でも同じことで、今回は全部が正解になるとのこと。また、フォントとデザインとの相性もあるので、その辺りも考慮して選ぶ必要があるそうです。

実際に業務で「親しみやすいデザインを」と要望があった場合は、それ以外の情報のヒアリングや調査など、イメージをしっかりとすり合わせた上でデザインをする必要がありますね！

クイズが済んだら次はいよいよ、実践です！

最初のお題は「文字デザイン」

そうして実際につくったものがこちら！

当初、青い線で囲ったような助詞などだけを小さく設定していました。今回のお題はデザインに関わる人ならフォント見本で絶対にみたことがある宮沢賢治作「ポラーノの広場」の一節を配置するもので、文字量が多くさらに強弱をつけるべき情報の序列などもない状態です。

ということで、いただいたフィードバックがこちら。

こちらをもとに作り直したのがこちら。

どことなくすっきりしたような、微妙な差ですが、この細かい文字の調整が実際のデザインの現場では大きく影響してくることもあるそうです。

文字デザインの基本ポイントは、「文字間」「行間」「カーニング」

今回の課題のポイントは、「文字間」「行間」「カーニング」でした。文字間とは文字の間隔のこと、行間とは行の間隔のこと、カーニングとは文字による間隔の差異を調整することです。

ずっと「カーニングよくわからんけど、文字ツメ0%、アキなし、アキなし、カーニング設定はオプティカル！」でよくわからないまま詰めていたのですが、今回の課題で細かく調整してみる体験ができたのでよかったです！

英語のサイトですが、カーニングの調整をゲームで学べるサイトもあるので興味がある方はどうぞ！
→Kern Type, the kerning game：https://type.method.ac/

"白黒だけ"でバナーを作ってみよう！

ということで、課題をもとに作ったのがこちら！
思いついてしまったが故に入れずにはいられなかった（社内の勉強会だという甘え……）コピーを入れたものも合わせて提出しましたが、そちらについては今回のお題の商品イメージには合わないため修正版は割愛します。

デザインメモにツッコミどころが満載ですね。わたしもそう思う。ということで、この時点で勘のいい人は言われることをなんとなく予想してそうですが、いただいたフィードバックがこちら。

こちらをもとに直したのがこちら。

フィードバックに合わせて変更しましたが、全体的に白っぽいのが気になってってしまい、今度は摘む米を黒くしたver.も作ってみました。が、「白米のECサイト」というテーマのため白でいきましょう！ということに。ちなみに、フォントは明朝体への変更も検討しましたがイラストといまいち合わなかったため、高級感+フォントなどで検索して調べてイラストとも合いそうだな！と思ったFuturaを選択しました。Adobeユーザーなら使えます。

フィードバック内容はこちら。

ちなみにどうでもいい変化ですが、2回目の提出からお箸が白米をちゃんと摘むようになりました。

ということで、このフィードバックを元に修正してOKをもらえた最終稿がこちら！！！

修正のひとつひとつはちょっとした変更でしたが、初回提出時と比較してスッキリしたスタイリッシュなデザインになった気がします！

ポイントは「視認性」「レイアウト」「テイスト」

今回のフィードバックのポイントとしては、視認性・レイアウト・商品イメージにあったデザインテイストかどうかの3点でした。

視認性・レイアウトでいえば、初回提出時の右上の謎の余白や、2回目の提出時のコピーとイラストが近すぎた点ができていなかった部分ですね。

最初に入れた「日本の米は世界一ィ！」というコピーや、下部に入れた黒い帯、高級感よりも親しみやすさを出してしまったフォントチョイスが商品イメージに合わないデザインテイストになってしまっている部分でした。

こういうイメージのデザインを作りたい→こうしよう！という感覚はデザインに関するインプット量が関わってくるそうなので、しっかりインプットするようにしていきたいですね……。

「これだ！」と思ったデザインをどう実現するかがわからない場合は、「○○（作りたいデザインイメージ） デザイン」などで検索すると雰囲気が掴めるかもしれないです。

まとめ

今回は社内のデザイナーさんのご厚意で、フィードバックをしっかりもらってデザインに挑戦できるありがたい機会を社内で持つことができました。本当に武器としてデザインスキルを手に入れるには、こんなことを何十回も繰り返さないと難しいとは思いますが、こういうスキルアップの機会が社内で持てるの本当にありがたさしかない……。

今回は最終課題まで随時レポート予定なので、最後までお楽しみに！

ASUEでは、Webデザインに関する情報や、広告・SNSなどWebマーケティング全般の最新情報・おすすめ記事を紹介するメールマガジンをほぼ週刊で配信中です！

ブログの更新もお知らせするので、本ブログの続きが気になる方もぜひご登録くださいね。