第 I 部統合ケース　三つの画面は、同じ目的ではない

ここまで、近いものはまとまって見えやすいこと、端や中心がそろうと関係を追いやすいこと、大きさや色が情報の強さを変えることなどを見てきました。この章では、それらを三つの実際的な画面へ戻します。

題材は、同じ文化祭です。ただし、三つの画面が助ける仕事は異なります。

一つ目は、展示作品に興味を持ってもらうための画面です。二つ目は、催しを比べてチケットを買うための画面です。三つ目は、文化祭の運営担当者が公開状況を確かめるための画面です。

同じ文化祭を扱っていても、必要な情報の順番は同じではありません。何のための画面かが変われば、主役にするもの、まとめるもの、目立たせるものも変わります。

作品をゆっくり見てもらう画面

最初は、展示作品を紹介する画面です。

この画面で最も広い場所を使っているのは作品画像です。題名や日時より先に作品の雰囲気が伝わるよう、画像のまわりにも広い余白があります。文字は画像と競わない大きさに抑えられています。

これは、情報が少ないから優れた画面なのではありません。作品を落ち着いて見てもらうという目的に合わせ、最初に必要な情報を絞った画面です。

一方で、開催日時を急いで探している人には不便かもしれません。日時を次の画面まで隠すのではなく、作品を邪魔しない位置に短く載せれば、静かな見た目と情報の見つけやすさを両立できます。

次は、催しを選んでチケットを買う画面です。

この画面では、大きな作品画像よりも、日時、価格、残席、購入ボタンが重要です。一つの催しに関係する情報を一枚のカードへまとめ、別の催しとの間を広く空けています。どの価格とどのボタンが同じ催しに属するかを、囲みと距離の両方で伝えています。

同じ形のカードを繰り返すと、同じ位置にある情報を縦に比べられます。上のカードで価格を見たあと、下のカードでも同じ場所を見れば価格が見つかります。

ただし、形をそろえるだけでは十分ではありません。この例では価格が大きく、残席は小さな文字で右端に置かれています。買えるかどうかを決める大切な情報なのに、価格から離れすぎています。この問題は、あとで詳しく直します。

三つ目は、文化祭を運営する人が使う画面です。

運営担当者は、一つの作品を大きく見るのではなく、公開できていない催しや更新に失敗した催しを探します。そのため、画面には多くの行と列があります。

一見すると、前の二画面より忙しく見えます。しかし、情報が多いこと自体が失敗なのではありません。催し名は左、公開状態は中央、更新時刻と担当者は右というように、同じ種類の情報が同じ列へ並んでいます。このそろいがあるため、担当者は上下へ視線を動かして違いを探せます。

ここで余白を大きく増やすと、一度に見える催しが減り、かえって確認しづらくなることがあります。必要なのは、鑑賞画面のように静かにすることではなく、異常な状態と通常の状態を見分けやすくすることです。

三画面のうち、購入画面には直したい箇所がありました。まず、変更前のカードを一枚だけ見ます。

価格は大きく太いため、すぐに見つかります。残席は小さく、価格から離れています。さらに、周囲の説明と似た強さなので、カードを急いで読んだときに通り過ぎやすい配置です。

残席だけを巨大にすれば、今度は催し名や価格より強くなりすぎます。赤くするだけでは、赤が見分けにくい人や色が置き換わる表示環境へ意味が残りません。

そこで、大きさを極端に変えず、価格の近くへ移します。

価格と残席は、どちらも購入を決める前に確かめたい情報です。二つを近づけると、視線をカードの端まで往復させなくても続けて読めます。「残席わずか」「売り切れ」のような言葉も残せば、色は意味そのものではなく、見つける助けとして使えます。

この修正で使ったのは、特別な公式ではありません。関係する情報を近づける、同じ種類の情報をそろえる、大切さに合った文字の強さを選ぶ、色だけへ意味を任せない、という第1部で見てきた考え方です。

三つの画面を、余白の多さや情報量だけで順位づけることはできません。

展示紹介画面は、作品へ注意を向けるために広い余白を使います。購入画面は、催しを比べるために同じ形のカードを繰り返します。運映画面は、多くの状態を一度に確かめるために行と列を使います。

大切なのは、見た目を一つの正解へそろえることではありません。その画面で必要な情報が、必要な順番と強さで伝わることです。

画面を見て「すっきりしている」「ごちゃごちゃしている」と感じたら、そこで判断を終えず、何が広いのか、何が近いのか、どこがそろっているのか、どの情報が強いのかを言葉にします。すると、残すべき特徴と直すべき問題を分けて考えられるようになります。