第19章　「なんか変」を観察する

画面を見た瞬間の「なんか変」は、捨てなくてよい感覚です。ただし、そのまま修正指示にすると、何を、なぜ、誰のために変えるのかを共有できません。

本章では違和感を結論ではなく入口にします。観察、解釈、評価を分け、第 I〜III 部で得た言葉を使い、第三者が同じ条件で再確認できる短い記録へ変えます。最後には、好み、表現意図、価値判断を含む批評へ戻ります。

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

1. 評価語を、対象・位置・比較・状態・条件を含む観察へ書き換える
2. 一つの観察に複数の解釈を残す
3. 観察だけで終わらず、目的と価値に照らした評価へ戻る

実務では八段階で進めます。違和感を原文のまま保存し、URL、ビューポート、データ、状態、時刻、直前操作を残します。証拠源を画面、実装、行動、発言、作者資料へ分け、対象、位置、属性、比較相手、条件を観察文にします。不明、未測定、推測値を明記し、複数解釈を作ります。対象者、タスク、表現意図、価値に照らして評価し、一属性だけを変え、反証と副作用を確認します。

19.1 違和感は捨てず、結論を急がない

「なんか変」と感じたら、すぐに余白、色、フォントを変更せず、時刻、画面、ビューポート、状態、最初に気づいた場所を記録します。感覚は仮説を探す入口です。

変更を急ぐと、元の違和感を再現できず、複数条件を同時に変えやすくなります。スクリーンショット、URL、データ、操作直前の状態を保存し、「直したい」を別欄に置きます。

19.2 観察、解釈、評価

次の三文は違います。

• 観察: フォームのラベルと入力欄は 12px、入力欄と次のラベルは 8px 離れている。
• 解釈: 次のラベルが前の入力欄と同じまとまりに知覚される可能性がある。
• 評価: 項目単位で読み進める目的に対し、この距離関係は望ましくない。

観察にも視点の選択が入り、完全に中立ではありません。それでも、測った場所、比較相手、条件を示せば、他者が再確認できます。解釈には近接以外に、ラベルの書体、境界線、背景、読順という代替仮説を残せます。

19.3 「ダサい」「いい感じ」を一度禁止する

「ダサい」「いい感じ」は、個人の経験、文化、流行、ブランド期待を含む大切な反応です。しかし相手が次に何を観察すればよいかは示しません。

レビューに短い観察段階を設け、評価語をいったん退避して何を見たかを書きます。授業では 5 分を例にできますが、普遍的な時間ルールではなく、複雑な状態やアクセシビリティ監査にはさらに時間が必要です。その後に「このブランドは静かな信頼感を目指すので、強いグラデーションと跳ねる動きは意図から外れる」と評価へ戻ります。

「ダサいと言わないでください」と反応を退けません。「そう感じた言葉をまず残しましょう。画面のどこで、何と比べてそう感じましたか」と共同で分解します。退避は好みを消すためではなく、判断の道筋を共有する足場です。

19.4 距離、揃い、類同、強さを見る

知覚については、次を観察します。

• どの要素間の距離が、何と比べて近い／遠いか
• 左端、右端、中央、ベースラインのどこが揃う／ずれるか
• 同じ役割の見た目がどこで同じ／異なるか
• 境界線、背景、影がどのまとまりを重ねているか
• 大きさ、コントラスト、色、動きのどれが物理的に強い候補か。実際に何へ気づいたかは、発言、行動、視線など別の証拠で確かめる

「余白が足りない」ではなく、「ラベルと入力欄の距離 12px より、入力欄と次ラベルの距離 8px が短い」と書きます。値だけで善悪を決めず、関係を記録します。

19.5 情報量、選択、記憶、操作を見る

処理については、利用者に何を保持、探索、比較、操作させるかを見ます。

• 現画面に前ページのプラン名が表示されず、タスク上はそれを参照する必要がある。記憶から再生したかは未測定である
• 100 件あるが検索とカテゴリーで候補を絞れる
• 同じ意味の選択肢が複数カテゴリーへ重複する
• 閉じるアイコンの見た目は 16px だが操作領域は 44px ある
• エラー修正後に前の入力値が保持されない

「情報量が多い」と「認知負荷が高い」を同義にしません。情報が多くても構造と手がかりがあり、タスクに必要なら問題でない可能性があります。

19.6 規則、期待、状態、例外を見る

予測については、反復、例外、操作前後を時間で見ます。

• 三つの青いテキストはリンクだが、四つ目は操作できない
• 同じ役割のボタンで一つだけ角丸が違う
• 送信後もラベル、操作可能性、状態が変わらない
• タイムアウトだがサーバーでは成功済みかもしれない
• 作者だけが次のシステムを知っている

これらは観察または監査候補です。「確証バイアス」「知識の呪い」と作者を診断しません。データ、部品、状態、自然行動、発言を追加します。

19.7 曖昧なレビューを書き換える

「余白が足りない」

どの要素間か、比較相手は何か、その距離がどの関係を表せないかを書きます。

「UX が悪い」

誰が、どのタスクのどの時点で、何を予測し、何が起き、どう回復できなかったかを書きます。

「認知負荷が高い」

利用者が頭の中に保持する情報、同時に比較する候補、更新する状態、不要な処理を列挙します。画面の要素数だけを根拠にしません。

19.8 観察記録の粒度を揃える

短い記録には次を含めます。

［条件］で、［対象・位置］の［属性・状態］が、［比較相手］と［どう異なる］。

