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

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

「なんか変」は、まだ説明できていないだけで、無意味な感想ではありません。最初の言葉を残し、どこを見てそう感じたのかをたどると、画面で起きていることが少しずつ具体的になります。この章では、その変化を一段ずつ見ていきます。

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

「なんか変」は、余白が狭いのか、文字が弱いのか、そもそも内容が分からないのかをまだ区別していない言葉です。この時点で言い換えると、最初に気づいた感覚まで消してしまうことがあります。

たとえば、商品登録画面で「入力欄のあたりが窮屈に見える」と感じたとします。まず、どの入力欄とどの文字の間が気になったのかを見ます。最初の反応を残したまま、画面の具体的な場所へ近づいていきます。

図 19-2A では、「商品名」という文字とその入力欄より、商品名の入力欄と次の「価格」という文字の方が近くなっています。そのため、価格という文字が、上の商品名の入力欄にくっついて見えます。どこまでが一つの項目なのか迷いやすい配置です。

同じ項目のラベルと入力欄を近づけ、次の項目までは少し広く空ければ、距離が項目の区切りを助けます。ただし、まとまりは距離だけで決まりません。文字の見た目、左端の位置、境界線も一緒に見ます。

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

この例では、紫からピンクへ大きく変わる背景、斜めに傾いた大見出し、丸みの強いボタンが見えます。「ダサい」を禁止するのではなく、その言葉の手前に何が見えていたのかを、実際の画面から探しています。

ブランドが目指すものが「静かな信頼感」なら、強いグラデーションや跳ねる動きは、その意図から外れると評価できます。別のブランドが「遊び心と驚き」を目指すなら、同じ表現の評価は変わるかもしれません。

「ダサい」と感じたこと自体を間違いにはしません。強い色の変化、傾いた文字、丸い形の組み合わせが、どんな印象を作っているかを言葉にします。好みを消すのではなく、好みが生まれた場所を見つけます。

図 19-2A のフォームを見て「余白が足りない」と感じたのは、画面全体の空白が少ないからではありません。同じ項目の文字と入力欄より、入力欄と次の項目の文字が近いからです。空白の量ではなく、二つの距離の関係が、項目の区切りを曖昧にしています。

ここで見るのは距離だけではありません。入力欄の左端がラベルとそろっているか、同じ役割の文字が同じ見た目か、背景や境界線が別のまとまりを作っていないかも関係します。

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

デザインを考えるときは、見えた形、表現の意図、見る人の経験、サイトの目的を結びます。測定できない美しさや文化的な印象も大切です。ただし、「心理学的に正しい」と言って好みを正解に見せる必要はありません。

この商品登録画面では、ページ見出し「商品を登録」が 24px、項目名の「商品名」が 18px です。見出しの方が大きいものの、二つの差は控えめです。これが「なんか平らに見える」という最初の違和感につながりました。

図 19-8B では、ページ見出しだけを 32px にしました。文言、太さ、位置、入力欄、ボタン、色は変えていません。図 19-8A と一枚ずつ見ることで、どこが変わったのかを落ち着いて比べられます。

図から直接分かるのは、見出しの大きさが変わったことです。実際に人が最初に読む場所まで変わったかは、図だけでは分かりません。見出しの言葉や上部の余白が影響している可能性もあります。

見出しを大きくすれば必ず良くなるわけでもありません。狭い画面では改行し、入力欄を大きく下へ押し出すかもしれません。違和感を具体的にすることは、すぐ一つの正解を決めることではなく、何を変え、何を確かめるのかを見えるようにすることです。

デザインの美しさは、数値だけで決まりません。余白が整い、文字が揃っていても、そのサイトが伝えたい気分や文化に合っていなければ、美しいとは感じにくいでしょう。一方で「美しいから」と言うだけでは、ほかの人と判断を共有できません。

最初の違和感を残し、見えたものを具体的にし、目的や表現意図へ照らす。この往復によって、感覚は消えず、理由だけが少しずつ見えるようになります。「なんか変」は、雑な感想ではありません。画面をよく見るための、最初の小さな合図です。