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

さて、好評いただいておりますバナー制作講座シリーズ。前回は少し趣向を変えて「写真の切り抜き方法」のテクニックをご紹介しました。今回は再び！バナー制作に戻ります。

フルカラーのバナー制作第二弾！

ま、そうは言ってもすでに白黒・フルカラーで一回ずつバナーを制作しているし、リサイズでレイアウトの調整も学んだし、

いけるやろ。

写真の切り抜きのときも同じこと言ってなかった？？？

最初はわたしが取り組んだ課題とそのフィードバック、修正の様子のご紹介、後半には第二弾で行ったフルカラーバナー制作からプラスされた今回のお題のポイントをご紹介します。ポイントだけ見たい！という方はこちらからどうぞ！

フルカラーのバナー制作第二弾：男性化粧品のバナーを作ってみよう

今回の仮想商品は「男性向けスキンケア化粧品」です。前回の自転車のバナーでは女性向けのデザインを制作したのに対して、今回は男性がターゲットの商品になります。キーカラーのブルーが使用必須、商品の使用イメージ（男性の写真）と商品のパッケージ画像の配布ありという条件で制作を行いました。

商品の使用イメージや商品のパッケージ画像は「利用自由」となっていますが、本講座では実際のデザイン業務での考え方なども学ぶ場でもあるため不使用が不適切では？という場合はフィードバックの対象になります。

普通だったら使うべき場面ですが、デザインや訴求が優れていたらOKという意味で「利用自由」という感じです。

使用イメージとして指定された写真から、20-30代の男性向け、スキンケア用品だから爽やかなイメージ……というところから制作をスタートしました！

初回提出

なんとなく爽やか〜な雰囲気と、商品の利用イメージと「ひげそり5秒で薬用ケア」というコピーをメインに目立たせるデザインを作成しました。大まかなレイアウト（商品の利用イメージ・メインコピー・商品画像）はそこまで迷わずに決まりましたが、サブコピーのような扱いにした「ヒリヒリ・肌荒れ・赤み」のあしらいに最後まで悩んでなんとか作成しました。

フィードバックでは、フォントの選び方・色の選び方・サブコピーの装飾について修正が返ってきました。

2回目-4回目

2-3回目はとにかくサブコピーのあしらいに悩んでいました。3回目の提出でのデザインでようやくその部分のデザインのOKがでましたが、今度は周囲のデザインと合わなくなってしまい……。似たあしらいを使っているサイトのデザインなどを参考にしながら、4回目の提出でガラっと背景・メインコピーを変更しました。

白文字の残りは指摘されたときとっても恥ずかしかったです。（小並感）

4回目でほぼ完成形に近付きました！ここから2回微調整（背景の柄とフォントの調整）をした最終稿がこちら……。

最終稿

大まかなレイアウトは変えませんでしたが、全体のテイストや色使いを変更したことで今風のデザインに仕上がったと思います！（多分……）

ということで、以上がわたしの作成したバナーデザインでした！

続いてお待ちかねの解説です！

ポイントは第二回から引き続き+男性向けデザインのテイスト

今回はフルカラーでのバナー制作第二弾ということで、以前取り組んだフルカラーでのバナー制作とテイストが異なるだけで根本的なポイントは変わっていません。ということで、今回のポイントはこちらの5点です！

以前の課題では女性向けのデザインを作成しましたが、今回は男性向けデザインなため、作成すべきデザインのテイストが変わってきます。

ということで、以前の課題から追加されたポイントを中心に解説をご紹介します。

「商品の使用イメージ」があるとき、バナー内での優先順位はどうなる？

優先順位を決める際は、商品との関連性が高いものから目立たせる……というのが基本です。なので、基本的には商品画像にフォーカスを当てますが、今回のように商品画像以外に商品の使用イメージが伝わるような画像（今回の場合だと、ターゲットにあたる男性がスキンケアをしているような写真）がある場合は少し変わってきます。

商品の使用イメージは、実際に使用したときの効果や期待を訴求できる=ターゲットの欲求を満たせるということが訴求できるため、積極的に使用したり目立たせるのが好ましい要素になります。例えば化粧品のCMやポスターなどの広告でもパッケージではなくキレイなモデルのお姉さんが大きく写っていることが多いです。

なので、今回のバナー制作でも、使用イメージとして提供された素材をメインにデザインをする必要があります。

視認性と配色：男性向けなら"ハッキリくっきり"が好まれやすい

一般的に、男性向けのデザインではハッキリくっきりしたものが好まれる傾向にあります。もちろん人によっての好みの差はありますが、パステルカラー！グラデーション！繊細な色使い！のようなデザインよりも、パキッとした色使いの方が伝わりやすいんです。

というのも、（ちょっとざっくりとした説明にはなりますが）網膜の色を認識する錐体細胞の関係で、遺伝子的にXX染色体を持つ生物学上の女性の方が色調の変化を認識しやすいそうです。余談ですが、XY染色体を持っている場合は素早い動きを捉えやすい目をしているんだとか。

