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

ページを見て、「少しガタついている」「なんとなく落ち着かない」と感じることがあります。その違和感を、すぐに「1 px ずれている」と決めつける必要はありません。

まず、どの要素が、どの基準を共有しているように見えるかを探します。文字の左端でしょうか。カードの外形でしょうか。数値の右端でしょうか。アイコンの中心でしょうか。それとも文字のベースラインでしょうか。

画面には、CSS で描かれていない基準が多数あります。要素の端や中心が反復すると、それらを構成上の軸として読める場合があります。本章では便宜上、この軸を「見えない線」と呼びます。ただし、観察者が分析のために引く補助線や、良い連続で知覚される輪郭とは区別します。幾何学的に揃っていることと、揃って見えることも分けます。

この章の必修は三つです。

1. どの要素の、どの基準が共有されているかを指す
2. 物理的なずれ、ずれの知覚、課題への影響を分ける
3. 幾何学的な基準案と形態に応じた調整案を比較する

この章で見るもの

• 左端、右端、中心、ベースラインのどれが共有されているか
• 見えない線がどこで始まり、どこで途切れるか
• CSS の Box、Font Metrics、実際の文字の輪郭がどう異なるか
• ずれが意図された例外か、偶発的な差か
• 目測した線と Grid／Flexbox の構造が一致するか

3.1 石畳、棚、文章に見える線

石畳の左端が連続していると、目地が一本の線のように見えます。書棚で高さの違う本が並んでいても、背表紙の下端が揃っていれば、棚板に沿った水平線を感じます。丸い皿が等間隔に置かれていれば、輪郭ではなく中心を結ぶ線が見えることもあります。

文章にも線があります。左横書きの段落では、行頭が反復して左端の線を作ります。すべての行へ縦線が描かれていなくても、文字の始まる位置から基準を見つけられます。

図 F01 は、最初に Overlay なしで見ます。自分ならどこへ線を引くか考えてから、解説面を開いてください。

ここで見つける線は、物体として存在する線とは限りません。要素配置が共有する構成軸を、観察者が分析用の補助線として書き表したものです。後で扱う良い連続の知覚された輪郭とは同じではありません。別の人が別の構成軸を見つける場合もあります。皿の左端を見る人もいれば、中心を見る人もいるでしょう。

重要なのは、模範線を当てることではありません。

私は、どの要素の、どの部分を結んで線を見たのか。

この問いに答えることが、画面の整列を見る入口です。

3.2 Web ページを支える見えない基準線

Web ページでは、多数の要素が一つの画面に並びます。見出し、本文、画像、カード、ボタン、ナビゲーション、時刻、価格。すべてを同じ線へ揃えることはできませんし、その必要もありません。

まず、基準線の種類を分けます。

左端

見出し、本文、リスト、カード内の文章など、読み始める位置が反復して作る線です。左横書きでは、次に読む位置を戻りながら探す手がかりになります。

ただし、文字の左端と、カードのボーダー左端は同じものではありません。カードに内部余白があれば、外形の線と内容の線が並行して存在します。

右端

価格、時刻、桁の揃った数値、操作ボタンの列などで現れます。数値を比較する画面では、右端だけでなく小数点や位を揃える方が課題に合う場合があります。

中心

アイコン、アバター、短いラベル、対称的な部品で使われます。しかし、Bounding Box の中心と、形が中央に見える位置は同じとは限りません。

ベースライン

文字が並ぶ基準の一つです。異なる大きさの文字、数字、アイコンが横に並ぶとき、Box の上下中央を一致させるより、文字のベースラインを共有した方が一行として見える場合があります。

「この画面は揃っている」という言い方だけでは、観察した場所が分かりません。次のように書き換えます。

セクション見出し、導入文、カード一覧の外形は左端を共有している。カード内部の文字は、カード外形から一定の内部余白を置いた別の左端を共有している。

線は一本とは限りません。大きな構成の線と、コンポーネント内部の線が入れ子になります。どの線へ何を所属させるかが、情報構造を画面へ表します。

