第 I 部 統合ケース　同じ内容から、異なる三つの画面を読む

第1章から第9章まで、画面を見るための言葉を一つずつ学びました。近接、整列、類同、境界、動き、タイポグラフィ、色、構成。ここで一度、それらを同じ画面へ戻します。

統合するとき、知っている概念を全部当てはめる競争にはしません。一つの画面へ「近接」「認知負荷」「コントラスト」と多くのラベルを貼っても、何が起きているかが明確になるとは限らないからです。

本ケースでは、同じ文化祭情報から三つの画面を作ります。

• A　静かな文化施設として、作品との出会いを支える
• B　チケットを探して購入する EC として、比較と操作を支える
• C　運営業務画面として、状態監視と変更・回復を支える

ここで「同じ内容」とは、イベントという共通対象が同じであることです。三案の画面へ同じ項目とコントロールを無理に置く意味ではありません。

実装では、共通データと案ごとの追加データを分けます。作品解説、購入情報、運営情報を一つの画面都合へ混ぜると、「同じ内容」を比べているのか、案ごとの目的を比べているのかが分からなくなるためです。どの項目を表示し、省略し、導出したかを記録します。

したがって、異なる目的の間で直接比べられるのは、共通タスクの日時発見、内容理解、基礎的なアクセス、共通対象の正確さなどに限定します。購入時間と監視効率を同じ点数にしません。案別タスクは各目的内の受入条件で評価します。

三案を同じ評価軸で順位づけません。A へ「情報密度が低いから良い」、C へ「カードが多いから悪い」と言うことはできません。目的、タスク、利用者、状態が違います。

このケースの必修は三つです。

1. 同じ画面を、知覚・造形・意味・実装・タスクの層に分けて読む
2. 「使いやすい」と「表現が目的に適切」を別々に評価してから統合する
3. 原則名を答えにせず、代替仮説と確認方法まで書く

六つの順序で読む

九章分のチェックリストを一度に当てません。次の順序を一つずつ行います。

1. 構造: 読まずにまとまり、距離、整列、境界を見る
2. 意味: 役割、状態、タイポグラフィ、色が意味をどう示すか見る
3. 時間: ローディング、動き、操作前後、失敗を見る
4. 全体: 大きさの関係、余白、リズム、密度、釣り合いを見る
5. 壊れにくさ: レスポンシブ、ズーム、長文、フォント／画像失敗を見る
6. 仮説: 一つの問題を選び、代替説明、一軸変更、確認指標を書く

必修では、B 案の「残席を見落とす」という一問題を六つの順序で最後まで追います。A／C の全項目は発展比較です。

五つの層との対応は、構造＝知覚／造形、意味＝意味／造形、時間＝意味／実装、全体＝造形、壊れにくさ＝実装／タスク、仮説＝全層の統合です。層は観察対象、順序は読む手順です。

1　三案を、まず名前なしで見る

最初は A／B／C の意図を隠します。各画面を 3 秒見て、最初に気づいた要素を一つ書きます。次に 30 秒見て、何の画面だと思ったか、何ができそうかを書きます。

観察の例

A では大きな写真と短いタイトルがビューポート上部の約 70%を占める。購入ボタンは見えていない。

B では日時、価格、残席、購入ボタンが一つのカード内にあり、同じ構成のカードが四件反復する。

C では状態列、更新時刻、担当者、エラーバッジ、編集コントロールが表の同じ列へ並ぶ。

「A は洗練」「B は使いやすい」「C はごちゃごちゃ」は評価です。最初は面積、位置、数、反復、見える状態を書きます。

3 秒報告の限界

3 秒で残ったものは、短時間提示後の報告です。ページ理解、タスク成功、普遍的な視線順を測ったことにはなりません。提示順、画像、既知のブランドなどにも影響されます。

2　内容を読まずに、知覚される構造を見る

通常表示をグレースケール、ぼかし、矩形化します。文字の意味を減らし、面積、まとまり、階層を見ます。

A

画像と大きな余白が主な面を作り、文字は左下へ小さく集まっています。静かな鑑賞という意図に対応する可能性があります。ただし、日時探索タスクには必要情報が次のビューポートへ出る仮説があります。

