主役と脇役とは?伝えたいことが一目で分かるレイアウトの作り方を解説

主役と脇役の基本

まずは、主役と脇役とは何を指すのか、そしてなぜ主役を1つに決める必要があるのかを押さえましょう。

主役と脇役とは

レイアウトにおける主役とは、そのデザインで一番伝えたい要素のことで、脇役とは主役を補ったり、必要な情報を添えたりする要素のことです。

たとえばセールのバナーなら、「最大50%オフ」というキャッチコピーや商品の写真が主役になり、開催期間・注意書き・お店のロゴなどが脇役になります。

ここでいう「要素」とは、見出し・文章・写真・ボタン・ロゴのように、画面に置く1つひとつの部品のことです。

主役と脇役を分けるというのは、どれも同じ扱いで並べるのではなく、要素ごとに「どれくらい目立たせるか」の役割を割り振ることだと考えてください。

なぜ主役を1つに決めるのか

主役を1つに決めるのは、すべての要素を同じように目立たせると、結果として何も目立たなくなるからです。

人は画面を見たとき、まず一番目立つものに目を向け、そこから次の情報へ視線を移していきます。

目立つものが複数あると、どこから見ればいいのか迷ってしまい、伝えたいことが印象に残りません。

同じ情報を、主役を決めずに並べた場合と、主役を決めた場合で比べてみましょう。

NGの見本では、4行がすべて同じ強さで並んでいるため、目がどこにも止まらず、ただの文字の羅列に見えます。

OKの見本では、「最大50%オフ」が真っ先に目に入り、そのあとで期間や送料の情報を読む、という順番が自然にできています。

このように、主役を決めることは「見る順番を決める」ことでもあります(情報に優先順位をつけて見る順番を作る考え方は情報の階層を作るタイポグラフィのルールで解説しています)。

脇役は「なくてもいい要素」ではない

脇役は目立たせない要素ですが、読めなくてよい要素ではありません。

開催期間・価格の条件・注意書きのように、見る人が判断するために必要な情報は、たいてい脇役の中にあります。

主役を目立たせようとして脇役を小さく薄くしすぎると、必要な情報が見落とされたり、読めなかったりします。

NGの見本は、注意書きの文字が背景の白に溶け込み、目をこらさないと読めません。

OKの見本は、主役の見出しよりはっきり控えめでありながら、読もうと思えば無理なく読めます。

脇役の文字も、背景との明るさの差(コントラスト比)が足りているかを確かめておきましょう(目安はコントラスト比とは?で解説しています)。

たとえば、白い背景に薄い灰色の文字や、薄い灰色の背景に白い文字を置くと、明るさの差が小さく読みにくくなります。

迷ったら、明るい背景には濃い色の文字、暗い背景には白い文字を合わせると、差を確保しやすくなります。

主役は「一番目立つ」、脇役は「目立たないけれど読める」という関係を目指すのがポイントです。

主役と脇役の差のつけ方

ここからは、主役を決める手順と、主役と脇役の差を実際にどうつけるかを見ていきます。

差のつけ方には大きさ・位置・余白・色などがあり、いくつか組み合わせると主役がよりはっきりします(差をつけて目立たせる考え方はコントラストとは?で解説しています)。

まず主役を1つに決める

レイアウトを組み始める前に、何を主役にするかを決めておきましょう。

主役が決まっていないと、配置や大きさを決めるたびに「これも大事」と迷い、判断の基準がぶれてしまうためです。

次の手順で考えると、主役を決めやすくなります。

1. 載せたい情報をすべて書き出します。
2. 「このデザインを見た人に、1つだけ覚えて帰ってもらうなら何か」を考え、その情報を主役にします。
3. 残りの情報を「主役のすぐ次に読んでほしいもの」と「必要なときに読めればよいもの」に分けます。
4. 主役の候補が2つ以上残ったら、見る人にとってどちらが本当に大事かを考え直し、1つに絞ります。

主役を1つに絞れないときは、伝えたいことが多すぎるサインかもしれません。

その場合は、情報を減らしたり、別の画面やページに分けたりすることも検討しましょう。

大きさと太さで差をつける

主役と脇役の差をつける一番分かりやすい方法は、主役を大きく、太くすることです。

人は大きいもの、太いものほど先に目に入りやすいためです。

このとき、主役と脇役の大きさの差は、遠慮せずにはっきりつけるのがコツです。

差が中途半端だと、「わざと差をつけた」のではなく「なんとなくそろっていない」ように見えてしまいます。

目安として、本文が16pxなら、主役の文字は2倍の32pxほどにしてみましょう。

16pxに対して18〜20pxくらいの差では、見る人には差をつけたことが伝わりにくく、「少しやりすぎかな」と感じるくらいでちょうどよいことが多いです。

このような主役と脇役の文字の大きさの差(比率)を、デザインの用語で「ジャンプ率」と呼びます。

ジャンプ率が高い(差が大きい)ほどメリハリのある元気な印象に、低い(差が小さい)ほど落ち着いた印象になります。

ジャンプ率の考え方は、ジャンプ率で変わるメッセージの伝わり方で詳しく解説しています。

位置と余白で差をつける

主役は目に入りやすい位置に置き、周りに余白をとると、さらに目立たせることができます。

横書きのWebページでは、画面の上のほうや、見る人の視線が最初に向かいやすい場所に主役を置くのが基本です(置く場所によって重要度がどう変わるかは重要な情報はどこに置く?、視線の流れ方は視線誘導とは?で解説しています)。

