ChatGPT で旅のしおりを作って、家族や友だちに LINE で送る方法

家族旅行やサークル、社員旅行の計画が決まったら、ChatGPT に旅のしおりを HTML で作ってもらいましょう。1 つの HTML ファイルにまとめて出力してもらえば、Web ページとして公開して、LINE のグループから全員のスマホですぐに開けるしおりになります。

時刻や行き先、Google マップのリンク、スマホごとに記録できる持ち物チェックリストまで、スマホで見やすい形で一度に作れます。ChatGPT が作ったファイルのダウンロードリンクは短時間で期限が切れてしまいますが、HTML を公開して URL に変えておけば、旅行中いつでも開けて、予定が変わったときの差し替えも簡単です。

このページでは、スマホで見やすい旅のしおりを ChatGPT に作ってもらうためのプロンプトと、LINE で配れる URL にするまでの手順、地図やチェックリストを入れるときの注意点を紹介します。なお、ChatGPT の出力をファイルとして受け取る方法や公開の基本については、ChatGPT で作った HTML を公開する方法やChatGPT のキャンバスはどこ？もあわせてご覧ください。

ChatGPT に旅のしおりを HTML で作ってもらう

LINE のグループから全員のスマホで開けるようにするには、ChatGPT に「スマホで見やすい 1 つの HTML ファイル」として旅のしおりを作ってもらいます。

お願いするときは、次の点を入れておくとそのまま配れる形になります。

• 日ごとの時刻と行き先: 集合時間や移動、立ち寄る場所を時系列で並べてもらう
• 各行き先の Google マップのリンク: 場所ごとに https://www.google.com/maps/... のリンクをつけてもらう（リンクならどこからでも開けます。なお、Google マップの埋め込み（iframe）は公開したページでは表示できますが、ボックスのプレビューでは表示されません）
• 持ち物のチェックリスト: タップしてチェックを入れられるリストにしてもらう（チェックを覚えておく仕組み（localStorage）は開いたスマホごとに記録されるため、他の人と混ざらず各自のチェック帳として使えます）
• スマホの幅で見やすいレイアウト: 縦スクロールで片手でも読みやすい文字サイズと余白にしてもらう
• 1 つの HTML ファイルにまとめること: デザイン（CSS）や動きもすべて 1 ファイルの中に書き、画像を使う場合は https:// から始まる URL にしてもらう
• 外部のライブラリなしで動くこと: 追加の読み込みなしでそのまま表示できるようにしてもらう

なお、公開されたページは外のサイトにデータを取りに行けないため、しおりの中に天気予報などを外のサイトから自動で読み込む仕組みを入れても動きません。また、開いたページを家族やメンバーが一緒に書き直すことはできないため、予定が変わったときは元の HTML ファイルを持っている人が直します。

まずは下のプロンプトをコピーし、[ ] の部分を自分たちの旅行に合わせて書き換えてから ChatGPT に送ってみてください。

スマホで開いて読める「旅のしおり」を、1つのHTMLファイルで作ってください。

【旅行の内容】
・タイトル：[春の京都・家族旅行]
・日程：[2026年5月3日（日）〜5月4日（月）]
・メンバー：[家族4人]
・1日目の予定：
  - [09:00 東京駅集合・新幹線で出発]
  - [11:15 京都駅到着・駅周辺でランチ]
  - [13:00 清水寺を散策]
  - [16:00 旅館「〇〇」にチェックイン]
・2日目の予定：
  - [09:30 旅館を出発]
  - [10:00 嵐山・竹林の小径を散策]
  - [12:30 嵐山でランチ・お土産探し]
  - [15:30 京都駅から新幹線で帰路へ]
・持ち物：[着替え、常備薬、モバイルバッテリー、雨具、保険証]
・メモ・連絡先：[旅館の電話番号：075-XXX-XXXX / 緊急連絡先：〇〇]

【作り方の条件】
1. LINEからスマホで開いたときに見やすいよう、スマホの幅に最適化したデザインにしてください。
2. 日ごとの時刻と行き先がひと目でわかるタイムライン形式にしてください。
3. 各行き先には、タップするとGoogleマップで検索結果が開くリンク（https://www.google.com/maps/search/?api=1&query=行き先名）をつけてください。
4. 持ち物はタップしてチェックを入れられるチェックリストにし、チェック状態が開いたスマホごとに保存される（localStorageを使う）ようにしてください。
5. CSSやJavaScriptはすべてHTMLファイルの中に書き、外部のライブラリは使わず、この1ファイルだけで動くようにしてください（画像を使う場合は https:// のURLにしてください）。
6. 天気予報など、外部サイトからデータを取得する仕組みは入れないでください。
7. ダウンロードできる .html ファイルとして出力してください。