B

同じ大きさのカードがグリッド上に反復し、価格と空き状況だけがアクセント色になっています。比較単位は見えますが、すべての購入ボタンが同じ強さなら、選択前の主要操作が四つあるとも解釈できます。

C

画面の大半を表が占め、行と列の反復が強い構造を作ります。高密度ですが、監視タスクでは同時比較を助けるかもしれません。密度の高さと混乱を同一視しません。

一つの加工を真実にしない

ぼかしで消える差は、小さいサイズや低コントラストの手がかりを探す資料になります。しかし、通常視力の読者が実際にそう見ているわけではありません。矩形化も文字の意味と字形を意図的に捨てます。加工ごとに、何を残し、何を失ったかを書きます。

3　距離、整列、境界を重ねる

次に、間隔の図、整列線、見える境界、意味上のまとまりを別の層で重ねます。

近いから同じまとまりとは限らない

B の価格と隣カードのタイトルが、自カード内の説明より近ければ、カード境界線がまとまりを補っているかもしれません。近接と共通領域が競合する条件です。「カードだから一まとまり」とマークアップ名から決めず、距離と境界を指します。

C では、列の整列が比較軸を作ります。一つの長いイベント名で行の高さが増え、状態の水平線が崩れても、列比較は保たれる場合があります。1px のずれではなく、どの連続がタスクに必要かを見ます。

DOM、意味、見えるまとまり

A のヒーロー領域全体が一つの section でも、画像とタイトルが離れすぎれば別まとまりに見えるかもしれません。C の表ラッパーが多数の DOM ノードを持っても、知覚上は列という一つの比較軸になります。

四つの層を記録します。

1. DOM のコンテナ
2. 意味上のまとまり
3. 画面で見える境界
4. 近接・整列で知覚するまとまり

一致しないこと自体をエラーにしません。タスクに必要な関係が伝わるかを確認します。

4　役割、状態、一貫性を読む

ボタン、リンク、状態、選択中、無効、エラー、ローディングを一覧にします。

A では、作品名リンクと次作品ナビゲーションが同じ文字スタイルかもしれません。B では、購入可能・残席少・売切が色付きバッジで示されます。C では、警告と失敗のアイコンが同じ形かもしれません。

「同じ役割は同じ見た目」を確認した後、「違う役割が同じ見た目になっていないか」も見ます。さらに例外が意図を持つかを確認します。

状態は静止画一枚では足りない

B の購入ボタンは通常、ホバー、フォーカス、押下中、ローディング、成功、失敗を持ちます。C は更新中、競合、権限不足、保存失敗を持ちます。A にも画像読み込み、音声再生、ページ遷移があります。

完成状態だけでなく、操作前→きっかけ→処理中→完了／失敗→回復を状態表にします。色や動きだけで状態を伝えず、文字、アイコン、プログラム上の状態、フォーカスを確認します。

5　タイポグラフィと色を一緒に見る

タイポグラフィと色を別のスタイルパネルで設計しても、画面では同時に働きます。

A　表現の調子

見かけの字面が小さく、行間が広く、彩度の低い配色なら、静かな印象に関係するかもしれません。ただし「明朝体＝文化的」「低彩度＝上品」という性格表にはしません。字形、間隔、面積、文脈を指します。

B　比較と操作

価格、日付、空き状況の階層が短時間探索を助ける仮説があります。コントラスト比を測るだけでなく、どの情報を比較し、誤読せず、操作へ進めたかを確認します。

C　密度の中の識別

小さい文字、状態色、行背景が同時に使われます。色だけで状態を伝えず、ラベル、アイコン、模様を加えます。200% 文字拡大や間隔上書きで表が切れないかを確認します。

フォントとテーマが変わる

Web フォント失敗、代替フォント、明るいテーマ／暗いテーマ／強制色で、階層と状態が残るかを三案とも確認します。ブランド表現が変わることと、内容／操作が失われることを分けます。

6　動きを目的と副作用に分ける

三案で異なる動きを使います。

