準備が進むほど、木が育つ。
旅アプリ TaviNote
ができるまで

はじまりは、彼女と一泊二日で草津温泉に行く旅行の計画でした。「何持っていく？」「宿どこにする？」「湯畑のまわりで食べ歩きしたいね」。話しているあいだは、ずっと楽しいんです。でも、いざ持ち物リストを作って予定を並べはじめると、だんだん「作業」になっていきました。

予定はメモ帳、持ち物は LINE、お金の話はまた別のアプリ。気づけば、旅の準備があちこちに散らばっていました。

準備って、本当はワクワクする時間のはず。チェックボックスを埋めるだけになるのは、もったいない。

どうせなら、準備の時間そのものを楽しくしたい。やることを1つ終えるたびに、何かが育っていったら。旅の当日までのカウントダウンも、まるごと思い出になるんじゃないか。これが、TaviNote の最初のアイデアです。

形にしたのは、やることにチェックを入れるたびに、一本の木が育っていくアプリです。チェックが増えるほど画面の中の芽が少しずつ大きくなり、準備が 100% になるころには、木がしっかり育っています。

1. 

   1旅行をつくる

   旅は絵はがきのカードになって、ホームに並ぶ。

2. 

   2チェックして育てる

   3人で共有中、準備は 67%。

3. 

   3育ちを見返す

   芽が出たところから、一段ずつ振り返れる。

もうひとつこだわったのが、一緒に行く人と準備できること。ルーム ID を送れば、同じ旅行プランを家族や友達とリアルタイムで編集できます。

旅から帰ったら、育てた木は写真や日記と一緒に「思い出の森」に並びます。草津でも、湯畑の近くで見つけたレトロなポストや、温泉街で食べ歩いた焼き鳥のような、何気ない瞬間ほどあとで思い出すものでした。そういう一枚を、木と一緒に残せるようにしたかったんです。

OFFICIAL SITETaviNote 公式サイトアプリのダウンロードはこちらから →

TaviNote の顔は、育っていく木です。準備 0% の小さな芽から 100% まで、10段階の成長イラストを用意しています。木の絵は、Gemini の画像生成で作りました。

ただ、「木を描いて」と頼むだけだと、1枚ごとに角度もタッチも小物もバラバラになります。10枚並べたときに同じ木が育っているように見えなければ意味がありません。そこでやったのは、変えない部分を先に決めること。箱庭のような斜め上からの構図、光の当たり方、鉢や土の質感の3つを固定し、「芽が出る」「枝が伸びる」「つぼみがふくらむ」と、段階ごとの変化だけを足していきました。

桜の木0%

芽若木つぼみ満開

つまみを動かすと、準備の進み具合に合わせて木が育ちます。

旅先や気分で選べる木

その後、ねこ・いぬ・うさぎ・カピバラ・モルモット・コアラが木に寄り添う「動物の木」も加わりました。旅行の準備アプリに動物はいらないのでは、と最初は迷いました。でも入れてみたら、「次はどの子と育てよう」と選ぶ時間そのものが楽しくなったので、残すことにしました。

4月7日に Android 版を公開すると、Google Play にレビューが届きはじめました。うれしい声も、不具合の報告も、「こうしてほしい」という要望も。そのすべてに、ひとつずつ返信しています。

自分でも実際の旅行で使うたびに、「ここ、わかりにくいな」と思う場所が見つかりました。たとえば現在地マップ。最初は「現在地を取得」「現在地に戻る」「現在地を更新」と3つのボタンが並んでいて、作った本人でさえ迷っていました。

今は、地図を開いた瞬間に自動で自分の位置を追いかけます。ボタンは、地図を動かしたときに戻るための「現在地に戻る」1つだけ。地図も画面いっぱいに広げました。

思い出の森には、行った場所が並ぶ 3D の地球儀を足しました。最初は画質が荒く、拡大すると国の形がぼやけていました。原因は、昼と夜の地図を合わせるときに画像を小さくしていたこと。描き方を根本から変えて作り直し、今は NASA の衛星写真で、開いた時刻に合わせて夜の側に街の明かりが灯ります。

アプリを開いて最初に見る画面も、大きく変えました。以前は説明の画像が4枚並ぶだけで、ほとんど読み飛ばされていたと思います。そこで、旅の準備を手伝ってくれる案内役の女の子「こはる」をつくりました。相棒は、頭に双葉を乗せたねこの「ふたば」です。

