ワダチを作る #22：積み上がりを、メニューの 1 つにした（習慣化の目安 66 日と、やった日のカレンダー）
前回（#21）は、タイマーの鐘と環境音を、本物の録音に替えた話でした。今回は、積み上がりの見せ方を見直した話です。#20 で相談した内容を、3 つの Issue に分けて作りました。
- 「積み上がり」を、メニューの 1 つにした
- 習慣化の目安（66 日）までの道のりを、7 段の階段で見せた
- やった日を、月のカレンダーと 1 年のヒートマップで見られるようにした
- 本番の D1 の数を確かめて、ステップ 5 を閉じた
積み上がりを、メニューに出した
これまで、習慣ごとの積み上がりの画面は、習慣の一覧の各枠にある「積み上がり」のボタンから開いていました。毎日の記録とは別の場所にあり、少し探す必要があります。
そこで、トップページとヘッダーのメニューに「積み上がり」を足しました。開くと、全部の習慣の積み上がりが、朝・夜に分けて並びます。習慣を押すと、その習慣の詳しい画面に移ります。
トップページのメニューに「積み上がり」が並んだ
メニューの絵は、トップページのほかの 2 つと同じ作りで用意しました。スマホでも、3 つが横に並びます。習慣の一覧の「積み上がり」のボタンは、入口がメニューに移ったのでなくしました。
開発環境で触ってみて、気になったことがありました。積み上がりの一覧から習慣を選ぶと、ヘッダーのメニューで濃くなる項目が「積み上がり」から「習慣」に変わってしまいます。習慣ごとの画面の URL が /habits/<id>/progress で、「習慣」の下にあるためでした。URL から今いるメニューを決める処理を 1 か所にまとめ、この画面は「積み上がり」として扱うよう直しました。
習慣化の目安（66 日）を、7 段の階段で見せる
#20 で確かめた研究では、新しい行動が身につくまでの日数は、中央値で 66 日でした（人によって、もっと短くも長くもなります）。これを「習慣化の目安」として、そこまでの道のりを出すことにしました。
数えるのは、連続の日数ではなく、やった日の通算です。休んだ日があっても、やった日は減りません。研究でも、1 日やらなかっただけでは、習慣になっていく流れにあまり響かなかったそうです。ワダチの「休んだ日があっても、積み上がった跡は消えない」という考えにも合います。
積み上がりの一覧。66 日に届くと、階段の上に旗が立つ
道のりは、66 日を 7 つに分けた階段で見せます（10・19・29・38・48・57・66 日）。7 段にしたのは、メニューの絵が「積み木の階段」だからです。
作る前に、「7 段階の画像は必要？」と Claude Code に聞きました。段ごとに絵を用意すると、7 枚の絵を描き分ける必要があり、あとで直すのも大変です。そこで、**画像ではなく、棒を 7 本並べた図（SVG）**にしてもらいました。届いた段は濃い色で塗り、まだの段は枠だけです。色はデザインの値（トークン）から取るので、色を変えても図を作り直す必要がありません。
習慣ごとの画面では、階段を大きく出し、目安の説明を添えた
言い方にも気をつけています。「66 日で習慣になる」とは言い切らず、あくまで「目安」です。「連続」「途切れた」「失敗」という言葉は使いません。この決まりは、ユニットテストでも確かめています。
やった日を、カレンダーで見る
習慣ごとの画面には、やった日を日付で見る場所がありませんでした。そこで「やった日」の欄を足しました。
見せ方は、いくつかの案を、実際の画面の形で並べてもらって比べました。月のカレンダーは日付がわかりやすく、1 年のヒートマップは長い期間の様子が一目でわかります。最初は「パソコンは 1 年のヒートマップ、スマホは月のカレンダー」の案で作りました。
ですが、作ったものを触ってみると、どの端末でも両方を見たくなりました。そこで、タブで切り替える形に変えました。既定は「月ごと」です。
「月ごと」。‹ › で前の月に戻れる
「1 年」。スマホでは、マスが小さな点になる
スマホの幅で 1 年分（53 週）を並べると、1 マスがかなり小さくなります。「スマホでヒートマップは厳しい？」と聞いたところ、横にスクロールさせる案などもありました。私は、マスのすきまを狭めて、小さな点のまま 1 画面に収める案を選びました。日付を細かく見るのは「月ごと」で、「1 年」は全体の様子がわかれば十分です。
日の塗り方は、3 つに分けています。
- やった日：濃い色
- 付いていない日：薄い色（責める色にしない）
- やらない日（始める前・休止中・やらない曜日）：点線の枠で、目立たなくする
やらない日を「できなかった日」と同じ色にすると、休んだことが目立ってしまうためです。
本番の数を確かめて、ステップ 5 を閉じた
#15 で直した、D1 の「読む行の数」が無料の枠を超えかねない件を、本番で確かめました。直したあとの 24 時間で、読んだ行は約 100 万行でした。D1 の無料の枠は 1 日 500 万行なので、十分に収まっています。
これで、ステップ 5（その他の機能強化）の Issue がそろって済んだので、マイルストーンを閉じました。テスタの募集を始めたあとの作業は、ステップ 6 にまとめています。
ほかに、CI の小さな直しもしました。CI の E2E のジョブで、Playwright のブラウザと、それが使うライブラリを入れる手順が、たまに止まったまま進まないことがありました。この手順に 5 分の時間切れを付け、失敗したら 1 回だけやり直すようにしました。
ちなみに、前回の環境音は、iPad で 30 分流し続けても、問題なく最後まで鳴りました。
次は
これで、#20 で相談した積み上がりの見直しは、ひととおり本番に出ました。次は、テスタの方の声を聞きながら、使いにくいところを直していく予定です。