このレイアウト、どっちが正解？視線誘導のセンスを磨いておこう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

デザイナー・アートディレクターの黒葛原道です。

今回、私は「レイアウト」についてのクイズを出題します。

早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「レイアウト」がよいと感じますか？

style

reading width, l spacing

1問目「被写体の向き」（難易度★★）

style

reading width, l spacing

2問目「カード型レイアウト」（難易度★★）

style

reading width, l spacing

3問目「レシピ」（難易度★★★）

いかがでしたか？

私が考える答えは……

style

reading width, l spacing

1問目の答え：A

style

reading width, l spacing

2問目の答え：B

style

reading width, l spacing

3問目の答え：A

以上が私なりの解答です。

あなたがよいと感じたレイアウトは、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

style

reading width, m spacing

※本コーナーの作例は、Adobe Illustratorを使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能も搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustratorを使ってみてください。

すべてのデザインクイズを見る

style

reading width, l spacing

1．視線や体の向きの先にテキストやボタンを配置する

まずは1問目を振り返ります。

私の考える正解は「A」でした。

まずは、AとBを比較してみましょう。

Aのレイアウトは、人物の視線や体が向いている先に、テキストが配置されています。

一方でBは、人物がテキストに背を向けた構図になっており、ユーザーに少し違和感を与えます。

実は、人は無意識のうちに他人の視線や動きに注目する傾向があります。

この本能をデザインに活かし、人物の画像を使うのであれば、その視線の先に文字やクリックしてほしいボタンを配置してみましょう。

すると、ユーザーの視線は自然と人物が見つめている方向へ導かれますので、伝えたいメッセージが非常にスムーズに伝わるようになります。

逆に、人物が背を向けた方向にテキストを置くと、視覚的なつながりが途切れ、訴求力が弱まってしまいます。

レイアウトを考えるときは、写真とテキストをただ「並べる」のではなく、お互いが関係し合うようにつなげる意識をもつことが大切です。

視線は目に見えない線ですが、ユーザーの目線の動きを意識することで、より心地よく情報が伝わるレイアウトを実現できます。

style

reading width, l spacing

きれいに見える角丸のデザインを作るポイント

今回の作例では、人物の視線の動き以外にも注目して欲しい点があります。

それは、角丸のデザインです。

以下の2つのポイントを押さえることで、きれいな角丸のデザインが作れるので、ぜひ参考にしてみてください。

角丸のデザインを重ねて使うときは角丸の数値に注意する
クリッピングマスク後でも調整しやすい角丸を作る

style

reading width, m spacing

1．角丸のデザインを重ねて使うときは角丸の数値に注意する

作例では、写真と外枠の両方に角丸が設定されていました。

一見どちらも整って見えますが、Bではどこか不揃いな印象を受けます。

その原因は、Bは「写真と外枠の角丸の設定値が同じ」だからです。

Aでは、外枠と内側の写真で異なる角丸の数値を設定しているため、視覚的にバランスが取れてきれいに見えます。

このように、角丸を重ねて使う場合は、外側の角丸よりも内側を小さく設定するのが基本です。

では、内側の角丸の適切な数値はどのように求めればよいのでしょうか。

計算方法はシンプルで、「外側の角丸の数値」から「外枠と内側の写真の間の間隔（余白）」を引き算するだけです。

外側の角丸の数値 − （外枠と内側の写真の間の）間隔＝内側の角丸の数値

今回の例では、外側の角丸が36px、写真との間隔が24pxなので「36−24＝12」と計算し、内側の角丸は12pxに設定するのが最適です。

※今回は単位をpxで提示しましたが、mmでも同じように計算してください。

デザインをする際は、同じオブジェクトを使い回すことがよくありますが、角丸の場合はそのまま使ってしまうとバランスが崩れてしまうことがあります。

他のオブジェクトとの位置関係や距離に注目し、上記のような計算をもとに、角丸の数値を適切に調整することを意識しましょう。

style

reading width, s spacing

2．クリッピングマスク後でも調整しやすい角丸を作る

この作例では、写真を長方形でクリッピングマスクし、トリミングしています。

角丸を設定する場合は、マスクをかける前の長方形に「ライブコーナー」を使って設定しても問題ありません。

※ライブコーナーとは、オブジェクトの角を角丸にしたり、面取り形状にできる機能です。

しかし、マスクを適用した後に角丸の数値を変更したい場合は、「グループ編集モード」に入るか、「グループ選択ツール」で長方形を直接選択する必要があり、少し手間がかかります。

そこで便利なのが、「角を丸くする」効果です。

クリッピングマスクを設定したオブジェクトを選択し、メニューの「効果」＞「スタイライズ」＞「角を丸くする」を選択して角の半径を指定します。

この方法で設定した角丸は、「アピアランス」パネルからいつでも数値を変更できるため、マスク後の調整もスムーズに行えます。

このように、後からでも調整しやすい角丸を作ることで、サイズ変更にも対応しやすいきれいな角丸のデザインをすぐに実現できるので、ぜひ覚えておきましょう。