先に読む順序を置く

整列案を選ぶ前に、利用者の課題を置きます。

• 長い文章を上から読む
• 複数の価格を比較する
• 時刻から出演者を探す
• 一覧から操作ボタンを見つける
• 画像を手がかりに項目を選ぶ

同じ要素でも、読む課題が違えば有効な基準は変わります。価格比較なら位や右端が重要かもしれません。文章を連続して読むなら、安定した行頭が重要かもしれません。整列は、見た目を几帳面にする作業ではなく、関係と課題に合わせて基準を選ぶ設計です。

図 F02 の同じデータを、二つの課題で見比べます。出演者名から探す条件では名前の行頭を揃え、開始時刻から探す条件では時刻の桁と右端を揃えます。色、文字、項目数は固定します。どちらが普遍的に優れるかではなく、課題によって観察すべき基準が変わることを確かめます。

3.3 整列と「良い連続」は同じ概念ではない

整列は、デザイン実務で使われる原則です。複数の要素へ共通の端、中心、軸などを与え、構成上の関係を作ります。

一方、良い連続は知覚的グルーピングに関する概念です。簡単に言えば、方向の合う線分や滑らかにつながる部分は、連続した輪郭としてまとまって見えやすいという傾向です。

より正確には、良い連続は輪郭統合や知覚的組織化の研究で扱われます。離れた局所要素でも、向きが滑らかな曲線に沿えば、一つの輪郭として検出されやすくなる条件があります。

Web ページで見出しと本文の左端を揃えることは、滑らかな曲線を検出する実験課題と同じではありません。図 F03 も二つの概念を二軸の実験へしたものではなく、整列、良い連続、両者を混同できない反例を順に見る概念比較です。整列した端が連続した構造として見える説明候補に、知覚的な連続性を挙げられる場合はあります。しかし、次のように短絡させません。

良い連続の法則がある。だから、すべて左揃えにすべきだ。

良い連続は、どの要素を揃えるべきかも、左・右・中央のどれを選ぶべきかも決めません。整列の目的は、内容、読む方向、課題、媒体、表現意図から決めます。

名前を分野と一緒に使う

• 整列：［デザイン原則］
• 良い連続：［知覚心理学］
• ベースライン整列：［Typography／CSS］
• 光学調整：［Typography／グラフィックデザイン実務］

似た場面で使われる言葉でも、出自と説明できる範囲は違います。名前を知ることは、同じ言葉へまとめることではなく、どの説明を疑うべきか見分けることでもあります。

3.4 1 px のずれが問題になるとき、ならないとき

レビューで「ここが 1 px ずれています」と指摘されることがあります。CSS 上で測れば、実際に 1 px の差があるかもしれません。しかし、そこから直ちに「利用者にも見える」「使いにくい」「修正優先度が高い」とは言えません。

少なくとも、三つを分けます。

1. 物理的な差: CSS や Screenshot 上で位置が異なる
2. 知覚: 観察者が差や線の途切れを検出する
3. 影響: 探索、比較、理解、操作、印象へ差が生じる

図 F04 は心理物理実験の結果ではなく、観察条件を揃えるための教材です。図から人間一般の検出閾を求めません。「差を検出した」「線が途切れて感じた」「課題を妨げた」を分けて記録する練習に使います。

反復があると差を見つけやすい

二つの要素だけを見比べる条件と、同じ端が八回反復する列の中で一つだけ位置が異なる条件では、比較対象の数、全体幅、視線移動も変わります。例外を見つけやすくなる可能性はありますが、反復数だけの効果とは断定できません。図では系列の占有幅と項目密度を記録し、交絡を含む教育比較だと明示します。

境界の強さで見え方が変わる

高いコントラストの細いボーダーが 1 px ずれる場合と、輪郭の曖昧な影が 1 px ずれる場合では、検出しやすさが異なる可能性があります。文字ブロックでは、Glyph の形や Font Metrics も見かけの端へ影響します。

