付録 B　Web デザインを見るための 100 の問い

この一覧は 100 個を順番に消化する採点表ではありません。違和感に合う入口を選び、観察条件、仮説、必要な根拠へ進むために使います。

用途別セット

初めて画面を見る: B001、B002、B041、B042、B091。
実装前レビュー: B011、B021、B031、B051、B071、B081、B092。
レスポンシブ監査: B003、B019、B084、B087、B088。
人を対象にする前: B091〜B100。倫理・プライバシー確認を先に通す。
短い 5 問: B001、B011、B041、B081、B091。これは万能チェックリストではない。

B001. 誰が、何をする画面か。 B002. いまどの状態を見ているか。 B003. ビューポート、ズーム、文字サイズは何か。 B004. 内容は実データに近いか。 B005. 初回利用か再訪か。 B006. マウス、タッチ、キーボードのどれか。 B007. 通信・権限条件は何か。 B008. 観察時間を固定したか。 B009. 記録日時と版を残したか。 B010. 見えない条件を推測で埋めていないか。

B.2 まとまりと距離を見る問い

B011. 関係するものは近いか。 B012. 関係しないものは離れているか。 B013. ラベルは対応するコントロールに最も近いか。 B014. 内側と外側の余白を区別できるか。 B015. 等間隔が関係差を消していないか。 B016. 境界を外してもまとまりが見えるか。 B017. カードが必要以上に重なっていないか。 B018. 余白スケールの例外に理由があるか。 B019. 狭幅でまとまりが壊れないか。 B020. 距離以外のまとまり手がかりと競合していないか。

B.3 線と揃いを見る問い

B021. 見えない基準線はどこか。 B022. 左端・右端・中央のどれを共有するか。 B023. テキストのベースラインは揃っているか。 B024. 一つだけずれた要素はないか。 B025. ずれは意図された強調か。 B026. 数学的中央と視覚的中央を区別したか。 B027. アイコンの視覚重量は釣り合うか。 B028. Grid を外しても構造が見えるか。 B029. 長文で Alignment が崩れないか。 B030. フォーカス表示は形に沿って見えるか。

B.4 類似と規則を見る問い

B031. 同じ役割は同じ見た目か。 B032. 違う役割が同じ見た目になっていないか。 B033. 色・形・位置のどれが意味を担うか。 B034. 状態差を色だけに頼っていないか。 B035. 反復からどんな規則を学ぶか。 B036. 一つだけ違うものに理由があるか。 B037. コンポーネント差と内容差を分けたか。 B038. デザイントークンの例外を追えるか。 B039. 旧コンポーネントが混在していないか。 B040. 規則を別ページでも維持しているか。

B.5 強さと注意を見る問い

B041. 最初に目に入るものは何か。 B042. それはタスク上最も重要か。 B043. 大きさ・色・コントラスト・位置・動きのどれが強いか。 B044. 全部を強調していないか。 B045. 主要操作が複数に見えないか。 B046. エラーは必要な時点で気づけるか。 B047. 補助情報が本文より強くないか。 B048. アニメーションを止めても意味が伝わるか。 B049. 動きの面積・速度・反復は必要か。 B050. 目立つことを理解や選択と混同していないか。

B.6 記憶と選択を見る問い

B051. 前の画面を思い出させていないか。 B052. 覚える代わりに見て確認できるか。 B053. プレースホルダーだけをラベルにしていないか。 B054. 情報は知識に合うまとまりになっているか。 B055. 初心者と専門家でまとまりが違わないか。 B056. 選択肢は数より分類に問題がないか。 B057. 検索、絞り込み、並べ替えは目的に合うか。 B058. 選択肢の確率や頻度を考えたか。 B059. 段階的開示で必要情報を隠していないか。 B060. 再認を増やした結果、探索コストが増えていないか。

B.7 操作対象を見る問い

B061. 見た目と操作領域を分けて考えたか。 B062. 操作対象は入力方法に対して狙いやすいか。 B063. 操作対象までの距離と有効幅は何か。 B064. 近接操作対象の誤操作を考えたか。 B065. 画面端を利用できるか。 B066. キーボードで到達・実行できるか。 B067. Focus 順はタスク順と合うか。 B068. Disabled の理由と回復方法が分かるか。 B069. 小さなアイコンを大きく見せず操作領域を広げられるか。 B070. 操作成立を見た目だけで判断していないか。

B.8 期待と状態を見る問い

B071. 利用者は過去のどの経験を持ち込むか。 B072. 独自表現を学ぶ手掛かりがあるか。 B073. 同じ規則が次も続くと予測できるか。 B074. 例外は意図と理由を伝えるか。 B075. 押した受付が分かるか。 B076. 処理中、成功、失敗、結果不明を分けたか。 B077. 可視状態とプログラム上の状態が同期するか。 B078. 再試行と再照会を区別したか。 B079. 回復・取消・サポートへ進めるか。 B080. 作者だけが知る略語や前提はないか。

B.9 Responsive と内容変化を見る問い

B081. 画面幅を連続して変えると最初に何が壊れるか。 B082. ブレークポイントより壊れる条件を先に見たか。 B083. 200% ズームで再配置するか。 B084. 文字サイズだけを変えたか。 B085. 長い名前・URL・翻訳で壊れないか。 B086. Empty、Loading、エラー、権限差を見たか。 B087. 内容順と見た目の順序が一致するか。 B088. コンテナ単位の変化が必要か。 B089. スクロール方向と Focus 移動が矛盾しないか。 B090. スクリーンショットだけで Web を評価していないか。

B.10 仮説と検証を見る問い

B091. 観察、解釈、評価を分けたか。 B092. 概念名が観察の代わりになっていないか。 B093. 最低二つの代替仮説があるか。 B094. 何が起きれば仮説が弱まるか。 B095. 一度に何を一つだけ変えるか。 B096. 固定条件を記録したか。 B097. 画面、コード、人のどの根拠が必要か。 B098. 分母、欠測、ヘルプを定義したか。 B099. 人を見る前に倫理・プライバシー確認を通したか。 B100. 公開、保留、取り消し、再開条件を残したか。

使い方

一度に全部へ答えず、三つを選びます。答えが評価語になったら、対象、差、条件を加えて観察文へ書き換えます。人の行動を扱う問いは第24章の倫理・プライバシー条件を先に確認します。

Webデザインを見る目