ワダチを作る #16：トップをメニューの画面に、見出しをタブに…画面の手直しを、画像で並べて決めた

2026年10月23日

前回（#15）で、記録の画面を軽くしました。今回は、公開したあとに続けた、画面の手直しの話です。

トップページを、メニューの画面にした

これまで、ワダチのトップページは、記録の画面そのものでした。お知らせは、記録の画面のいちばん下、バナーは記録の画面のいちばん上にありました。

困っていたのは、パソコンや iPad です。幅が広い画面では、バナーが縦に大きくなり、毎日使う記録の画面で、習慣が下に押されていました。

相談して、ハコヅミと同じ形にしました。

メニューのアイコンは、自分で用意した絵です（ChatGPT で、ほかのアイコンと同じ絵柄で作ってもらった）。前の URL（/?date=…）は、記録の画面へ移すようにしたので、ブックマークも生きています。

ハコヅミでは、まとまりの見出し（「お知らせ」など）を、線の上に乗ったタブの形で出しています。ワダチは、茶色の太字だけでした。そろえるため、ハコヅミの見出しの部品を、中身を変えずに移しました。色はデザインの値（トークン）で決まるので、ワダチの茶色で出ます。

使ったのは、トップのお知らせ・習慣の編集・積み上がり・アカウントの画面です。記録の画面の「朝」「夜」の見出しは、前に決めた帯（アイコンと「N / M やった」つき）のまま残しました。

アカウントの画面では、見出しのない「退会する」のリンクにも、見出しを付ける案を出していました。作りながらハコヅミを見直すと、退会は、間違えて押さないよう、一番下に小さく置くだけでした。そちらに合わせました。

公開の前のレビューでもらった画面の提案のうち、小さなものを、まとめて直しました。

「座った時間」は、作ったとき、瞑想（坐禅）のタイマーだけを考えていました。あとからドローインにも使うようになり、言葉が合わなくなっていたのに、自分では気づいていませんでした。

記録の画面の習慣のカードは、周りの余白が少し広すぎる気がしていました。狭めた案を、実際の画面で 4 つ作ってもらい、並べて選びました。

Claude のおすすめは、詰まった感じのない案 B でした。ただ、毎日使う画面なので、1 画面に入る習慣が多い案 C を選びました。左右は、チェックボックスが枠の線に寄りすぎないよう、どの案も 12px にしています。

カードの高さを決めているのは、ほとんどがアイコン（64px 角）です。余白を詰めても、1 枚あたり 16px ほどしか低くなりません。それでも、習慣が 10 個あれば、160px 違います。

ほかに、内容の選択肢（朝活の「個人開発」など）の名前を、あとから直せるようにしました（今、レビュー中）。

これまでは、名前を直すには、「隠す」で消して足し直すしかありませんでした。それだと別の内容になり、過去の記録とのつながりが切れます。名前を直しても、内容は同じもののまま、過去の記録も新しい名前で出るようにしました。

画面の直しを重ねるうちに、気になってきたことが 2 つあります。

ハコヅミは、E2E を 3 つに分けて同時に流しています。ワダチも同じようにすれば、待ち時間は半分ほどになります。ただ、Actions の分は、ジョブごとに切り上げて数えられるので、使う分は 1.5 倍ほどになります。枠が戻る来月に入れるつもりです。

次は、習慣の編集の画面を短くする直しと、登録の画面で内容の選択肢も足せるようにする直しを進めます。