デザイン講座の1回目は「レイアウト」についてです。レイアウトとは文字やテキストの配置のこと。デザインをする際、ルールに沿って正しくレイアウトすれば、見る人にわかりやすく伝えたい内容を的確に訴求できます。 この記事では人間が自然にものを見る順番（＝目線の動き）に着目、目線の動きに合わせたレイアウトの作り方を説明します。人間の目線の動きを意識してデザインすることで、より効果的に目を引くビジュアルが仕上がります。それでは詳しくみていきましょう。

まずはビジュアルに掲載する要素を並べて、情報を整理します。掲載する要素は、メイン写真・サブ写真・イラスト・ロゴ・テキストなどです。テキストもキャッチコピー・ボディコピー・詳細説明・注意書きなどに分けられます。 デザインを始める前にはこれらの要素を紙に書きだすなどして全て並べます。並べる作業が終わったら、次は各要素の優先順位と関係性を整理する作業です。優先順位と関係性について詳しく解説します。

それぞれの要素の優先順位を決めます。一番最初に目を留めてほしいもの、一番重要なもの、最後に見て欲しいもの、などを決めていきましょう。要素を書きだした紙に数字で順番を書いていくと分かりやすいです。

要素同士の関係性を書き足します。商品写真と商品スペック、会場写真と会場説明など関係性があるものはセットであることが分かるようにメモを追記していきましょう。

情報の整理ができたら次は各要素の配置を検討します。その際に取り入れたいのは「人間の目線の動き」を意識したレイアウトです。視線誘導と呼ばれることもあります。 視線誘導は人間の行動に基づいて設計され、レイアウトに取り入れることによって、制作者の意図した順番で受け手がビジュアルを見るように視線の流れをコントロールできます。視線誘導の基本的な考え方を説明します。

横書きのビジュアルを見るとき、人間の視線は左から右、上から下へ流れる動きをします。アルファベットの「Z（ゼット）」の形に似ていることからZの法則と呼ばれています。横組みのデザインにはZ型を意識したレイアウトが適しています。

縦書きのビジュアルを見るとき、人間の視線は右上から下、左上から下へ流れる動きをします。こちらはアルファベットの「N（エヌ）」に似ていることからNの法則と呼ばれます。縦組みのデザインに多く用いられる型です。

WEBサイトやスマートフォンの画面ではアルファベットの「F（エフ）」の形で視線が動きます。左上からまっすぐ右へを繰り返して画面の下部へ進んでいく動きです。WEBサイトなどの横組みのデザインでよく使われています。

人間は目立つ色や目立つ大きさのものを最初に見る特性があります。周囲に空間があるものや、印象的な言葉も目立つものに該当し、それらはアイキャッチと呼ばれています。優先順位の高いものや、最初に着目させたいものをアイキャッチとして目立たせることで、視線の誘導ができます。

人間は画面上で流れがあるものに視線を誘導されます。ビジュアルに矢印・グラデーション・数字・同じ形の連続などがあると、人間の視線を誘導する役割を果たします。

人間の目線の動きのルールが理解できたら、ルールに沿って要素をレイアウトしていきましょう。STEP1で決まった優先度の高いものから順番に、STEP2の視線誘導の考え方に当てはめて、画面上に配置していきます。STEP3では、視線誘導の「Z型」「N型」「F型」の3パターンを紹介します。

Z型で最も見られるのは最初と最後です。最初（上部）にメインコピー、次の段にテキストと写真、最後（下部）にロゴやボタンや期間などを配置します。最初に見て欲しいキャッチコピーを置き、最後にアクションを促す情報を置くレイアウトです。情報が見やすく、行動を促しやすくなっています。

縦割りはN型を意識して、情報を縦に2分割して配置するレイアウトです。縦割りのレイアウトは、情報が分かれているので視認性（パッと見たときのわかりやすさ）が高いのが特徴です。それぞれの情報の可読性（文章の読みやすさ）も高まります。N型を意識して、より目立たせたい要素（写真など）を右に配置し、次に目立たせたいもの（メインコピー）を左上、その下にテキストなどを配置すると効果的です。

横割りは視線のF型を意識したレイアウトです。最も目立たせたい要素を一番上、その下に次に目立たせたい要素を配置してデザインを作成します。例えば、上からメインコピー・テキスト・写真のように配置すると良いです。写真やイラストを一番目立たせたいのであれば、それらを上に配置しましょう。縦割りと同じで情報を分けて配置できるので、視認性・可読性が高いレイアウトです。

今回はデザイン講座のレイアウト編として、ビジュアルをデザインする際に抑えておきたい基本的な作業や考え方を説明しました。ルールに沿って要素を配置して、見やすく伝わりやすいビジュアル作成を心がけましょう。 次回は「vol.2 配色編」です。配色は商品のイメージを決めたり、人の感情を左右したりする大切なポイントです。お楽しみに！

参考：【おさらい＝レイアウトの5つの基本】第1回：レイアウトが苦手なデザイナー必見 ／ 【初心者向け】バナーデザインで迷った時のレイアウト参考 / 前編 ／ できてる？基本のデザイン道場〜レイアウト編〜 「視線を意識して情報を配置しよう」