• A: 作品間のページ遷移。空間と余韻を表現する
• B: カートへ追加した因果と完了を示す
• C: ライブ状態が更新された場所を示す

どれも「アニメーション」と呼べますが、目的は違います。開始／中間／終了、継続時間、面積、距離、反復を記録し、動きの約束を書きます。

動きを減らす設定では、A は即時切替と位置ラベル、B は静止したカート件数と完了文、C は更新行の文字／マーカーを残します。動きを消して意味まで消さないこと、通常状態でも反復がタスクを妨げないことを確認します。

7　構成として全体へ戻る

再び画面全体へ戻り、大きさの関係、残った形、リズム、密度、釣り合いを見ます。

A の評価例

大きな画像と連続する余白が鑑賞の意図へ対応している。一方、購入タスクの日時は次のビューポートにある。表現は目的に適切かもしれないが、チケット購入の効率で B より優れるとは言えない。

B の評価例

カードの反復と価格の整列が比較を支える。購入ボタンが四つ同時に強い点は、各カードから購入するタスクには自然かもしれない。「主要操作は一画面に一つ」というルールで減らさず、タスクの流れを確認する。

C の評価例

高い情報密度／操作密度は監視と編集に必要である。エラー、警告、更新済みが同じ視覚的な重さで競合するなら、状態の優先順位を階層へ翻訳する。余白を増やすだけで同時比較を壊さないようにする。

表現と使いやすさを別にしてから統合する

まず二つの表を作ります。

最後にトレードオフを判断します。表現が強くてもタスクが完了できなければ調整が必要です。効率が高くても、文化施設のアイデンティティや作品の扱いが目的と反するなら、それも設計上の問題です。

8　ブラウザで壊し、条件を変える

一枚の完成スクリーンショットで統合判断を終えません。

次を一軸ずつ試します。

• 390／768／1280px
• 200% 文字拡大
• 名前と説明を 2 倍の長さにする
• 日本語／英語混在
• 画像失敗
• Web フォント失敗
• 空、ローディング、エラー
• 動きを減らす設定
• 暗いテーマ、強制色
• キーボードのみ

A の画像中心構成、B のカードグリッド、C の表は、同じ方法では崩れません。ブレークポイントの数字から考えるのではなく、関係が壊れる場所を見ます。

順序を確認する

見える順序、DOM 順、スクリーンリーダーの読み順、フォーカス順を並べます。レスポンシブで見た目を入れ替えても、意味と操作の順序がタスクに合うかを確認します。

9　原則を適用するのでなく、仮説を作る

一つの画面に、複数の説明候補があります。

B で残席を見落とした。

• 色だけだから区別しにくい
• 価格の視覚的な重さが強すぎる
• 空き状況とイベントタイトルの距離が遠い
• カードの反復で例外が埋もれた
• 「残席」のラベルを理解していない
• ローディング後に位置が変わった

概念は候補を増やします。答えを自動的に一つへ絞りません。

仮説の形にします。

私は、B 案で残席ラベルが価格より小さく、低コントラストで、カード右端へ離れていることを観察した。階層、近接、色だけに依存していることの複数要因が見落としに関係する可能性がある。まず位置と文字を固定してコントラストだけを変え、次に色を固定して距離だけを変え、残席確認タスクの正答を比べる。

B 必修トラックの連続記録

最初の一軸は、観察から直接操作でき、ほかの条件を固定しやすく、重大な失敗を増やさず、仮説間を最も区別できるものを選びます。この例では、文字／位置を固定して色差だけを変えれば、色だけに依存しているという仮説を先に調べられます。ただしプログラム上の状態欠落などの基礎品質の失敗は、実験せず先に修正します。

10　問い――三案を、同じ物差しで裁かずに比べる

操作順

1. 意図を隠して 3 秒報告
2. 30 秒の自由記述
3. 各案の主要タスクを実行
4. F02〜F07 の重ね表示を一つずつ見る
5. 意図を公開して表現を評価
6. F08 の条件を一軸ずつ試す
7. 観察→概念候補→仮説→確認を書く

