回答と正解と平均が重なった棒を、グラデーションではなく45度ストライプにした

日用品や食料品の値段をテンキーで当てて、自分の物価感覚が世間と比べてどれくらい合っているかを測る Web サービス「bukka_now（物価ナウ）」を作りました。

結果画面のいちばんの見どころは、1問ごとに全員の回答を集計した10分割の横棒ヒストグラムです。「卵1パックはいくら？」という問題に対して、世間の人がどの価格帯に投票したのかが山の形で並び、その中に「あなたの回答」「正解（公的統計の価格）」「みんなの予想の中央値（平均）」の3つの印が入ります。

ところが、このグラフを作ってブラウザで表示してみると、2つの視覚的な罠にぶつかりました。1つは**「分布の山（ヒストグラム）のはずが、未達成の進捗ゲージに見えてしまう問題」。もう1つは、あなたの回答と正解と平均が同じ価格帯に入ったときに、「グラデーションで塗ったら何の色か分からなくなる問題」**でした。

1日で捨てた「お菓子の箱」デザインと、紙とインクの配色への転換

棒グラフの話に入る前に、画面全体のデザインを大きく作り直した経緯に触れておきます。

実は bukka_now の画面は、最初の試作から2回作り直しています。最初は暗いネイビーの背景にネオンカラーを載せたフィンテック調、次にお菓子の「たべっ子どうぶつ」のパッケージをモチーフにした、ビスケット色のチップや金色のメダルが並ぶ賑やかな画面を作りました。しかし、10問分のグラフと5つの統計値を並べる画面でお菓子風の装飾を盛り込むと、枠線と影とバッジだらけになってしまい、肝心の「数字とグラフ」がまったく頭に入ってきませんでした。せっかく1日かけて組んだテーマでしたが、その日のうちに全部捨てることにしました。

代わりに目指したのは、イラストレーターの unpis さんの作品やサイトのような、生成りの紙（#faf6ef / #f5f2eb）の上に均一な2pxの黒いインク線（#1e1e1e / #191919）を引き、限られたフラットな純色だけを差すスタイルです。絵文字もすべて撤廃しました。

この紙とインクの画面の中で、各設問の3つの主役となる数字に、それぞれはっきり見分けがつく色を割り当てました。

カード上部の数値グリッドに並ぶ文字の色と、下のヒストグラムの棒の色を完全に1対1で揃えることで、「赤い棒が自分、青い棒が正解」と説明書きを読まなくても視線が迷わないようにしました。

罠1：棒の後ろに「100%幅のグレーの枠」を敷いたら、進捗バーに見えた

