第9章　人間は、画面全体にリズムと重心を見る

ボタンの色を直し、カードの余白を整え、見出しのフォントを選び直しました。部品を一つずつ見ると改善しています。それでもページ全体へ戻すと、どこか落ち着かないことがあります。

部分は、全体の中で意味を持ちます。一つの見出しを強くすれば、ほかの見出しとの大きさの関係が変わります。一つのカードを広げれば、余白の形と画面の重心が変わります。すべての部品を同じ品質で強くすれば、全体として競合することもあります。

本章では、大きさの関係、余白、リズム、密度、重心、画像と文字の関係を、画面全体を見るための造形語彙として扱います。「重心」は物理的な質量、「視線の流れ」は測定済みの眼球運動を意味するとは限りません。観察と設計意図を言葉にするための仮説です。

構成の語彙は、絵画、書、版面、写真、広告、映画、建築などの媒体史の中で育ってきました。画面へ借りるとき、固定された枠、紙の見開き、時間を持つ映像、幅と内容が変わる Web の違いを残します。三分割法や黄金比を、歴史を越えた自然法則として扱いません。

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

1. 部品だけでなく、画面全体の面積・位置・反復・空白を記述する
2. 視覚的な重さ、釣り合い、視線、タスクを同一視しない
3. 同じ内容を異なる意図で構成し、レスポンシブ状態まで比較する

この章で見るもの

• 部品の改善が全体を変える仕組み
• 大小の差が作る大きさの関係
• 空いている場所が作る形
• 反復と変化によるリズム
• 見た目の密度と情報の密度
• 造形上の重心と、見る順序の仮説
• 画像と文字が互いの意味を変える関係
• グリッド、DOM、見える秩序の違い

9.1 部品を直しても、全体がよくなるとは限らない

文化祭トップページに、ヒーロー領域、開催日時、プログラムカード、ニュース、スポンサー、申込ボタンがあります。プログラムカードだけを見ると、見出しが小さく、ボタンが弱く見えます。そこで見出しを大きくし、ボタンを鮮やかにします。

カード単体では役割が明確になりました。しかし、同じ修正をすべてのカードへ適用すると、ページ内に大きな見出しと主要に見えるボタンが十個並びました。ヒーロー領域のタイトルや本当の申込操作と競合します。

部品だけで見る場合とページ全体で見る場合

部品単体では、内部の階層、状態、操作を確認します。ページ全体では、次を追加します。

• 画面内で占める面積
• 同じ強さの要素数
• ページの主題との位置関係
• 前後セクションとの間隔
• 同時に見える操作
• スクロールしたときの反復

「ボタンをもっと目立たせる」が局所的に正しくても、全体の主要操作を曖昧にする場合があります。修正後は必ずページへ戻します。

Web の全体は一枚に固定されない

ページ全体といっても、利用者が一度に見る範囲はビューポート、ズーム、内容量、状態で変わります。長いページの全体スクリーンショットは構成を見る資料になりますが、実際の一瞬のビューポートではありません。ページ全体、現在見えている範囲、スクロールの順序を分けます。

9.2 大小の差が大きさの関係を作る

見出し 24px、本文 20px、補足 18px。値は違いますが、遠目には同じ強さに見えるかもしれません。反対に、見出し 64px、本文 16px なら大きな差が生まれます。

ここでいう大きさの関係は、単一要素の大きさではなく、要素間の関係です。

• ページタイトルとセクション見出し
• ヒーロー画像とサムネイル
• 主要操作と補助操作
• 主内容と補足情報
• ページ全体と内部部品

比率は出発点であって正解ではない

モジュラースケールや一定の比率は、候補を作り、反復可能にする道具です。しかし、1.25 や黄金比を使えば視覚的階層が正しくなるわけではありません。フォントの字面、内容の長さ、言語、ビューポート、役割が関わります。

図 F02 では、同じ要素群を次の三条件で比べます。

1. ほぼ差がない
2. 数学的に連続する小さな差
3. 役割へ対応させた不均一な差

三番目が常に最良ではありません。静かな一覧では小差が合うかもしれず、短時間探索では大差が必要かもしれません。目的とタスクを書きます。

大きさだけで階層を作らない

位置、間隔、太さ、色、画像、余白も階層へ関わります。すべてを大きさで表せば、画面が際限なく拡大します。一つの役割差をどの造形変数へ翻訳するかを選びます。