スマホで見る場合も考え方は同じで、ページを開いてスクロールせずに見える範囲(ファーストビュー)の中に主役が入るようにしましょう。

また、主役の周りだけ広く空けると、ほかの要素から切り離されて、「ここが特別」だと伝わります(要素を目立たせる余白とは?で詳しく解説しています)。

反対に、脇役は画面の下のほうや隅にまとめて置くと、主役の邪魔をしにくくなります。

色で差をつける

色を使う場合は、目立つ色(アクセントカラー)を主役にだけ使い、脇役は落ち着いた色にします。

アクセントカラーとは、デザインの中で特に目立たせたい部分に少しだけ使う強調の色のことです。

たとえば、脇役は黒や灰色、紺のような落ち着いた色にし、主役にだけ赤やオレンジ、サイトのテーマカラーのような目立つ色を1色使うと、失敗しにくくなります。

目立つ色をあちこちに使うと、主役が複数あるように見えてしまうので注意しましょう(色で優先順位を伝える方法は情報の優先順位と色とは?で解説しています)。

同じ内容に、差のつけ方を1つずつ足していくと、主役がどう変わるかを見てみましょう。

見本Aは、3行が同じ大きさで並んでいるため、どれも同じくらい大事な情報に見えます。

見本Bは、「初回レッスン無料」が大きく太くなったことで、主役がひと目で分かるようになりました。

見本Cは、さらに主役の上下を空け、主役だけを濃い茶色、脇役を灰色がかった色にしたことで、主役と脇役の差がよりはっきりしています。

差のつけ方は1つだけでも効果がありますが、2つ3つと組み合わせると、主役がより確実に目に入るようになります。

ボタンが並ぶ画面でも主役と脇役を分ける

主役と脇役の考え方は、見出しや写真だけでなく、ボタンにも当てはまります。

「申し込む」と「資料を請求する」のようにボタンが複数並ぶ場合、どちらも同じ見た目にすると、見る人はどちらを押せばいいのか迷ってしまいます。

GoogleのAndroid開発者向けドキュメントでも、メインのアクション(操作)には背景を塗りつぶしたボタン、重要だが二番手のアクションには枠線だけのボタン、というように、ボタンの見た目で強調の度合いを分ける考え方が紹介されています(ボタン | Jetpack Compose | Android Developers)。

NGの見本では、2つのボタンが同じ強さで並んでいるため、ページとして一番してほしい行動が伝わりません。

OKの見本では、「申し込む」が主役だとすぐに分かり、まだ迷っている人には「資料を請求する」という脇役の選択肢も残せています。

脇役のボタンも押せることは分かるように、枠線などで「ボタンらしさ」は残しておきましょう(購入や申し込みなど、見る人に起こしてほしい行動を呼びかけるボタンを「CTA(Call To Action)ボタン」と呼び、作り方はCTAボタンとは?で解説しています)。

実践のポイント

主役と脇役のレイアウトで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「これも大事」「あれも大事」と、主役の候補を増やしすぎてしまうことがあります。
  全部を大きく目立たせると、結局どれも目立たなくなるので、主役は1つに絞りましょう。
• 主役を目立たせることに気を取られ、脇役を小さく薄くしすぎてしまうことがあります。
  注意書きや条件のように必要な情報は、控えめでも読める大きさと濃さを保ちましょう。
• 主役と脇役の大きさの差が中途半端で、差をつけたつもりが伝わらないことがあります。
  迷ったら、主役をもう一段大きくするか、脇役をもう一段小さくして、差がひと目で分かるか確かめましょう。
• 目立つ色を主役以外にもたくさん使ってしまうことがあります。
  アクセントカラーは主役だけに使い、ほかは落ち着いた色にそろえましょう。

よくある質問

• Q. 主役は必ず文字でないといけない?
  A. いいえ、写真やイラスト、ボタンが主役になることもあります。
  たとえば商品を売るバナーなら、商品の写真を主役にして、キャッチコピーを準主役にする組み立て方もあります。
  大事なのは種類ではなく、「一番伝えたいものが一番目立っているか」です。
• Q. 1ページの中に主役が1つしかないと寂しくならない?
  A. 主役を1つに絞るのは、「1つのまとまりの中で」と考えてください。
  長いWebページなら、セクション(内容のまとまり)ごとに主役を1つずつ決めて構いません。
  ただし、画面に一度に見えている範囲の中で主役同士がぶつからないようにしましょう。
• Q. 主役がどれか分かっているか確かめる方法はある?
  A. デザインを少し離れて見たり、目を細めてぼんやり見たりして、最初に目に入るものが主役になっているかを確かめる方法があります。
  ほかの人に数秒だけ見せて、何が印象に残ったかを聞いてみるのも効果的です。

まとめ

主役と脇役とは、レイアウトの中で一番伝えたい要素(主役)と、それを補う要素(脇役)を区別して配置する考え方で、主役を1つに絞ることで見る順番がはっきりします。

主役と脇役の差は、大きさ・太さ・位置・余白・色でつけ、組み合わせるほど主役が確実に目立ちますが、脇役も読める状態は保つことが大切です。

まずは最近作ったデザインを1つ開き、「一番伝えたいことは何か」を一言で書き出して、それが画面の中で一番目立っているかを確かめてみてください。