こんにちは！ASUE株式会社の広報のN村です！
さて、突然ですがここで前回までのおさらいをしましょう。

前回までのあらすじ

デザインについてきちんと学んだことがなく、ただの「イラストレーターがなんとなく使える人」になっていた広報のN村。ある日、聞こえてきた謎の声に応えると、不思議な光がN村を包み込み——。

僕と契約してデザインスキルを手に入れてよ！

！？

ということで、弊社のWebデザイナー・デザキが、社内の広告運用者を始めとする非デザイナー向けに、実践課題+それに対するフィードバックをもらいながら実際にバナー制作をやってみよう！と社内で開催している本講座。前回は基本的な文字デザインやレイアウトを学びながら実際に白黒のバナー制作まで、参加者たちは実際に自分で制作しながら学んできました。社内のことなので手前味噌になりますが、有料で受けるレベルやでぇ……、本当に。

今回は第二弾として、フルカラーでバナーを制作！というお題に挑戦しました。バナー制作講座の概要や前回の内容について詳しく知りたい方は、前回の記事をご覧くださいね。

架空商品のバナーをフルカラーで制作しよう！

今回の架空商品は小さい子供を持つママをターゲットにした電動自転車。キーカラー（商品のブランドカラー的な…？）を使用して、バナーを制作しましょう！というものでした。大体20代後半〜30代、場合によっては40代くらいまでの女性がターゲットだからちょっと可愛い雰囲気にしようかな！というところからわたしは制作をスタート。

——今回は怒涛のフィードバック回数なので、程よく割愛しつつご紹介していこうと思います！

余談ですが、わたし以外の参加者男性陣たちはいわゆる「女性向け」のデザインにとっても苦戦しておりました……

初稿提出：利用が「自由」な素材、どう使う？

もうすでに嫌な予感がしますね。見える、見えるぞ。何を言われるか——。もはや、ブログのことを考えてこのミスをした気がします。多分そう。そうだと思う。このときのわたしは、迷走していたので正気じゃなかったんだ……。と、長々前置きしましたがデザイナーさんからのフィードバックがこちら！

課題のルールとして敢えて「商品写真代わりの自転車の素材」の利用は自由です！になっていたのを、まんまとわたしは不使用で提出しました。そりゃ必要だわ。わかる。この辺りの解説はこの後細かくご紹介するので、もうしばらくわたしの制作物&フィードバックにお付き合いください。

2回目〜5回目提出：方向性が決定&リテイクの嵐へ

2回目の提出がこんな感じで、イラスト→商品画像に変更して調整して（多分）デザインの方向性にはツッコミが入らなかったためこの方向で微調整を重ねていくことに。そして3回目の提出が下記の画像。

こちらのフィードバックを受けて、坂道ver.をやめて平坦ver.に統一して、調整を行いました。ここで、最初の提出からサイズ調整のみで手を加えていなかったコピーのバランス調整も。

ぱっと見はどこか変わった？くらいの調整ですが、作りながらなんとなくバランスが悪い……と感じていた違和感が消えて、コピーが見やすくなった気がしますね！調整を加えたものが下記の4回目提出デザインです。

完成！

5回の修正の末、無事に完成しました！

初稿から最終稿の変化はこんな感じ。

な、長かった……！！！OKをもらうまで初回の提出から11日かかりました……。笑

フィードバックをもらえるのですごく勉強になりますが、やっぱり自分で作るのは難しい……

さて、ここまではわたしが実際に制作した上でのフィードバックと制作したバナーをご紹介してきましたが、今回の課題のポイントはなんだったのでしょうか？デザイナーのデザキの解説を元に次の章でご紹介します。

ポイントは「バナー内の優先順位」「素材の使い方」「視認性」「配色」

今回のポイントは次の4点でした！

バナー内の優先順位って？デザインで重要な情報整理

バナーは設置する場所や広告によって決まったサイズ・フォーマットがあり、決められた枠内で必要な情報を簡潔に伝える必要があります。そのため、与えられた情報や条件の中から、どれが重要でどのような順で目立たせる必要があるのか情報を整理して優先順位をつけ、取捨選択する必要があります。

では、どうやったら優先順位を正しくつけられるのでしょうか？

ざっくりとした基準は「商品との関連性が深い順」になります。
商品画像や商品の使用イメージなどが提供された場合は、ターゲットに対して具体的に「自分が使っているイメージ」を持たせやすいので、一番に見せたい＝目立たせる必要があります。次に商品を紹介しているキャッチコピーが続き、あとは空いたスペースや背景に装飾を施します。この装飾については優先順位の高い要素（商品画像やキャッチコピーなど）を引き立てる目的で用いるため、こちらが目立ちすぎるのはNGとなります。
ロゴについては前述の通り、重要な要素ですが目立たせる必要は無いため、今回はひっそりと配置するに留めています。

