本書の使い方

四つの部

• 第 I 部では、人間が画面をまとめ、揃え、補い、動きへ注意する仕組みを見ます。
• 第 II 部では、注意、記憶、判断、操作の制約を見ます。
• 第 III 部では、経験から生まれる期待、規則、例外、フィードバック、作者との知識差を見ます。
• 第 IV 部では、観察、仮説、比較、ブラウザでの確認、DevTools、行動観察を一つの制作へつなぎます。

順番に読むと概念が積み上がりますが、実務の違和感から関連章へ入っても構いません。付録 B の 100 の問いと付録 C のレビュー語変換を入口にできます。

章の読み方

各章は、人間の日常的な現象から始まり、Web 例を比べ、名前と正確な定義を知り、実装へ接続し、最後にその説明を疑います。問いには共通の正解を置かず、答えの例、別の答え方、よくある考え方、注意点を示します。

図では一度に一つの差を見ます。良い／悪いのラベルだけを信じず、何が同じで、何が変わったかを確認してください。色だけでなく、形、位置、文言、説明も合わせて見ます。

参考資料の読み方

章末の「参考」は、権威を並べる欄ではなく、次に進む入口です。一次資料、研究機関、仕様・公式文書を優先し、読みやすい資料も併記します。英語資料は、何を知るためにどこを読むかを添えます。

独習するとき

最初に自分の言葉で書き、答えの例は後から見ます。本文と同じ UI を作る必要はありません。身近なサイトや自分の制作物で、見た条件をメモし、一つだけ変えて比べてください。

他者の行動を見る場合は、第24章の倫理、同意、プライバシー、中止条件を先に確認します。学習のためでも、説明せずに録画したり、本番アカウントへ障害を起こしたりしません。

制作中の補足資料について

この本には、本文のほかに、図版の作り方、参考資料、レビュー記録などの補足資料があります。補足資料には制作中の確認事項も含まれます。読者として読むときは、本文と図版を中心に進め、制作管理用のメモは必要になったときだけ参照してください。