旅アプリ TaviNote

彼女と草津温泉へ旅行に行ったとき、持ち物やスケジュールをまとめながら「この準備している時間ごと、もっと面白くできないかな」と思ったのが始まりでした。
デザインからプログラミング、ウィジェットづくりまで手探りで進め、ストア公開までたどり着いたTaviNoteの話を書いてみます。

Origin きっかけは、一泊二日の草津温泉旅行でした

すべての始まりは、彼女と一泊二日で群馬県の草津温泉へ行く旅行の計画を立てていたときでした。

「何を持っていこう」「どこの宿に泊まる？」「湯畑の周りでおいしいものを食べ歩きしたいな」──。 旅先での楽しい場面を想像しながらも、持ち物リストを作ったり、日程のToDoを整理したりしているうちに、ふと気づいたことがありました。

「旅行の準備って本来ワクワクするものなのに、チェックボックスを淡々と埋めるだけの作業になると少し味気ないな」

せっかく大切な人と行く旅行なら、準備の時間そのものがエンタメになればいい。 タスクをひとつ終えるたびに、ゲームのように木がぐんぐん育っていったら、旅行当日を迎えるまでのカウントダウンもまるごと楽しい思い出になるはずだと考えました。

Concept 「準備が進むほど、木が育つ」という仕掛け

思いついたのは、持ち物を詰めたり予定を決めたりするたびに、一本の木が育っていくという体験でした。

チェックボックスを1つ埋めるごとに、画面の中の小さな芽が少しずつ葉を広げていく。すべての準備が終わって100%になった瞬間、ちょうど花が咲いて「出発準備OK！」を教えてくれるような、そんなワクワクする仕掛けです。

せっかくの旅行なら、準備期間も二人で楽しみたい。ルームIDを共有すればリアルタイムで一緒にしおりを作れるようにし、旅から帰ってきた後も、育てた木が写真や日記と一緒に「思い出の森」に残るようにしました。

Visuals & AI 10段階の「旅の木」はどうやって作ったのか？

TaviNoteの象徴である「タスクを完了するたびに育つ木」。 準備度0%の更地から100%の完成まで、10段階の成長イラストを用意しています。

この木のイラストは、Geminiの画像生成機能を使って作成しました。
ただ単にAIへ「木を描いて」と頼むだけでは、画像ごとにアングルやタッチ、周りの小物がバラバラになってしまい、アニメーションのように自然に成長させることができません。

そこで、箱庭のようなアイソメトリック（斜め上からの見下ろし構図）や質感、ライティングを固定するプロンプト（指示文）を自分で独自に設計しました。土から芽が出て、枝を伸ばし、つぼみが膨らみ、最後は満開の桜の花を咲かせて鳥居やベンチが並ぶまで──。10枚の絵柄や世界観が崩れないよう、プロンプトを細かく調整しながら一歩ずつ生成して形にしました。

桜の木の10段階成長ギャラリー（0% → 100%）

Generated with Gemini

プロンプトを工夫し、世界観を保ったまま芽から満開の桜（Cherry Blossom）まで自然につながる10枚の成長プロセスを設計しました。

Stage 1 (10%)

Stage 2 (20%)

Stage 3 (30%)

Stage 4 (40%)

Stage 5 (50%)

Stage 6 (60%)

Stage 7 (70%)

Stage 8 (80%)

Stage 9 (90%)

Stage 10 (100%)

旅先や好みに合わせて選べる「おしゃれな木々」

南国リゾートの「プルメリア」、北欧・インテリア風の「オリーブ」、和モダンな「イチョウ」など、ウィジェットに置きたくなる多彩でおしゃれな木を用意しました。

南国プルメリアの花 白と黄色の花びらが咲き誇る、リゾート旅にぴったりの可憐な木

地中海オリーブの木 窓辺の柔らかな光と陶器鉢が映える、北欧インテリア風の木

黄金色のイチョウ 黄金色の葉が美しく舞い散る、洗練された和モダン盆栽アート

Development ウィジェットとの出会いと、Figmaでのデザイン

大学3年生の春から本格的な開発に入り、画面設計から実装、Firebaseでの同期まで一人で進めました。

開発を進める中で一番大きな転機になったのが、にっしーさんの『DayCity』や smak.worksさんの『PixelPot』に出会ったことでした。

この2つの素敵なアプリを見て、初めてスマホの「ウィジェット機能」の存在と面白さを知りました。「アプリを開かなくても、スマホのホーム画面を見るたびに木が育っているのが見えたら、旅の当日まで毎日ワクワクできるんじゃないか？」と一気に火がつき、ウィジェットの実装に挑戦しました。

Stack Webで作って、必要なところだけネイティブに降りる

中身はHTML・CSS・JavaScriptで、それをCapacitorでくるんでアプリにしています。 画面まわりはWebの書き方がそのまま使えるので、手を動かしながら形を変えていく作りには合っていました。 旅行データの同期と共同編集はFirestore、購読まわりはRevenueCatに任せています。

ただ、ホーム画面のウィジェットだけはWebの外側にあります。 ウィジェットはアプリを開いていない間もOSが描くものなので、Web側からは触れません。 そこでウィジェットの絵はAndroid側のコードで用意して、いま何%育っているか、次の旅行はどこか、といったデータをWeb側から渡す形にしました。 逆に端末の言語や通知の許可状態は、ネイティブ側にしか分からないのでWeb側から呼び出しています。 憧れて作りはじめた機能が、結局いちばんWebの外に出る必要のある部分でした。

日本語と英語の切り替えは、画面の文言を全部まとめて持つ方式にしました。 今は1,500件ほどの文言が入っていて、旅行の作成画面からエラーの一言まで、ここを通しています。 作りはじめた頃は文字を直接埋め込んでいたので、あとから全部を引きはがす作業が発生しました。 最初から分けておけばよかった、と後で気づいた種類の失敗です。

ストア用スクリーンショットも、Figmaで一からデザイン

Designed in Figma

アプリストアに並んだときの第一印象にこだわり、Figmaを使ってレイアウト・フォント・配色・3Dモックアップの構図まで一からデザインしました。

Prototyping 細かい動きの調整は、Figmaではなく実際に動くHTMLで

Figmaは静止画のレイアウトや配色を詰めるにはとても便利ですが、ボタンを押したときの手触りや、アニメーションの速度・間の取り方といった「動き」の気持ちよさまでは、実際に動かしてみないと分かりません。

そこでTaviNoteでは、細かいUI・UXの調整をFigmaのモックアップだけで終わらせず、実際にブラウザで動くHTML・CSS・JavaScriptのプロトタイプを作って行っています。木がぐんと伸びるアニメーションの速度やゴムのような弾み方、ローディングの出し方や間、ボタンを押したときの余韻など、コードを直接書きながら何度も実機で触って、指の感覚として気持ちいいと感じるところまで微調整を重ねました。

静止画のデザインカンプだけでは伝わらない「触った瞬間の心地よさ」まで作り込むことが、TaviNoteらしい体験づくりにつながっていると思っています。