ここで、わたしの初回提出内容を見てみると……

大事な商品画像を使わず、素材/やりたいことを優先してデザインをしてしまったことがわかります。

解説を見越した「あえての」ミスですね。

嘘は言わないでください。

素材の使い方と視認性——大事なものを適切に目立たせよう

次に、素材の使い方と視認性について。前回の白黒バナーでもお話しましたが、商品やコピーが見えにくくなるような使い方はNGです。視認性が下がってしまうと、商品やコピーがちゃんと見えなくなってしまうためバナーとしての訴求力も下がってしまいますよね。

具体例としては、画像で挙げたように商品が見えなくなるような背景色にしたり、要素を重ねてしまって大事な商品画像もコピーも見えにくくなってしまっていたり、メインの商品画像に合わない素材や素材主体のデザインになってしまう…などがやってしまいがちなミスです。先述した優先順位とも大きく関わってきますが、優先順位をしっかりつけた上で目立たせたいものをしっかり目立たせて、大事な要素が見やすいようにデザインを考える必要がありますね。

先ほども言いましたが、わたしの最初に作ったバナーも素材を優先してしまった例ですね！

配色ってどう決める？ポイントは色の比率と組み合わせ方

まず、配色のポイントについてご説明する前に、今回の課題で使用指示のあったカラーについてご説明します。

今回、利用するように指示があった緑色[#107562]は用意されたロゴにも使われていることから、架空商品の自転車のコーポレートカラーまたはブランドカラーのような色であると考えられます。さて、コーポレートカラーならたくさん使わなきゃ！とついつい思ってしまいますが、この色は彩度が86%で明度が45%と鮮やかで暗めの色でした。上の画像からもわかる通り、画面上でも暗くて目立つ色ですね。彩度を落としてグレー化すると、よくわかります。

このような重くて目立つ色をいっぱい使ってしまうと、その部分が悪目立ちしてしまったり、この色を使った要素がそれぞれ目立ってしまって、本来目立たせたい要素が目立たなくなる……ということが起きてしまいます。また、今回のターゲットは小さい子どもを持つ女性（20代後半〜40代前半くらい）で商品は自転車なので、明るく爽やかな雰囲気が合うターゲットと商品ですが、この色だとそのイメージにも合いません。

つまり、指定の緑色[#107562]はコーポレートカラーなどの重要な色で使用する必要があるが、使いすぎてもダメ！ということになります。

じゃあどうすればいいの……！？

ということで、本題の配色のポイントについてご紹介します。

色の比率を工夫しよう

Webデザインにおいて、基本的にはベースカラー・メインカラー・アクセントカラーの3つを基準にデザインします。Webサイトではこの3色の画面に対する比率を順に70%・25%・5%にするとまとまりのあるデザインになると言われています。今回の課題はバナー作成のため、範囲が狭くサイトほど載せる要素もないので、アクセントカラーはなしでベースカラー80%・メインカラー20%くらいの比率でOKです。

実際のデザインにもよりますが、2-3色使えれば十分とのことです！
完璧にこの比率にするのは難しいですが、大体の比率を知っておくと配色を考えやすくなりますね。

この基本の比率を元に、今回の指定色での組合せを考えてみましょう。

指定色を使った組合せ例

デザキが解説用に作成した配色パターン例がこちらです。

配色の解説に登場する色相環がこちら。色は光の波長（可視光線の波長は大体400nm〜800nm）の違いで連続的に変化して認識されるものですが、それらを順番に並べて円環状にしたものが色相環です。配色を考えるときに役立つので、知っておくと便利です。

練習？で2パターンのベース+メイン+アクセントの組合せを考えてみました。異論は認めます。これらはほんの一例で、色の組合せは無限大にあるので、ターゲットや商品イメージに合わせた配色を考えてみましょう！

大きさや太さ、隣接する色によって色や要素の見え方はちがう

デザインでは、要素がお互いに影響し合うことが多く、隣接する要素の色や大きさ、その色を使用している要素の形などによって見え方が変わってくる場合があります。なので、実際にデザインを見る人の目にどのように映るかも注意しておく必要があります。

まとめ

以上がフルカラーでバナーを制作する場合のポイントになります！

必要な情報をしっかり整理して、目立たせたいものを目立たせて、配色は基本の比率を念頭に……という基本を知っておけば、いざちょっと画像を作らなきゃ！というときに変なものを作らなくて済みそうですね。

講座はまだまだ続くので、またブログでご報告します！

続きが気になる！という方は、ASUE株式会社のメールマガジン「ほぼ週刊ASUE通信」にて更新のお知らせをしているので、ぜひチェックしてみてくださいね！

ブログの更新以外に、Webマーケティングに関する気になる記事や最新情報などもゆる〜くおとどけしています！