ワダチを作る #7：ヘッダー・バナー・日付の帯…画面の見た目を、案を画像で並べて決めた

前回（#6）で、アイコンと削除を作りました。今回は、画面の見た目を整えた話です。

• フォントを、ハコヅミと同じにした
• ヘッダーに、ロゴとメニューを出した
• 記録の画面の上に、バナーを出した（そして、画像を加工した）
• 基本色を、決め直した
• 「朝」「夜」の見出しと、日付まわりを、作り直した

進め方：案を、実際の画面で、並べて見る

見た目の話は、文字で相談すると、いつまでも決まりません。「もう少し見栄えを良くしたい」と言われても、何をどう変えるかが、分からないのです。

そこで、途中から、次の進め方にしました。

1. 案を、3〜4つ出す
2. 実際のアプリの画面に、その部分だけを差し替えた画像を作って、並べて見せる
3. 選んでもらって、Issue にして、実装する

画像は、テストの仕組み（Playwright）で、アプリを動かして、画面の一部を差し替えて撮ったものです。本物の画面なので、実際の見え方に、近いのがいいところです。基本色・見出し・日付まわりは、すべて、この方法で決めました。

---

フォントとヘッダー

フォントは、ハコヅミと同じ M PLUS Rounded 1c（丸みのある Web フォント）にしました。Google Fonts から読み込みますが、読み込みで表示を待たせないように、最初は media="print" で読み込んで、画面が動き出してから、有効にします。E2E では、Google Fonts に届かない設定にして、「フォントが読めなくても、使える」ことを、毎回、確かめています。

ヘッダーは、これまで、文字の「ワダチ」と、「習慣」のリンクだけでした。ハコヅミと同じように、左にロゴ（アプリのアイコン）、右にメニュー（「記録」「習慣」。アイコンの下に文字）にしました。メニューのアイコンは、Lucide の線画を、使う分だけ写して置きました（パッケージは足さない）。

バナー：差し替えたら、文字が大きすぎた

記録の画面の上に、ハコヅミと同じように、バナーを出しました。ChatGPT で作ってもらった新しい画像（幌馬車と轍の絵）です。

実際に見ると、ロゴ・タイトル「ワダチ」・一文が、全体的に大きすぎました。ハコヅミのバランスに、近づけたい。でも、画像の中の文字なので、コードでは、直せません。

選択肢は、2つ。

• ChatGPT に頼んで、作り直してもらう
• 画像を、加工する

加工を、試しました。ロゴ・タイトル・一文を、切り出して、小さくして、置き直します。元の場所の空は、縦のグラデーションの色で塗り直して、縁をぼかしました。

できた画像を見てもらって、そのまま採用しました（約 134KB が、約 81KB になりました）。「受入での直し」として、画像だけを差し替える PR にしました。

基本色：バナーの文字の色が、また変わった

「基本色は、バナーのタイトルの文字の色にそろえる」という方針でした。ところが、新しいバナーのタイトルの文字は、前より、ひとまわり明るい茶色（#7c4928）でした。今の基本色（#4f2208）とは、少し違います。

3案を、実際の画面で、並べました。

C（中間）にしました。 ヘッダーが、バナーと、なじみます。白い文字とのコントラストは、10.1 あります（基準は 4.5）。

直すところは、3か所（app.css の値、ブラウザの上部の色 theme-color、ホーム画面に追加したアプリの色 theme_color）です。この3つが、そろっていることを、ユニットテストで確かめるようにしました。直し忘れを、CI が見つけます。

「朝」「夜」の見出し

記録の画面の「朝」「夜」は、文字だけで、味気ない状態でした。ハコヅミの「タブ」のような見た目を中心に、4案を並べました。

**案C（帯）**にしました。左に太い線、淡い茶色の帯、朝は太陽・夜は月のアイコン、右端に、**その日の「N / M やった」**を出します。

• 数えるのは、その日に出ている習慣だけ（やらない曜日の習慣、期間の外の習慣は、数えない）
• チェックを付け外しすると、その場で、数が変わる
• 見出しの文字は、h2 のままにして、アイコンと数は、h2 の外に置く（テストが、見出しの名前で探しているため）

案D（看板）は、バナーの絵の「朝活・夕活・習慣」の看板と、同じモチーフで、一番ワダチらしかったのですが、傾けた見た目が、好みが分かれそうなので、見送りました。

日付まわり：「今日」の小さな行は、意味が薄かった

記録の画面の日付の下には、「今日」（前の日なら「2026-10-20」）という小さな行がありました。日付は、すでに見出しにあるので、意味が薄い。日付まわり全体も、シンプルすぎる。

3案を並べて、さらに、1週間の帯を「日めくりカレンダー」の形にした3案を、並べました。

**3-b（リングの穴つきの、1週間の帯）**にしました。

• 直近 7 日が、日めくりの形で並び、日付を押すと、その日へ移る
• その日に「やった」がある日に、●（数えない。あるか、ないかだけ。「連続日数を主役にしない」とは、ぶつからない）
• 見出しの日付の右に、「今日」「昨日」「N 日前」のバッジ
• ‹ › は、7 日ずつ。**「もう少し余白が欲しい」**という指摘で、広い画面では、帯と 16px 以上あけた（狭い画面では、7 枚を細くしないよう、見出しの行の右端に移す）

土曜は青っぽく、日曜は赤っぽく、平日は基本色、選んだ日はオレンジの帯です。色は、トークン（sat・sun）にしました。

---

つまずいたこと

• 帯を足したら、既存のテストが3件、落ちました。「最初の li」を取っていたテストが、帯の日めくり（li）を拾ったためです。習慣の枠を、チェックボックスで探す形に、直しました
• 1週間の帯を作るとき、日付の境目（月またぎ・年またぎ・うるう日）を、ユニットテストに、入れました。「選んでいる日が、必ず、7 日の中にある」ことも、60日分で確かめました

おわりに

• 見た目は、案を、実際の画面で、並べて決める。早く決まる
• 3つの値がそろっていることを、テストで見張る（基本色）
• 見出しの構造（h1・h2 の名前）は、変えない。テストが、頼っている

次回は、編集の画面を、1つの「保存する」にまとめた話と、ステップ2を終えて、次の段階に進む話です。