ChatGPT はどのプランでもふだんはコードをコードブロックで返しますが、頼めば .html ファイルとしてダウンロードできる形でも渡してくれます（ChatGPT が作ったファイルのダウンロードリンクは短時間で期限切れになるため、出たらすぐに保存してください）。コードの取り出し方や画面での直し方は ChatGPT で作った HTML を公開する方法 と ChatGPT のキャンバスはどこ？ で詳しく紹介しています。

スマホで見やすいしおりにするために頼むこと（地図、持ち物チェック、時刻表）

スマホで開いて使いやすい旅のしおりにするには、ChatGPT に「入れてほしい項目」と「ファイルの作り方」をあわせて伝えます。

最初に次の内容を頼んでおくと、あとから手直ししやすくなります。

• 日ごとの時刻と行き先: 1 日目、2 日目のように分け、移動や集合の時刻と場所がすぐわかる時刻表にしてもらう
• 各行き先の Google マップのリンク: 場所の名前だけでなく、https://www.google.com/maps/... のリンクをつけてもらう
• 持ち物のチェックリスト: タップしてチェックを入れられる一覧にしてもらう
• スマホの幅で見やすいレイアウト: 小さな画面でも文字が詰まらず、縦スクロールで読める見た目にしてもらう
• 1 つの HTML ファイルにまとめること: デザイン（CSS）はファイルの中に書き、画像を使う場合は https:// で始まる URL にして、外部のライブラリなしで動く形にしてもらう

ChatGPT はふだん、どのプランでも、作った HTML を画面上のコードブロックで返します。「.html ファイルとしてダウンロードできるようにして」と頼めばファイルでも受け取れますが、ChatGPT が作ったファイルのダウンロードリンクは短時間で期限切れになるため、早めに保存してください。受け取った HTML を公開する手順は ChatGPT で作った HTML を公開する方法、画面上で手直しする方法は ChatGPT のキャンバスはどこ？ で確認できます。

また、HTML で作ったしおりには、仕組み上できることとできないことがあります。LINE グループで配る前に、次の点を知っておくと安心です。

• 地図の表示: https://www.google.com/maps/... のリンクなら、プレビューでも公開したページでもそのまま開けます。Google マップの埋め込み（iframe）は、公開したページでは表示できますが、ボックスのプレビューでは表示されません。
• 持ち物のチェック: チェックした状態を覚えておく仕組み（localStorage）を入れてもらえば、ページを閉じても印が残ります。ただし記録は開いたスマホごとに保存されるため、家族やメンバーのチェック状態は共有されず、各自のスマホだけの記録になります。
• 天気予報などの自動取得: しおりの中に、外のサイトから天気予報などのデータを読み込む仕組みを入れても動きません（公開したページは外のサイトにデータを取りに行けないためです）。天気を見たいときは、天気予報サイトへのリンクを貼ってもらう形にします。
• 予定の書き直し: 家族やメンバーが同じしおりを一緒に書き直すことはできません。予定が変わったときは、元のファイルを持っている人が直して更新します。

ChatGPT に旅のしおりを頼んで HTML ファイルを受け取る

ChatGPT にしおりを作ってもらうときは、スマホの画面でそのまま開ける「1 つの HTML ファイル」として頼むのが手軽です。まずは次のようなプロンプトに行き先や予定を入れて伝えてみてください。

• しおりに入れてほしい内容: 日ごとの時刻と行き先、各スポットの Google マップのリンク（https://www.google.com/maps/...）、持ち物のチェックリスト
• 作り方の指定: スマホの幅で見やすいレイアウトにすること、CSS を含めて 1 つの .html ファイルにまとめること（外部のライブラリは使わず、画像を入れる場合は https:// の URL にすること）、ダウンロードできるファイルとして出力すること

このとき、いくつか知っておくと安心なポイントがあります。

• 地図の入れ方: 公開したページでは Google マップの埋め込み（iframe）も表示できますが、作成中のプレビュー画面では表示されません。どの環境でも確実に開けるよう、通常の地図リンクも入れておくと便利です。
• 持ち物チェックの記録: チェックリストの状態を保存する仕組み（localStorage）を頼めば、開いたスマホごとにチェックが記録されます。記録は他の人と混ざらず、家族やメンバー各自のものとして使えます。
• できないこと: 公開されたページは外部のサイトへデータを取りに行けないため、自動更新される天気予報などは動きません。また、メンバー全員で同時にしおりを書き換えることはできないため、予定が変わったときはファイルを持っている人が直して更新します。

ChatGPT は通常コードを画面上に表示しますが、「.html ファイルとしてダウンロードできるようにして」と頼めばファイル形式で受け取れます。ダウンロードリンクは短時間で期限が切れるため、作成されたら早めに保存しておきましょう。ファイルの詳しい取り出し方やキャンバスの使い方は、ChatGPT で作った HTML を公開する方法 や ChatGPT のキャンバスはどこ？ をご覧ください。