9.3 余白は空きではなく、形である

余白を「何も置いていない場所」と考えると、余った場所、削ってもよい場所に見えます。画面を矩形化すると、要素の形と同時に、その間を通る空白の形が見えます。

置かれた形と残った形

文字、画像、ボタンなどが占有する形と、その周囲に残る形を分けて観察できます。これは良い／悪いを決める分類ではありません。

残った形には、次の違いがあります。

• ページを縦に貫く連続した空白
• セクション間の帯
• カード内に閉じた空白
• 要素間の細い通路
• 片側だけに残る大きな空白
• 画像の中で文字を置ける空間

さらに、包む／分ける／通す／止める／圧迫する／開放するという関係の質を記します。残った形は、背景色ピクセルの連結領域として計算したものと、知覚上の空間として指したものを分けます。

「余白が多い」だけでなく、どの空白がどこへ続き、何を分け、何をつないでいるかを書きます。

空白率は意味を説明しない

画面の 70% が空白でも、必要な情報が端へ追いやられ、探索しにくい場合があります。空白率 20% でも、比較タスクに適した高密度な表かもしれません。面積の数値と、まとまり、階層、タスクを分けます。

レスポンシブで空白の形は変わる

デスクトップの左右余白は、モバイルで上下の間へ変換される場合があります。単純にすべて半分にすると、タッチ対象、段落、セクション間の関係が変わります。幅を変えながら、残った形を再び見ます。

9.4 反復と変化がリズムを作る

カードが同じ幅、同じ内部配置、同じ間隔で並ぶと、反復する単位が見えます。途中で一つだけ大きなカードが入れば、反復が途切れ、注意や意味の例外になる可能性があります。

本章でいうリズムは、次の反復と変化を記述する造形語彙です。

• 大きさ
• 間隔
• 形
• 色
• タイポグラフィ
• 整列
• 内容の長さ
• 画像の切り抜き

心拍や音楽の拍と同じ生理・時間現象として定義しません。スクロールによって順に現れる Web では時間的な経験も生まれますが、まず何が何回、どの間で反復するかを指します。

等間隔だけがリズムではない

8px 刻みの間隔スケールは一貫した値を作れます。しかし、すべてを等間隔にすれば、関係の強弱が消えます。セクション内は短く、セクション間は長くする周期や、見出し前後の非対称な間もリズムを作ります。

例外を意図として読む

注目プログラムだけ幅が 2 倍なら、その変化は強い手がかりになります。意図された切れ目か、内容都合で壊れたレイアウトかを確認します。例外をすべて消すのでも、目立つから残すのでもありません。

9.5 密度が高いことと、混乱していることは同じではない

ダッシュボードには多くの数字、グラフ、表、フィルターがあります。マーケティングページより見た目の密度が高く見えます。しかし、監視や比較のタスクでは、同時に多くの情報が見えることが役立つ場合があります。

密度を少なくとも四つに分けます。

計数前に単位を固定します。ピクセル密度はビューポート内の二値化後占有率、要素密度は注釈した知覚単位数、情報密度はタスクに必要な項目数、操作密度はタブ停止位置やポインター対象の数として本書内比較します。値は閾値ではなく、同じ注釈規則の画面を比べる記録です。

ピクセル密度、インク密度

画面のうち、文字、画像、境界線、色面などが占める割合です。二値化条件によって値が変わります。

要素密度

ビューポート内にいくつの要素や部品があるかです。DOM ノード数とは同じではありません。

情報密度

意味のある項目、比較軸、状態、関係がどれだけ含まれるかです。数え方にはタスクと領域の定義が必要です。

操作密度

操作可能な対象、選択肢、同時に判断するコントロールの数と配置です。

密度が高いという観察から、認知負荷が高いと即断しません。第11章で扱う記憶・処理条件、利用者の熟練、探索／監視／学習タスクを確認します。

低密度でも迷う

一画面に一つのボタンしかなくても、ラベルが曖昧で前の情報を覚える必要があれば難しいかもしれません。高密度でも、まとまり、整列、比較軸が明確なら効率的な場合があります。

9.6 画面の重心と視線の流れ