同じ人が A／B／C を続けて行うと、共通内容を学習します。三案の比較では提示順を入れ替え、共通タスク用に同等難度のイベントセットを三組用意します。一人の自習では、速度を案間の公平な実験結果とせず、操作手順を学ぶ記録に限定します。30 秒自由記述は 3 秒提示と別のイベントを使うか、学習済みであるとラベルします。

問い

1. 三案で最初に知覚するまとまりは何か
2. 距離、整列、境界のどれがまとまりを支えるか
3. 同じ役割／状態は一貫し、違う役割は区別されるか
4. タイポグラフィと色は何の調子と階層を作るか
5. 動きは何を伝え、何を妨げる可能性があるか
6. 大きさの関係、余白、リズム、密度、釣り合いは目的へどう対応するか
7. 表現の適切さとタスクの結果はどう違うか
8. レスポンシブ／失敗条件で何が失われるか
9. 一つの問題にどんな代替仮説があるか
10. 次に一軸だけ何を変え、何を確認するか

答えの例

十問への評価観点は次の対応です。

1. まとまり名ではなく、構成要素と境界を指す
2. 距離、線、領域のうち観察できた手がかりを数値／位置で示す
3. 役割×状態×見た目の表の一致と例外を書く
4. 印象語を字形、間隔、色の役割、面積へ戻す
5. 動きの約束と注意／理解／タスク／不快の候補を分ける
6. 全体を見る語彙を目的の意図と循環させず、画面上の形から記述する
7. 表現評定と共通／案別タスク指標を別表にする
8. 条件表のどの状態で、何の関係・内容・操作が失われたか書く
9. 同じ観察に最低二つの概念／デザイン以外の要因を挙げる
10. 固定条件、変更する一軸、確認指標、反証条件を書く

B の残席問題で具体化すると、次のようになります。

1. カード内でイベント概要と購入情報の二つのまとまりが見える
2. 残席は価格から 24px、タイトルから 48px 離れ、右端へ整列される
3. 購入可能／残席少／売り切れは色だけが変わり、文字の役割が一貫しない
4. 価格は 20px・太字、残席は 12px・低明度で階層が異なる
5. 在庫更新時にバッジが後から現れ、カードの高さが変わる
6. 同じカード反復内で残席少だけが例外だが、大きさの差がない
7. 表現は整然としているが、残席確認タスクの誤りが生じた
8. モバイルでバッジが次行へ移り、強制色で色相差が消える
9. 色だけ、距離、ラベル理解、ローディング後のずれの候補がある
10. まず色相以外を固定して文字＋アイコン有無を変え、正答率を比べる

結果が変わらなければ、色だけが主因という仮説は弱まり、距離やラベル理解を次に調べます。

C 案は要素数とタブ停止位置の数が多いが、状態、更新時刻、担当者が列の整列で反復し、監視タスクの比較軸は明確である。私は「ごちゃごちゃ」と評価する前に、ビューポート内の要素密度、タスクに必要な情報項目、操作対象を別々に数える。エラー行発見の時間と誤りを確認する。

A 案のタイポグラフィと大きな余白は、静かな鑑賞という目的へ対応して見える。しかし、開催日時を探すタスクでは次のビューポートまでスクロールが必要だった。表現を全て B 案のように高密度化せず、日時の位置または要約だけを一軸で変える。

B 案の売切状態は赤バッジだけで示される。コントラスト比を満たしても、色そのものへ依存する。売切 文字とアイコンを追加し、カードの見える順序を固定した条件で、購入可能イベントの選択エラーを確認する。

よくある考え方

A は余白が多く洗練、B は UX が良く、C は認知負荷が高い。

注意点

三つの異なる目的とタスクを、スタイルの好みで順位づけています。「UX」「認知負荷」も、何を観察し、誰が何をする条件かがありません。

必須セルフチェック

• 知覚・造形・意味・実装・タスクの層を分けて記録できる
• 表現の適切さとタスク結果を別々に評価できる
• 原則名から代替仮説と一軸比較へ進める

参考

本ケースの理論的な参考は、第 1〜9 章の各エビデンスと章末参考を正本とします。新しい法則を追加せず、どの観察がどの章へ戻るかを エビデンス対応表で追跡します。