ワダチを作る #24:有料プランの中身を考え、タイマーに「途中の鐘」と「夜の町のシーン」を試した
前回(#23)の終わりに、タイマーの「背景+BGM」を考えた話を書きました。今回は、その続きです。
- カレンダーを、日曜始まりにした
- 有料プランの中身を考え、途中の鐘と 60 分のタイマーを作った
- 夜の町のシーン(絵+動き+BGM)を試作し、iPad と iPhone で確かめた
- 編集の画面で、最初の入力が元に戻る不具合を直した
カレンダーを、日曜始まりにした
前回、日付を選ぶ欄とやった日のカレンダーを、月曜始まりにしていました。ワダチの「週○回」は、月曜から日曜で数えるからです。
ですが、ハコヅミ(1 つ目のサービス)のカレンダーは日曜始まりです。Claude Code に「カレンダーの最初って、普通はどちらが多い?」と聞くと、日本では日曜始まりが多いそうです。壁掛けや手帳のカレンダー、iPhone や Google カレンダーの日本の既定も、日曜始まりです。月曜始まりは、ヨーロッパや国際的な日付の決まりの考え方とのことでした。
そこで、カレンダーの並びは日曜始まりにしました。「週○回」の数え方は、月曜から日曜のままです。数え方を変えると、積み上がりの数字が変わってしまうからです。
有料プランの中身を考えた
ここまで作って、ワダチは自分が欲しかった機能がほぼそろいました。毎日実際に使っていて、前の Calm と Notion の組み合わせより、ずっと使いやすくなりました(自分で作ったので、当たり前ですが)。
そこで、有料プランの中身を考えました。前に決めた方針は、「数ではなく、機能で差を付ける」です。習慣の数や記録の年数に上限を付けると、続けている人ほど困る形になるからです。
Claude Code にも案を出してもらいました。
- タイマーまわり:シーン(背景+BGM)・途中の鐘・30 分より長いタイマー・音の組み合わせ
- 振り返り:1 年の積み上がりを 1 枚の画像にまとめる「今年の轍」
- 見た目:テーマの色・ホーム画面のアイコン
- 応援プラン:機能の差はほとんど付けない
逆に、通知(リマインダー)やひとことメモは、続けるための基本の機能なので、無料のままがよい、という意見でした。私もそう思います。
まずは、作りやすい「途中の鐘」と「60 分のタイマー」から作りました。課金の仕組み(Stripe・規約・特定商取引法の表記)は作るのが重いので、後回しです。それまでは、管理者と、データベースで「有料」にした人だけが使えます。無料の人には、欄も出しません。
途中の鐘
瞑想のアプリによくある機能です。「5 分ごと」のように、タイマーの途中で小さな鐘を鳴らします。

「途中の鐘」は、分の数を自由に入れる
ワダチのタイマーは、開始の鐘・環境音・終わりの鐘を、1 本の音声にまとめて流しています(#4)。途中の鐘も、同じ鐘の音を小さくして、その中に入れました。音声の中の決まった位置にあるので、一時停止してもずれず、画面をロックしていても鳴ります。
60 分のタイマー
今のタイマーは 30 分までです。音声をブラウザの中で作っているので、長いほど重くなるからです(30 分で約 80MB)。有料の人だけ、60 分まで設定できるようにしました。
ただ、60 分だと音声は約 160MB になります。iPad でこの大きさの音声を作って、最後まで流せるかは、まだ試していません。これから実機で確かめて、足りなければ、音声の作り方を変えるつもりです。
夜の町のシーンを試作した
いちばん作ってみたかったのが、シーンです。YouTube の作業用・瞑想用の BGM 動画のように、タイマーの後ろに風景を出し、音楽を流します。
絵は ChatGPT、動きはブラウザで
前回書いたとおり、背景は動画ではなく、静止画の上に、ブラウザで小さな動きを重ねる作り方にしました。
絵は ChatGPT で作りました。プロンプトでは、あえて「星は描かない(後から星のエフェクトを追加するため)」と頼んでいます。動く星を重ねたときに、絵の中の止まった星と混ざらないようにするためです。
その絵に、次の動きを重ねました。
- 星のまたたきと、ときどき流れ星(空の部分だけ。地平線に近いほど少なく、暗く)
- 町の明かりのゆらぎ(絵の中の、明るく暖かい色の点を自動で見つけて揺らす)
- 手前の草原の、風に揺れる草

タイマーの後ろに、夜の町。星・町の明かり・草が、少しずつ動く
最初は、草原に風が通るとき、明るい帯がふわっと横切るようにしていました。ですが、見てみると不自然だったので、やめました。また、手前に 1 本だけ妙に明るい草が出ていました。草の色を、根元の絵の色から作っていたので、黄色い花の上に生えた草だけ明るくなっていたのです。色を草原の暗い緑の範囲に収めて直しました。
音楽:Suno の利用条件を調べた
曲は、AI で作ることを考えています。Suno で作ってみたところ、無料プランでは、曲をダウンロードできませんでした。
そこで、「1 か月だけ有料プランにして曲を作り、そのあと無料に戻したら、その曲は使い続けてよいのか」を Claude Code に調べてもらいました。Suno の規約は 2026 年 9 月 3 日に変わっていて、今の規約では、有料プランのあいだに正式にダウンロードした曲は、解約しても商用で使い続けられることになっていました。一方、無料プランで作った曲は、あとで有料にしても使えるようにはなりません。
(規約は変わることがあるので、実際に作るときに、もう一度確かめるつもりです。)
今回は試作なので、曲は試しに使ってよいことを確かめたフリー素材にしました。
音質:聞き比べると、差が大きかった
ワダチのタイマーの音声は、22,050Hz・モノラルで作っています。環境音(雨や波)には、これで十分でした。
試作の見本に、元の曲(44.1kHz・ステレオ)と、アプリと同じ形(22,050Hz・モノラル)を切り替えるボタンを付けて、聞き比べました。曲だと、差は結構ありました。有料の機能なので、44.1kHz・ステレオを使いたいところです。
ただ、今のように 1 本の音声にまとめると、44.1kHz・ステレオでは 30 分で約 320MB になり、iPad では作れません。そこで、曲は別の音声として、くり返し流すことにしました。
iPad でロックしたら、音が止まった
ここが一番の心配でした。ワダチのタイマーは、iPad の画面をロックしても音が鳴り続けるように、苦労して作っています。音声が 2 つになっても、大丈夫か。試作を開発環境に出して、iPad と iPhone で試しました。
最初に iPad の Chrome で試したところ、うまくいきました。次に Safari で試すと、ロックした瞬間に、曲も鐘も止まりました。
診断の記録を見ると、Safari が 2 つの音声をまとめて止めていました。音声が 1 つなら止まらないので、2 つあることが原因と見ました。そこで、念のため「ブラウザの中で、音声を AAC に圧縮できるか」を調べる行を足しました。圧縮できれば、曲と鐘を 1 本の音声にまとめても、軽くできます。iPad も iPhone も、圧縮できました。
ところが、そのあと何度試しても、Safari で止まらないのです。iPhone の Safari、iPad の Safari、ホーム画面に追加したアプリ(PWA)、どれもロック中に途中の鐘・終わりの鐘・曲が鳴り続けました。1 回目と同じく、1 分半たってからロックして最後まで置いても、全部鳴りました。
最初の 1 回だけ止まった理由は、わかっていません。ひとまず、2 つの音声のまま進めることにしました。もしまた止まるようなら、AAC の 1 本にまとめる作り方に切り替えます。準備はできています。
試作で確かめていなければ、このあたりの癖はわかりませんでした。実機で試すのは大事です。
最初に変えた設定が、元に戻る不具合
60 分のタイマーのテストを書いていて、気になることがありました。習慣の編集の画面で、最初にタイマーの時間を変えると、入れた値が元に戻ってしまうのです。2 回目からは戻りません。
調べてみると、タイマーの時間だけでなく、頻度(毎日・曜日・週○回)と「タイマーを使う」のチェックも、最初に変えると戻っていました。変えたつもりの設定が保存されない、困る不具合です。
原因は、画面を作っている Svelte の仕組みにありました。編集の画面では、何か変えると「まだ保存していない変更があります」と出して、保存のボタンを画面の下に貼り付けます。この表示と、欄の値を入れる処理が、たまたま同じ 1 つの更新の処理にまとまっていました。Svelte は、画面を読み込んだあと、欄の初めの値を整理するときに、「最後に入れた値」の覚えも消してしまいます。そのため、最初の変更で表示が切り替わると、欄に初めの値を入れ直していたのです。
保存の段を別の部品に分けて、直しました。直す前のコードではテストが 3 件とも落ち、直したあとは通ることを確かめています。テスタの方にも、お知らせで知らせました。
そのほか
使い方のページの「積み上がり」の絵が、前の画面のままでした。1 枚に撮ると縦に長くなりすぎるので、積み上がりの一覧・習慣化の目安・やった日のカレンダーの 3 枚に分けて撮り直しました。
次は
次は、シーンの素材づくりです。曲を、商用で使える形で作ります。絵も、夜の町のほかに 1〜2 セット作るつもりです。そのあと、タイマーの設定でシーンを選べるようにします。