第25章　作ると、次に見るものが現れる

Web デザインは、頭の中で完成させてから、その通りに組み立てるだけの仕事ではありません。実際の文字を入れ、ブラウザで動かし、人が使うところを見ると、作る前にはなかった条件が現れます。

長い商品名が折り返す。通信が終わるまで時間がかかる。使う人によって押せるボタンが違う。こうした変化は、最初の案が無駄だったという意味ではありません。最初の案を作ったからこそ、次に考えることが見えるようになったのです。

最終章では、一つの案が現実の条件に出会い、少しずつ変わっていく流れを見ます。そして最後に、序章で見た画面へ戻ります。

25.1 見本の文字は、たいてい短い

商品カードの最初の案では、「山のノート」のような短い名前だけを使っていました。一行で収まり、下のボタンも決めた位置へきれいに置けます。

しかし、本番の商品名には、素材、用途、数量などが入ります。

図 25-1B では、長い商品名が二行になりました。カードの高さは文字に合わせて伸びています。ボタンを下へ押し出すのか、カードの下端へそろえるのかも、ここで初めて具体的に考えられます。

見本の一行だけを基準に高さを固定していたら、文字がボタンへ重なるか、途中で切れていたかもしれません。実際に入りそうな内容を置くことは、完成後の事故を先に見つける方法でもあります。

制作中のパソコンでは、送信を押すと結果がすぐ返ってくることがあります。その速さだけを見ていると、押してから完了するまでの途中を忘れます。

通信を遅くすると、待っている時間が見えるようになります。

何も変わらないまま待たされると、ボタンを押せなかったと思い、もう一度押す人がいます。二回送信されたり、同じ注文が重なったりするかもしれません。

必要なのは、派手な動きとは限りません。「送信しています」と表示する、ボタンを一時的に押せない状態にする、完了後に結果を伝える。時間の途中にも現在の状態が分かれば、待つ理由を理解できます。

管理する人には編集できても、見るだけの人には編集できない画面があります。

図 25-1D では、「編集する」ボタンが使えません。これだけでは、読み込み中なのか、故障なのか、権限がないのか分かりにくい場合があります。南京錠だけに頼らず、「編集する権限がありません」のように理由も伝えると、待っても変わらないことが分かります。

操作を隠す方がよい場面もあります。存在を知る必要がなく、表示するとかえって混乱する場合です。一方、申請すれば使える機能なら、使えない理由と申請方法を見せる方が役立ちます。同じ「押せないボタン」でも、次にできることによって表し方が変わります。

待ち時間の問題を見つけたあと、画面全体の色やボタンの位置まで同時に変えると、どの変更が役立ったのか分かりにくくなります。まず、「送信しています」という表示だけを加えます。

プログラムを調べれば、クリックを受け取ったか、通信が始まったか、二重送信を防いだかを確認できます。読み上げソフトへ状態を伝える HTML になっているかも確かめられます。

一方、「送信中だと人に伝わったか」はコードだけでは分かりません。表示に気づかず、もう一度押す人がいるかもしれません。「送信しています」の文字がボタンと離れすぎて、関係のない案内に見えるかもしれません。

実装が動いたことと、その意味が人へ伝わったことは別です。どちらも確かめて初めて、変更した表示が目的に合ったかを考えられます。

序章では、一つの権限申請画面を見ました。締切、必要な権限、承認される順番、理由の入力欄が一画面に並んでいました。

本を読み始めたときは、「情報が多い」「少し使いにくそう」と感じたかもしれません。今は、もう少し具体的に見られます。

「必要な権限」の箱と「承認ルート」の箱は横に並び、同じくらい強く見えます。しかし、申請する人が最初に決めるのは権限で、承認ルートは選んだ内容から決まる情報かもしれません。役割が違うなら、同じ強さで並べる必要があるかを考えられます。

理由欄と申請ボタンの間は近く、入力から送信へ進む流れは見えます。一方、締切は画面の右端にあり、横幅が狭くなったときに切れないかを確認したくなります。申請を押した後の待ち時間や完了表示は、この静止画だけでは分かりません。

「近接」「階層」「フィードバック」という言葉を言えることがゴールではありません。どの要素が、どんな関係に見えるか。条件が変わると何が起きそうか。静止画から分からないことは何か。そこまで具体的に話せれば、次に見る場所が分かります。

公開前に、すべての状況を知ることはできません。実際に公開すると、想像していなかった長い名前が入ります。通信の遅い場所から使われます。問い合わせや操作の失敗から、新しい問題が見つかります。

だからといって、危険が分かっているまま公開してよいわけではありません。個人情報が漏れる、キーボードで操作できない、重要な内容が読めないといった問題が残るなら、期限より人を守る判断が必要です。

公開後に見つかった問題は、失敗を隠す材料ではなく、次のデザインを考える材料です。問い合わせが多い言葉を直す。長い内容で崩れたカードを伸びるようにする。待ち時間が伝わらない画面へ状態を加える。

Web デザインを見る目とは、正解を暗記することではありません。画面で起きていることに気づき、具体的な言葉にし、ほかの理由も考え、実装と人の行動から確かめる力です。

作る。見る。気づく。言葉にする。一つ変える。比べる。そして、また作る。

次に作る画面が、この本の続きです。