【デザイン言語化】乃木坂46のバナー分析で学ぶ、デザインの教訓
私は現在、デザイナーを目指して勉強しています。
デザインの引き出しを増やすため、洗練されたデザインを分析し、学んだことを言語化してみました。自分なりの解釈ではありますが、ご覧いただけますと幸いです。
今回は、以下のクールな印象が特徴的な「乃木坂46のバナー」について、デザイン分析・言語化に取り組みました。
(画像を別タブで開き、以降の記事をお読みいただくことをおすすめします)
【分析】パーツ別のデザイン
分析を通じ、細部までこだわり抜かれたクオリティの高いデザインだと実感しました。詳細は以下をご覧ください。
・・・・・
1. 受けた印象
「挑戦」→タイトル、人物の表情から
「新鮮さ」→タイトルから
「洗練・上品さ」→タイトル、配色、フォントから
2. キャッチコピー
明朝体なのは、「洗練さ」「品の高さ」を表現するため。
紫がかった白色(#FCFBFC)なのは、メインカラーの紫色に馴染ませて、文字が浮かないため。
このサイズ(40px)なのは、キャッチコピーより先に、情報の優先順位が高い「人物写真」「タイトル」へ視線が向かうため。
上部に配置されているのは、キャッチコピーから連想される「歌舞伎町タワーの写真」がすぐ近くにあるため。 連想させるものを近づけて、見た人が理解しやすいための工夫。
背景の「写真」と「帯」の分かれ目に配置しているのは、一体感を表現するため。帯と写真の背景が、分離された印象を持たせない工夫。
キャッチコピーが中央にレイアウトされているのは、重心のバランスを取るため。 メインの情報は全て中央揃え。それに合わせて整列することで、視線移動や情報を理解しやすくする工夫。
3. 画像
1:背景は、「歌舞伎町タワーと広がる空」を使用。
2:メインは、「横並びの乃木坂メンバー」を使用。「歌舞伎町タワーと広がる空」が背景なのは、
・ 建物の特徴的な模様で、「歌舞伎町タワーを意識させる」こと
・ 歌舞伎町タワーの「高さを印象付ける」狙い。背景をメインカラーでレイヤー加工(ハードライト)しているのは、一体感を出すため。また、コントラストを調節し、歌舞伎町タワーをくっきりと表現している。
「横並びの乃木坂メンバー」の人物の大きさを変えているのは、 奥行き感を出してダイナミックな印象を持たせ、かつ人気メンバーを目立たせるため。一方で、全体のバランスを取りつつ、左右のメンバーの大きさを調整している。
センターを大きなサイズで、かつ正面をまっすぐ見る演出は、見た人の視線を最初にここへ向かわせるため。
無表情でまっすぐ正面を見ているのは、乃木坂メンバーそれぞれが持つ「個性・ポテンシャル」を感じさせることが狙い。 また、真剣な表情から、パフォーマンスへの期待感を抱かせるため。
足元を透過させているのは、背景と人物の写真を馴染ませ、一体感を出すため。
4. タイトル
明朝体なのは、「洗練さ」「品の高さ」を表現するため。
真っ白(#FFF)を使っているのは、コントラストを強調して目立たせるため。
このサイズなのは(約310px)、情報の優先度が一番高い人物写真よりも目立たずに、かつ次点で目立つようにするため。
縦長のフォントなのは、サイズが大きくなっても横に間延びせず、バランス良く見せるため。
人物に重ねて配置しているのは、人物の次に情報の優先順位が高いから。 センターにパッと目が行き、その後タイトルに視線を移動させるため。
文字のフチがトゲトゲしているのは、新参者として、「型にはまりきっていない」フレッシュな乃木坂メンバーそれぞれの個性を連想させるため。
文字の一部分がイラスト風なのは、イベント内容のクリエイティビティを連想させるため。
イラスト部分の色がグラデーション(メインカラーの紫から白色)になっている。これは、複数人から生み出されるバリエーションの多さを連想させるため。
キャッチコピーが中央にレイアウトされているのは、重心のバランスを取るため。 メインの情報は全て中央揃え。それに合わせて整列することで、視線移動や情報を理解しやすくする工夫。
5. 本文
タイトル直下の英字
ゴシック体なのは、他の文字情報との差異を強調するため。
真っ白(#FFF)を使っているのは、近接するタイトルとトーンを合わせるため。
このサイズなのは、タイトルと横幅を合わせるため。
太字なのは、視認性を高めるため。
タイトルの真下に配置されているのは、左側に記載の「グループ名」よりも情報の優先順位が高いため。ファンにとっては、メンバーを見ればグループ名は明らかなので、「どこで」の方が関心度が高い。
左下のグループ名
明朝体なのは、グループのイメージと統一させるため。
紫がかった白色(#FCFBFC)なのは、メインカラーの紫色に馴染ませ、文字が浮かないため。コントラストを強調してタイトルを目立たせるため。
このサイズなのは、情報の優先順位の違いを強調するため。ファンにとっては、メンバーを見ればグループ名は明らかなので、他の情報の方が関心度が高い。
文字に下線を引いているのは、安定感を出すため。
近接する英字や対面の歌舞伎町タワーのロゴは、文字が大きかったり太かったり、占有面積が大きく安定感がある。
一方でグループ名は細字でかつサイズが小さいために軽い印象。その結果、全体的に右に重さが偏りバランスが悪くなる。
なので、下線を引いて重さを足し、文字に安定感を出すための工夫。左側に配置しているのは、右端の「歌舞伎町タワー」のロゴの配置に合わせて重心のバランスを取るため。
6. レイアウト
上下に帯を敷いているのは、配置している文字情報をきちんと目立たせるため。
もし帯がなければ、空や人物の足元に文字が書かれ、視認性が悪くなる。下の帯の方が大きいのは、下部に情報量が多く、見た目上の重さを踏まえてバランスを取るため。
もし帯の大きさが上下均等だったら、上の帯が大きい印象が出る一方で、下は窮屈な印象が生まれ、バランスが悪くなる。
7. 配色
紫色がメインカラーなのは、ブランドカラーと統一するため。見た人が瞬時に「乃木坂だ」と理解できるための工夫。
上部の左右に円状でぼかしを入れて濃淡を出しているのは、スポットライトのような光を表現し、キャッチコピーや人物を目立たせるため。
タイトル横を円状でぼかしを入れて濃淡を出しているのは、単調さを防ぎ、リズム感を出すため。また、ここもぼかすことで、上部左右のぼかしに違和感を出させないための工夫。
別々のパーツである帯や背景を、合わせてぼかしをかけるのは、それぞれを馴染ませて、デザイン全体の一体感を出すための工夫。
帯にグラデーションを入れているのは、ベタ塗りの単調さを防ぐため。 「手が込んでいる」との印象から「洗練さ」を感じさせるための工夫。
【まとめ】 学びを一般化してみた
デザイン分析で学んだ内容を一般化してみました。整理したことによって、デザイン制作の基礎の再確認や、新たな気づきを得ることができ、非常に勉強になりました。
・・・・・
「文字」について
「洗練さ」「品の高さ」を表現したい時は、明朝体を使う。
他の文字情報との種類の違いを強調したいときは、フォントを変える。
例えば、メイン情報は明朝体、補足情報はゴシック体など。大きな文字サイズで、かつ横に間延びしないように表現したい時は、縦長のフォントを使う。
文字の大きさは、情報の優先順位に応じてサイジングする。
近接する文字の一体感を出したい時は、文字の横幅を揃える。
文字の視認性を高めたい時は太字にする。
文字が浮かず、デザインに一体感を出したい時は、文字色にメインカラーを混ぜる。
文字が細い・小さいなど、他のパーツに比べて安定感が足りない時は、文字に下線を引く。
文字から連想させたいものがある時は、文字の配置を連想させたいものに近づける。
帯や背景画像など、各パーツの一体感を高めたい時は、文字をパーツの境目に配置する。
文字の形状からもデザインコンセプトを表現したい時は、文字全体を装飾したり、文字の一部をイラスト風に加工したり、あしらいを加える。
「画像」について
【背景】
背景画像に一体感を持たせたい時は、レイヤーを加工してメインカラーと合わせたり、コントラストを調整する。
【人物】
複数人の写真を使用する場合で、ダイナミックな印象を持たせたい時は、人物の大きさを変えて奥行き感を出す。
左右の人物の大きさに偏りが出ないよう、バランスをとって配置する。品質の高さを印象付けたい時は、真剣な表情の人物写真を選ぶ。
見た人に注目してほしい情報がある場合には、人物写真の目線を利用する。
背景と人物の一体感を出すためには、人物の足元など、パーツの一部を透過させて背景に馴染ませる。
「レイアウト」について
文字をしっかり目立たせたい時は、画像などを背景とせず、帯を敷く。
背景が画像の場合、文字の視認性が悪くなることがある。帯の大きさは、帯の上に載せる情報量に応じてサイジングする。上下に帯を敷くデザインの場合でも、必ずしも大きさを均等にするとは限らない。
見た人の視線が、意図する情報の優先順位どおりに流れるように、
視線誘導の法則や、整列の原則にしたがってレイアウトする。
例えば、情報の優先順位が2番目の場合、順位が 1番目のものに近接させたり重ねることも効果的。各パーツの「見た目上の重さ」を考慮して、全体の重心バランスを取りつつレイアウトする。
左右・上下のいずれかに偏らないようにする。
「配色」について
文字の色は、優先順位によって微調整する。
例えば、特に目立たせたいタイトルの場合、真っ白(#FFFFFF)を使い、他の文字色とのコントラストを強調するなど。メインカラーは、見た人が瞬時に理解できるイメージカラーや、与えたい印象に合ったものから選ぶ。
優先順位の高い情報を目立たせたい時は、周囲に光のようなぼかしを入れる。
リズム感を出したい時は、円状のぼかしを入れて色に濃淡を出す。
デザインの一体感を高めたい時は、近接するものを同じ色のトーンで統一する。
この記事が気に入ったらサポートをしてみませんか?