style

reading width, s spacing

2．注目度が高い写真を最初に（一番上に）配置する

続いて、2問目の振り返りです。

私の考える正解は「B」でした。

作例の構成は、webデザインやUIデザインでよく使われる「カード型レイアウト」と呼ばれるものです。

カード型レイアウトでは「写真＋見出し＋リードコピー」といった要素を組み合わせて、基本的に縦方向に配置します。

一見すると、Aのように「重要な見出しを上に置いたほうがよいのでは？」と考えがちですが、実際には写真がもつ視覚的なインパクトが非常に強いため、ユーザーの視線はまず写真に向かいます。

そのため、視線が上から下へと自然に流れるように、最初に写真を置き、次に見出し、最後に本文を配置するのが理想的です。

Bでは、この流れが意識されており「写真→見出し→テキスト」の順に構成されています。

ユーザーの目線がスムーズに移動し、情報も自然に理解できます。

こうした理由から、「B」を正解としました。

一方、Aのように「見出し→画像」の順にしてしまうと、視線が下に流れたあと、再び上に戻る必要があり、わずかながらストレスを感じる原因になります。

また、画像とテキストを交互に配置するよりも、テキスト要素をまとめて整理しておくほうが、情報のまとまりとしても見やすくなります。

わずかな配置の違いに見えても、視線の流れが引っかかるだけでユーザーの読む意欲は失われてしまいます。

レイアウトを考えるときは、見た目のバランスだけでなく、「人の意識がどこへ向かいやすいか」という心理的な流れを意識して設計してみてください。

style

reading width, l spacing

カード型レイアウトは整列や間隔も意識する

この作例では、オブジェクトの整列や間隔にも違いがあります。

AとBをよく見比べてみると、実は、Aはそれぞれの要素の左端が揃っていません。

また、要素の間隔も不揃いな印象です。

パッと見では気づきづらいですが、線を引いてみるとよくわかります。

Illustratorで整列や間隔を調整したいとき、通常は「整列」機能を使用しますが、テキスト含む整列の場合、思ったとおりの結果が得られないことがあります。

これは、Illustratorがテキストを扱う際、文字そのものの見た目の輪郭と、文字を取り囲む見えない箱のような枠（バウンディングボックス）の境界に、微妙なズレが生じることがあるからです。

標準の「整列」機能は、この見えないボックスの境界を基準にしてしまうため、「見た目には揃っていない」という事態が起こりがちです。

ここでは、この「見た目のズレ」を防ぎ、より美しいレイアウトを実現するための方法を解説します。

style

reading width, m spacing

1．字形の境界に整列

Illustratorの「整列」パネルには、「字形の境界に整列」というとても便利な機能があります。

「整列」パネルのメニューにある「字形の境界に整列」の「ポイント文字」と「エリア内文字」にチェックを入れてみましょう。

この設定をすることで、テキストのボックスではなく、文字そのものの見た目の境界で整列されるようになります。

まるで手作業で微調整したかのように、要素がピタッと揃って見えるはずです。

なお、フォントの種類によっては、文字の下にどうしても余分な空白ができてしまうことがあります。

この空白のせいで、普通に「整列」パネルで上下方向に揃えようとしても、きれいに中央に揃わず、意図した位置からずれてしまうことがあるんです。

そんなときにも、「字形の境界に整列」機能が有効です。

この機能は縦方向にも効果を発揮してくれるので、文字の下の空白を無視して文字の境界を基準にした整列を行ってくれます。

style

reading width, s spacing

2．2つの機能を利用した「等間隔に分布」

先ほどご紹介した「字形の境界に整列」がOFFの場合、複数のオブジェクトを「等間隔に分布」にしても、思ったように等間隔になりません。

しかし、「字形の境界に整列」をONにすることで、「等間隔に分布」も文字通り等しい数値で間隔が設定されます。

また、webデザインやUIデザインでは、その後のコーディングを見越して、数値を指定して間隔を設定したいケースがあります。

その場合は、「字形の境界に整列」をONにしたうえで、以下の2つの機能を使用して「等間隔に分布」を行います。

「キーオブジェクトに整列」機能で基準となるオブジェクトを指定
数値指定で「等間隔に分布」を行う

各機能の使い方を、以下で解説します。

「キーオブジェクトに整列」機能で基準となるオブジェクトを指定

整列や等間隔に分布を行う際、基準となるオブジェクトを設定できます。

これが「キーオブジェクトに整列」機能です。

基準を決めることで、揃えたいオブジェクトに揃えることができます。

キーオブジェクトを設定する最もカンタンな方法は、以下のとおりです。

整列したいオブジェクトを2つ以上選択（Shiftキーを押しながら選択）
基準にしたいオブジェクトをもう一度クリック（Shiftキーを離して選択）

これだけで、クリックしたオブジェクトがキーオブジェクト（基準）として設定され、他のオブジェクトがそれに合わせて整列されるようになります。