最初に10分割の横棒グラフを組んだとき、私は何気なく、それぞれの棒の後ろに「横幅いっぱいの薄いグレーの背景枠（トラック）」を敷きました。CSS でよく見る .bar-track { width: 100%; background: #eae5dc; } の中に、割合に応じた幅の .bar-fill を入れる作り方です。

ところが、これを画面に出してみると、ひどく違和感のある見た目になりました。

10個の価格帯（ビン）に回答が分散すると、いちばん回答が集まった最頻値の価格帯でも、全体の 25%〜30% くらいにしかなりません。100%幅のグレーの枠の中に25%の棒が入っていると、人間の目はそれを「分布のピーク（山）」とは見てくれず、**「まだ4分の1しか溜まっていない、未完了の進捗ゲージ（プログレスバー）」**として読んでしまうのです。10本すべての棒がスカスカの途中経過に見え、どこが山なのかが一目で分かりませんでした。

対策はシンプルでした。

1. 棒の後ろのグレーの背景枠（トラック）を完全に撤去する。 左端の金額ラベルのすぐ横から、2pxの黒い縁取りがついた棒そのものが直接右へ伸びる形（ダイレクト横棒）にしました
2. いちばん割合が大きい棒（最頻値）が、描画領域の約 82%（バッジ撤去後 78〜82%）まで伸びるように相対スケールで拡大する。 25%のビンが絶対幅の25%でちょこんと止まるのではなく、その問題のトップの棒がグラフの右端近くまで堂々と伸び、他の9本がその比率で並ぶようにしました

この2つを入れた瞬間、「未達成のゲージが10本並んだ画面」が、誰が見ても一発で分かる「釣鐘型の度数分布ヒストグラム」に変わりました。さらに棒の横に付いていた「あなた (250円)」「正解 (258円)」というテキストバッジも思い切って消し、棒の先端にはシンプルなパーセント数字（28% など）だけを添えることで、山の輪郭がくっきりと浮かび上がりました。

罠2：回答と正解と平均が「同じ棒」に重なったとき、どう塗るか

10本の棒グラフがきれいに出るようになると、すぐに次の問題が起きました。

このクイズでは、相場感覚が鋭い人ほど「あなたの回答」が「正解」や「みんなの平均」と同じ価格帯（ビン）に入ります。たとえば正解が175円、みんなの予想が168円、あなたの回答が170円だった場合、3つとも「160〜180円」の1本の棒に重なります。2つが重なる組み合わせは3通り（あなた＋正解、あなた＋平均、正解＋平均）、3つすべてが重なるのが1通りです。

単色の棒しか用意していなければ、どれか1つの色で上書きするしかありません。「あなたの回答」の赤で塗れば「正解がどこだったか」がグラフから消え、「正解」の色で塗れば「自分の棒がどれか」が消えてしまいます。

最初に思いついたのは、CSS の linear-gradient(90deg, ...) で左から右へ色をなめらかに混ぜる方法でした。しかし、実際に2色・3色のグラデーションを高さ13pxの細い棒にかけてみると、中間の色が濁ってしまい、元のどの色とどの色が混ざっているのかが判別できなくなりました。 特に3色が重なったときは、ただのカラフルで曖昧な棒にしか見えず、紙と2pxの黒線で統一したパキッとした画面のトーンとも完全に浮いてしまいました。

そこでグラデーションをやめ、境界をぼかさない**45度のハードエッジな斜めストライプ（シマシマ）**に切り替えました。CSS の repeating-linear-gradient(45deg, ...) を使い、同じ色止め位置で次の色へ切り替えることで、色の境目をくっきり立たせます。

/* あなたの回答 ＋ 正解 が同じ価格帯に重なったとき（6px幅の45度ストライプ） */
.stripe-user-actual {
  background: repeating-linear-gradient(
    45deg,
    var(--color-user) 0px,
    var(--color-user) 6px,
    var(--color-actual) 6px,
    var(--color-actual) 12px
  );
}

/* 3つすべてが同じ価格帯に重なったとき（3色ストライプ） */
.stripe-all {
  background: repeating-linear-gradient(
    45deg,
    var(--color-user) 0px,
    var(--color-user) 5px,
    var(--color-actual) 5px,
    var(--color-actual) 10px,
    var(--color-avg) 10px,
    var(--color-avg) 15px
  );
}

6px（3色のときは5px）間隔の斜め45度ストライプにしたことで、高さ13pxの細い横棒の中でも、それぞれの元の色が1ミリも濁らずにそのまま並びます。 しかも、単色の棒が並ぶ中で「斜めのシマシマ模様」になっている棒は視覚的なテクスチャとしても目立つため、「自分の回答がドンピシャで正解（または世間の真ん中）と重なった！」という嬉しい一致が、そのままお祝いの柄のように機能するようになりました。

この色分けとストライプの判定関数（getBarColorClass）は、結果画面の1枚目（10分割の横棒ヒストグラム）だけでなく、横にスライドした2枚目の「1円単位プロット（縦棒グラフ）」でもそのまま共通で使っています。

複数の意味が1つの要素に重なったとき、安易にグラデーションで混ぜると情報はかえって減ってしまいます。「混ぜずに、境界を立てて並べる」という小さな CSS の選択が、結果画面の読みやすさを支えるいちばんのお気に入りの工夫になりました。