先に、同じ幅で並べるものを決める
グリッドを引く前に、横へ並べる理由を決めます。二つの商品を比較したいのか、文章と写真を隣に置きたいのかで、必要な列は変わります。同じ立場の商品なら同じ幅が候補になりますが、本文と小さな補足欄なら、同じ幅にする必要はありません。
ここでは、展示で使う二種類の道具を紹介する架空の案内を作ります。左右に「紙の道具」「布の道具」という見出しを置き、それぞれに短い説明を添えます。二つを同じ階層で見てほしいので、まず等しい二列を試します。
グリッドは、収納の仕切りのような下地です。仕切りがあると置く範囲を考えやすくなりますが、大きな物を無理に押し込めば使いにくくなります。レイアウトでも、文章が入らないから文字を極端に小さくするより、列の構成を変える方がよい場合があります。
紙面全体を細かい格子にする必要はありません。左右の始まりと終わり、二列の境目だけを目安にしても始められます。列の中では文字を左から読むのか、中央の軸に沿って見るのかも決めます。同じ文章を二つの揃え方で読む例なら、列の位置と文字の揃え方を分けて考えられます。
二列のグリッドを作る手順
制作画面の幅いっぱいに二つの枠を置くと、紙や画面の端に文字が近づきすぎることがあります。そこで、先に外側の余白を取り、その内側を列へ分けます。列と列の間には、別の情報の組だと分かる空きを残します。
- 完成品を表示する幅を決める。
- 左右の外側に余白を取る。
- 二つの列の間に空きを取る。
- 残った幅を二つへ分ける。
- 見出しと本文をそれぞれの列へ入れる。
- 補助線を消し、実際に文章を読む。
例えば、教材の幅を600px、左右の余白をそれぞれ24px、列間を24pxと仮定すると、一列は264pxです。600から左右の48と列間の24を引き、残った528を二つへ分けています。この値は計算の練習用で、スマホや印刷物にそのまま当てはめる推奨値ではありません。
| 言葉 | 指している場所 | 役割 |
|---|---|---|
| マージン | この例では紙面の外側の空き | 端と本文を離す |
| カラム | 情報を置く列 | 幅とそろえる位置を決める |
| ガター | 列と列の間の空き | 隣り合う内容を区別する |
ツールによって「余白」「間隔」などの表示名は違います。用語を覚えると設定を探しやすくなりますが、数値がどの空きを変えるかを画面で確かめる方が先です。外側と内側を一緒に増やすと本文の幅が大きく変わるので、一項目ずつ調整します。
同じ紹介文を、二列に置いてみる
A：幅と始まりがばらばら
紙の道具
折る・切る道具を紹介。
布の道具
縫う・測る道具を紹介。
B：二列に割り当てる
紙の道具
折る・切る道具を紹介。
布の道具
縫う・測る道具を紹介。
Bでは、二つの見出しが同じ高さから始まり、本文を置く幅もそろっています。比べたいのは飾りの多さではなく、二つの説明を同じ階層として見つけられるかです。Aの配置も、違う種類の情報を区別する目的なら使える場合があります。
この例では幅と開始位置を一緒に変えています。どちらの変更が役立ったかを分けて確かめたいなら、まず左端と上端だけをそろえた途中版を作り、そのあと幅を統一した版と比べます。原因を知りたい練習と、最終的な構成を選ぶ比較は分けて考えると混乱しにくくなります。
説明が一方だけ長くても、末尾を同じ高さへそろえるために空白行を足す必要はありません。読む順番に支障がなければ、高さの違いは内容量の違いとして残せます。ボタンなどを下端へそろえたい場合は、どの要素の位置を固定するかを別に決めます。
また、グリッドの線は印刷や画面に出すためのものではありません。枠線を増やして整ったように見せる前に、線がなくても情報のまとまりが分かるかを見ます。空き方の調整は、余白の量の考え方へつながります。
迷ったら、列を減らして文章を読む
幅が狭い紙面で二列を維持すると、見出しが一文字ずつ折り返したり、本文が短い行を何度も往復したりします。その場合は、文字を縮める前に一列へ変えた案を作ります。並べて比べる便利さと、読み続ける便利さを照らし合わせて選んでください。
スマホでは一列、広い画面では二列という構成も候補です。ただし、左右の対応を見て判断する料金表などは、縦へ並べると比較しづらくなることがあります。単純に列数を減らすのではなく、項目名を各枠へ繰り返し書くなど、情報の関係も保つ必要があります。
「Webだから12列」という決め方も、初めの一枚には必要ありません。細かな列を持つ下地が役立つ設計もありますが、使わない分割を増やすと判断が複雑になります。二列の紹介と一列の説明しかないなら、その構成に必要な線から始められます。
長い見出しだけ収まらない場合は、何が問題かを分けます。列が狭いのか、不要な言葉が重なっているのか、改行位置が意味を切っているのか。レイアウトの問題を、文章を削ることだけで解消しようとしないのが大切です。
配置したあとに確認する四つのこと
まず、対応する情報の左端と上端を見ます。次に、列間の空きが本文の行間や段落間と混ざっていないかを確かめます。二つの商品が一つの長い文章に見えるなら、列間が足りないか、背景や見出しの共通化が強すぎる可能性があります。
写真を置く場合は、枠の大きさだけを確認して終えません。左右の写真で主役の見える大きさが極端に違うと、同じ列幅でも重要度が違って見えることがあります。比べる目的に応じて、写真の選び方や切り取りを調整します。
| 確認すること | 崩れているときの見直し |
|---|---|
| 同じ役割の始まりがそろっているか | 上端・左端の基準を一つ決め直す |
| 隣の列が別の組として見えるか | 列間を調整し、本文の幅も再確認する |
| 実寸で文字を読めるか | 列数、文字量、表示幅を見直す |
| 狭い幅でも読む順番が分かるか | 一列案と比較し、対応関係を残す |
A4の案内なら、最終的な紙の大きさで確認することも必要です。拡大した制作画面での読みやすさは、印刷後の読みやすさとは違います。情報の役割から紙面全体を組む場合は、A4チラシの構成で見直せます。
自分の二列を、一列と比べる
今日のワーク：幅の違う二案を作る
「紙の道具」「布の道具」の見出しと説明を、自分の制作ツールへ入れます。紙に枠を描いてもかまいません。
二列に置いた版と、同じ文字サイズで一列へ並べた版を作ります。見出しを探すとき、本文を読むとき、それぞれどちらが使いやすいか記録してください。画面用なら実際の表示幅でも開きます。
二列が窮屈なら、余白を全部消すのではなく、表示幅と必要な文字量から組み直します。採用しなかった案も残すと、何を優先して選んだかを説明できます。
線を消したあとに、並びを確かめる
グリッドの設定が正しくても、読む人にとって分かりやすいとは限りません。補助線を消した状態で、何が並んでいて、どちらから読めばよいかを確かめます。
次の一枚でも同じ列数を使う必要はありません。内容と使う幅が変わったら、列数を選び直します。線に合わせる技術に加えて、線を変える理由まで持てると、配置の迷いを一つずつ減らしていけます。