デザインの気付き01

どうも、はじめまして。
数あるデザインに関する記事の中から、当記事をご覧いただきまして、ありがとうございます。
Webデザイナーを目指して現在学習中のいずみと申します。

現在30代前半になり、web業界を志望するには年齢高めではあると思いつつ、持ち前の諦めの悪さで日々悪戦苦闘しております。

さて こちらのnoteでは、日々デザインの学習をするなかで、気がついたポイントを自分用にまとめたものになります。
今日がその第一回目になりますが、自分と同じデザイン学習中の方にとっても何かしら力になれればと、生意気なことを考えています。

「なぜこのデザインにしたのか？」アートではなく、情報設計としてデザインの気がついたポイントを言語化することを目的にしています。

第一回目はこちらのバナーです↓

JINS キャンペーンバナー

photoshopで一通りトレースした後、色々考えて見ました。

• メガネとリサイクルの意味が合わさったようなアイコン

• 下の「0」と「O」の中が白く塗られた、眼鏡のようなデザイン

この辺りが目を惹きますが、今回はテキストに限ったところで見ていきます。

テキストのサイズ、優先順位

なんとなくですが、
「何のためのバナーか」→「キャッチコピー」→「お値段や、キャンペーン期間などの数字」→「注意書きや補足分など」
という順番で、重要度が高く配置されているような気がしました。

今回ですと「10%OFF」のテキストが一番大きいですが、真ん中の線より下に配置されています。
最初に目に入るのは、眼鏡のアイコンを除けば「リサイクル割キャンペーン」になると思います。

これが「何のためのバナーか」でキャッチコピーやキャンペーン期間を読んだ後に、「10%OFF」のテキストが目に入るようになっていると思いました。

下の注意書きは、逆にネガティブな文章なので極端に小さく、注意して読まないと理解できないようになっていると思いました。

余白

中央の区切り線が、テキストを上下にチーム分けすると同時に、
テキストを揃えるためのガイドの役割もしています。
中のテキストが線の長さとピッチリ合うようなレイアウトが組まれてます。

一方で「JINS以外のメガネでもOK」というテキストは右側にわずかにはみ出しています。
このテキスト自体が、丸いシェイプの上に乗った、アクセントの効いた存在なので、例外的にはみ出させてコントラストをだしたのかもしれないです。

本日は以上になります。
やはりトレースだけだと、何となくなぞるだけになりがちですが、こうして言語化することで「デザインの意味」を考える機会になると思いました。

ではでは、お付き合いいただき有り難うございました。