はじめに　「なんか変」を捨てないために

Web 画面を見て、「なんか変だ」と感じたことはありませんか。

余白を変えてみる。色を強くする。ボタンを大きくする。それでも、なぜ変だったのかを説明できない。レビューで「もう少しいい感じに」と言われても、何を観察すればよいか分からない。本書は、その場所から始めます。

本書は Figma の操作手順や CSS Property の一覧ではありません。人間がどのようにまとまりを見つけ、注意を向け、覚え、選び、予測し、操作結果を待つのかを手掛かりに、画面で起きていることを言葉にする本です。

中心に置く命題は二つです。

名前を知ると、次から見つけられる。

名前を知ると、次から疑える。

近接、類同、ワーキングメモリ、フィッツの法則、メンタルモデル、フィードバック。名前を知ると、それまで「なんとなく」だった差を探しやすくなります。しかし、名前は答えではありません。「認知負荷が高い」「ヒックの法則だ」と言うだけでは、画面のどこで何が起きているかを説明していません。

そこで本書は、人間の特性から Web 上の現象へ進み、定石へ接続した後、必ずもう一度疑います。別の概念でも説明できないか。実装上はどうなっているか。実際の人はどう行動するか。理論を権威ではなく、確かめられる仮説を作るために使います。

本書は無料の電子教材です。学校やスクールへ通う余裕がない人も、一人で読み、図を比べ、問いに答え、DevTools で確かめられるように作ります。教員が授業で使うための進行案も付録に用意します。

デザインを学び始めた人だけでなく、画面を実装するフロントエンドエンジニア、レビューを言語化したい人、HCI や UI を教える人にも向けています。専門用語は初出で分野を示し、日常的な説明と、より正確な定義を分けます。数字を普遍ルールにせず、条件と出典を確かめます。

Web は一枚の画像ではありません。幅と内容が変わり、操作と状態があり、通信を待ち、成功も失敗も起こります。だから本書では、画面だけでなく、HTML、CSS、ブラウザ、DevTools、人の行動へ往復します。

読み終えたとき、すべての正解を知る必要はありません。最初には「余白が足りない」とだけ書いた画面に、どの要素間の距離か、何が同じ役割か、どの状態がないか、何を覚えさせているか、どう確かめるかを書けるようになる。それが本書の目指す変化です。