【デザイン言語化】乃木坂46のバナー分析で学ぶ、デザインの教訓

ますけ

2023年12月2日 18:04

私は現在、デザイナーを目指して勉強しています。
デザインの引き出しを増やすため、洗練されたデザインを分析し、学んだことを言語化してみました。自分なりの解釈ではありますが、ご覧いただけますと幸いです。

今回は、以下のクールな印象が特徴的な「乃木坂46のバナー」について、デザイン分析・言語化に取り組みました。

（画像を別タブで開き、以降の記事をお読みいただくことをおすすめします）

【分析】パーツ別のデザイン

分析を通じ、細部までこだわり抜かれたクオリティの高いデザインだと実感しました。詳細は以下をご覧ください。

・・・・・

1. 受けた印象

「挑戦」→タイトル、人物の表情から
「新鮮さ」→タイトルから
「洗練・上品さ」→タイトル、配色、フォントから

2. キャッチコピー

明朝体なのは、「洗練さ」「品の高さ」を表現するため。
紫がかった白色（#FCFBFC）なのは、メインカラーの紫色に馴染ませて、文字が浮かないため。
このサイズ（40px）なのは、キャッチコピーより先に、情報の優先順位が高い「人物写真」「タイトル」へ視線が向かうため。
上部に配置されているのは、キャッチコピーから連想される「歌舞伎町タワーの写真」がすぐ近くにあるため。連想させるものを近づけて、見た人が理解しやすいための工夫。
背景の「写真」と「帯」の分かれ目に配置しているのは、一体感を表現するため。帯と写真の背景が、分離された印象を持たせない工夫。
キャッチコピーが中央にレイアウトされているのは、重心のバランスを取るため。メインの情報は全て中央揃え。それに合わせて整列することで、視線移動や情報を理解しやすくする工夫。

🗒️ 参考MEMO
キャッチコピーには、「歌舞伎」の文字が入っているなど、会場名をモチーフにしている。また会場の建立コンセプト「好きを極める」が取り入れられている。

施設概要 | 東急歌舞伎町タワー

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→催しの内容に加え、場所の「歌舞伎」を意識してほしい。

3. 画像

1：背景は、「歌舞伎町タワーと広がる空」を使用。
2：メインは、「横並びの乃木坂メンバー」を使用。
「歌舞伎町タワーと広がる空」が背景なのは、
・建物の特徴的な模様で、「歌舞伎町タワーを意識させる」こと
・歌舞伎町タワーの「高さを印象付ける」狙い。
背景をメインカラーでレイヤー加工（ハードライト）しているのは、一体感を出すため。また、コントラストを調節し、歌舞伎町タワーをくっきりと表現している。
「横並びの乃木坂メンバー」の人物の大きさを変えているのは、奥行き感を出してダイナミックな印象を持たせ、かつ人気メンバーを目立たせるため。一方で、全体のバランスを取りつつ、左右のメンバーの大きさを調整している。
センターを大きなサイズで、かつ正面をまっすぐ見る演出は、見た人の視線を最初にここへ向かわせるため。
無表情でまっすぐ正面を見ているのは、乃木坂メンバーそれぞれが持つ「個性・ポテンシャル」を感じさせることが狙い。また、真剣な表情から、パフォーマンスへの期待感を抱かせるため。
足元を透過させているのは、背景と人物の写真を馴染ませ、一体感を出すため。

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→・場所「歌舞伎町タワー」の強調。
　・人物「乃木坂の人気メンバーも含めた複数名」で、高クオリティの何かを行うことを意識させる。

4. タイトル