旅のしおりをLINEで共有するときにファイル送信で開けない理由

ChatGPTで作った旅のしおりをHTMLなどのファイルとしてLINEのグループに送ると、メンバーのスマホによってはうまく見られないことがあります。

LINEのトークでもファイル自体は送れますが、受け取った側がそれを開くアプリは各自のスマホ環境に任されるためです。HTML ファイルを LINE で送る方法で確かめたところ、ファイルでの共有には次のような制限がありました。

• デザインや画像が抜け落ちる: 別ファイルに分けたCSSや画像は一緒に届きません。HTMLファイルだけをコピーして開くと、CSS、画像、スクリプトは読み込まれませんでした（2026年10月13日、パソコンのChromiumで確認）。
• iPhoneのプレビューで地図や画像が動かない: iPhoneの「ファイル」アプリのプレビューでは、JavaScriptが動かず、ネット上の画像も読み込まれませんでした（2026年10月6日、AppleのiPhoneシミュレーター・iOS 26.3で確認）。
• 時間がたつと開けなくなる: LINEのヘルプによると、トークで送ったファイルがLINEのサーバーに残るのは一定期間だけです（具体的な期間の長さは案内されていません）。期間を過ぎると、表示もダウンロードもできなくなります。

早くから計画を立てる旅行や、当日に地図や予定をパッと確認したい場面では、期間切れや表示崩れがあると困ります。ファイルをそのまま送る代わりにWebページのURLとして共有すれば、相手はリンクをタップするだけで普段のブラウザからしおりを開けます。

しおりを URL にして LINE グループに送る手順

ChatGPT で作った旅のしおりを Convika に乗せれば、アプリ不要で全員のスマホから開ける URL になります。登録前のプレビューでスマホでの見え方を確かめてから、4 つの手順で LINE グループに共有できます。

1. ChatGPT からしおりを HTML で受け取る

ChatGPT に「スマホで見やすい 1 つの HTML ファイルにして」と頼み、作られた .html ファイルをダウンロードするか、表示された HTML コードをコピーします（受け付けるのは 2 MB までの .html / .htm ファイル 1 つ、またはコードの貼り付けです）。

2. ボックスに入れてスマホで見え方を確かめる

このページのアップロードのボックスに HTML ファイルをドロップするか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押します。登録なしで 3 分間だけ開けるプレビューの URL ができるので、自分のスマホで開いて時刻や地図、持ち物リストが見やすいか確かめます。

3. ページを受け取って公開する

プレビュー URL の上にある「このページを受け取る（無料・カード不要）」を押して登録し、管理画面で「公開する」を押します。無料の「一般公開」で公開すると、しおりが検索結果や Convika のギャラリーに出ることがあります。検索結果に出さずに、リンクを知っている人だけがパスワードなしで開けるようにしたいときは、公開するときの確認画面で「限定公開」を選びます（Pro・1年パス）。

4. 公開URLをコピーして LINE グループに送る

公開されたページの「公開URL」の横にある「コピー」を押してリンクをコピーし、LINE グループのトークに貼り付けて送ります。URL は「公開停止」を押すまで変わらないので、旅行のあいだ同じリンクで共有できます。

予定が変わったら、同じ URL のまましおりを直す

出発前や当日に集合時間・立ち寄り先が変わっても、LINE のグループに新しいリンクを送り直す必要はありません。同じ URL のまま、中身だけを差し替えられます。

1. ChatGPT の同じチャットで「1 日目の昼食を〇〇に変更して、HTML をもう一度出して」などと伝え、修正版の .html ファイルを受け取ります。
2. Convika のページの画面を開き、「新しいバージョンのアップロード」に新しいファイルを入れます。
3. 「公開する」を押すと、同じリンクのまま次のバージョンに切り替わります（新しいバージョンを公開するまで、開いた人には前のバージョンが表示されます）。

LINE のノートやアナウンスに貼ったリンクはそのまま使えるため、「どれが最新のしおり？」と迷うことがありません。なお、同行者がそれぞれの画面からしおりを共同編集することはできないため、修正はファイルを持っている人が行います。

家族やグループのメンバーだけが見られるようにする

旅のしおりには、泊まるホテルの名前や集合場所、待ち合わせの時刻、子どもの名前など、知らない人には見られたくない情報が入ることがあります。LINE のグループに貼る前に、どこまで見られる範囲を絞れるかを確認しておきましょう。

Convika でしおりを公開するときは、見られる範囲を次の 3 つから選べます。

