Pocochaメーター｜デイリーボーダー予測Webツール

数字の前に、条件をそろえる

Pocochaメーターで最初に整理したのは、予測値そのものではなく、その数字がどの条件に対するものかです。画面上部に対象日付、締め時間、ランクをまとめ、利用者が条件を確認してから結果へ進める順序にしました。締め時間は13時・22時・24時、ランクはS6からE1まで選択できます。日付には曜日だけでなく「月末最終」などの補足も表示し、似た条件の取り違えを減らしています。

±0・+1・+2を、探さず比較できる形に

結果は±0、+1、+2をそれぞれ独立したカードに分けました。カードごとにグレー、グリーン、オレンジの色調を使い、大きな数字と小さな「pt」を組み合わせることで、単位を保ちながら値を主役にしています。スマートフォンで配信中に確認する場面では、表を横に追うよりも縦に並ぶカードのほうが、必要な段階を見つけやすくなります。数値をタップしてコピーできる操作も、別の画面へ転記する手間を減らすためのものです。

目標との差を、行動に近い情報へ

予測値を見ても、現在のメーターとの差を頭の中で計算しなければ、すぐには使えません。そこで「現在のあなたのメーター」を入力する欄と、「ボーダーまでの必要アイテム数」の表示領域を続けて配置しています。予測値の確認から、目標までの差を把握するところまでを一つの流れにする設計です。入力項目を増やしすぎず、条件選択、予測の比較、現在値の入力という順番を崩さないことを重視しました。

予測値であることをUIでも伝える

最も重要なのは、予測を確定情報のように見せないことです。各カードには「予測目安」と明記し、画面下部にも過去の統計データに基づく非公式ツールであること、実際の数値を保証しないことを掲載しています。視認性を高めるほど数字の印象は強くなるため、強調表現と注意書きをセットで設計しました。390px幅でも横方向のはみ出しが起きないことを確認し、移動中や配信中でも条件と数値を追いやすい画面にまとめています。