序章　まず、一つの画面を読み解く

最初に、一つの Web 画面を見ます。専門用語はまだ使いません。著者が「どこが気になったか」を画面上の具体的な場所へ置き換えていく過程を追います。

例に使うのは、架空の権限申請画面です。締切、申請対象、三種類の権限、承認経路、申請理由、送信ボタンが一画面に置かれています。情報の意味を詳しく読む前から、強く見える場所と、関係が分かりにくい場所があります。

最初に強く見えるもの

右上の「本日 17:00 締切」は、周囲と異なる色の面に入り、画面の端で孤立しています。そのため、本文より文字が小さくても強く見えます。ここで分かるのは、締切が重要だという事実ではなく、周囲との見た目の差が大きいことです。

関係が分かりにくいもの

画面中央には「閲覧」「編集」「ダウンロード」という三つの権限があります。その下には、直属上長から部門長までの承認経路があります。どちらも横方向へ並び、同じような強さの枠を持っています。このため、選択する権限と、申請後に進む承認順序が、似た種類の情報に見える可能性があります。

押した後がまだ見えない

右下の「申請する」は、塗りのある大きなボタンです。しかし、この静止画だけでは、押した直後に何が起きるか、送信中に再び押せるか、成功や失敗がどこへ表示されるかは分かりません。画面に見えている情報と、操作して初めて分かる状態は別です。

この序章では、まだ良い画面か悪い画面かを決めません。一つの「なんか変」を、締切の色、権限と承認経路の似た枠、送信後の状態という具体的な場所へ分けました。第 I 部からは、このような違いがなぜまとまりや強さとして見えるのかを、一つずつ詳しく説明します。