大きな暗い画像が右上にあり、左下には短い文字だけがある画面を見て、「右上が重い」と言うことがあります。視覚的な重さと釣り合いは、構成を話す有用な語彙です。

ただし、視覚的な重さは物理質量のように一つの式で決まるとは限りません。次が候補になります。

• 面積
• 位置と中心からの距離
• 明度／コントラスト
• 色
• 形と向き
• 細部と質感
• 顔や意味のある画像
• 文字の量と意味
• 動き

重心計算は重ね合わせる見方の一つ

ピクセルや明度から画像の重心を計算できます。研究でも釣り合いを数理化する試みがあります。しかし、その点を「人間が感じる正しい重心」とはしません。幾何学上の中心、計算点、観察者が指した釣り合いの点を別の層で比べます。

計算ではビューポート内のラスタ画像を固定サイズへ変換し、透明度を背景へ合成し、sRGB の相対輝度から重みを作る一方式を使います。切り抜き、背景、式を変えれば点も変わります。釣り合いの点は、参加者が「最も釣り合う中心」として一回指した座標と確信度を記録します。初見報告は、3 秒提示後に最初に気づいた要素名を答える別タスクです。

「視線が流れる」を観察へ戻す

視線計測なしに、実際の眼球軌跡を知ったとは言えません。次のように書き換えます。

設計意図として、タイトル→日時→申込ボタンの順を想定した。私は初見で画像→タイトル→日時と報告した。タスクでは日時を 6 秒で発見した。

意図、初見報告、視線データ、タスク結果を分けます。

視線計測を行う場合も、注視、サッカード、視線の軌跡、関心領域、タスク、調整品質を記録し、視線を注意や理解と同義にしません。

F 型／Z 型をテンプレートにしない

Web で特定の読み取りパターンが観察される研究や実務報告はありますが、ページ、言語、タスク、デバイス、参加者を越えた普遍軌道ではありません。F 型に配置すれば必ず読まれる、とは教えません。

9.7 画像と文字は、互いの意味を変える

「静かな夜の演奏会」という見出しに、暗いステージ写真を添える場合と、笑顔の観客写真を添える場合では、同じ言葉の受け取り方が変わります。

画像と文字の関係を観察します。

• 同じ意味を反復する
• 文字にない情報を補う
• 意図的な緊張や矛盾を作る
• 画像が背景装飾として働く
• キャプションが画像の読み方を限定する
• 切り抜きによって主題や方向が変わる

「顔が向いた先へ必ず視線が行く」と法則化しません。顔、視線方向、文字位置、タスク、文化、切り抜きを分けて確かめます。

写真上の文字の問題を構成だけにしない

写真上の文字は、構成、コントラスト、レスポンシブ時の切り抜き、画像読み込み、代替テキスト、内容更新の問題を持ちます。デスクトップで空いていた場所が、モバイルの切り抜きで顔や明るい部分と重なることがあります。ブレークポイントごとに固定スクリーンショットだけを見るのではなく、幅を連続的に変えます。

9.8 グリッドは秩序を作る道具であって正解ではない

グリッドを使うと、列、間隔、整列を反復できます。しかし、グリッドを引いただけで意味の階層や釣り合いが生まれるわけではありません。

四つの層を分けます。

1. 内容の意味上のまとまり
2. DOM 順
3. CSS グリッドのトラックと配置
4. 画面で知覚される整列とまとまり

これらは関係しますが、同一ではありません。意味上近い二要素が別の列へ離れ、グリッド上は美しく揃っても関係が弱く見えることがあります。

内容がトラックを変える

CSS グリッドには、固定、可変、内容に応じたトラックサイズがあります。長い名前、翻訳、ズーム、画像の縦横比で実際に使われるサイズが変わります。デザインツールの 12 カラムの重ね表示と、ブラウザが計算したトラックを同一視しません。

見える順序と読む順序

CSS で見た目の位置を変えても、DOM、キーボードフォーカス、支援技術の読み順が同じように変わるとは限りません。レスポンシブでカードを並べ替えるとき、視覚上の順序だけを最適化しません。

グリッドから外れる意図

一つの画像が列を越える、引用が外へ張り出すなど、グリッドから外すことで例外を作れます。ずれをすべてエラーとせず、意味、表現、はみ出し、レスポンシブでの結果を確認します。

9.9 同じ内容を異なる意図で三案作る

