第2章 人間は、近いものを仲間だと思う
フォームを見て、「余白が足りない」と感じることがあります。では、どこの余白が、何に対して足りないのでしょうか。
すべての間隔を広げても、読みやすくなるとは限りません。ラベルと入力欄の間まで広げれば、どのラベルがどの入力欄へ対応するのか、かえって分かりにくくなることがあります。反対に、画面全体を詰めても、関係する要素同士と、次のまとまりまでの距離に十分な差があれば、構造は見える場合があります。
距離は、空いている場所の量ではありません。要素同士の関係を画面へ表す手がかりです。
この章では、「広い」「狭い」という絶対的な評価から離れます。何と何の距離を比べ、その差がどの関係を表しているかを観察します。読み終えたとき、次のように説明できることを目指します。
ラベルと対応する入力欄の距離より、入力欄と次のラベルの距離が狭いため、項目の境界が曖昧に見える。
この章の必修は三つです。
- 何と何の距離かを指す
- まとまり内部と、次のまとまりまでの距離を比べる
- 目的と状態を置き、一つの変更仮説を書く
CSS の詳しい挙動、スペーシングスケール、空白の表現性は発展です。そこを後から読んでも、章末の基礎課題へ取り組めます。
この章で見るもの
- 小さな間隔が、どの要素を一組にしているか
- まとまり内部とまとまり間に、区別できる距離差があるか
- 距離と、ボーダー、背景、色、形、文言が同じ関係を示しているか
margin、padding、gapの値が、画面上のどの関係から決まったか- スペーシングスケールの候補が、目的に合う距離を表現できるか
2.1 列に並ぶ人は、どこまでが同じ組か
駅のホームに 8 人が並んでいます。全員の間隔がほぼ同じなら、一本の列に見えるでしょう。2 人ずつの間隔だけが狭ければ、4 組が並んでいるように見えます。左の 4 人と右の 4 人の間だけが広ければ、二つの集団に見えるかもしれません。
人の服装も姿勢も変えず、間隔だけを変えても、見えるまとまりは変わります。
ここで大切なのは、何 cm なら一組に見えるかではありません。同じ画面内で、どの間隔が他より小さく、どこで間隔の関係が変わるかです。
たとえば、隣り合う距離が次のようになっているとします。
人 8 人 24 人 8 人 24 人 8 人
8 という小さな間隔と 24 という大きな間隔が反復すれば、小さい間隔で結ばれた人同士が一組として見えやすくなります。8 という数値自体がまとまりを作るのではありません。周囲の 24 との関係が、まとまりの手がかりになります。
距離だけで関係は決まらない
近くに立つ 2 人が、互いに背を向け、別々のまとまりへ話しかけていたらどうでしょうか。距離は一組を示し、身体の向きや会話は別のまとまりを示します。
日常の場面では、距離だけでなく次の手がかりが重なります。
- 同じ方向を向いている
- 同じ服装や名札を持つ
- 同じ机や囲いの中にいる
- 会話や作業を共有している
- 同じ列へ並ぶという状況を知っている
Web 画面でも同じです。近さは有力な手がかりですが、色、形、境界、整列、言葉の意味、操作結果と競合します。
この章では、まず距離だけを変えた比較で働きを見ます。その後で、他の手がかりが加わる画面へ戻ります。
2.2 フォームで、対応が曖昧に見えるとき
フォームは、距離による関係が現れやすい場所です。
距離を動かす前の三つの問い
数値を試す前に、情報構造と失敗の影響を確認します。
- 利用者は、どこからどこまでを一つの入力単位として扱うか
- どの順番で探し、読み、入力し、修正するか
- 誤って一組に見えた場合、どんな間違いや損失が起こるか
たとえば病院予約で、診療科、希望日、連絡先の対応を誤れば、予約内容の訂正や再入力が必要になり、受診手続きが遅れるかもしれません。一方、アンケートでも、回答内容や利用目的によっては誤入力の影響が大きくなります。画面の種類だけで重大さを決めず、具体的な失敗場面を置いて距離案の優先順位を考えます。
氏名のラベル、その入力欄、Email のラベル、その入力欄が縦に並んでいるとします。画面上には、少なくとも二種類の距離があります。
- ラベルと対応する入力欄の距離
- 入力欄と次のラベルの距離
この二つが同じなら、すべての要素が均等な列に見えます。どこからどこまでが一項目かは、言葉を読まなければ分かりにくくなります。
ラベルと入力欄の距離より、次のラベルまでの距離が大きければ、一項目の境界を距離でも示せます。
良い例と悪い例の二択にしない
比較図では、ラベル―入力欄間を 8、12、16、20、24 と段階的に変えます。次の項目までの距離は固定します。
8 なら正解、24 なら不正解、と覚えるためではありません。どのあたりから対応関係が曖昧に感じられるか、その変化を自分で観察するためです。図 F03 では、注釈のないフォームを先に観察し、その後で意味上のまとまりを重ねます。ラベル―入力欄間だけを変える系列と、項目間だけを変える系列も分けます。
境界が急に切り替わるとは限りません。はっきり一組に見える条件と、はっきり分離して見える条件の間には、判断の割れる中間があります。文字の大きさ、入力欄のボーダー、画面幅、利用者の経験が変われば、中間の見え方も変わります。
エラーメッセージが入ると、距離関係も変わる
通常状態では、ラベルと入力欄が近く見えていたとします。入力後にエラーメッセージが現れると、入力欄と次のラベルの間へ新しい要素が入ります。
エラーメッセージが入力欄から遠く、次のラベルへ近ければ、どの項目のエラーか分かりにくくなる可能性があります。これは表示上の距離から立てた仮説であり、実際の取り違えを観察した結果ではありません。長いエラー文で折り返しが増えれば、項目全体の高さも変わります。
通常状態だけを見て決めた距離は、状態が変わると別の関係になります。Web の距離設計では、次の状態も確認します。
- フォーカスインジケーターが現れた状態
- エラーメッセージが 1 行または複数行ある状態
- Optional／Required の説明が加わる状態
- 長いラベルへ翻訳された状態
- 200% ズームで折り返した状態
- 狭いビューポートで一列へリフローした状態
確認するときは、何を合格とするかも書きます。文字が欠けない。ラベル、説明、エラーが対応する入力欄の近くに見え、プログラム上の関係も正しく伝わる。フォーカスインジケーターが切れない。長文が重ならない。意図しない二次元スクロールを要求しない。これらを検証条件ごとに記録します。
視覚的な近さと、コード上の関連は別である
ラベルを入力欄の近くへ置いても、それだけでプログラム上の関連は作られません。HTML では label 要素とフォームコントロールを関連づけます。ラジオボタンやチェックボックスの集合には、共通の問いを伝える代表的な方法として fieldset と legend があります。すべての視覚的なまとまりへ fieldset を使うわけではありません。
説明文やエラーメッセージは、見える位置だけでなく、どの入力欄の説明・状態なのかを支援技術へ伝える必要があります。aria-describedby や aria-invalid が使われる場合もありますが、属性名を付ければ自動的に解決するわけではありません。表示する時機、読み上げ順、動的な通知、フォーカスの移動、修正後の状態まで検証画面で確認します。
視覚的な距離、Accessible Name、説明、まとまり、状態通知は、別々の証拠として確認します。
反対に、コード上で関連があっても、視覚的な距離が意図と逆なら、画面を見ている人にはまとまりが伝わりにくいことがあります。
見た目のまとまりと、意味上のまとまりは同じではありません。両方が、それぞれの方法で関係を伝える必要があります。
2.3 近接の原則――近さがまとまりを作る
第1章では、ばらばらの刺激がまとまりとして知覚されることを扱いました。その知覚的グルーピングの手がかりの一つが、近接です。
簡単に言えば、近いもの同士は同じまとまりとして知覚されやすい、という傾向です。
点の大きさ、形、色を同じにし、水平方向の間隔だけを小さくすると、横の組が見えやすくなります。垂直方向の間隔だけを小さくすると、縦の列が見えやすくなります。
Max Wertheimer が 1923 年に示した古典的な例でも、間隔の小さい要素同士がまとまりとして組織される Factor of Proximity が論じられています。
「近い」を絶対値だけで定義しない
この説明から、「要素同士を 8px 以内に置けばまとまりになる」と結論づけることはできません。
近さは、配置全体の中での関係です。8px が小さく見えるかどうかは、周囲の距離、文字サイズ、要素の面積、画面のズーム、境界、背景などによって変わります。
二つの距離を考えます。
ラベル ─ 12 ─ 入力欄 ─ 16 ─ 次のラベル
12 と 16 の差は小さいため、対応関係が十分に分かれないかもしれません。
ラベル ─ 12 ─ 入力欄 ─ 36 ─ 次のラベル
ラベル―入力欄の距離は同じ 12 ですが、次項目までの距離との差は大きくなりました。この画面では、一項目の境界が見えやすくなる可能性があります。
ここから作れる仮説は、「12px が正しい」ではありません。
ラベル―入力欄間を固定し、項目間だけを広げると、対応するラベルと入力欄を一組として報告する人が増えるのではないか。
実際にそうなるかは、比較と人の行動で確かめます。
数値の読み方
本章の 8、12、24 などは比較条件であり、推奨値ではありません。CSS px は物理 px でも、見る人の視角でも、知覚された距離でもありません。フォーム図では、ラベルの行ボックス下端から入力欄のボーダー上端までを基本の測定区間とし、CSS ボックスの距離と、文字の形から感じる見かけの距離を区別します。ズーム、ビューポート、フォント、表示密度も記録し、同じ条件内の比較として使います。
原則は設計目的を決めない
近接の原則は、何を一組にすべきかを教えません。
住所の郵便番号と都道府県を一組に見せるか。カードのタイトルとカテゴリーを一組に見せるか。ナビゲーションで「製品」と「料金」を近づけるか。それは情報の意味、利用者の目的、業務上の手順によって決めます。
目的を決めた後で、距離がその関係を支えているかを見る。その順序が必要です。
2.4 「余白を増やす」から「関係を距離へ変換する」へ
「余白を増やしてください」というレビューは、変更量を伝えているようで、設計理由を伝えていません。
余白を、関係の種類へ分けます。
コンポーネント内部の距離
ボタンの文字と外形の間、カードの端と内容の間など、一つのコンポーネント内部にある距離です。内容を囲む形、操作領域、密度、調子に関わります。
要素間の距離
タイトルとメタ情報、アイコンとラベル、ナビゲーション項目同士など、並ぶ要素の関係を示します。
まとまり間の距離
一つのフォーム項目と次の項目、カード群と次のセクション、ヘッダーと主内容など、意味上のまとまりを分ける距離です。
同じ 16px でも、ボタン内部にある場合と、セクション間にある場合では役割が違います。数値が揃っていることと、関係が適切に見えることは同じではありません。
異なる関係を距離で区別する
画面を作る前に、情報同士の関係を言葉で書きます。
氏名ラベル と 氏名入力欄：直接対応する
氏名入力欄 と エラー：同じ項目の状態を説明する
氏名項目 と Email項目：同じForm内だが別の入力単位
個人情報まとまり と 支払情報まとまり：目的の異なる大きなまとまり
この関係の違いを、距離だけでなく、見出し、境界、背景、HTML の意味構造へ表します。距離は関係を示す手がかりの一つであり、あらゆる関係を一つの大小順へ変換するものではありません。
距離は「関係が強いほど小さく、弱いほど大きい」という一方向の規則ではありません。操作対象同士が近すぎれば誤操作が起きることがあります。密接な情報でも、読みやすい行間やタッチターゲット間隔が必要です。距離は、意味、操作、安全、表現の複数条件を調整した結果です。
空白の形を見る
発展――ここからは近接の原則だけでは説明しきれません
空白には量だけでなく、形があります。
空白の輪郭、縦横比、方向、連続、分断、重心を観察します。主題の周囲へ連続した空間を置くと静けさを感じる場合がありますが、この解釈は普遍的ではありません。情報を狭い領域へ集めた構成が速報的に読まれるかどうかも、媒体、文化、Genre、Typography、色、画像、Brand の慣習によって変わります。
F05 では、同じ目的と素材から作った方向性の異なる案を比べます。一変数実験とは呼びません。各案について、意図、画面で観察できる構成、副作用、別の読みを記録します。空白を機能上の分離だけで評価せず、表現意図と受け手の経験へ戻ります。
距離案のトレードオフを決める条件
| 条件 | 確認すること |
|---|---|
| 目的 | 探す、比較する、入力する、監視するのどれか |
| 失敗時の影響 | 誤対応が不便、損失、安全問題のどれにつながるか |
| 利用頻度と熟練度 | 初見中心か、反復する業務か |
| 道具と環境 | タッチ、キーボード、ズーム、移動、時間圧があるか |
| 内容変動 | エラー、翻訳、長文、動的追加があるか |
| 表現 | 維持したい密度、速度感、静けさ、Brand らしさは何か |
病院予約と文化祭一覧へ同じ距離案を適用しないのは、好みが違うからだけではありません。誤りの影響、課題、利用頻度、内容変動が違うからです。ただし、どちらが常に高リスクかは画面名から決まりません。想定する人、行動、失敗、その結果まで書いて比較します。
2.5 カード、ナビゲーション、一覧で距離を読む
同じ距離値でも、置かれた文脈によって意味が変わります。
カード内部
カードの Title と補助情報の 16px は、内容の階層を分ける距離かもしれません。ボーダーや背景がカード全体を囲んでいれば、内部の距離が多少大きくても一つのカードとして見えます。
ナビゲーション
ナビゲーション項目同士の 16px は、選択肢を並列に見せる距離です。項目の文字数、クリック／タップ領域、現在位置の表示によって、実際に見える間隔は変わります。
データテーブル
テーブル行内の 16px は、情報密度と走査のしやすさに関わります。業務ダッシュボードでは、高密度でも列の揃いと意味が明確なら、目的に合う場合があります。
「16px だから同じ余白」とまとめることはできません。何と何の距離で、周囲にどんな境界や反復があり、利用者が何をしようとしているかを見ます。
ボーダーを加えたら、距離の意味も変わる
カードにボーダーを加えると、カード間の距離が小さくても境界は見えやすくなります。ナビゲーション Item に区切り線を加えると、近さによる一続きの関係が弱くなる場合があります。
距離とボーダーを同時に変えると、どちらが見え方を変えたのか分かりません。比較するときは、まず距離だけ、次にボーダーだけを変えます。実際の設計案を評価するときは、最後に全体を戻して見ます。
2.6 margin、padding、gap は何を表現しているか
実装と接続する――章末の基礎課題の後に読んでも構いません
画面上で必要な距離を判断した後で、CSS の構造へ接続します。
CSS ボックスモデルでは、内容領域の周囲に余白、ボーダー、マージンの領域があります。gap は Grid、Flex、段組みレイアウトで、ボックス間の溝を指定します。行／列という語が単純な上下／左右を表すとは限らず、レイアウト方式や書字方向によって軸が変わります。
Property 名から設計理由を決めない
初学者向けには、次のように説明されることがあります。
paddingは内側の余白marginは外側の余白gapは並んだ要素の間隔
Box の位置関係を理解する入口としては便利です。しかし、画面上の関係をどの Property へ持たせるかは、内側／外側だけでは決まりません。
同じ見た目の距離を、親の gap でも、子の margin-block-start でも作れる場合があります。どちらを使うかは、距離を誰が所有するか、要素の順序や数が変わるか、例外をどう扱うかによって判断します。
gap が向く場合
同じ Container に並ぶ Sibling の間隔を、親がまとめて管理したい場合です。項目が増減しても、先頭や末尾に不要な外側 Margin を作らずに済みます。
ただし、すべての兄弟要素間が同じ関係とは限りません。フォーム内で、ラベル―入力欄と項目間へ同じ gap を適用すれば、関係の差を表現できません。必要ならコンテナを意味まとまりごとに分けます。
margin が向く場合
要素が、自分より前後の内容との距離を持つ設計もあります。Typography の Flow や、特定要素の前だけセクション Gap を作る場合です。
ブロック方向の流れでは、隣接するマージンが、整形文脈、親子関係、回り込み解除などの条件によって相殺される場合があります。指定した二つのマージンが単純に足されるとは限りません。図では指定値、相殺が起きる条件、画面で観察されるボーダー端間の距離を分けます。
padding が向く場合
内容とボーダー／背景の間隔を作り、コンポーネントの内部領域を定義する場合です。ボタンでは見た目の空間だけでなく、操作領域にも関わります。
ただし、padding を増やせば常に操作しやすいとは限りません。隣の Target との距離、折り返し、ビューポート、入力方法も確認します。操作対象の大きさは第14章で詳しく扱います。
Logical Properties で方向を固定しない
margin-left や padding-top のような Physical Property だけで考えると、Writing Mode や Text Direction が変わったときに、意図した関係と実装がずれることがあります。
margin-inline-start や padding-block などの Logical Property を使うと、Inline／Block 方向を基準に距離を表せます。これは Direction や Writing Mode が変わっても、関係の意図を保ちやすくする一手段です。国際化全体を保証するものではありません。Flex／Grid の配置、方向を持つ Icon、双方向 Text、DOM 順、フォーカス順も別々に確認します。
画面から CSS へ進む順序
- 何と何が一つの関係かを書く
- 内部、要素間、まとまり間の距離を比べる
- 状態とビューポートを変えても関係が保たれるか見る
- HTML の意味構造と Container を決める
gap、margin、paddingなどへ責任を割り当てる- ブラウザで幅、ズーム、内容、状態を変えて確かめる
CSS の値から画面を決めるのではなく、画面で表したい関係から CSS へ進みます。
2.7 スペーシングスケールは判断を代行しない
発展――デザインシステムへ接続する
画面ごとに 13px、17px、29px と、その場で距離を決め続けると、似た関係へ異なる値が増えます。変更時には、どの値が同じ役割か分からなくなります。
そこで、利用できる距離の候補を限定したスペーシングスケールが使われます。
4, 8, 12, 16, 24, 32, 48
この列は一例です。4px 刻み、8px 刻み、倍数列、等比に近い列、ビューポートに応じて変わる流動的なトークンなど、さまざまな設計があります。
Scale が助けること
- 似た関係へ同じ候補を使いやすくする
- デザインとコードで値を共有しやすくする
- 全体の密度をまとめて調整しやすくする
- 例外や未整理の値を見つけやすくする
Scale が決めてくれないこと
- どの要素を一つのまとまりにするか
- どの関係にどの段階を使うか
- Typography や画像との釣り合い
- タッチターゲットやエラー表示の条件
- Brand らしい空白の調子
- 狭いビューポートで距離をどう変えるか
「8px Grid を使っているから正しい」とは言えません。8 という基準は、関係の意味も、読みやすさも、アクセシビリティも保証しません。
Scale が粗すぎる場合
候補が 4、8、16、32、64 だけなら、16 では近すぎ、32 では遠すぎる関係が出るかもしれません。例外を許さなければ、Scale へ画面を合わせることになります。
Scale が細かすぎる場合
4、6、8、10、12、14、16 と細かく用意すると、ほとんど自由値と同じになり、選択理由を共有しにくくなります。
Scale の設計は、候補数、表現幅、例外、変更容易性のトレードオフです。実際の画面を作り、必要な関係を表現できるか確かめながら調整します。
トークンの層にも判断が現れる
space-3 のような基礎トークンを、form-field-gap のような意味トークンから参照し、必要なら booking-form-field-gap のようなコンポーネント固有トークンへ閉じる設計があります。意味名なら常に優れるのではありません。変更をどこまで波及させ、どこへ閉じ込めるかで層を選びます。詳細は第4章と用語集へ送ります。
2.8 距離と競合する別の手がかり
距離だけを整えても、別の手がかりが逆の関係を示していれば、意図したまとまりは伝わらないことがあります。
共通領域
離れた二つの要素でも、同じボーダーや背景で囲まれると、一つの領域に属して見えることがあります。
類同
近くに異なる色の要素が並び、離れた場所に同じ色や形の要素があると、似たもの同士のまとまりが見える場合があります。類同は第4章で詳しく扱います。
連結
線や面で物理的につながって見える要素は、一つの構造として知覚される場合があります。
文言の意味
「開催日」と日付、「会場」と住所のように、言葉の意味が強い対応を作ります。距離を見やすく整えても、ラベルの文言が曖昧なら関係は理解できません。
どの原則が一番強いかを暗記しない
共通領域は近接より強い、連結はさらに強い、と固定順位を覚えることが目的ではありません。どの手がかりが働くかは、刺激条件、課題、過去の経験によって変わります。
画面では、次の順で観察します。
- 距離だけを見る
- 境界、背景、色、形、連結を見る
- 文言と情報の意味へ戻る
- 手がかりが同じ関係を示しているか書く
- 競合する場合、どちらを優先してほしいか目的へ戻る
- 一つだけ変えた比較を作る
たとえば、距離を固定したまま共通の囲みだけを加えます。
囲みを加えると、囲みの中を一組として報告する人が増えるのではないか。
この仮説を比較画面で確かめます。結果が予想と違えば、「近接の原則に反した」と人を評価するのではなく、他の手がかりや課題を調べます。
2.9 問い――どの距離が、どの関係を壊しているか
まず病院予約フォームを観察します。カード一覧は発展課題として分けます。
観察条件
ケース A 病院予約フォーム
- 人：この病院を初めて利用する人
- 課題：診療科、希望日、連絡先を入力して予約する
- 道具：幅 390px の画面、タッチ入力、200% ズームも確認する
- 状態：通常、フォーカス、エラーメッセージ表示
基礎の問い
- どの二つの距離を比べると、項目の境界を説明できますか。
- 「余白が足りない」を、比較相手を含む文へ書き換えてください。
- 一つだけ変えるなら、どの距離を変え、何が変わると予想しますか。
- エラー状態で、距離、意味上の関連、操作の何を確認しますか。
答えの例――6 段階で書く
1. 場所を指す（問い 1）
病院予約フォームでは、「希望日」の入力欄と、その下の「連絡先」ラベルが近く見えます。
2. 距離を比較する（問い 1・2）
「希望日」ラベルと対応する入力欄の距離より、入力欄と次の「連絡先」ラベルの距離が小さくなっています。項目内部と項目間の距離関係が逆です。
3. 概念を候補として加える（問い 2）
近接による知覚的グルーピングから考えると、「連絡先」ラベルが上の入力欄へ属して見える可能性があります。用語を使わなくても、二つの距離を指せていれば観察は成立します。
4. 別の要因を残す（問い 4）
一方、入力欄の上にラベルを置くという慣習や、ラベルの文言から対応を理解できる可能性もあります。エラーメッセージのボーダーと色が、別のまとまりを作っているかもしれません。
5. 変更仮説を作る（問い 3）
ラベル―入力欄間を固定し、項目間だけを広げると、各項目の境界を判断しやすくなるのではないか。ただし、フォーム全体が長くなり、スクロール量が増える可能性があります。
6. 確かめ方を書く（問い 4）
二つの評価を分けます。知覚の比較では「どこからどこまでを一項目として見たか」というまとまりの報告を主要指標にします。入力課題では、ラベルと入力欄の誤対応や入力誤りを主要指標にし、停止、戻り、エラー修正、完了時間を補助指標として記録します。見た印象と課題成績を一つの結果へまとめません。提示順を入れ替え、前の案を見た影響も記録します。一人の結果を一般化せず、対象者、課題、環境、試行順まで含めて解釈します。
表示条件も一つの「ズーム」にまとめません。ビューポート幅は 1280、390、320 CSS px、ブラウザズームは 100%、200%、400%、文字サイズ変更は 100%、200%、入力方法はマウス、タッチ、キーボードという別の軸として記録します。全組み合わせを機械的に試すのではなく、折り返し、横スクロール、操作順の崩れが起きそうな条件を選びます。WCAG の文字サイズ変更とリフローは、それぞれの達成基準の条件に沿って別に確認します。
発展課題――カード一覧へ移す
- 人：出演内容を比較したい来場者
- 課題：興味のある出演者を見つけ、詳細へ進む
- 道具：デスクトップ表示とモバイル表示
- 状態：通常と長い Title。画像未読込は第22章の可変状態で再訪する
次の三点だけを考えます。
- カード内部、カード間、セクション間のうち、どの距離を比較するか
- 距離とボーダーが同じ境界を示しているか
- 変えずに残したい反復や揃いは何か
発展課題の答えの例
カード同士の距離が小さくても、各カードに明確な背景とボーダーがあれば、境界は見えます。距離を広げるより、カード内部の Title と出演時刻を近づけ、カード間の反復を保つ方が、比較しやすくなるかもしれません。
長いタイトルでカードの高さが変わる場合、縦方向の距離だけでなく、ボタン位置の揃いも関わります。この問題は近接だけでは説明できません。第3章の整列、第4章の類同も説明候補になります。
よくある考え方
余白が足りないので、全体的に 16px 増やします。
この考え方の注意点
どの距離が、どの関係に対して不足しているのかが分かりません。すべてを同じだけ広げれば、対応する要素同士まで離れます。画面が長くなり、比較もしにくくなるかもしれません。
次のように、距離の対象と予想を書くと検討できます。
カード内部の Title―時刻間は 8px ですが、カード間も 8px です。カード内部を固定し、カード間だけを 24px へ変えると、各出演者の境界が見つけやすくなるのではないか。
24px は答えではなく、比較案の一つです。ボーダーを加える、背景を変える、カード構造を見直すという別案もあります。
必須セルフチェック
- 何と何の距離かを指したか
- まとまり内部と、次のまとまりまでの距離を比べたか
- 目的と状態を置き、一つの変更と予想される結果を書いたか
発展セルフチェック
- ボーダー、背景、類同、連結、文言との競合を見たか
- 通常、フォーカス、エラー、長文、ズーム、リフローを確認したか
- 視覚的まとまりと HTML 上の関係を別々に確認したか
- スペーシングスケールの候補へ画面を無理に合わせていないか
- 機能上の分離だけでなく、空白の形と表現意図を見たか
- 変えずに残すべき関係を書いたか
次章へ
距離は、要素同士の関係を見せる手がかりです。しかし、縦に並ぶ要素の左端が少しずつずれていれば、距離が整っていても流れは途切れて見えることがあります。
次章では、画面上に描かれていない基準線を探します。左端、右端、中央、文字のベースラインが、どのように連続と秩序を作るかを見ていきます。
参考資料
- 入口: York University, “Max Wertheimer, Laws of Organization in Perceptual Forms（英訳）.” 1923 年の原著の英訳です。“The Factor of Proximity”の点列例が本章に対応します。英語ですが、図と該当見出しから読めます。
- 発展: Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception I,” 2012. 近接を含む知覚的グルーピングと後続研究を整理したレビュー論文です。まとまり ing Principles の図と説明から読むとよいでしょう。
- 原典: Max Wertheimer, “Untersuchungen zur Lehre von der Gestalt. II,” 1923. ドイツ語の原著です。英訳と図を照合するための資料です。
- 発展: Stephen E. Palmer, “Common region: A new principle of perceptual grouping,” 1992. 共通領域が近接とは別のまとまり手がかりになることを調べた論文です。
- 公式資料: W3C Web Accessibility Initiative, “Grouping Controls.” 関連するフォームコントロールを視覚的にもコード上でもまとめる例を示す資料です。
- 公式資料: W3C, “CSS Box Model Module Level 3.” 内容、余白、ボーダー、マージンの領域とプロパティを定義する仕様です。まず“2 The CSS Box Model”を確認してください。
- 公式資料: W3C, “CSS Box Alignment Module Level 3: Gaps Between Boxes.”
gapが Flex、Grid 等の Box 間隔へどう適用されるかを確認する仕様です。 - 公式資料: W3C Web Accessibility Initiative, “エラー Identification.” 入力エラーを特定し、文字で説明する達成基準の解説です。距離だけでエラー通知が成立するとは考えません。
- 公式資料: W3C Web Accessibility Initiative, “User Notifications.” フォームの成功、エラー、進行状況を通知する実装例への入口です。
- 公式資料: W3C, “CSS Logical Properties and Values Level 1.” 物理方向ではなく、ブロック／インライン方向で余白を指定する仕様です。
- 公式例: U.S. Web Design System, “Spacing units,” GOV.UK Design System, “Spacing.” 異なるスペーシング尺度の実例です。心理学的な正解の根拠には使いません。
- 公式資料: W3C Web Accessibility Initiative, “Resize Text” と “Reflow.” 文字サイズ変更とリフローを別の条件として確認する資料です。
検索キーワード：近接の原則、知覚的グルーピング、factor of proximity、perceptual grouping proximity、common region grouping、CSS box model gap