今回は、ランサーズでバナー制作のコンペに挑戦したことについてまとめました。

結論から言うと落選してしまいましたが。。

mito

駆け出しWebデザイナーとして「どんなことを学べたのか」「次にどう活かすのか」を「足りない部分はなんだったのか」の考察を交えつつお届けします。

ランサーズを始めたきっかけ

独学で勉強をしていると、「本当に実務で使える知識を身につけているのか？」と不安になるものです。

mito

バナー30本トレースしたけれど、実務でどれくらい使えるのだろうか・・

https://mito-lab.com/banner-trace-30-report/

私がランサーズを始めた理由は2つです。

momo

特にプロジェクト形式だと他の人の提案も見ることができるので、同じテーマをどう考えてアウトプットしているのか？が垣間見れて、勉強になるよ！

まずは、バナー制作に絞ってコンペに5つ応募しました。

バナー制作のコンペに参加しての学び

詳細は触れませんが、学んだことを記録していきます。

1つ目のバナー

一番優先して伝えたいことは何か？メッセージに順位づけをして、順位づけされた通りにちゃんと訴求できるデザインを考えます。

例えば、オンライン英会話の場合、「オンラインでできる」というのは手段。「ビジネスレベルの英語が身につく」というのが目的。ユーザーにとって、手段と目的のどちらに焦点を当てて伝えるべきなのか考える必要があることを学びました。

バナーはLPやサイトへ誘導するためのものなので、誘導先のページも意識する必要があります。なのでバナーを考えるときは、誘導先のページからキーワードを抽出してどんなワードが響そうかを考える。
また、バナーがどんなシーンで表示されるのか（検索広告なのかSNSなのか）を考えて作るとよりコンセプトからずれないデザインができるのだと学びました。

男性向けのバナーに英数字はDINがよく使われています。そして字詰めして使う方がかっこいい。高級感を出したいのであれば、Bodoniの書体も良い。
スタイリッシュにしたいのであれば、余分なパーツ（白罫線や枠線）などは削ぎ落とすこと。

mito

字詰めに悩んだら書籍など印刷物を参考に。Webのように後から修正が難しいのですごく考えて作られており、参考になると教えていただきました。

2つ目のバナー

具体的なペルソナを作り、そこから色やフォントなどを決めていくと良い。

mito

女性らしいデザインと言われたらピンクとか一般論ではなくて、ペルソナから色やフォントを決めると迷いが減ります。

ハレーション(halation)は、明度差がない彩度が高い色を組み合わせて目がチカチカし、不快感を起こすような色の組み合わせのことを言います。

引用元(ferret Webマーケティングに強くなるメディア)

momo

生理的な不快感を生み出すので、デザイン上はインパクトがあり目を引きけれど、目や脳が疲れてしまうのでできるだけ避けるべきと言われているよ

mito

赤と緑、赤と青などがそうだね。

momo

もしその組み合わせで使いたい場合は、ハレーション回避のために色同士の間にスペースを設けて使用したりもするよ！

可読性の高い配置の基本は以下2つ。

mito

この２つのお約束を頭に入れながら構成をしてみること。白黒で一度作って、読める状態にしてから色や画像を反映していくと良いとアドバイスいただきました！

白黒で一度作って、読める状態にしてから色や画像を反映していくというやり方、早速試しました。
デザイン後の修正回数が減った気がします。

三角形など先端が尖った図形を背景に並べるとシャープさを表現できる。

3つ目のバナー

遊び心、親しみやすさはイラストで表現できること、配色バランスで文字情報ばかりでも単調にならないデザインができることを学びました。

4つ目のバナー

画像が切れている、マスク画像がはみ出ている、文字の強弱など細かい部分のこだわりがまだまだできていないことを実感しました。

5つ目のバナー

説明文について。例えばポイントを3つに分けて、背景のオブジェクトを3つ用いて強調するというのも一つのやり方。
別のやり方として、フォントの種類を変えて強弱を表現する。
例え文章だけでも、デザインされているように見えることを学びました。

バナー内の写真と文章について、お互い相乗効果を生み出せるような関係性のものを選ぶことも重要です。

コンペの面白みと学んだところ

応募されているたくさんのバナーを見て、初見で「このバナーいいな！」と思ったバナーは当選していました。

そして、そのようなバナーは補足説明で書かれているコンセプトやターゲットの深掘りがデザインにきちんと反映されており、文章とデザインに矛盾がありません。補足説明を書くことでより、説得力が増している印象を受けました。

当たり前ですが、「自分のバナーなんかイマイチ、何か足りない」と思うと当選しない。やはりそこは何が足りないのか、何がイマイチなのか納得いくまで突き詰めて考えるべきだなと思いました。

課題

バナーを作る時の考え方は習得できたので、それをどこまでデザインに落とし込めるのか。細かい部分の微調整をどこまでこだわり持ってできるのか。

この2点をこれから身につけていきたいです。

mito

引き続き挑戦します！