第3章　人間は、揃ったものに線を見る

ページを見て、「少しガタついている」「なんとなく落ち着かない」と感じることがあります。実際の線は描かれていなくても、文字やカードの端が同じ位置で繰り返されると、そこに一本の線があるように見えるからです。

この章では、その線を見つけます。ただし、すべてを左へそろえる話ではありません。左端、右端、中心、カードの下端、文字の基準線など、内容に合った基準を選びます。

描かれていない四つの線

最初の四枚では、青い点線を補助線として重ねています。点線は完成した Web サイトに表示するものではありません。何が同じ位置へそろっているかを説明するための線です。

見出しと本文は、長さが違っても、読み始める左端をそろえられます。

行頭が同じ位置にあれば、次の行を読むとき、視線を戻す場所が安定します。

時刻のような数値は、右端をそろえる方法があります。

文字数が違っても、終わる位置が同じなら、上下の時刻を比べる場所がそろいます。

幅の違うボタンは、中心を同じ高さへ置くことができます。

この場合に共有しているのは、左端や右端ではなく、それぞれのボタンの中央です。

高さの違うカードなら、下端をそろえることもできます。

四枚は、左端だけが正しい基準ではないことを示しています。何を読み、何を比べるかによって、役立つ線は変わります。

左右の端、中心、文字の基準線を分けて見る

一つの図へ三種類の線を重ねると、何を説明しているのか分かりにくくなります。ここでは、左右の端、中心、文字の基準線を別々の図で見ます。

名前の左端と、日時の右端

出演者名は、読み始める左端を共有しています。日時は、文字数が違っても終わる右端を共有しています。一つの一覧の中に、役割の違う二本の縦線があります。

カードの枠線をそろえているだけではありません。カードの内側で、名前と日時がそれぞれ別の基準を繰り返しています。

幅の違うボタンの中心

「保存」と「下書きとして保存」では、必要な幅が違います。左右の端はそろいませんが、中心が同じ高さにあれば、一つの操作列として並べられます。

文字が一行に並ぶ基準

図の赤い線は、文字が一行に並ぶときの基準の一つで、ベースラインと呼ばれます。文字を囲む四角形の上下中央をそろえる方法とは異なります。

大きな時刻と小さな「開演」、ボタンの外枠とその中の文字では、箱の高さが違います。それでも文字のベースラインを共有すると、一つの行として読める場合があります。

整列と、曲線が続いて見えることは別

「そろっている」という話と、「離れた線が続いて見える」という話は似ていますが、同じではありません。

図 3-3A は、制作者がカードの開始位置を同じにした配置です。このように、複数の要素へ共通の端や中心を与えることを整列と呼びます。

図 3-3B では、制作者が線分の左端をそろえているわけではありません。離れた線分の向きが滑らかにつながるため、一つの曲線として感じられます。この見え方は「良い連続」と呼ばれます。

良い連続があるから、すべての Web ページを左ぞろえにすべきだ、とは言えません。整列はレイアウトを決める方法であり、良い連続は形がどうまとまって見えるかを説明する言葉です。

数値上の中央と、中央に見える位置

丸い再生ボタンの中へ、右向きの三角形を置く例を考えます。

最初の案では、三角形を囲む最小の四角形の中心と、円の中心を同じ位置へ置いています。

CSS で三角形の箱を中央へ置けば、この配置を作れます。しかし三角形は左右対称ではありません。左側には長い縦辺があり、右側には細い先端があります。そのため、箱の中心が同じでも、三角形の塗られた形が少し左へ寄って見える場合があります。

次の案では、三角形の大きさと形を変えず、位置だけを少し右へ動かしています。

これは「三角形は必ず何ピクセル右へ動かす」という規則ではありません。三角形の角度、大きさ、線の太さ、円との比率が変われば、合う位置も変わります。

大切なのは、最初から感覚だけで動かすことではありません。まず数値上の中央を基準にし、形と大きさを固定したまま位置だけを変え、二つを比べます。このような調整を、見た目に合わせる位置調整、英語では optical alignment と呼びます。

文字には、箱とは別の線がある

CSS で文字へ font-size や line-height を指定すると、ブラウザは文字を置くための行の箱を作ります。しかし、その箱の上下いっぱいまで文字の形が埋まるわけではありません。

図には三種類の境界があります。

• 行の箱は、ブラウザが一行を配置する範囲
• ベースラインは、多くの文字が並ぶ基準
• 文字の輪郭は、実際に黒く描かれて見える形

欧文の g や p は、ベースラインより下へ一部が伸びます。日本語の仮名や漢字は、欧文の大文字や小文字とは異なる形で文字の枠を使います。同じ font-size でも、書体が変われば見かけの大きさや上下の空白は変わります。

そのため、文字を含む二つの部品の箱が同じ高さでも、文字そのものはそろって見えないことがあります。反対に、文字が一行としてそろって見えても、外側の箱の上下中央は異なることがあります。

詳しい文字組みは第7章で扱います。ここでは、CSS の箱だけで文字の見える位置を説明しきれないことを覚えておけば十分です。

あえて軸から外すこともできる

すべてを同じ線へそろえると、安定した反復を作れます。

次に始まる場所を予想しやすく、静かな構成です。しかし、意図して軸を外すデザインもあります。

見出しと本文で異なる軸を持ち、その関係が各セクションで繰り返されれば、段差は表現上の規則として読めます。

最後は、一枚のカードだけが軸から外れています。

このカードだけに重要な状態や別の役割があるなら、位置の違いにも意味があるかもしれません。ほかと同じカードなのに一枚だけずれているなら、余白や幅の指定が違う可能性があります。

画面だけを見て、意図か事故かを断定することはできません。しかし、どの要素のどの端が、どの共通軸から外れているかは説明できます。そのあとで、HTML と CSS、別の画面幅、デザイン上の目的を確かめます。

どの線をそろえたのかを言葉にする

「きれいにそろえる」だけでは、何を直すのか分かりません。

• 見出しと本文の左端
• 時刻や価格の右端
• 幅の違うボタンの中心
• 大きさの違う文字のベースライン
• 高さの違うカードの下端

このように基準を指すと、同じ画面を見ながら話せます。数値上の位置と見た目が合わない形では、基準案と位置だけを変えた案を比べます。意図して外すなら、そのずれを一度きりの例外にせず、意味や反復と結びつけます。

次の第4章では、位置ではなく、色、形、大きさなどの「似ている見た目」が、同じ役割をどう伝えるかを見ていきます。

参考

• Johan Wagemans ほか, “A Century of Gestalt Psychology in Visual Perception I”, 2012 — 離れた線が連続して見える条件を含む、知覚のまとまりに関する論文です。
• W3C, CSS Box Alignment Module Level 3 — Flexbox や Grid で、端、中心、ベースラインをそろえる方法を定める仕様です。
• W3C, CSS Inline Layout Module Level 3 — 行の箱と文字のベースラインを詳しく確認できる仕様です。