情報は全部入れたのに、ごちゃごちゃして見えます。どこから並べ直せばいいですか？
PORT編集部伝えたいことが多いと配置で迷いますよね。飾りを足す前に読む順番を決めてみましょう。講座の案内を例に、情報を並べ直す流れを見せます。
見やすいレイアウトは、主役を決め、情報をグループに分け、揃える線と余白を決める順で作ります。色や飾りを加える前に、文字だけでも読む順番が分かる配置にしましょう。
レイアウトとは？
レイアウトとは、文字・写真・図形などを配置する設計のことです。例えば、講座名→内容→開催情報→予約の順に、上から読めるよう並べます。
情報の優先順位とは？
情報の優先順位とは、どの情報を先に伝えるかという順番のことです。例えば、初めて見る人には、日時より前に何の講座かを知らせます。
情報の位置を探しながら読む。
参加無料
内容から次の行動まで、上から追える。
読む順番からレイアウトを決める
例えば初心者向けのデザイン講座を告知するなら、最初に見せる言葉は「デザイン講座」。開催日や「参加無料」も大事ですが、何の案内か分かる前に並べると、読み手は意味を探すことになります。まず大きな見出しを一つ決めましょう。
| 読む順番 | 表示する情報 | 講座案内の例 |
|---|---|---|
| 最初 | 何の案内か | デザイン講座 |
| 次 | 何ができるか | はじめての配色を学ぶ |
| その次 | 参加条件 | 10月5日・駅前会場・無料 |
| 最後 | 次の行動 | 予約する |
読む順番から配置を決める
「何の講座か」→「何を学べるか」→「いつ・どこで」→「次の行動」の順に読めます。架空の案内です。
講座名→内容→日時→申込の順に置く
「デザイン講座」→「はじめての配色を学ぶ」→「10月5日・駅前会場・参加無料」→「予約する」。読み手が知りたい順に置けば、画面を上から追うだけで判断できます。見出しが長いときは、最初に分かる短い言葉へ言い換えます。
日時をまとめ、左端を揃える
講座名と内容／日時と料金／申込に分類。
相手が知りたい順に置く。
左端をそろえ、別のグループとの間を広くする。
日時を右上、会場を左下に置くと、同じイベントの情報だと分かりにくくなります。「10月5日｜駅前会場｜参加無料」を見出しの下にまとめ、講座名や説明と同じ左端から始めましょう。文字を読むたびに視線を左右へ動かさずに済みます。
開催情報を一行にまとめ、左端を揃えると、次に読む場所を探さずに済みます。
見出しを揃え、主役を大きく
複数の講座を並べる場合は、カードの見出し・日時・申込ボタンを同じ位置と形にします。一方、一枚の告知の中では「デザイン講座」を大きくし、開催情報は控えめに。全部を太字にすると、最初に読む場所が消えてしまいます。
スマホでは上から一列で読み直す
説明
日時
予約
写真とその説明を一組にする。
説明
日時
予約
一列になっても説明とボタンの対応を保つ。
PCで写真と説明を横に並べても、スマホでは縦一列になります。「写真→講座名→内容→日時→予約する」と自然に続くか、実際の画面で確認しましょう。長い見出しの一文字だけが次の行に残るなら、文言を短くします。
公開前に5秒で確認する
画面を5秒だけ見て、「何の案内？」「いつ・どこで？」「次に何をする？」がすぐ分かるか確かめます。迷ったら色や飾りを足す前に、言葉を減らす・情報を近づける・左端を揃える順に戻りましょう。
実例｜講座案内の配置を組み立てる
講座名、説明、日時、料金、申込を思いつくままに配置。写真も大きく、読む順番が見えない。
講座名→学べること→日時・料金→申込の順に配置。情報をまとめ、左端を揃え、申込を最後に分かりやすく置く。
直す手順
- 一番伝えたいことを短い見出しにする。
- 必要な情報を読む順番に並べる。
- スマホで一列にしたときも、説明とボタンが対応するか確かめる。
よくある疑問
まとめ
一枚の告知なら、講座名→内容→日時・会場→申込の順に置く。関係する情報を近づけ、左端を揃え、講座名を一番目立たせます。スマホでもこの順番で読めれば、見やすいレイアウトの土台は完成です。