数値指定で「等間隔に分布」を行う

キーオブジェクトを設定すると、「整列」パネルで間隔の値を設定して、等間隔に整列できるようになります。

先ほどお伝えした「字形の境界に整列」機能と併用すると、テキストのボックスが文字のサイズより大きくても、文字の見た目の大きさに合わせて間隔を設定できます。

このように、「等間隔に分布」と「キーオブジェクトに整列」機能を組み合わせて、きれいな整列を表現しましょう。

style

reading width, s spacing

3．順番を示す場合はストレートなレイアウトが無難

最後に、3問目の振り返りです。

私は「A」を正解としました。

デザインに「動き」を出したいからと、Bのように要素を互い違いに配置するケースはよくあります。

しかし、本当に大切なのは「動きを出すこと」でしょうか？

今回の作例の本来の意図は「順を追って解説したい」はずです。

そのため、パッと見の印象や、どこかでよく見るレイアウトに囚われず、本質的な意味や意図を考慮することが大事です。

特に、レシピや手続きのフローなど、順を追って解説する必要があるものは、互い違いに配置すると順番を見失いやすくなります。

このことから、「A」が適切なレイアウトといえます。

style

reading width, l spacing

繰り返し利用する部品は「シンボル」を活用しよう

作例では「STEP◯」という部品が繰り返し利用されています。

このように繰り返し利用する部品は、「シンボル」に登録しておくと、後でデザインをまとめて変えられるのでとても便利です。

以下で登録方法を解説します。

まず、ベースとなるパーツを作ったら、それをシンボルとして登録しましょう。

登録するには、「ウィンドウ」＞「シンボル」を選択して「シンボルパネル」を開き、作成したパーツをパネルにドラッグ＆ドロップするだけです。

登録したパーツはその時点で、自動的に「インスタンス」と呼ばれる、シンボルを元にして配置されたパーツになります。

インスタンスを使いたいときは、シンボルパネルからドラッグ＆ドロップで配置できます。

また、シンボルのデザインを変更したい場合は、インスタンスをダブルクリックします。

すると、シンボルの「編集モード」に切り替わりますので、色や形など見た目を自由に変更してみましょう。

Escキーを押すと通常のモードに戻り、変更結果がすべてのインスタンスに反映されます。

style

reading width, m spacing

まとめ：視線誘導のセンスを磨くためのポイント

今回はレイアウトに関するクイズと、デザインテクニックを取り上げました。

最後に、今回のノウハウのまとめです。

style

reading width, l spacing

1．視線の流れを意識的にコントロールしよう

人物写真を使う際は、被写体の視線や体の向きの先にテキストを配置し、ユーザーの視線が自然に流れるように誘導しましょう。

【デザインテクニック】角丸を重ねる際は「内側を小さく」が鉄則！

外側の角丸と内側の角丸のバランスは、「外側の角丸の数値−間隔＝内側の角丸の数値」で計算し、視覚的な統一感を保ちましょう。

style

reading width, m spacing

2．カード型レイアウトは「画像ファースト」で視線誘導

視覚的に印象の強い画像を最初に配置し、画像→見出し→テキストの順で情報を提示することで、ユーザーの理解をスムーズに促します。

【デザインテクニック】文字の整列・間隔は「字形」を基準に微調整！

テキストを含む要素の整列や間隔を設定する際は、ボックスの境界ではなく「文字自体の境界（字形）」を基準にすることで、見た目の美しさを追求できます。

style

reading width, m spacing

3．情報伝達の目的を考えたレイアウト選択

レシピや手順など、順序が重要な情報は、読者が迷わないように直線的でわかりやすいレイアウトを選びましょう。

デザインの「動き」よりも「伝わりやすさ」を優先することが大切です。

【デザインテクニック】繰り返し使う部品は「シンボル化」で作業効率アップ！

同じデザイン要素を何度も使う場合は、シンボルとして登録し、一元管理することで、後からの修正や変更が格段に楽になります。

style

reading width, m spacing

デザインの正解とは、見た目のよさだけではなく「情報が正しく伝わること」も大事です。

そのために、デザイナーは感覚だけに頼らず、視線の誘導や数値での設計、効率的なデータ構造といった観点を押さえておく必要があります。

そしてIllustratorは、それを実現するための最も柔軟なツールです。

今回のクイズをきっかけに、あなたのレイアウトにも「伝わる仕組み」を意識して取り入れてみてください。

お相手はデザイナー・アートディレクターの黒葛原道でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。

style

reading width, m spacing

執筆：黒葛原　道

1999年にデザイナーとして活動を開始し、広告代理店勤務を経て2003年に独立。翌年大阪から宮崎へ移住し、Webデザインを中心にサイト構築、ディレクション、撮影、コンテンツ企画まで幅広く手がける。ECサイト運営を通じて培った「売る」視点を活かし、成果につながる制作を信条とする。現在はAdobe Community Expertとしても活動。