証拠源、対象 ID、取得方法、単位、根拠の状態も付けます。

観察済み、報告済み、仕様上の情報、推測、未測定を区別します。スクリーンショットだけで操作領域、読み上げ、理解、学習を断定しません。

例:

幅 390px、未入力エラー表示時、エラー概要から二つ目の項目へ移動すると、ラベルの可視矩形は固定ヘッダーの矩形と重なり、文字全体が画面に露出しない。

対象、位置、比較、状態、条件があれば、別の人が再現しやすくなります。矩形の重なりは幾何情報で確認できますが、利用者が読めなかったか、意味を理解できなかったかは行動や発言による別の測定です。

19.9 観察から、根拠のある批評へ戻る

観察だけを並べても、何を大切にするかは決まりません。マーケティングサイトでは驚きや余韻、業務システムでは速度とエラー回復、ミュージアムサイトでは没入や解釈の余地が重視されるかもしれません。

批評では、観察、複数解釈、表現意図、受け手の経験、目的、副作用を結びます。測定できない美しさ、違和感、文化的参照も議論できます。ただし、それらを心理学の法則で権威付けしません。

19.10 問い――評価を一語も使わずに画面を記述する

問い

商品登録フォームを見て、次の六問へ答えてください。

1. 条件、証拠源、対象、位置、属性、比較相手は何ですか。
2. 何が未測定、推測値ですか。
3. どんな別解釈がありますか。
4. 誰のどのタスク、表現意図、価値に照らして評価しますか。
5. 一つだけ何を変え、何を固定しますか。
6. どの結果なら仮説を弱め、どんな副作用を見ますか。

答えの例

幅 1280px、初期状態で、ページタイトル、セクション見出し、項目ラベルのフォントの太さがすべて 600、文字サイズ差は 24px、20px、18px です。主要操作と補助情報の背景は同じ青です。必須項目 8 件のうち、ラベルと入力欄の距離より入力欄と次ラベルの距離が短い箇所が 5 件あります。

これは視覚的階層、類同、近接で説明できる可能性があります。別仮説として、内容の語彙、読順、表示調整もあります。最重要タスクを見つけやすくすることが目的なら、文言、DOM 見出しレベル、太さ、余白、色を固定し、ページタイトルのフォントサイズだけを 24px から 32px へ変えます。自然閲覧時の最初の注視・操作は行動または視線として記録します。タスクを示して「指してください」と求めた結果は、課題誘導を受けた指示行動として別に記録します。サイズ変更だけで意味理解が改善するとは限りません。

別の答え方

この画面は、情報を等価に見せる静かな表現を意図しているかもしれません。強弱を増やす前にブランド意図とタスク頻度を確認します。

よくある考え方

余白とメリハリを増やせばよいです。

注意点

どの関係と目的を変えるかがなく、複数属性を同時に変更しています。

別題 1――送信中の画面

観察は、save-button のクリック後 5 秒間、見えるラベル、disabled、aria-busy、状態テキストが変わらず、リクエストは待機中です。5 秒はネットワーク条件の例の値で、迷いの測定ではありません。受付イベント未接続、表示更新漏れ、メインスレッド停止、意図的な即時再操作許可を仮説にします。まず見えるラベルだけを「保存中」へ変え、タスク開始数を分母に再押下と状態説明を記録します。別解として処理が即時ならローディング表示はちらつきを増やします。よくある考え方は「スピナーを付ける」ですが、受付、結果、重複処理、通知を同時には解決しません。

別題 2――検索結果

観察は、100 件の結果にカテゴリーフィルターが 4 つ、検索欄が 1 つあり、同じ商品が二カテゴリーへ現れます。件数が多いことだけでは問題を示しません。分類の重複、ラベル理解、検索語、タスク条件を仮説にします。一軸比較では、重複する 10 商品の secondary_category だけを削除し、商品数、順序、商品名、検索、レイアウト、ビューポートを固定します。対象商品発見数／探索タスク数と見落としを記録します。「選択肢を減らす」がよくある考え方ですが、必要な候補を消す副作用があります。

別題 3――文化施設の表現

観察は、ヒーロータイトルの可視矩形がビューポート下端と交差し、スクロール時に全体が現れ、背景動画は reduced-motion で静止画像になります。没入と発見の遅延を意図した可能性、レスポンシブ崩れ、鑑賞文脈、文化的・ブランド上の参照仮説を分けます。一軸比較では CSS の hero-title の inset-block-start だけを calc(100svh - 40px) から calc(100svh - 80px) へ変え、文言、書体、動画、スクロール、ビューポートを固定します。完了時間だけで価値を決めず、作者資料、鑑賞者の解釈、ナビゲーション達成、副作用を並べます。「読みにくいので上へ出す」だけでは表現意図を消します。

共通 Rubric

証拠源と取得方法、再確認可能な観察、未測定、最低二解釈、タスク／意図／価値による評価、一軸介入、分母、反証、副作用を確認します。

セルフチェック

• 対象、位置、比較、状態、条件を含む観察を書ける
• 観察、解釈、評価を別欄に置ける
• 曖昧語を分解した後、目的と表現意図を含む批評へ戻れる
• 画面、実装、行動、発言、作者資料を別根拠として記録できる

参考

• 第 I〜III 部の各章 — 概念名ではなく観察語と誤用上の注意へ戻ります。
• ISO 9241-210:2019 — Context of use と Evaluation を確認する入口です。
• WCAG 2.2 — プログラムから読み取れる状態等の仕様点検に使い、美的評価の答えにはしません。