良い構成を一案だけで探すと、最初の配置を少しずつ修正し続けがちです。同じ内容から、意図の異なる三案を作ります。

A　静かな鑑賞

画像と余白を大きく取り、同時に見える操作を減らします。作品を眺める時間を作る意図です。代わりに、日時の短時間探索は遅くなるかもしれません。

B　短時間探索

日時、会場、プログラムカテゴリを先に比較できる構成です。情報密度は高くなりますが、階層と整列を強くします。祝祭的な驚きは弱くなるかもしれません。

C　祝祭的な発見

大きさの大きな変化、画像の切り抜き、リズムの切れ目を使います。発見の楽しさを意図しますが、反復可能性、読み順、レスポンシブの安定が課題になります。

三案は良い／悪い／最良ではありません。意図、得るもの、失うもの、向くタスクを対応させます。

レスポンシブは別案ではなく同じ設計の状態

デスクトップとモバイルで見た目が変わっても、内容の優先順位、見出し構造、タスク、状態はつながります。三案それぞれで、幅、文字拡大、長い内容を試します。

9.10 問い――部分ではなく、全体として何が起きているか

図 F09 の三案を、最初は意図ラベルを隠して見ます。

操作と記録の順序

1. A／B／C の提示順を参加者ごとに入れ替える
2. 各案を 3 秒見て、最初に気づいた要素を報告する
3. 開催日時を探し、完了時間と誤りを記録する
4. 釣り合いの点と確信度を記録する
5. 矩形化、残った形、グリッドの重ね表示を順に見る
6. モバイル、200% 文字拡大、長い名前へ一軸ずつ変える

記録表は「条件／全体の観察／意図の推定／タスク結果／代替仮説／変更する一軸」の 6 列です。専用ツールがなくても、印刷した透明グリッド、矩形化画像、空白を塗るメモ、ビューポート枠で同じ順序を行えます。

問い

1. 最も大きな面、最も長く続く空白はどこか
2. 何が何回、どの間隔で反復するか
3. どこでリズムが切れ、その理由は何か
4. ピクセル、要素、情報、操作のどの密度か
5. 何を「重い」と感じ、どの形・位置が関係したか
6. 設計意図、初見報告、タスク結果を分けられるか
7. グリッド、DOM、見える整列はどう違うか
8. モバイルと 200% 文字拡大で全体の関係はどう変わるか

答えの例

八つの問いへの評価観点は、次の対応です。

1. 最大面と最長空白を、ビューポート比と始点・終点で記す
2. 反復単位、回数、間隔列を記す
3. 切れた箇所と、意味上の例外／レイアウト事故という代替仮説を書く
4. ピクセル／要素／情報／操作の計数単位を選ぶ
5. 「重い」要素と、面積・位置・明暗・細部などの根拠を指す
6. 意図、初見報告、視線、タスクを別記録にする
7. DOM、見える順序、読み順、フォーカス順を並記する
8. モバイル／ズームで失われた関係と、維持すべき内容の優先順位を書く

具体例にすると、次のようになります。

1. B 案ではプログラム一覧がビューポートの 58%、左側の連続余白が幅 32px でヘッダー下から一覧末まで続く。
2. カードは 6 回反復し、内部間隔は 8／16px、カード間 16px、カテゴリ間 40px である。
3. 3 件目だけ 2 カラム幅でリズムが切れる。注目項目の意図か、長いタイトルによるグリッド事故かを確認する。
4. 「高密度」はピクセル占有率 43% を指す。情報項目数やタブ停止位置の多さとは別記録にする。
5. 右上画像を重いと評した根拠はビューポート比 42%、暗い面、細部量、中心からの距離である。
6. 意図はタイトル→日時→申込ボタン、初見報告は画像、日時探索は 5.8 秒だった。視線は未測定である。
7. 見える順序は画像→タイトルだが、DOM／読み順／フォーカス順はタイトル→日時→リンクである。意図した差か確認する。
8. 390px ではヒーロー領域下の空白が 180px となり日時が次のビューポートへ移った。内容の優先順位を保つため、画像の高さとセクション間隔を別々に試す。

B 案では、日時と会場の行が同じ列とベースラインで 6 件反復し、カード間 16px、カテゴリ間 40px で周期が分かれる。情報項目は多いが、比較軸が縦に連続している。高密度という観察だけから混乱とは結論しない。出演日時を探すタスクの時間と誤りを A／B／C で比べる。

