新人デザイナーのデザインを添削！化粧品ブランドのバナー編

デザイナーの仕事は、かっこいいいビジュアルや、かわいいグラフィックを作るなど、いわゆる「いい感じにする」ことだと思われがちです。しかし、その「いい感じのデザイン」は、感覚だけでできるものではないと私は思います。特にクライアントワークなら、なぜこのデザインにしたのか理由をきちんと「言語化」して説明する必要があります。

そこで今回は、仮想の案件を設定し、新人デザイナーが作った（と仮定した）制作物に対して、赤字を入れデザインを修正しました。

新人デザイナーが担当することが多いバナー制作について解説しています。どの部分に気をつけてデザインをしたらいいか、参考にしていただけたら幸いです。

■制作要件
制作物：バナー制作
クライアント：外資系化粧品会社
内容：新商品のリップスティックをリリースするため、ランディングページを作っている。それに伴い、ランディングページへ誘導する告知用バナーを制作してほしい。
規格：300x250px
デザインの方向性：サイトは黒ベースだが、バナーはそれとは違ったシンプルで、かわいらしい雰囲気にしてほしい。
ターゲット：20代～30代前半の女性で、かわいいものが好み

この制作要件をもとに、新人デザイナーAさんが作ったバナーがこちらです。

化粧品のデザインによく使われる、スマートで端正な雰囲気のフォント「フォーク体」を使ったり、背景にレースを用いたりして、かわいらしいデザインにしてくれました。また、コピーの「心がときめく」の「心」を強調し、アイキャッチとなるように工夫してくれたようです。

このデザインに対して赤字を入れたのがこちらです。

①縦軸がそろっていない
1行目の「心がときめく」と2行目の「マットリップ」、3行目の「大人気リップシリーズから今年も新色！」の文字の両端がそろっていません。

必ずしもそろえる必要はないのですが、デザインにおいては、「そろえるべきところをそろえた上で、崩す」など、メリハリをつけることが大切。今回はテキストの両端をそろえて整えるほうが、文字が見やすくなるので調整しましょう。

② 文字間調整していない
「ときめく」と「マットリップ」の文字間が調整されていません。

日本語フォントは、「漢字」「平仮名」「カタカナ」「記号」それぞれ文字間が異なって見えるため、バランスをとるために文字間を調整する必要があります。文字間が広い部分と狭い部分ができてしまっているので、すべての文字間が均一に見えるようにしましょう。

③ 文字が小さくて読みにくい
このフォントは明朝体のように、横画が細く、縦画が太いフォントです。

この特徴を持ったフォントは、文字を小さくすると読みにくくなります。文字を小さくするときは、このようなフォントは避けたほうがベターです。今回はサイズを大きくして読みやすくしましょう。

④ 傾きのバランスが悪い
「心がときめく」の「心が」を傾けているのですが、今回はポイントとなる文言「心」のみを傾けて、全体のバランスを調整しましょう。また、商品のリップスティックが左に傾いているので、文字も左に傾けたほうがバランスがとれます。

⑤ 文字の大きさと矢印の大きさのバランスが悪い
今のままだと、文字が細くて読みにくいです。ボタンは、クリックを誘導する役割があるため、より視認性が重視されます。そのため、文字を太くして、視認性を上げましょう。

⑥ 色の配色が整理されていない
「この要素にはこの色」など、要素別に配色のルールがあるほうがデザインはまとまります。しかし、このバナーでは、キャッチコピーにピンクと赤を使いつつ、別の要素である「詳しくはこちら」ボタンにもピンクを使っています。配色は要素ごとに分けましょう。

⑦Newマーク見えない
背景が明るいのに、白を用いているため、マークが見えていません。見やすくするために、濃い色を使いましょう。

⑧ 写真の大きさが中途半端
バナーの天地のサイズに対して、商品写真がやや小さい印象を受けます。
極力大きく見せたほうが商品を訴求できるので、バランスを見ながらサイズをもう少し大きくしましょう。

⑨ 背景写真がごちゃごちゃしている
今の背景画像は陰影がついたものを使用しています。明るさが箇所によって異なるため、文字が読みづらい部分があります。同じようなレース画像を使うなら、明るさが均一な素材を選びましょう。

以上の赤字を踏まえて、調整したバナーがこちらです。

①〜⑨の項目を調整しつつ、全体のバランスを見ながらデザインを整えました。

まず、キャッチコピーと「詳しくはこちら」ボタンの両端の縦軸をそろえました。
次に「大人気リップシリーズから今年も新色！」の文字サイズを大きくするために2行にし、「心」と「今年も新色」の傾きを並行にして、バランスをとりました。
最後に、商品の濃いリップカラーのかっちりとした印象に合わせて、Newマークはひし型にしました。（例えば、淡い色の場合は、円形にして柔らかい印象にしてもO Kです）

「装飾する＝デザイン」だと思われがちですが、デザインは「情報を整理すること」が大切。情報を整理するためには、特に「縦軸」「行間」「文字間」「色」「余白」などをそろえることが重要です。

これをするだけで、デザインの5割ぐらいは完成です。
残りの5割に流行りのテイストや、クライアントの要望などを組み合わせていくことで仕上がります。

デザインの参考として、今回の内容をお役立ていただけたら幸いです。