レイアウト

4.2.1中級6分で読了

複数の視覚的要素を同一ページ上に配置する際は、常に整然とした秩序ある見た目を保つため、目に見えないグリッドに合わせて配置する必要がある。この目に見えないグリッドを、ページの「レイアウト」と呼ぶ。

例えば、標準的な8.5×11インチのページで設定された文書では、通常、余白の初期設定は1インチである。これらの余白は、3列×3行の目に見えないグリッドと見なすことができる。グリッドの1列目は幅1インチ、2列目は幅6.5インチ、3列目は再び幅1インチとなり、合計の幅は8.5インチとなる。グリッドの行については、1行目が高さ1インチ、2行目が高さ9インチ、3行目が再び高さ1インチとなり、合計の高さは11インチとなる。

つまり、この文書を「余白1インチの8.5×11インチのページ」と捉える代わりに、「最初と最後の列の幅が1インチ、最初と最後の行の高さが1インチである、3×3グリッドで構成されたレイアウトを持つページ」と、より正確に定義できるのである。

これを踏まえて、数段落のテキストがあるページに画像を1枚追加したい場合を考えてみよう。大半の人が行う典型的な方法は、2つの段落の間に画像を挿入し、ページに収まるよう画像の高さを調整することである。画像には固定のアスペクト比（幅に対する高さの比率であり、正方形なら1:1）があるため、高さを調整するとアスペクト比を維持するために幅も連動して変化する。これは、ページに収まるように画像の高さを小さくすると、幅も狭まるため、画像の右側に余白が生じることを意味する。

この余白を解消する一般的な手法は、画像の周囲にテキストを回り込ませることである。しかし、同じページ内にもう1つの画像、グラフ、図解など、さらに多くの視覚的要素を追加しなければならない場合、このアプローチは破綻し始める。この段階になると、デフォルトの余白によって定義された単純な3×3グリッドのレイアウトでは、すべての要素を整然と配置して整理された状態を保つには不十分となる。

テキスト全体に多数の視覚的要素が散乱する問題を解決するために、ページを垂直方向に分割し、3×3グリッドの代わりに5×3グリッドを適用することが考えられる。この新たなグリッドでは、最初と最後の列は依然として1インチのままだが、中央部分には3インチの列、0.5インチの間隔列、そしてもう1つの3インチの列が配置され、ページ全体の幅は8.5インチのまま維持される。

こうすれば、画像やグラフ、図解の周囲にテキストを回り込ませる代わりに、視覚的要素を垂直に積み重ねた、整然とした複数の列を構築できる。さらに完成度を高めるには、画像、グラフ、図解の幅をそれが配置される列の幅に正確に合わせる。これにより、文書を上から下へ、左から右へと読み進める際に、心地よい秩序感が生まれる。このようなレイアウトを「マルチカラムレイアウト」と呼ぶ。

視覚的要素を垂直に整然と配置できるだけでなく、マルチカラムレイアウトにはテキストを読みやすくする効果もある。一行の長さが短い方が、長い行よりも読みやすいためである。

例えば、長文の記事を読む場合、1行あたり約60文字である方が、1行あたり1,000文字である場合よりもはるかに読みやすい。これは人間の視線が左から右へ移動する読み方に起因している。視線を左から右へ、そしてまた戻すという往復動作が増えるほど、文章は読みにくくなる。これに対して、幅の狭いテキスト列であれば、視線をほとんど動かさずに読むことができる。

マルチカラムレイアウトを採用する際、重要な判断となるのが、各列内のテキストを両端揃えにして、テキストの右端を常に列の右端に揃えるべきかどうかである。多くの場合、これにより列はより整然とした印象を与える。しかし、フォントサイズや列の幅を慎重に選ばなければ、単語間に不自然で目立つ余白が生じ、結果として左揃えのままにしておくよりも見栄えが悪くなる可能性がある。そのため、左揃えと両端揃えのビフォー・アフターを比較検証し、最も美しく見える配置を選択することが推奨される。

コンテンツ用に2列を設けたシンプルな5×3グリッドレイアウトだけでなく、コンテンツ用に3列を設けた7×3グリッドレイアウトを選択することもできる。各列の幅を調整していくと、特にコンテンツを含む各列の幅を変えた場合に、ページの印象が劇的に変化することに気づくだろう。幅の異なる列を使いこなす要点は、それらの幅に明確な差をつけることである。わずかな差にとどまると、単なる設定ミスに見えてしまう恐れがある。例えば、テキストやグラフを収める2つの狭い列と、図解を配置する1つの広い列を組み合わせるといった構成が有効である。

単純なカラムグリッドを用いてページ上のコンテンツを分割・整列させる方法を理解できたら、ヘッダー、フッター、サイドバーなどを含む、より高度なグリッドの試行へと進むことができる。大半の文書編集ソフトウェアには試行可能なレイアウトがいくつか用意されているが、より高度なカスタマイズを求めるなら、Microsoft VisioやLucidchartのような、高度なレイアウト作成に特化したソフトウェアの利用を検討するとよい。これらのソフトウェアには、要素をドラッグしたりサイズ変更したりする際に、自動的にグリッドに合わせて整列させる機能など、複雑なグリッドレイアウト専用の機能が備わっている。

どのようなレイアウトを選択するにせよ、その目的は常に文書を整然と整理された状態に見せることにある。レイアウトのせいで文書が雑然として乱雑に見える場合は、グリッドを調整するか、あるいはよりシンプルなレイアウトを選択する必要がある。