第21章　並べると、違いが見えてくる

一つの画面だけを見ていると、「少し暗い」「少し狭い」と感じても、どれくらい違うのかは分かりにくいものです。別の案を隣へ置くと、それまで曖昧だった差が急にはっきりします。

比較は、Web デザインを考えるための便利な道具です。しかし、並べれば自動的に正しい答えが出るわけではありません。比べる画面の内容が違ったり、片方だけをよく見せる名前を付けたりすれば、判断も引っぱられます。

この章では、比較によって何が見えるのかと、比較を見るときに気をつけたいことを、三つの場面から考えます。

21.1 一つだけでは分からない差がある

図 21-1A には、一枚のグレーがあります。色見本の番号を知らなければ、この色が別のグレーより明るいのか暗いのかは分かりません。覚えている色と比べようとしても、照明や画面の明るさ、その日の記憶に影響されます。

図 21-1B では、二枚のグレーを隙間なく並べています。中央の境界を見ると、左が濃く、右が明るいことが分かります。色を正確に覚えていなくても、その場で二つの関係を見られるからです。

Web デザインでも同じです。見出しの位置、カードの幅、余白の大きさ、背景色の違いは、同じ大きさの画面を並べると見つけやすくなります。

ただし、見つけられる差が、すべて大切な差とは限りません。隣に置いたときだけ分かるほど小さな色の差は、普段そのページだけを見る人には気づかれないかもしれません。差を見つけたあとに、その差が読みやすさやサイトの雰囲気へどう関係するかを考えます。

変更前と変更後の画面を比べる場面を考えます。変更前には商品が三件、変更後には五件ある。変更後だけ少し下へスクロールしている。片方だけ Web フォントの読み込みが終わっている。この状態では、画面にたくさんの差が生まれます。

本当に見たかったのがカード同士の間隔なら、商品名、商品数、画面幅、スクロール位置、文字、表示中の状態を同じにします。変えるのは間隔だけです。すると、二枚の違いを間隔と結びつけて考えられます。

原因を知るための比較では、一度に一か所だけ変えることが役立ちます。一方、完成したデザイン案を選ぶときは、文字、色、写真、余白をまとめて変えた案を比べることもあります。この二つは目的が違います。

完成案 A は予定を早く探せるが、情報が密集して見える。完成案 B は静かな余白があるが、一画面に見える予定は少ない。この場合は、どちらが正しいかではなく、誰が何をするサイトなのかに戻って選びます。

図 21-6A では、左にわざと魅力を抑えた「極端案」、右に整った「改善版」を置いています。右には最初から「改善」と書かれ、文字も赤く強調されています。この並べ方なら、内容を詳しく見る前から右を選びたくなります。

比較には、画面そのもの以外の情報も入り込みます。

案そのものを見たいときは、まず「A」「B」のような中立の名前にします。左右を入れ替えても同じ判断になるかも考えます。極端に悪い案だけを比較相手にせず、実際に選ぶ可能性のある案を並べます。

それでも完全に公平な比較になるとは限りません。大切なのは、並べ方もデザインの一部であり、人の印象を動かすと知ることです。

二つの画面を半透明にして重ねると、見出しやボタンの位置のずれを見つけやすくなります。ブラウザで実装した画面が、デザイン案と同じ位置になっているかを見るときに便利です。

一方、重ねると二つの色が混ざり、元のどちらにもなかった色が生まれます。色や雰囲気を比べたいときには、重ねず、同じ大きさで隣へ置きます。

比べ方は、見たいものに合わせます。

方法の名前を覚えることより、「いま何の差を見たいのか」を先に決めることが大切です。

比較すると、どちらか一方を勝者にしたくなります。しかし、デザイン案には、得るものと失うものが同時にあります。

情報をたくさん見せれば、予定を早く探せる一方で、静かな印象は弱くなります。大きな写真を使えば、展示への期待は高まる一方で、来館案内が画面の下へ移るかもしれません。余白を広くすれば、落ち着いて読める一方で、スクロールは増えます。

比較によって見つけたいのは、「どちらが優れているか」だけではありません。それぞれの案が、何を大切にし、代わりに何を手放しているかです。

小さな差を見つける。関係のない条件をそろえる。並べ方による誘導に気づく。そして最後に、サイトの目的へ戻る。この順番で見ると、比較は答えを押しつける演出ではなく、デザインについて詳しく話すための道具になります。