ごあいさつ

こんにちは！®です。

1年ぶりのnote更新です。デザインの勉強から少し離れていたので、随分ご無沙汰してしまいました。

色々考えて改めて再勉強しようと思い、同時にもう一度noteを定期的に更新していこうと決意しました。
このnoteは今まで同様、主にデザイン関連の勉強のアウトプット用に更新していく予定です。

今回は、バナーサイトで気に入ったバナーをピックアップし、なぜ気に入ったのかなど自分が見て感じたことを言語化してみました。
言語化癖をするための備忘録なので、流し目で見ていただけましたら幸いです。

気に入ったバナー：マクドナルドのバナーデザイン

なぜ気に入った？

1. タイトルや割引部分が真っ先に目に入って印象的だった

2. カラーの使い方が素敵、色味がかわいい

3. シンプルだけどわかりやすい

4. 文字の並びがそろっていて見やすい

1.タイトルや割引部分が真っ先に目に入って印象的だった

• 商品名の「ポテナゲ」、割引部分の「30％」などが他とフォントが違う

  • 遊び心があるようなフォント

  • 他のフォントも全体的に丸みを感じる親しみやすいフォント

    • マック＝安くておいしくて気軽に入れる身近なハンバーガーショップ、老若男女問わず愛されているイメージ

    • 太さのあるフォントも見やすくかわいらしさも感じる

• ユーザーに最も伝えたい要素のため、他のフォントよりサイズが大きめ

  • 大きい文字ほど最初に目が行きやすい

  • 文字の中でも伝えたい要素で優先順位を決めている

2.カラーの使い方が素敵、色味がかわいい

• 文字に使用しているカラーが3カラーのみ

  • #fff000

    • ポテトカラー、商品名

  • #ff0000

    • ポテトのパッケージカラー、割引数字・値段

  • #301818

    • 一般的な文字色、通常価格

• その他の使用カラー

  • 上半分の商品タイトル部分の背景カラー（#483018）

    • ナゲットのバーベキューソースカラー？

  • 割引部分の囲み丸部分の背景（#ffffff）

    • 赤と反対色のカラー

  • マクドナルドのロゴマーク（#f0a818）

    • マスタードソースカラーでもある

使用カラーはほぼ全て商品画像の要素に関連したカラーを使用している

3.シンプルだけどわかりやすい

• 余計な説明文は一切なし

  • 記載ある情報は「商品名」「謳い文句」「割引時間」「割引率」「サイズ」「値段」

  • ユーザーに伝えたい要素だけを盛り込んでいる

    • 情報が増えると読む気が失せる

    • 一番伝えたい要素だけの方が伝わりやすい

4.文字の並びがそろっていて見やすい

• 上半分部分と割引部分は中央揃え

• マクドナルドのロゴとサービス名（夜マック）は上の両端に配置

  • あえて揃えることでデザインの統一性が生まれている

• 上半分は真ん中、下半分は割引率と画像が左右に並んでいる

  • ピラミッド型

    • 情報を読む目線が上→下へ流れるように誘導している

  • 余白部分があるところとないところのメリハリがある

    • シンプルできれいに感じる

まとめ

• フォントはブランド、お店のイメージに関連している

• 伝えたい要素ごとに優先順位をつけてサイズ感の違いを出したことで、ユーザーに入ってくる情報が整理され、わかりやすく見やすい

• 使用カラーは商品画像に関連している

• 伝えたい情報だけをバナーに入れている

• 文字を揃えることで見やすさが増す