CSS px だけでは表示を特定できない

CSS px は、そのまま特定の物理画素や視角を意味しません。ブラウザズーム、DPR、OS、Rasterization、視距離、画面の品質によって、Screenshot や実機での見え方は変わります。

図 F04 の 1 px は、特定条件内の比較値です。「人間は 1 px のずれを検出できる」あるいは「検出できない」という一般則を示す図ではありません。

見つけた差を、直す理由へ飛躍させない

ずれが検出できても、課題を妨げない場合があります。反対に、数値上は小さな差でも、表の列を読み違える、フォームの対応を誤る、状態の違いを見落とすなら優先度は上がります。

修正理由は、次のように書きます。

8 枚の出演者カードが左端を共有する中で、4 枚目の本文だけが 2 CSS px 右へずれている。カード間の反復から偶発的な例外として検出される可能性がある。変更前後で線の途切れの検出と、出演者名を探す時間を別々に比べたい。

「2 px ずれている」は観察の一部であって、結論ではありません。

3.5 数学的中央と視覚的中央

円を正方形の中央へ置く場合、Bounding Box の中心を一致させれば、中央に見えやすいでしょう。では、右向きの三角形ではどうでしょうか。

三角形の Bounding Box を枠の中央へ置いても、左右の塗り面積、輪郭の張り出し、尖った先端、内外の空白形状が非対称なため、少し左または右へ寄って見える場合があります。再生アイコンがボタン内でずれて見えるのは、よく使われる例です。

幾何学的中央を捨てない

光学調整は、「数値を無視して感覚で動かす」という意味ではありません。まず、Bounding Box、Container、Center を確認します。その基準案と、位置を少しずつ変えた候補を同じ条件で並べます。

1. 幾何学的中央を基準案にする
2. 左右・上下の塗り面積、輪郭の張り出し、Stroke、内外の空白、隣接要素を観察する
3. 水平または垂直位置だけを変えた候補を作る
4. 実際の表示サイズと背景で比べる
5. 補正の責任をアイコン画像、コンテナ、CSS のどこへ持たせるか決める

補正値は普遍的ではありません。同じ三角形でも、線だけの Icon か塗りの Icon か、16px か 64px か、文字と並ぶか単独かで結果が変わります。

「視覚的中央」は測定値の名前ではない

画像上の面積重心を計算しても、必ず人が中央と判断する位置を得られるわけではありません。形の意味、方向、周辺の余白、見る時間、慣習も関わります。本章では、視覚的中央を固定公式ではなく、比較によって確かめる調整目標として扱います。

3.6 文字は箱の中央だけでは揃わない

発展――タイポグラフィと CSS の詳細です。章末課題の後に読んでも構いません

文字は長方形の画像ではありません。CSS の行ボックス、フォント内部の指標、実際に描画される字形の輪郭には、それぞれ別の境界があります。

文字列内部のベースライン

多くの欧文文字がその上に並ぶ基準です。H や x はベースライン付近で止まり、g や p の一部は下へ伸びます。見えている文字の最下端を揃える線ではありません。

大文字の高さと小文字の高さ

大文字の高さと小文字の代表的な高さは、欧文フォントの見かけを説明する指標です。同じ font-size でも、フォントが違えば見かけの大きさが異なる理由の一部になります。

ただし、日本語の仮名・漢字を小文字の高さで評価することはできません。和欧混植では、日本語と欧文の設計枠、ベースライン、約物、数字の見え方を実際の文字列で確認します。

行ボックス

ブラウザが行を配置する箱です。line-height は行の高さへ関わりますが、見えている字形の上下へ単純に同量の空白を足す指定とは限りません。フォント指標とブラウザのインラインレイアウトによって結果が決まります。

レイアウトで使うベースライン整列

大きな価格「3,000」と小さな通貨単位「円」を横に並べるとします。二つの箱を上下中央へ揃える案と、文字のベースラインを揃える案では、一行としての見え方が変わります。