C 案では、右上の画像がビューポートの約 42% を占め、左側の文字群より面積と細部が大きい。私は「右上が重い」と評したが、これは釣り合いの評定であり、視線計測結果ではない。画像を固定して切り抜き／面積だけを変え、釣り合いの評定と日時探索を別に取る。

A 案の大きな余白は作品画像の周囲へ連続し、鑑賞の間を作る意図に見える。一方、モバイルでは画像下に長い空白が残り、日時が次のビューポートへ押し出された。デスクトップの余白値を縮小するのではなく、モバイルでの内容の優先順位に合わせて構成を再判断する。

別の答え方

最初に見たものが画像だった理由は、構成の重心だけでなく、顔、動き、個人的関心、読み込み順かもしれません。静止矩形化、画像差し替え、タスク変更で代替仮説を比べます。

よくある考え方

Z 型で視線を申込ボタンへ流し、黄金比と 12 カラムグリッドで釣り合いを取る。

注意点

パターン、比率、グリッドを人の行動と美的品質の保証にしています。何をどの条件で観察し、どのタスクを改善するかがありません。道具は候補を作りますが、答えを代行しません。

必須セルフチェック

• 面積、位置、反復、空白を全体の観察として書ける
• 視覚的な重さ、釣り合い、視線、タスクを分けられる
• 同じ内容の三案を、意図とトレードオフで比較できる

一人で学ぶ場合は、自分の初見報告を測定済みの一般傾向にしません。翌日に提示順を変えて再観察し、結果を「自分・この画面・このタスク」の記録として残します。複数参加者を比較する場合は、目的、記録内容、途中終了、匿名化、画像／視線データの保存期間を説明し、同意を得ます。

発展セルフチェック

• 占有率、情報項目、操作対象を別々に記録できる
• グリッドトラック、DOM、見える順序、フォーカス順を確認できる
• レスポンシブを縮小でなく構成の状態として評価できる

参考

• Locher et al. (2001), “Artists' Use of Compositional Balance for Creating Visual Displays.” 抽象要素の配置制作と釣り合いを扱う研究です。Web の公式にはしません。https://doi.org/10.2190/EKMD-YMN5-NJUG-34BK
• McManus, Stöver, and Kim (2011), “Arnheim's Gestalt theory of visual balance.” Center of Mass による解釈と限界を扱います。https://pubmed.ncbi.nlm.nih.gov/23145250/
• Locher, Overbeeke, and Stappers (2005), “Spatial Balance of Color Triads in the Abstract Art of Piet Mondrian.” 色面の釣り合い評定を扱う専門研究です。https://doi.org/10.1068/p5033
• W3C, CSS Grid Layout Module Level 2. グリッドトラック、内容に応じたサイズ、配置を確認する仕様です。https://www.w3.org/TR/css-grid/
• W3C, CSS Box Alignment Module Level 3. Alignment の仕様上の意味を確認できます。https://www.w3.org/TR/css-align-3/
• W3C WAI, Understanding SC 1.4.10: Reflow. ズームとリフローの達成条件を確認します。https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
• “Eye Tracking Scanpath Analysis Techniques on Web Pages.” 視線軌跡の分析法を扱う調査論文です。F／Z 型の万能則ではありません。https://www.mdpi.com/1995-8692/9/1/2
• Arnheim, Rudolf, Art and Visual Perception. 視覚的な釣り合いを考える歴史的理論書です。現代 Web UI の公式としてではなく、McManus らの検証研究と併読します。
• Müller-Brockmann, Josef, Grid Systems in Graphic Design. モダニズムのグラフィックデザインにおけるグリッド実践を知る資料です。CSS グリッド仕様やレスポンシブの正解集ではありません。
• Wong, Wucius, Principles of Form and Design. 反復、リズム、形などの造形語彙を学ぶ入口です。心理学的法則とは区別します。
• Barthes, Roland, “Rhetoric of the Image.” 画像と文字の関係を考える歴史的資料です。視線計測研究ではありません。

検索キーワード: pictorial balance visual weight、composition center of mass perception、visual rhythm graphic design、information density dashboard、web scanpath task eye tracking、CSS Grid intrinsic sizing reading order