明朝体なのは、「洗練さ」「品の高さ」を表現するため。
真っ白（#FFF）を使っているのは、コントラストを強調して目立たせるため。
このサイズなのは（約310px）、情報の優先度が一番高い人物写真よりも目立たずに、かつ次点で目立つようにするため。
縦長のフォントなのは、サイズが大きくなっても横に間延びせず、バランス良く見せるため。
人物に重ねて配置しているのは、人物の次に情報の優先順位が高いから。センターにパッと目が行き、その後タイトルに視線を移動させるため。
文字のフチがトゲトゲしているのは、新参者として、「型にはまりきっていない」フレッシュな乃木坂メンバーそれぞれの個性を連想させるため。
文字の一部分がイラスト風なのは、イベント内容のクリエイティビティを連想させるため。
イラスト部分の色がグラデーション（メインカラーの紫から白色）になっている。これは、複数人から生み出されるバリエーションの多さを連想させるため。
キャッチコピーが中央にレイアウトされているのは、重心のバランスを取るため。メインの情報は全て中央揃え。それに合わせて整列することで、視線移動や情報を理解しやすくする工夫。

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→より優先順位が高い「人物」を邪魔せず、タイトルをしっかり主張すること。文字のあしらいから、乃木坂メンバーの「個性」を印象付けること。

5. 本文

タイトル直下の英字
- ゴシック体なのは、他の文字情報との差異を強調するため。
- 真っ白（#FFF）を使っているのは、近接するタイトルとトーンを合わせるため。
- このサイズなのは、タイトルと横幅を合わせるため。
- 太字なのは、視認性を高めるため。
- タイトルの真下に配置されているのは、左側に記載の「グループ名」よりも情報の優先順位が高いため。ファンにとっては、メンバーを見ればグループ名は明らかなので、「どこで」の方が関心度が高い。
左下のグループ名
- 明朝体なのは、グループのイメージと統一させるため。
- 紫がかった白色（#FCFBFC）なのは、メインカラーの紫色に馴染ませ、文字が浮かないため。コントラストを強調してタイトルを目立たせるため。
- このサイズなのは、情報の優先順位の違いを強調するため。ファンにとっては、メンバーを見ればグループ名は明らかなので、他の情報の方が関心度が高い。
- 文字に下線を引いているのは、安定感を出すため。
  近接する英字や対面の歌舞伎町タワーのロゴは、文字が大きかったり太かったり、占有面積が大きく安定感がある。
  一方でグループ名は細字でかつサイズが小さいために軽い印象。その結果、全体的に右に重さが偏りバランスが悪くなる。
  なので、下線を引いて重さを足し、文字に安定感を出すための工夫。
- 左側に配置しているのは、右端の「歌舞伎町タワー」のロゴの配置に合わせて重心のバランスを取るため。

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→綺麗に全体のバランスをとりつつ、必要な補足情報を伝えること。

6. レイアウト

上下に帯を敷いているのは、配置している文字情報をきちんと目立たせるため。
もし帯がなければ、空や人物の足元に文字が書かれ、視認性が悪くなる。
下の帯の方が大きいのは、下部に情報量が多く、見た目上の重さを踏まえてバランスを取るため。
もし帯の大きさが上下均等だったら、上の帯が大きい印象が出る一方で、下は窮屈な印象が生まれ、バランスが悪くなる。

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→文字情報をきちんと読んでもらうこと。

7. 配色

紫色がメインカラーなのは、ブランドカラーと統一するため。見た人が瞬時に「乃木坂だ」と理解できるための工夫。
上部の左右に円状でぼかしを入れて濃淡を出しているのは、スポットライトのような光を表現し、キャッチコピーや人物を目立たせるため。
タイトル横を円状でぼかしを入れて濃淡を出しているのは、単調さを防ぎ、リズム感を出すため。また、ここもぼかすことで、上部左右のぼかしに違和感を出させないための工夫。
別々のパーツである帯や背景を、合わせてぼかしをかけるのは、それぞれを馴染ませて、デザイン全体の一体感を出すための工夫。
帯にグラデーションを入れているのは、ベタ塗りの単調さを防ぐため。「手が込んでいる」との印象から「洗練さ」を感じさせるための工夫。

💡 デザイナーが意図する、見た人に一番感じてほしい「訴求ポイント」は何か？
→あしらいとしての役割で作品のクオリティを高め、「洗練さ」をより引き立てること。

【まとめ】学びを一般化してみた

デザイン分析で学んだ内容を一般化してみました。整理したことによって、デザイン制作の基礎の再確認や、新たな気づきを得ることができ、非常に勉強になりました。