ワダチを作る #23：日付を選ぶカレンダーをハコヅミとそろえ、タイマーの「背景＋BGM」を考えた

前回（#22）は、積み上がりをメニューの 1 つにした話でした。今回は、カレンダーの見た目を 2 つ直した話と、タイマーに足したい新しい機能を考えた話です。

• 日付を選ぶ欄を、ハコヅミと同じ作りのカレンダーにした
• やった日のカレンダーを、四角から丸にした（大きさも直した）
• タイマーに「背景の絵＋動き＋BGM」を足す案を考えた

日付を選ぶ欄を、ハコヅミとそろえた

ワダチで日付を選ぶのは、習慣を登録するときの「始めた日」と、編集の画面の「始めた日を直す」「再開する日」の 3 か所です。ここは、ブラウザ標準の日付の欄を使っていました。

標準の欄は手軽ですが、端末ごとに見た目も操作も違います。iPhone と iPad とパソコンで、全部違う形のカレンダーが出ます。

ハコヅミ（1 つ目のサービス）では、キャンプの期間を選ぶ欄に、自作のカレンダーを使っています。開始日と終了日を続けて選ぶ、2 か月表示のものです。ワダチは 1 日を選ぶだけなので、同じ見た目と操作のまま、1 か月表示で 1 日を選ぶ形にしてもらいました。

• 欄には「2026年10月25日（日）」と、曜日つきで出る
• 月は、前の月・次の月のボタンのほか、年と月の選択欄でも動かせる（何年も前から続けている習慣の始めた日を入れるとき用）
• 選べない日（2000 年より前・1 年より先など）は、押せない
• キーボードだけでも選べる

最初は、ワダチの数え方（「週○回」は月曜から日曜で数える）に合わせて、カレンダーも月曜始まりにしていました。ですが、ハコヅミのカレンダーは日曜始まりで、日本のカレンダーも日曜始まりが多いので、あとから日曜始まりに直しました。「週○回」の数え方は、月曜から日曜のままです。土日の色は、ワダチの色にそろえています。

やった日のカレンダーを、丸にした

前回作った「やった日」のカレンダーは、マスが角の丸い四角でした。日付を選ぶ欄やハコヅミのカレンダーは、日付を丸で出しています。並べると、四角っぽさが気になりました。

そこで、丸にした場合の見本の画像を作ってもらいました。

「1 年」のヒートマップ（1 年分の小さなマスの表）も、丸にするか迷いました。GitHub の草のような四角のほうが見慣れています。ですが、凡例（「やった」「付いていない」などの印）は 2 つのタブで共有しているので、形がそろっていないと合いません。ワダチは「連続」を主役にしないので、草らしさにこだわる理由もありません。両方とも丸にしました。

パソコンでは、丸が大きすぎた

開発環境で触ってみると、スマホはよいのですが、パソコンと iPad で丸が大きすぎました。カレンダーが横いっぱいに広がるので、丸も大きくなり、詰まって見えます。

これも、見本を 4 つ作ってもらって比べました。丸の大きさだけを決める案、カレンダーの幅も決める案などです。決めたのは、丸は 40px まで、カレンダーは決まった幅まで（24rem）にして、まん中に置く形です。日付を選ぶ欄のカレンダーと、ほぼ同じ大きさになります。

スマホの幅は、もともと決まった幅より狭いので、丸が少し小さくなるだけです。

見た目の相談は、言葉だけだと伝わりにくいところがあります。実際の画面に CSS を足して撮った見本を並べてもらうと、すぐに決められました。

タイマーに「背景＋BGM」を足したい

ここまで作って、ワダチとして欲しかった機能は、ほぼそろったと感じています。そこで、フリーと有料プランの差を、少し考えてみました。

前に、有料版を作るなら「数ではなく機能で差を付ける」と決めていました。続けている人ほど上限に当たる形は、ワダチの考えに合わないからです。差を付ける機能として思いついたのが、タイマーの背景と BGM です。

今のタイマーは、背景がなく、環境音（雨・波・焚き火など）だけです。ここに、YouTube でよく見る作業用・瞑想用の BGM 動画のように、風景と音楽を選べるようにしたい、という案です。

正直に言うと、YouTube でよくある「AI × BGM」を一度作ってみたい、という興味もあります。その経験を積めるのも楽しみです。

静止画に、少しだけ動きを付ける

YouTube の BGM 動画をいろいろ見てみると、普通の動画ではなく、静止画に、ほんの少しだけ動きがあるものが多い気がしました。星がキラキラしていたり、葉っぱが揺れていたりします。

これはどう作るのか、Claude Code に聞きました。作り方は大きく 3 つあるそうです。

1. 静止画を渡して、動画にしてくれる AI（Runway・Kling など）で、小さな動きを付ける
2. 動かしたい部分（水面・炎など）だけを切り分けて、手で動かす（シネマグラフ）
3. 動画を作らず、静止画を出して、その上にブラウザの中で動きを描く

ワダチには、3 が向いていそうです。絵 1 枚と少しのコードで済むので軽く、くり返しのつなぎ目も出ません。「動きを減らす」設定の人には、動きを止めて絵だけにするのも簡単です。

試しに、見本を作ってもらいました。背景の絵は仮のもの（本物では、画像の AI で作った絵を使う予定）で、動いているのは、上に重ねた星と葉っぱだけです。

仮の絵でも、思っていたより雰囲気が出ました。

音は、今の作りのまま

一番の心配は、iPad の画面ロックです。ワダチのタイマーは、画面をロックしても環境音と終わりの鐘が鳴るように作っています（#4 のころに、実機で苦労したところです）。動画や動きを足して、ここが壊れては困ります。

そこで、音は今の作りのまま、鐘と BGM と終わりの鐘を 1 本の音声にまとめます。背景と動きは、見た目だけです。ロックで動きが止まっても、外せばまた動くだけなので、音とずれることもありません。

進め方は、3 つの Issue に分けました。

1. 試作：iPad の実機で、背景と動きを出したまま、ロックしても音が鳴り続けるかを確かめる
2. 素材：絵と曲の AI のサービスを比べて、2〜3 セットを作る（Suno に限らず比べる）
3. 機能：タイマーで「シーン」（背景の絵＋動き＋BGM）を選べるようにする

有料にするかは、まだ決めていません。課金の仕組みは、決済だけでなく、規約や特定商取引法の表記なども要るので重い作業です。まずはベータ版のテスタの方に使ってもらい、反応を見てから決めます。

次は

まずは、シーンの試作で、iPad のロックの動きを確かめます。うまくいけば、いよいよ AI で絵と曲を作る段階です。