インライン整形文脈で文字やインラインレベルの箱が共有するベースラインと、Flexbox／Grid で項目同士を揃えるベースライン整列は、同じ説明段階ではありません。まず一つの行ボックス内で文字がどのベースラインへ置かれるかを見ます。その後で、Flex 項目または Grid 項目がベースラインを共有する条件を仕様とブラウザで確認します。

Flexbox や Grid では、align-items: center とベースライン整列を比較できます。ただし、CSS の baseline を指定すれば、あらゆる文字とアイコンが自動的に美しく揃うわけではありません。置換要素、インライン SVG、絵文字、異なる書字方向では、どのベースラインが使われるか、合成されるかを仕様とブラウザで確認します。

タイポグラフィの詳細、Web フォント読込中のフォント指標の変更、和欧混植は第7章で改めて扱います。本章では、文字にも複数の見えない線があることを観察します。

3.7 Flexbox と Grid の重ね合わせ表示で仮説を確かめる

実装と接続する――必修は、重ね合わせ表示を見る前に基準を予想することです

DevTools を開く前に、画面を見て予想します。

カード外形は三列の Grid トラックへ揃っている。カード内部のボタンは Flex コンテナの交差軸中央へ置かれている。見出しだけは親 Grid ではなく、別コンテナの左端を使っているのではないか。

その後で重ね合わせ表示を表示します。

確認の順序

1. 重ね合わせ表示なしで、見える線を予想する
2. 要素を選び、ボックスモデルの端を確認する
3. Grid の線、トラック、領域、間隔を表示する
4. Flex コンテナの軸と配置を確認する
5. Computed で実際に適用された値を確認する
6. 一つの値または規則を一時的に変える
7. 重ね合わせ表示を消し、ページ全体へ戻って見る

重ね合わせ表示は、デザインの正解を表示しません。Grid の線へ一致していても、その Grid 自体が内容や課題に合わないことがあります。反対に、意図的な視覚補正によって、幾何学上は線から外れていても揃って見える場合があります。

値を見る前に、何が原因かを予想する

左端のずれが見えたとき、原因候補は一つではありません。

• 親 Grid の Track が違う
• 子要素の margin がある
• Container の padding が違う
• Border の有無で見える端が変わる
• Font や Glyph が見かけの端を変える
• transform で描画位置だけが動いている
• Scrollbar や動的内容で利用可能幅が変わる

候補を書いてから DevTools で確かめると、値を眺める作業が仮説検証になります。

DevTools の画面や機能は更新されます。図 F07 ではブラウザ名、版、確認日を記録し、Chrome と Firefox の UI を同じ手順図へ混ぜません。

3.8 揃えないことで関係を示す場合

すべてを一つの線へ揃えれば、常に良い画面になるわけではありません。

見出しを本文の軸から意図的に外すと、章の切り替わりや階層を強く示せる場合があります。画像と文章の軸をずらすと、非対称なリズムや方向を作れる場合があります。雑誌的な構成、広告、ポートフォリオでは、ずれそのものが表現の一部になります。

意図は画面だけから断定できない

一つだけずれたカードを見て、「意図されたデザインだ」「実装ミスだ」と画面だけから確定することはできません。次の証拠を集めます。

• 同じ役割でずれが反復されるか
• ずれが階層や状態の違いと対応するか
• 別のビューポートでも関係が保たれるか
• デザイントークンや部品バリエーションに名前があるか
• 変更履歴や設計意図に記録があるか
• 利用者が差をどのように解釈するか

意図された例外でも、目的を果たしているとは限りません。偶発的な差でも、必ず利用上の問題になるとは限りません。「揃っていない」という観察から、意図と効果を分けて調べます。

揃える単位を変える

ページ全体を一つの Grid へ押し込む代わりに、セクションごとに異なる軸を持たせる方法があります。大きな構成ではずらし、各セクション内部では反復する。こうすれば、変化と規則を同時に作れます。

