デザインの気付き02

こちらの記事「デザインの気付き」では、WEBデザイン学習中の私 いずみが、気になったデザインのいいと思ったポイントや、このデザインにした意味などを考察していきます。

基本的に自分の成長の為の記録として書いていますが、もし私と同じようにデザインについて学習中の方の力になれたら、こんなに嬉しいことはありません。

今回考察するデザインはこちらのバナーになります。

onward closetさんのキャンペーンバナー

早速 photoshopでトレースしてみました。
「早得」文字表現などは、難しそうなので省略。フォントも完全再現は難しかったので、大体似てるものを選びました。
初学者として、まずテキスト関係（フォントサイズ・カーニング・行送りなど）、余白、グループ分けなどを学習すべきかと思い、その辺りを考えていきたと思います。

余白、レイアウトについて

まず全体の要素が中央によっていて、各要素の両端が揃っています。
トレースした時は、見本となるバナーを下に敷き、不透明度を30~40%くらいにして、なぞるように各要素を載せていきました。
しかし、実際にゼロからこのバナーを作成するとなると、ガイドを引いてそこからはみ出ないように作っていくのが現実的なような気がしました。

文字サイズやカーニング調整などで、各要素の両端が揃うように配置されており、黒い2本のラインは丁度同じ長さになるように引かれています。
さらに2本のラインが、「12:00(金)まで」というテキストを強調させる役割も果たしてると思いました。

全体的にイタリック

全体としてイタリック体が使われており、三角の装飾も相まって疾走感がある見た目になっています。
メインテーマの「早得」を連想させるデザインにする為に、こうなったのかなと勝手に思っています。

黒が#000ではない!?

色はいつもスポイトで吸い取っているのですが、黒は#333が使われていました。ベースカラーのベージュとうまく馴染んで、目に疲れない配色になっていると思います。
実際、最初は#000で作ってみたのですが、テキストだけ浮いてしまいました。

優先順位について

優先順位は、大きく分けると4つに分けられると思います。

1. 何のためのデザインか　→　「早得キャンペーン

2. どのくらい効果があるのか（お得か）　→　「12% point UP!」

3. いつまでか　→ 　「1.20(金) 12:00まで」

4. 注意書きなどのネガティブな文→ 　「※一部対象外ブランド・商品あり」

以上4つに分けられると思います。
「予約アイテムが」の座布団付きテキストは、効果に対しての補足分。
目を惹かせると同時に、効果を強調させる役割でしょうか。

まとめ

• 最初にガイドでコンテナーを作り、そこに両端がくっつくようにレイアウトすると、綺麗に整列する。

• 背景色によっては、#000以外の黒を使った方が馴染む。

• 優先順位は、「何の為のバナーか」→「参加（応募）するとどうなるか（得られる利益など）」→「いつまでに」→「注意書き」の順。

• 上記の「得られる利益」の部分にアクセントになるテキストを入れる（今回は座布団を敷いたテキスト）。

初学者のうちは、しばらくテキストやレイアウトのみに焦点を当てて、考察していきます。
ですが、こちらのバナーは配色などまだまだ学ぶことも多そうです。
デザイナーとしてある程度成長できたら、また考察し直してみようと思います。
デザインは心境によって新しい発見があり、映画みたいで楽しいですね。
ではでは、最後までお付き合い頂きありがとうございました。