※本記事はアフィリエイト広告（PR）を含みます。
「旅行のしおりって、Wordで作るしかないの？」「現地でスマホからサッと確認できたらいいのに」——そう思ったことはありませんか？
私はLA旅行を前に、Claude Code（クロードコード）を使ってiPhoneで見られるデジタルしおりを作ることに挑戦しました。プログラミング経験ほぼゼロの私が、どうやって作ったのか。完成するまでに何度つまずいたのか。赤裸々にお伝えします。
「旅行のしおりをデジタルで作りたい」「Claude Codeで何か作ってみたい」という方にぜひ読んでほしい記事です。
きっかけ：LA旅行のしおりをどう作るか問題
2026年4月末から5月にかけて、LA旅行を計画していました。日程はこんな感じです。
- 4/28（月）出発 → LA到着
- 4/29（火）ドジャース観戦
- 4/30（水）サンタモニカ・ビーチ
- 5/1（木）ハリウッド観光
- 5/2（金）パサデナ
- 5/3（土）ディズニーランド
- 5/4（日）帰国
✈️ この旅程で、実際に行ってきました。しおりを作った話だけでなく、現地でかかった費用や失敗も別記事に全部書いています。
7日間・盛りだくさんの旅程。ホテルの情報、各日の予定、観光スポットの詳細……これをWordやメモ帳にまとめるのが毎度面倒でした。
しかも紙のしおりやPDFは、現地でスマホから見るのが不便。そこで思ったんです。「iPhoneでサクッと確認できるしおりを、Claude Codeで作れないか？」と。
「PWA形式」という存在を初めて知った
Claude Codeに「iPhoneで見やすいしおりを作りたい」と相談すると、こんな提案が返ってきました。
「PWA（Progressive Web App）形式にすれば、ホーム画面に追加してアプリのように使えます」
PWAとは、Webページなのにアプリのように動く仕組みのことです。インターネット接続がなくてもオフラインで見られるので、現地での通信が不安なときにも便利。
「そんな仕組みがあるの？」と驚きながらも、これで作ることにしました。自分では絶対に思いつかなかった選択肢を、Claude Codeが提示してくれた瞬間でした。
完成したしおりの中身
試行錯誤の末に完成したしおりには、こんな機能が入っています。
- 日程ごとにカラーコードで色分けされたカード表示
- ホテル情報（エリア・泊数）を一覧で確認
- 各日の観光スポット・移動手段・食事メモをまとめて表示
- 上部のナビゲーションバーで各日にすぐジャンプ
- iPhoneのホーム画面に追加してオフラインで閲覧可能
ドジャース観戦の日はドジャーブルー、ディズニーの日はディズニーレッド……と日程ごとにテーマカラーを設定したのがお気に入りポイントです。現地でスマホを開いたとき、一目でその日の予定がわかるのがとても便利でした。
🏨 しおりに載せたホテルの予約について
今回の3軒はアゴダで予約しました。
どのエリアに泊まるかで旅程の組みやすさも治安の不安も変わるので、実際に泊まった3軒の比較記事もあわせてどうぞ。
まとめ
「旅行のしおりをiPhoneアプリのように使いたい」という願いが、Claude Codeのおかげで実現しました。
プログラミング経験ゼロでも、「こんなものが欲しい」を言葉にしてClaude Codeに伝えるだけで、自分専用のデジタルしおりが作れます。旅行前の準備が楽しくなる体験でした。
次の記事では、しおりを作る過程で起きたエラーや失敗の詳細をお届けします。お楽しみに。
📝 作ったものを記録に残すなら、ブログが一番でした
作って終わりにせず記事にしていくうちに、失敗の記録そのものが資産になっていきました。このブログはConoHa WING（コノハウィング）というレンタルサーバーで動かしています。
WordPressの立ち上げが管理画面から一通り終わるので、私のようにサーバーの知識がゼロでも詰まらずに始められました。
今ならスタート応援キャンペーンで月額678円〜になっています。
「作ったものが手元に溜まってきたな」と思ったタイミングでどうぞ。
コメント