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

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

文字が読みにくい。どこを押せばよいか分からない。きれいに並んでいるはずなのに、なぜか落ち着かない。でも、その理由をうまく説明できない。

デザインを始めたばかりのころは、「センスがないから分からない」と思ってしまうかもしれません。しかし、その違和感は、画面を詳しく見るための大切な出発点です。

たとえば、余白が変だと感じた画面を見てみます。

すべての余白が狭いのでしょうか。それとも、見出しと説明の間だけが広いのでしょうか。関係するボタンと説明が離れ、別の内容に見えているのでしょうか。同じ 16 ピクセルの余白でも、文字の大きさや周囲の情報によって見え方は変わります。

「余白が変」を、どの要素とどの要素の間が、周囲と比べてどう違うのかまで説明できれば、直す場所を考えられます。

この本で学ぶこと

この本は、Figma のボタンの場所や、CSS の命令を順番に覚える操作マニュアルではありません。人が画面をどのように見て、情報を探し、覚え、選び、押したあとの結果を待つのかを手がかりに、Web デザインを読み解く本です。

近いものが一つのまとまりに見えることがあります。大きな文字や周囲と違う色へ、注意が向くことがあります。前の画面で見た番号を覚え続けるのは大変です。押したボタンから返事がなければ、もう一度押してしまうことがあります。

こうした人の特徴を知ると、画面で起きていることを見つけやすくなります。ただし、「人間は必ずこう見る」という万能な答えにはしません。見る人の目的、使っている機器、周囲の明るさ、過去に使ったサイトなどによって、同じ画面の使われ方は変わるからです。

この本では、多くの図を使います。図の中へ答えや長い解説を詰め込むのではなく、一枚の図では一つの画面や一つの違いだけを見せます。

先に本文で、どこを見る図なのかを説明します。図のあとには、そこから何が分かるのかを書きます。読者が図を使って課題を解いたり、正解を当てたりする必要はありません。著者が画面を読み解く過程を追いながら読み進められます。

Web サイトは、見る人の画面幅によって並び方が変わります。文章が長くなることも、画像が届かないこともあります。ボタンを押せば処理が始まり、成功することも失敗することもあります。

そのため、この本では完成した見た目だけでなく、HTML や CSS、ブラウザの動き、実際に人が使う場面も扱います。美しく見えることと、必要な情報を見つけられることの両方を考えます。

読み終えたとき、すべての正解を覚えている必要はありません。

「もっといい感じに」ではなく、「見出しと説明が離れ、別の内容に見える」「売り切れを色だけで伝えている」「押したあとに処理中だと分かる表示がない」と言えるようになること。それが、この本の目指す変化です。