• 限定公開（Pro・1年パス）: URL を知っている人なら、パスワードやアカウントなしでそのまま開けます。検索エンジンには結果に出さないよう伝え、Convika のギャラリーにも載せないため、Google などで検索しても見つかりにくくなります。
• パスワードを知っている人だけ: LINE などでパスワードを伝えた人だけが開けます。検索エンジンにはパスワードの入力画面しか見えないため、しおりの中身が検索結果に出ることはありません。一度パスワードを入れたスマホのブラウザなら、7 日間は入れ直さずに開けます。
• 一般公開（無料）: URL を知っている人なら誰でも開け、検索結果や Convika のギャラリーに出ることもあります。身内だけのしおりには向きません。

アップロードしたページは、無料のままなら一般公開で、検索結果や Convika のギャラリーに出ることがあります。少人数の家族旅行なら、検索に出ない限定公開（Pro・1年パス）でも使えますが、人数が多い社員旅行や修学旅行、サークルの合宿などでより安心したいときは、パスワードをかけておくのがおすすめです。

パスワードは Pro（月額 ¥1,800）の機能です。

ただし、どちらの方法でも「リンクの転送」は止められません。LINE で受け取った人が別の人に URL を送れば開けてしまいますし、パスワードをかけていてもパスワードごと転送されれば見られてしまいます。大事な予定や連絡先を載せるときは、「このリンクはグループの外には送らないでね」と一言添えておくと安心です。旅行が終わったら、管理画面で「公開停止」を押せばその URL は開けなくなります。

詳しい仕組みや設定のしかたは、HTML のページを限定公開するで説明しています。

紙でもしおりを配るなら QR コード

修学旅行や社員旅行などで紙のしおりも配る場合は、スマホ用のページへ誘導する QR コードを載せておくと便利です。紙面には大まかな日程だけを載せ、地図や最新の予定は QR コードからスマホで見てもらえます。

管理画面の「公開URL」の横にある「QR コードを表示する」を押すと、そのページの QR コードが表示されます。「PNG 画像を保存する」で画像として保存できるため、そのまま紙のしおりや案内状に貼り付けて印刷できます。あとから予定を変更して新しい版を公開しても、同じ QR コードのまま最新のしおりが開きます。

なお、紙に印刷する QR コードには、必ず公開したページの URL を使ってください。アップロード枠のプレビューの URL は 3 分間で開けなくなるため、印刷物には向きません。

詳しい手順は HTML を QR コードにする方法 をご覧ください。

よくある質問

ChatGPT で旅のしおりは無料で作れますか？

はい、ChatGPT はどのプランでも HTML のコードを返してくれるので、無料プランのまま旅のしおりを作れます。

作った HTML を家族や仲間のスマホから開けるページとして公開するのも、Convika の Free プランならカード登録なしで公開 1 ページまで、月 10,000 ビューまで無料です。無料の一般公開は検索結果や Convika のギャラリーに出ることがあり、検索結果に出ないようにする限定公開は Pro・1年パスの機能です。くわしい手順は ChatGPT で作った HTML を公開する方法 をご覧ください。

旅のしおりを LINE で共有するには？

HTML ファイルをそのままトークに送るのではなく、ページとして公開してその URL を LINE のグループに貼るのが確実です。

LINE のトークに HTML ファイルを直接送ると、相手のスマホしだいで開くアプリが変わり、iPhone の「ファイル」アプリのプレビューでは持ち物チェックなどの JavaScript が動かずネットの画像も表示されません。また、LINE のサーバーにファイルが残る期間が過ぎると開けなくなります。詳しくは HTML ファイルを LINE で送る方法 にまとめています。

上のボックスから HTML をアップロードして公開すれば、相手がタップするだけでブラウザで開ける「公開URL」や QR コードをすぐに共有できます。

しおりは後から修正できますか？

はい、予定が変わったら ChatGPT に頼んで直した HTML を、サイトの画面の「新しいバージョンのアップロード」に入れて公開すれば、同じ URL のまま内容を更新できます。管理画面の「HTMLファイルをアップロードする」から入れると、別の URL の新しいページになります。

Convika のページの画面にある「新しいバージョンのアップロード」に新しいファイルを入れると、LINE に送ったリンクを変えずに次のバージョンに切り替えられます。新しいバージョンを公開するまでは前のバージョンが表示され続けるので、落ち着いて手直しできます。なお、家族やメンバーが同じ画面から一緒に書き直すことはできず、修正はファイルを持っている人が行います。

旅のしおりに Google マップを入れられますか？

はい、行き先ごとの Google マップのリンク（https://www.google.com/maps/...）を入れることも、地図を埋め込む（iframe）こともできます。

リンクにしておけば、どの環境からでもタップして Google マップを開けます。地図の埋め込み（iframe）は、アップロードのボックスで作る登録なしのプレビューでは表示されませんが、アカウントに入れて公開したページではそのまま表示できます。