デザインの気付き03
WEBデザインナーに憧れるポンコツ人間、いずみです。
デザインのトレースや観察をする中で、気になった点や「なぜこのデザインにしたのか」の考察などを日々こちらのnoteに書いています。
基本的に自分の学習用ですが、私と同じくデザイナーに憧れ日々奮闘されている方にも閲覧頂けたら嬉しいです。
今回はコチラのバナーにしました。
文字だけのバナーになります。
フォントや文字詰め行送りなどのテキスト関係、余白や整列などレイアウト関係を中心に考察していきます。
トレースしたものがコチラ
やっぱり手本に比べて、ずんぐりむっくりしていますね・・・
トレース中は結構イケてるつもりでも、こうして見返してみると発見が多々あります。悪い発見が(^^;
フォントについて
いつものことながら、フォント選びは苦労します。
欧文はAdobe Garamondを選びました。「P」の文字にクセがあったり、全体的にボヤッとした感じがあったりしましたが、大体似てるんじゃないかと思います。
一番サイズの大きい「+10%」の文字は、数字の部分に10%の長体をかけました。トレースしていく中で、文字の大きな数字に長体をかけてるケースが意外と多い印象でした。
アピールしたい箇所に長体をかけると、目を引くのかもしれません。
逆に平体をかけてるケースはまだ出くわしたことがないです。扱いづらさがあるのでしょうか。
キャンペーンについての説明文だけゴシック体が使われています。
「読ませる文字」としてはやはりゴシック体が読みやすいですよね。
バナーの右下に置いてあるATCボタンなども基本的にゴシック体ですね。
文字サイズ（テキストの優先順位）
今回は装飾も少なくシンプルなバナーです。
今までトレースしたバナーは、商品やサービスについてのテキストが一番大きくなることが多いような気がしていたのですが、今回は「参加するとどうなるのか（+10%）」の部分が一番フォーカスされている気がしますね。
今回のようなキャンペーンバナーや、アパレル系のセールスバナーにこのパターンが多いような気がします。
枠線について
記事を書いていて今気がついたのですが、私がトレースした方は枠線が薄いですね・・・
このバナーは白がベースになっているので、バナーを載せたサイトの背景色に埋もれないような処理かもしれません。
中央揃えのレイアウト
昨日トレースしたバナーもそうでしたが、テキストメインのデザインは、中央揃えが多いような気がします。そして中央揃えのレイアウトの時は、テキストも中央揃えで統一されてます。
左揃えの要素や、右揃えの要素と組み合わせたら変に感じるのかもしれないですね。
今回もトレースする時に、手本の上からなぞるように配置していきましたが、積極的にガイドを使った方がいいかもしれないですね」。
まとめ
見出しや、大きな文字の数字は長体をほんの少しだけかけてもいい。
テキストは商品やサービスより、数字の方が大きくなる場合もある。
白ベースのバナーは枠線をつけると埋もれない。
しばらくは、こういったテキストがメインのバナーをトレースしていこうと思います。
最後までお付き合い頂き、ありがとうございました。