錐体細胞、超懐かしいよね。大学受験まで生物で受けた人間なので……懐かしいな……。

乱暴&ざっくりな説明なので、詳しく知りたい方は各自でググってみてくださいね！！！！

男性向けデザインの要は「ハッキリとわかりやすいデザインであること」

もちろん商品によっても異なりますが、ターゲット層を明確にしたデザインはターゲット本人にとっても「自分向けの商品だ！」と認識しやすいため、狙ったターゲットに商品・サービスを訴求できる有効な手段です。

例えば女性をターゲットにした同じような商品であっても、ターゲットが10代と30代の場合では全くデザインが異なります。

さて、男性向けデザインでは、先述の配色だけでなくレイアウトやコピーライティングなど見た目も中身もハッキリと要点がわかりやすいデザインが好まれる傾向にあります。今回は一例として、男性向けのデザインでよく使われる配色・フォントなどをデザイン例と共にご紹介します。

配色：明度が低い寒色系の色やモノクロ+ワンポイントの配色

配色は、彩度や明度が低い寒色系の色やモノクロ+ワンポイントの配色を使われることが多いです。前述の通り、コントラスト強め&視認性が高いパキッとした配色にすると男性向けデザインとして捉えられやすいです。

見本の男性の写真は弊社の代表・安江になります。

弊社内でのフリー素材です。

フォント：太めのゴシック体

フォントも配色と同様に、くっきりとしたものが好まれやすい傾向にあります。字形が丸くなく、太めのゴシック体を使った、ジャンプ率の高いデザインなどが好まれるようです。伝えたいことがぱっと見でわかりやすい・要点を掴みやすいデザインを心がけるといいですね！

何を作ってもとりあえず筑紫丸ゴシックを使ってしまう女なので、どのフォント使えばいいの！？となりましたね今回……。

なんとなく太めの角ゴシック系……と思ってヒラギノ角ゴシックを使いましたが、中途半端な太さを使用してしまっていたので（最初のフィードバックを参照）最終的には凸版文久見出しゴシックを課題では使用しました。

写真は陰影がくっきりしたもの、テクスチャは質感を表現したものがおすすめ

写真は陰影がくっきりしているものが向いています。最初からしっかりライトを焚いて撮影された写真は少ないので、「明るさ・コントラスト」「レベル補正」「トーンカーブ」などを駆使すれば陰影がくっきりした写真のように見せることが可能です。

また、デザインに加えることで質感などをプラスできる「テクスチャ」もヴィンテージの木目調やコンクリート風のものなど質感を表現するものが好まれます。

グランジ素材は使い所がたくさんあってステキですね……

がっつりと男性向けデザインに振り切れないときは「部分的に取り入れる」ことで解決

メインターゲットが男性でも、商品イメージやプロモーションの方向性によっては、がっつり男性向けデザインを取り入れにくいケースも多々あります。そんな振り切れない時は、隠し味のように上手くミックスして部分的に取り入れると解決！

例えば、ミニマルデザインを取り入れたい場合はゴシック体の利用は崩さず全体をシンプルにすっきりさせたデザインにしたり、明朝体を取り入れたい場合はフォントサイズやウェイト・ジャンプ率を高くして「くっきり・ハッキリ」のテイストを守ったり……などであれば、男性向けのテイストを残しつつ、上手くミックスされたデザインになります。

今回は男性向けデザインとのミックスを紹介しましたが、女性向けでも他のテイストでもさまざまなデザインの作成時に使えるテクニックです。

ひとくちに「男性向けの商品・サービス」のデザインを作る場合であってもいろんなパターンがありますもんね〜……

ターゲット層と商品からどういうテイストのデザインにするか！を最初にしっかり決めるのが大事ですね……。

デザインの依頼は選り好みもできないですし、いざ引き受けたら「○○のテイストがわからない！」と言ってる場合ではないんですよね。デザイン界は弱肉強食……。

バナーに限らず、LPデザインやWebサイトのデザインを集めたポータルサイトなどから、どんなデザインを採用すると誰向けになるのか「参考になるデザイン」をどんどんインプットしていくのが大切です。

まとめ

さて、フルカラーでのバナー制作の2回目、これにて完了です。前回フルカラーのバナーを作ったときと、やること自体はそこまで変わっていませんが、テイストが変わると何もかも変わってくるので難しかったです……！

いろんなテイストのデザインをインプットして、実際に手を動かして挑戦してみることがデザインスキルを得るための近道なのであろう……と思いました。

さて、次回、いよいよラスト！感動の最終回！フィナーレ！！！です！！！次回もふたたび、フルカラーでバナーを制作予定です！

N村の成長（したかは知らん）や、商品・ターゲットに合った写真とコピーの選び方は……？がわかる予定です！

続きが気になる方は更新のお知らせをしているメールマガジンもぜひご登録くださいね！それでは次回をお楽しみに！