Web では、画面幅と内容量が変わります。デスクトップ表示で成立する非対称構成が、モバイル表示で偶発的な段差に見えることもあります。意図したずれには、どの条件で維持し、どこで解消するかというレスポンシブ上の規則が必要です。

3.9 問い――どの線が途切れて見えるか

文化祭の出演者一覧を観察します。無注釈面へ、自分が見つけた線を三本まで引いてください。

観察条件

• 人：出演時刻を手がかりに、見たい出演者を探す初見の来場者
• 課題：16 組の一覧から、15 時以降に出演する音楽企画を時刻から見つける
• 道具：幅 1280px のデスクトップ表示と、幅 390px のタッチ端末
• 基準状態：通常の出演者名、画像あり、Firefox の「テキストだけ拡大」を無効、ページズーム 100%
• 耐性状態：長い出演者名、画像なし、幅 390px、Firefox の「テキストだけ拡大」で 200%を、それぞれ別の派生条件として確認する

問い

1. どの要素の、どの基準が共有されていますか。
2. どこで見えない線が途切れていますか。
3. それは物理的な差、知覚、課題への影響のどれについての観察ですか。
4. まず幾何学的な基準案を作れますか。形態による見かけのずれが残る場合は、調整案も作れますか。
5. 一つだけ変えるなら、何を固定し、何を変えますか。
6. その変更を、知覚と探索課題でどう確かめますか。

答えの例

1. 場所と基準を指す

各カードでは、出演時刻の右端を基準に縦方向へ走査できます。しかし、4 枚目だけ時刻要素の Border Box 右端が、他の時刻列から 2 CSS px 外れています。Glyph の見える右端は別に観察し、CSS Box の Edge と混同しません。

2. 観察の種類を分ける

DevTools で測った位置差は実装上の差です。カード列を見たとき、4 枚目で時刻の右端を結ぶ構成軸が途切れて感じられるかは知覚の問いです。15 時以降の企画を時刻から探す正確さや時間へ影響するかは課題の問いです。まだ後二つの結果は得られていません。

3. 概念を候補として使う

同じ右端と桁位置の反復が構成上の基準を作っているため、4 枚目が意図しない例外として見える可能性があります。これはデザイン原則としての整列から説明できます。良い連続という語だけで修正を正当化する必要はありません。

4. 別の要因を残す

4 枚目には「まもなく開始」という状態表示があり、その挿入によって時刻列の Container 幅が変わっているかもしれません。状態差を表す意図があるなら、単純に左端を揃えると意味を失う可能性があります。比例数字、等幅数字、長い名前の折り返しも確認します。

5. 二つの案を作る

幾何学的な基準案では、時刻列へ固定幅を与え、時刻の右端を同じ Grid Line へ配置します。この案で時刻探索が成立し、見かけ上の問題が残らなければ、追加補正は不要です。形態によるずれが残る場合だけ、比例数字と等幅数字、コロンや接尾辞の見え方を実際の時刻列で比較します。これは位置補正だけでなく Typography を含む発展的な別案です。

6. 確かめ方を書く

無注釈の変更前後を同じ条件で提示します。知覚課題では、どこで線が途切れたかの報告を主要指標にします。探索課題では正答率を主要指標、完了時間と誤って選んだ項目数を補助指標にします。視線計測をしていないのに「視線の戻り」を測ったとは書きません。印象評価とは別に記録します。

表示条件は、ビューポート、ブラウザズーム、文字サイズ変更、DPR を別軸として残します。すべての組み合わせを試すのではなく、折り返しや列構成が変わる代表条件を選びます。

幅 390px で一列になる場合は、デスクトップ表示の縦方向の軸をそのまま縮小するとは限りません。時刻をカード上部へ移し、各カード内部で右端を共有する案も比較します。どの基準を維持し、どの Breakpoint で別の基準へ切り替えるかを記録します。

別の答え方

