目的から逆算するレイアウトの決め方|「売る」「知らせる」で変わる配置

目的から逆算するレイアウトの基本

まずは、デザインの目的とは何か、そして目的によってなぜ配置が変わるのかを押さえましょう。

デザインの目的とは

デザインの目的とは、そのデザインを見た人に、最終的にどう感じてほしいか、何をしてほしいかということです。

言い換えると、「誰に」「何を」「どんな順番で」伝えて、「どうしてほしいか」をはっきりさせたものが、デザインの目的です。

たとえば同じカフェのWebページでも、「新メニューを買ってほしい」のか、「臨時休業を確実に知らせたい」のかで、目的はまったく違います。

目的から逆算するレイアウトとは、「おしゃれに見えるか」から配置を考えるのではなく、この目的を果たすには、何を一番目立たせ、どの順番で見せればよいかから配置を決める考え方です。

同じ考え方を色選びに当てはめた方法は、デザインの目的と配色とは?で解説しています。

目的が変わると、適した配置も変わる

載せる要素がまったく同じでも、目的が変われば、適したレイアウトは変わります。

レイアウトで決まるのは「何が最初に目に入るか」と「どの順番で読まれるか」なので、目的に合わせて主役を入れ替える必要があるからです。

同じ料理教室の情報を、「開催を知らせる」目的と「申し込んでもらう」目的で組み分けてみましょう。

見本Aは、日付を一番大きくし、時間と場所をそのすぐ下に置いているので、「いつ・どこで」がひと目で伝わります。

カレンダーに予定を書き込んでもらうことが目的なら、この配置が向いています。

見本Bは、日時や場所を小さくまとめ、代わりに「残り3席」と幅いっぱいの申し込みボタンを目立たせているので、「今申し込まないと」という行動につながりやすい配置です。

どちらも同じ情報を載せていますが、目的に合わせて主役を入れ替えたことで、見る人が最初に受け取るメッセージが変わっています。

目的ごとの配置の傾向

目的ごとに、主役になりやすい要素と配置の傾向をまとめると、次のようになります。

これは決まったルールではなく、考え始めるときの手がかりとして使ってください。

目的	主役になりやすい要素	配置の傾向	例
売る	商品の写真、価格、購入ボタン	商品の写真を大きく見せ、価格とボタンをその近くにまとめる	ネットショップの商品ページ、セールのバナー
知らせる	日時・場所・変更点などの事実	伝えたい事実を一番上に大きく置き、飾りは控えめにする	お知らせ、休業案内、イベント告知
読ませる	見出しと本文	本文を読みやすい幅で縦に並べ、見出しで内容の区切りを示す	ブログ記事、マニュアル、ニュース
申し込ませる	メリット、申し込みボタン、不安を減らす情報	メリットを伝えたあとにボタンを置き、ボタンを周りから目立たせる	LP(1つの行動をしてもらうための縦長のページ)、会員登録ページ

表の「LP」はランディングページの略で、広告や検索結果をクリックした人が最初に着地(ランディング)するページのことです。

ほかのページへのリンクを少なくし、上から読み進めると最後に「購入する」「申し込む」といった1つのボタンにたどり着くように作られた、縦に長い1枚のページが一般的です。

「売る」と「申し込ませる」は、どちらも見る人に行動を促す目的なので、ボタンの見せ方が重要になります。

このように見る人に行動を促すボタンやリンクは、「CTA(Call To Action:行動喚起)」と呼ばれます。

「無料で試す」「1分で登録する」のように押すと何が起きるかが分かる言葉を入れ、周りの色から浮き立つ色にすると、押してもらいやすくなります(ボタンの作り方はCTAボタンとは?で解説しています)。

一方、「知らせる」と「読ませる」は、情報を正しく受け取ってもらうことが目的なので、読みやすさや情報の見つけやすさが重要になります。

ここでいう読みやすさは「可読性」とも呼ばれ、文章を疲れずにすらすら読み続けられるかどうかを指します(可読性の基本は可読性とは?で解説しています)。

目的からレイアウトを決める手順

ここからは、デザインの目的から逆算してレイアウトを決める手順を見ていきます。

全体の流れは、次の4ステップです。

1. 目的を1文で書く
2. 情報を書き出し、主役を1つ決める
3. 見てほしい順番に並べる
4. 配置の理由を説明できるか確かめる

手順1:目的を1文で書く

最初に、デザインの目的を「〇〇な人に、〇〇してもらう」という1文で書き出します。

頭の中で「なんとなく分かっている」状態のままだと、配置に迷ったときに判断の基準がなく、見た目の好みで決めてしまいやすいからです。

たとえば、次のように書きます。

• パンづくりに興味がある初心者に、教室に申し込んでもらう
• いつも来てくれるお客さんに、年末年始の休業日を知ってもらう
• はじめてサイトを訪れた人に、サービスの特徴を理解してもらう

「〇〇してもらう」の部分を、「買う」「申し込む」「覚えておく」のように具体的な行動にするのがコツです。

仕事で依頼されたデザインの場合は、依頼した人に「このデザインを見た人に、何をしてほしいですか」と確認しておきましょう。

手順2:情報を書き出し、主役を1つ決める

次に、載せる情報をすべて書き出し、目的を果たすために一番大事な情報を「主役」として1つだけ選びます。

すべての情報を目立たせようとすると、結局どれも目立たなくなり、見る人は何から見ればよいか分からなくなるからです。

主役の決め方と、大きさ・位置・余白・色で脇役との差をつける方法は主役と脇役とは?で詳しく解説しています。

同じセールのお知らせで、すべてを強調した場合と、主役を1つに絞った場合を比べてみましょう。