はじめての案内では、こはるが話しかけながら「どんな旅が多い？」「誰と旅することが多い？」と質問します。質問に答えていく形はほかのアプリも参考にしましたが、そのまま真似ると、見た目も手触りもどこかで見たものになってしまいます。

そこで、「こはるの旅のノート」という世界観で作り直しました。方眼のノートにマスキングテープで貼ったメモ、荷札の形の選択肢、選ぶと押される赤いスタンプ、切手の形のこはるの顔、最後に出てくる乗車券のような「TAVINOTE PASS」。

選択肢のアイコンも、端末によって絵柄が変わる絵文字をやめて、15個すべてを線画で描き直しました。誰も気づかないかもしれない細部ですが、そろっていると、アプリ全体の印象が少しずつ変わると思っています。

TaviNote は Web の技術で作っているので、同じコードから iOS 版も出せる……と、作る前は思っていました。実際には、Android では問題なく動くのに、iPhone だけで起きる問題がいくつも出てきました。

一番困ったのは、iPhone で作った旅行を、友達が「ルーム ID が有効ではない」と言って開けない不具合です。共有は TaviNote の一番大事な機能なので、ここが動かないのは致命的でした。

そして 2026年10月、ちょうど自分の誕生日に iOS 版をリリースしました。Apple のファミリー共有にも対応していて、家族の誰かがプレミアムプランに入っていれば家族みんなで使えます。自分への誕生日プレゼントのつもりで出したアプリが、どこかの家族旅行で使われていたら、すごくうれしいです。

アプリを公開すると、機能を作る以外にもやることがたくさんあります。利用規約、プライバシーポリシー、データを消したい人のための案内ページ、特定商取引法に基づく表記。どれも、アプリの実際の動きと一言でもずれていると問題になります。

たとえば、天気を出すために旅行の行き先の場所を天気のサービスに送っています。最初は細かい位置をそのまま送っていましたが、天気を知るだけなら細かい位置はいりません。そこで約10km単位にぼかして送るように変えました。使っていない広告用の権限がアプリに残っていたのも見つけて、取り除いています。

誰かに褒められるところではありません。でも、使う人の情報を預かる以上、ここは手を抜けない。

中身は HTML・CSS・JavaScript で、それを Capacitor でくるんでアプリにしています。ホーム画面のウィジェットだけは、アプリを閉じている間も OS が描くものなので、Web のコードからは触れません。ウィジェットの絵はアプリ側で用意し、「いま何%育っているか」「次の旅行はどこか」といったデータを Web 側から渡しています。

言葉は、日本語と英語からはじめて、今は72言語です。最初は文字を画面に直接書いていたので、あとから全部を引きはがすことになりました。最初から分けておけばよかった、とあとで気づいた失敗です。

細かい動きは、Figma ではなくブラウザで実際に動くものを作って調整しています。木がぐんと伸びるときの速さと弾み方、ページをめくるような画面の切り替え、こはるがふわっと揺れる周期。実機で何度も触って、指で触ったときに気持ちいいと感じるところまで詰めました。

ストアの画像も、Figma で

1. 自分の「困った」から作る草津旅行の準備で感じたもやもやが出発点でした。自分が本当に困っていることだから、何を作れば楽しくなるかを、具体的に想像できました。
2. 数字より、ひと目でわかる形にする進捗バーではなく育つ木にしたことで、「今どこまで来たか」が説明なしで伝わるようになりました。
3. 変えないものを先に決める10段階の木も、こはるの世界観も、先に「そろえるもの」を決めてから変化を足すことで、ばらばらにならずに作れました。
4. レビューは、次に作るものの地図届いた声に一つずつ返信し、要望をそのまま機能にしてきました。アプリは出してからが本番で、使う人と一緒に育てていくものだと学びました。
5. 見えないところこそ丁寧に規約や位置情報の扱いは誰にも褒められませんが、使う人の情報を預かる以上、手を抜けないところだと思っています。

これからも、機能を増やすことより「思わず開きたくなるか」を大事にして、TaviNote を育てていきます。使ってみて思ったことがあれば、どんなに小さなことでも教えてもらえるとうれしいです。

ここまで読んでくださって、
ありがとうございました。