出演者名の行頭を中心問題にする答えもあります。ただし、今回の課題は時刻から探すことなので、課題への影響を論じるなら時刻列を先に検討する方が直接的です。名前の行頭は、名前から探す別課題で確かめます。

また、カード単位ではなく、セクション見出しとカード列の左端が異なることを観察できます。これは意図された階層差かもしれないため、ページ内の他セクションと反復を確認します。

よくある考え方

4 枚目が 2 px ずれているので、他と同じ値へ直す。

この考え方の注意点

何の Edge がずれているか、なぜ共有されるべきか、知覚できるか、課題へ影響するかが書かれていません。また、状態を示す意図的な差である可能性も残っています。

次のように書けば、比較できます。

4 枚目の時刻要素の Border Box 右端が、他の 15 枚と共有する列から 2 CSS px 外れている。状態表示の挿入で時刻列の幅が変わった可能性がある。状態表示の領域を分け、時刻列の右端だけを固定すると、状態を保ちながら開始時刻を走査しやすくなるのではないか。

必須セルフチェック

• どの要素の、どの基準が共有されているかを指したか
• 物理的な差、ずれの知覚、課題への影響を分けたか
• 幾何学的な基準案と形態に応じた調整案を比較したか

発展セルフチェック

• 整列と良い連続を同義語にしていないか
• Box の Edge と、Glyph の見かけの Edge を区別したか
• 1 px を表示条件のない絶対基準にしていないか
• ずれを意図またはミスと画面だけから断定していないか
• Overlay を見る前に基準線を予想したか
• デスクトップ表示以外でも規則が続くか確認したか
• 日本語、欧文、数字、Icon を同じ Metric で説明していないか

次章へ

揃いは、複数の要素へ共通の基準を与えます。しかし、同じ線へ置かれていても、色、形、角丸、文字の扱いが異なれば、同じ役割には見えないことがあります。反対に、異なる役割が同じ見た目を持てば、誤った規則を教える可能性があります。

次章では、似たものを仲間として見る知覚と、Web 画面が反復によって役割を教える仕組みを扱います。

参考資料

• 入口: York University, “Max Wertheimer, Laws of Organization in Perceptual Forms（英訳）.” 良い連続を含む古典的な知覚的組織化の原典英訳です。現代の Web レイアウト規則を直接述べた資料ではありません。
• 発展: Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception I,” 2012. 良い連続と輪郭統合を含む研究史のレビューです。4.2.2 から読むと本章に接続しやすいでしょう。
• 実験研究: Field, Hayes, and Hess, “Contour integration by the human visual system,” 1993. 局所的な線要素から輪郭を検出する実験です。初学者には難しいため、刺激図と要旨から確認してください。
• デザイン: Ellen Lupton, Thinking with Type. 整列を含む Typography と Layout の入口です。心理学上の法則集ではなく、デザイン実務の文献として読みます。
• デザイン: Josef Müller-Brockmann, Grid Systems in Graphic Design. グリッドを用いた構成の歴史的・実務的資料です。Web にそのまま適用する規格ではありません。
• 公式仕様: W3C, “CSS Box Alignment Module Level 3.” Flexbox や Grid を含む Box Alignment と Baseline Alignment の仕様です。
• 公式仕様: W3C, “CSS Inline Layout Module Level 3.” Line Box と Baseline の詳細を確認する仕様です。初読では Baseline 関連の用語を引く用途で構いません。
• 公式仕様: W3C, “CSS Fonts Module Level 4.” Font 選択と Metric Override を含む CSS Fonts の仕様です。
• 公式資料: Chrome for Developers, “Inspect CSS grid layouts.” Grid Overlay の操作と表示内容を確認できます。公開時には画面が更新されていないか再確認します。
• 公式資料: Chrome for Developers, “Inspect and debug CSS flexbox layouts.” Flexbox の Badge、Overlay、Editor を確認する資料です。

検索キーワード：整列 デザイン、良い連続 知覚、good continuation contour integration、optical alignment typography、CSS baseline alignment、font metrics baseline cap height、DevTools grid overlay