プログラミングゼロでも作れた。LA旅行のデジタルしおりをClaude Codeで作った記録【前編】

「旅行のしおりって、Wordで作るしかないの？」「現地でスマホからサッと確認できたらいいのに」——そう思ったことはありませんか？

私はLA旅行を前に、Claude Codeを使ってiPhoneで見られるデジタルしおりを作ることに挑戦しました。プログラミング経験ほぼゼロの私が、どうやって作ったのか。完成するまでに何度つまずいたのか。赤裸々にお伝えします。

「旅行のしおりをデジタルで作りたい」「Claude Codeで何か作ってみたい」という方にぜひ読んでほしい記事です。

きっかけ：LA旅行のしおりをどう作るか問題

2026年4月末から5月にかけて、LA旅行を計画していました。日程はこんな感じです。

7日間・盛りだくさんの旅程。ホテルの情報、各日の予定、観光スポットの詳細……これをWordやメモ帳にまとめるのが毎度面倒でした。

しかも紙のしおりやPDFは、現地でスマホから見るのが不便。そこで思ったんです。「iPhoneでサクッと確認できるしおりを、Claude Codeで作れないか？」と。

Claude Codeに「iPhoneで見やすいしおりを作りたい」と相談すると、こんな提案が返ってきました。

「PWA（Progressive Web App）形式にすれば、ホーム画面に追加してアプリのように使えます」

PWAとは、Webページなのにアプリのように動く仕組みのことです。インターネット接続がなくてもオフラインで見られるので、現地での通信が不安なときにも便利。

「そんな仕組みがあるの？」と驚きながらも、これで作ることにしました。自分では絶対に思いつかなかった選択肢を、Claude Codeが提示してくれた瞬間でした。

試行錯誤の末に完成したしおりには、こんな機能が入っています。

ドジャース観戦の日はドジャーブルー、ディズニーの日はディズニーレッド……と日程ごとにテーマカラーを設定したのがお気に入りポイントです。現地でスマホを開いたとき、一目でその日の予定がわかるのがとても便利でした。

ちなみに、実際のホテル予約には下記を使用しました！

「旅行のしおりをiPhoneアプリのように使いたい」という願いが、Claude Codeのおかげで実現しました。

プログラミング経験ゼロでも、「こんなものが欲しい」を言葉にしてClaude Codeに伝えるだけで、自分専用のデジタルしおりが作れます。旅行前の準備が楽しくなる体験でした。

次の記事では、しおりを作る過程で起きたエラーや失敗の詳細をお届けします。お楽しみに。