前編では、LA旅行のしおりをClaude Codeで作ることを決め、PWA形式を採用するところまでお伝えしました。
この後編では、私が実際にClaude Codeに投げたプロンプト、途中で起きた失敗、こだわり機能ができるまでを包み隠さずお伝えします。
最初に投げたプロンプトはこれだった
まず私がClaude Codeに投げた最初の指示がこちらです。
📝 実際に使ったプロンプト（第1弾）
「4月28日から5月5日のLA旅行のしおりを作りたい。夫婦2人で行く。iPhoneで見やすくて、オフラインでも使えるものにしてほしい。ホテルは都ロサンゼルスホテル（3泊）、Biltmore LA（1泊）、Hilton Anaheim（2泊）。日程はドジャース観戦、サンタモニカ、ハリウッド、パサデナ、ディズニーランド。」
われながら雑な指示です。笑
でもClaude Codeはこの指示から「PWA形式のHTML一枚ファイル」を提案してきました。「オフラインで使える」という条件に対して、自分では思いつかなかった解決策を出してくれたのがまず驚きでした。
「思ってたのと違う」を繰り返した
最初に生成されたしおりを見て、正直に言うと「思ってたよりシンプルすぎる」と感じました。テキストが並んでいるだけで、見た目がつまらなかったんです。
そこから追加指示を重ねていきました。
📝 追加で投げたプロンプト（一部）
- 「各日程にテーマカラーをつけてほしい。ドジャースの日は青、ディズニーの日は赤」
- 「タイムラインを時系列で表示してほしい。日本時間とLA時間の両方を表示して」
- 「テキストをiPhoneで直接タップして編集できるようにしてほしい」
- 「上部にナビゲーションバーをつけて、各日にすぐ飛べるようにして」
- 「持ち物チェックリストと実用情報（チップの相場・Uber乗り方）も追加して」
1回の指示で完成させようとするより、「まず動くものを作って、あとから肉付けしていく」方が断然スムーズでした。これはClaude Codeを使う上で重要な気づきです。
iPhoneで直接編集できる機能が地味にすごかった
追加機能の中で一番「これは便利だ」と感じたのが、iPhoneの画面上でテキストを直接タップして編集できる機能です。
旅行中に予定が変わっても、アプリを開き直さずにその場で修正できます。実際に完成したしおりには「✏️ テキストをタップすると直接編集できます」という案内も表示されるようにしました。
技術的には contenteditable="true" というHTMLの属性を使っているだけなのですが、私がこれを知ったのもClaude Codeの提案がきっかけです。「こんな機能あるんだ」という発見が、作るたびにあります。
オフライン対応で詰まった話
PWAのオフライン機能を実現するには「Service Worker」というファイルが必要でした。これが一番詰まったポイントです。
Claude Codeが生成した sw.js というファイルを所定の場所に置いて動作確認をしたのですが、iPhoneのホーム画面に追加してもオフラインで開けない。
エラーの原因は「ファイルをiPhoneに転送する方法」の問題でした。ローカルで作ったHTMLファイルをiPhoneで開くには、どこかにホスティング（公開）する必要があります。これはClaude Codeの問題ではなく、私の知識不足でした。
最終的には無料で使えるホスティングサービスにファイルをアップロードすることで解決。この「詰まり→調べる→解決」のプロセス自体が、じわじわと知識になっていくのを感じました。
完成したしおりの構成
- 🌴 ヒーロー画面（旅行タイトル・期間・夫婦旅行の文字）
- 📋 旅行概要カード（出発・帰着・滞在日数・移動手段）
- 🏨 ホテル一覧（3ホテル・泊数・エリア）
- 📅 日程カード×7日分（各日テーマカラー・タイムライン・日本時間⇔LA時間切り替え表示）
- ✅ 持ち物チェックリスト
- 💡 実用情報（チップ相場・Uber乗り方・緊急連絡先）
最初の雑なプロンプトから始まって、追加指示を10回以上重ねて完成させました。所要時間は2〜3時間ほど。Wordでゼロから作るより絶対に速いし、仕上がりのクオリティも全然違います。
ちなみに、現地のホテル予約には agoda を利用しました！
国内・海外ホテル格安予約のアゴダ
まとめ：雑なプロンプトでも、育てればいい
最初から完璧な指示を出そうとしなくていい——これが今回の一番の学びです。
雑でもいいからまず作ってもらって、「ここが違う」「これも追加して」を繰り返す。Claude Codeとの作業は、会話しながら育てていくイメージが一番近いと思います。
旅行のしおりは毎年作る機会があるので、今後もClaude Codeで作り続けるつもりです。次はもっとうまくできるはず——そう思えるのも、失敗を含めた体験があるからです。
次の記事では、別のClaude Code活用体験をお届けします。お楽しみに。
コメント