NGの見本は、5つの情報がすべて同じ大きさの太字で、色もばらばらに使われているため、どれが一番大事なのかが伝わりません。

OKの見本は、「売る」という目的に一番効く「全品20%オフ」を主役にして大きくし、期限や送料は小さな補足にまとめたことで、ひと目で内容が伝わります。

主役以外の情報は「脇役」として、主役を引き立てる大きさや色に抑えましょう(色で情報の優先順位をつける方法は情報の優先順位と色とは?で解説しています)。

差は、迷うくらいなら大きめにつけるのがコツです。

たとえば本文が16pxなら、主役の見出しは2倍の32pxほどにすると差がはっきりし、28pxと32pxのように近い大きさを並べると、どちらが主役なのか伝わりにくくなります(文字の大きさの差のつけ方はジャンプ率の記事で解説しています)。

色も同じで、主役は濃い色や目立つ色にし、補足の文字は少し薄いグレーに落とすと、自然と主役に目が向きます(ただし薄くしすぎると読めなくなるので、背景との明るさの差はコントラスト比とは?の基準を目安に確保しましょう)。

手順3:見てほしい順番に並べる

主役が決まったら、残りの情報にも順番をつけ、見る人の視線がその順番どおりに動くように並べます。

人は目立つところから見始め、そこからある程度決まった流れで目を動かすため、並べる順番がそのまま読まれる順番になりやすいからです。

たとえば商品を売るバナーなら、「キャッチコピー(興味を引く)→商品(何の話か)→特徴(なぜよいか)→ボタン(行動)」の順に見てもらえると、内容を理解したうえで行動に移ってもらいやすくなります。

スマートフォンの画面やLPのように縦に長いページでは、この順番どおりに上から積んでいけば、スクロールに合わせて順に見てもらえます。

バナーのように全体を一度に見渡せるデザインでは、視線が左上から右下へZ字に動きやすいので、キャッチコピーを左上、ボタンを右下に置くと、この順番で見てもらいやすくなります(視線の流れはWebレイアウトとは?で紹介しています)。

NGの見本は、上から「ボタン→特徴→写真→キャッチコピー」の順に並んでいるため、何の商品なのか、なぜ買うとよいのかが分かる前に、いきなり購入を求められてしまいます。

OKの見本は、キャッチコピーで興味を引き、写真と特徴で納得してもらってから、最後にボタンで行動を促す流れになっています。

視線の流れに合わせた配置の考え方は視線誘導とは?で、バナーの目的に合わせた色の決め方はバナーの目的に合わせた配色とは?で解説しています。

手順4:配置の理由を説明できるか確かめる

レイアウトができたら、要素の1つひとつについて「なぜこの位置・この大きさにしたのか」を、目的に照らして説明できるかを確かめます。

説明できない配置は、目的ではなく好みや思いつきで決めた可能性が高く、目的の達成に役立っていないことがあるからです。

たとえば「このボタンを一番下に置いたのは、特徴を読んで納得したあとに押してもらうため」のように、手順1で書いた目的とつなげて言えれば合格です。

また、作ったデザインを数秒だけ見て目をそらし、最初に目に入ったものが手順2で決めた主役と同じかどうかも確かめてみましょう。

実践のポイント

目的から逆算してレイアウトを考えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 流行りのレイアウトや、気に入ったサイトの配置をそのまま真似してしまうことがあります。
  参考にしたサイトと自分のデザインでは目的が違うことも多いので、取り入れる前に「この配置は自分の目的に合っているか」を確かめましょう。
• 「情報も全部伝えたいし、申し込みもしてほしい」と目的を欲張り、どっちつかずのレイアウトになることがあります。
  1つのデザインで一番大事な目的は1つに絞り、ほかの情報は別のページやリンク先に分けることも考えましょう。
• 作り手が言いたい順番(会社の紹介→こだわり→商品)で情報を並べてしまうことがあります。
  見る人が知りたい順番になっているかを、見る人の立場で見直しましょう。
• 目的を決めたのに、作っているうちに見た目の好みが優先され、主役が小さくなってしまうことがあります。
  仕上げの前に、手順1で書いた目的の1文をもう一度読み返しましょう。

よくある質問

• Q. 目的が2つ以上あるときはどうすればいい?
  A. 一番大事な目的を1つ決め、それ以外は「主役を支える脇役」として扱います。
  たとえば「申し込んでほしい」が一番なら、サービスの説明は申し込みを後押しする材料として、ボタンの手前に置く、という考え方です。
• Q. 見た目のきれいさは気にしなくていい?
  A. 気にしなくてよいわけではありません。
  整っていないデザインは信頼されにくく、目的の達成にも影響します。
  ただし順番としては、目的から配置を決めたあとに、見た目を整える、と考えましょう。
• Q. 練習で作るデザインには目的がないけれど?
  A. 練習でも、「近所のパン屋の新商品を、通勤中の人に知ってもらう」のように、自分で目的を1つ設定してから作ってみましょう。
  同じ素材で目的だけを変えて2パターン作ると、目的によって配置が変わることを実感できます。

まとめ

目的から逆算するレイアウトとは、「誰に、何を、どんな順番で伝えて、どうしてほしいか」というデザインの目的から、何を目立たせ、どう並べるかを決める考え方です。

目的を1文で書き、主役を1つ決め、見てほしい順番に並べ、配置の理由を説明できるかを確かめる、という4つの手順で進めると、感覚に頼らないレイアウトになります。

まずは今作っているデザインか、身近なバナーを1つ選び、「〇〇な人に、〇〇してもらう」という目的の1文を書いて、一番目立っている要素がその目的に合っているかを確かめてみてください。