野球のスコアボードは、最強のUIデザインかもしれない。「全部目立たせて」と言われたときの、スコアボード式・情報整理術
緊迫した球場内。
ふとスコアボードを見上げる。
ほんの一瞬見ただけで、
「6回裏、2対1」
「ランナー一・二塁」
「ツーアウト、カウント2-2」
と、試合状況がすっと頭に入ってきます。
これ、けっこうすごいことだと思うんです！
というのも、スコアボードに表示されているのは得点だけじゃありません。
イニングごとの得点、ヒット数、エラー数、ボール・ストライク・アウト、走者、打順、選手名、打率、球速、投球数、次の打者。
球場によって違いはありますが、ひとつの画面にかなりの情報量が詰め込まれています。
しかも、見る側の環境はさまざま。
静かな部屋で、じっくり見る人ばかりじゃありません。
遠い座席から、声援や音楽が鳴り響く中で、プレーの合間に数秒だけ視線を向ける。
野球に詳しい人もいれば、その日初めて球場に来た人もいる。
数万人がスコアボードを見て、刻々と変わる状況を把握しています。
Webサイトの閲覧状況より厳しい条件です。
それなのにスコアボードを見て、
「情報が多すぎて何が起きてるのか分からない」
と悩むことは無いはず。
野球のスコアボードって、世界一よくできたUIなんじゃないか。
試合を観ながら、私はときどきそんなことを考えています。
「全部目立たせる」は、
「全部目立たない」を生む
Web制作をしていると、情報量の多いページを作る機会がありますよね。
サービスの特徴、料金、実績、利用の流れ…
原稿を前にして、どれも大事に見えて、どう情報整理しようか手が止まる。
そんな経験、ありませんか？
当然なんです。 お客様にとっては、どれも伝えたいことなんですから。
すると作る側としても、
「せっかく書いていただいたから、全部しっかり見せたい」
「この説明も重要だから、小さく扱わないほうがいいよな」
「問い合わせボタンも目立たせなきゃ」
と考えてしまう。
でも、その結果どうなるかというと…
見出しも写真も説明文もボタンも、ぜんぶ同じくらい主張が激しくなります。
「俺も！」
「俺も！」
「俺も！」
そこに譲り合いの精神はありません。
全部を目立たせようとした結果、どこを見ればいいのかわからないページの出来上がりです。
では、あれだけ情報を詰め込んだスコアボードは、なぜ一瞬で情報を把握できるのでしょうか。
スコアボードが見やすい理由
私は、この3つがポイントだと思っています。
1️⃣見る順番が決まっている
2️⃣探す場所が決まっている
3️⃣変化する場所だけが変わる
ひとつずつ、Webサイトに置き換えて考えてみましょう。
1⃣見る順番が決まっている
スコアボードでいちばん目立つのは、現在の得点です。
次にイニングやカウント、走者の状況が目に入ってくる。
選手の打率や細かい記録ももちろん必要な情報ですが、得点と同じサイズでは表示されていません。
必要な情報でも、すべてを同じサイズで見せる必要はないからです。
Webサイトも同じ。
たとえば、サービス紹介ページにこんな情報があるとします。
・誰のためのサービスか
・どんな悩みを解決するか
・サービスの特徴
・料金
・詳しい仕様
・注意事項
・問い合わせ方法
このとき最初に伝えるべきなのは、「誰の、どんな悩みを解決するサービスなのか」です。
これが、スコアボードでいう現在の得点。
料金や実績は、申し込むかどうかを判断する材料。
詳しい仕様や注意事項は、必要な人が確認する補足情報です。
内容をひとつも削らなくても、
「主役」
「判断材料」
「補足」
に情報を分けるだけで、文字サイズ、余白、配置の判断がしやすくなります。
何を消すか決める前に、何から見せるか決める。
これが情報整理の第一歩です。
2️⃣探す場所が決まっている
試合中に、得点欄が突然左上に引っ越したりはしませんよね。
ボール・ストライク・アウト表示も、いつも決まった位置にある。
見る人は毎回、画面全体から探しているわけじゃないんです。
「得点はここ」「カウントはここ」と、表示場所を覚えている。
だから、数秒見ただけで情報を追えるんですね。
Webサイトでも、同じ役割のものは同じ場所・同じ見た目にする必要があります。
ページによってナビゲーションの位置が変わる。
同じ問い合わせボタンなのに、ページごとに色や文言が違う。
注意事項の見せ方が毎回変わる。
こういう小さな違いが積み重なると、ユーザーはその都度「これは何だろう？」と考えなきゃいけなくなります。
デザインに変化をつけることより、迷わず使えること。
優先すべきは、いつだって後者です。
3️⃣変化する場所だけが変わる
スコアボードの中でも、私が特によくできてるなと思うのが、B・S・Oの表示です。
ボール、ストライク、アウト。
状況が変わるたびに、決まった場所のランプだけが変化する。
変化する場所さえ見れば、今の状態がわかります。
Webサイトにも、状態を伝える場面はたくさんありますよね。
フォームを送信できたのか。
商品がカートに入ったのか。
申し込み手続きの何段階目にいるのか。
どのメニューが選択されているのか。
このUIが曖昧だと、ユーザーは
「あれ、今押せたのかな」
「いま何を選択してるんだっけ」
と不安になります。
B・S・Oのランプに置き換えると、解決策はシンプルです。
説明を増やすより、同じ場所に、視覚的にわかりやすい変化を出す。
この考え方は、フォームや予約画面、会員ページなどにそのまま使えます。
野球を知らない人には、暗号に見える。
それでもいい。
もちろん、野球のルールをまったく知らない人にとって、スコアボードは分かりやすいものではありません。
「H」や「E」って何？
なんでランプが3つ並んでるの？
知らなければ、暗号に見えるかもしれません。
私も数年前までは野球オンチで、スコアボードの見方がまったくわかりませんでした。
でも、一度見方を覚えれば、別の球場でも、別の試合でも、同じルールで情報が読めるんです。
ここにも、Webデザインのヒントがあります。
わかりやすさとは、
一度覚えたルールを、次の画面でも同じように使えること。
同じ色、同じ形、同じ配置に、毎回違う意味を持たせない。
サイト全体で共通のルールを作る。
その積み重ねが、「使いやすい」UIデザインにつながっていきます。
UIを「スコアボード化」する3ステップ
情報が多いページを整理するとき、いきなり文章を削ろうとすると迷ってしまいます。
どれも必要に思えるからです。
そんなときは、この順番で考えてみてください。
ステップ1．
「誰に向けた、何のページ」か書き出す
「誰に向けた、何のページなのか」を一文で書いてみます。
それが、そのページでいちばん大きく見せるべき情報です。
ステップ2．
主役・判断材料・補足に分ける
情報を消すのではなく、役割を分けます。
主役は最初に大きく見せる。
判断材料は主役の近くに置く。
補足は、必要な人だけが読める位置とサイズにします。
ステップ3．
変化する場所を決める
ボタン、エラー、入力完了、選択中の項目など、状態が変わるパーツを洗い出します。
そして、同じ意味のパーツには同じ色・形・位置を使います。
おわりに。
情報が多いページを調整するとき、優先したいのはこの3つでした。
✅最初に見る情報
✅いつも同じ場所にある情報
✅状態に応じて変化する情報
本当に大切な情報が届くように交通整理することも、デザイナーの大事な仕事です。
制作中のページに迷ったら、少しだけスコアボードを思い出してください。
このページの「現在の得点（いちばん見せたいこと）」は何だろう。
ユーザーは、どこを見れば状況が分かるだろう。
変化したことは、ひと目で伝わるだろうか。
そう考えると、情報を削る前に調整すべき箇所が見えてくるはずです。
ぜひ、「何を削るかより、何から見せるか。」を考えて、情報整理をしてみてください。
AI時代に、自分で考え判断できるWebデザイナーになるためのヒントを、noteで発信しています。
👇
ホームページの新規制作や、AIで作ったWebサイトの見直しについても、お気軽にご相談ください。
👇
いいなと思ったら応援しよう！
少しでも役に立ったと感じていただけたら、応援いただけると次の記事を書く元気が湧きます。
いただいたサポートは、より良い記事を届けるための執筆時間の確保に使わせていただきます。