旅行の旅程をHTMLで作って、Vercelを使ってWeb公開してみた。
きっかけは旅行の計画を一緒に行く人達と共有したかったから。LINEで送るより、スマホでいつでも見られるWebページにしてしまった方が便利だと思ったのが始まり。
今回使ったのはAIで生成したHTMLファイルとVercelというホスティングサービス。プログラミングの知識がほぼなくても、無料で公開まで完結した。その手順をまとめておく。
完成イメージ。スマホでもきれいに表示される。
全体の流れ
- AIに旅程の内容を伝えてHTMLファイルを作成してもらう
- Vercelにアカウントを作る
- VSCodeのターミナルからVercel CLIでデプロイする
- 発行されたURLを共有する
STEP 1：HTMLファイルを用意する
AIに旅程の内容（日程・ホテル・フライト情報など）を伝えて、HTML形式で旅程ページを作ってもらった。スマホ対応・かわいいデザイン・日付ごとのナビゲーションなども含めて一括で生成できる。
重要なのはファイル名。必ず index.html という名前にすること。これがVercelで正しく動く条件になる。
STEP 2：Vercelにサインアップする
Vercelは静的HTMLファイルを無料でWeb公開できるホスティングサービス。
- vercel.com を開く
- 「Sign Up」→「Continue with Google」でGoogleアカウントで登録
- SMS認証あり。国旗を🇯🇵に切り替えて日本の電話番号を入力する（最初の0は不要）
- プラン選択は「I’m working on personal projects」＝ Hobby（無料）を選択
- 名前はニックネームでOK
STEP 3：Node.jsとVSCodeを準備する
Vercel CLIを使うためにNode.jsが必要。
- nodejs.org から「LTS」版をダウンロードしてインストール
- VSCodeを開き、index.htmlが入ったフォルダを「File → Open Folder」で開く
- 「Terminal → New Terminal」でターミナルを開く（ショートカット:
Ctrl + @）
STEP 4：Vercel CLIでデプロイする
ターミナルで以下を順番に実行する。
① Vercel CLIをインストール
npm install -g vercel② デプロイ開始
vercelブラウザが自動で開いてVercelアカウントとの認証画面が出る。「Allow」を押す。
認証後、ターミナルに戻ると質問が続く。答え方は以下の通り。
| 質問 | 答え |
|---|---|
| Set up and deploy? | Y → Enter |
| Which scope? | そのまま Enter |
| Link to existing project? | N → Enter |
| What’s your project’s name? | 好きな名前を入力 |
| In which directory? | そのまま Enter |
| Want to modify these settings? | N → Enter |
| Do you want to change additional project settings? | N → Enter |
完了すると Aliased: https://プロジェクト名.vercel.app と表示される。これが公開URLになる。
STEP 5：URLを共有する
表示されたURL（例: https://プロジェクト名.vercel.app）をそのままコピーして、LINEやメッセージで送るだけ。スマホでもPCでもそのまま見られる。
注意点まとめ
- ファイル名は必ず
index.htmlにする - SMS認証時は国旗を🇯🇵に切り替えて、最初の0を抜いた番号を入力する
- Vercel管理画面のUIは英語のみ（日本語化は不可）
- プロジェクト名を後から変更すると再デプロイが必要になる。最初から決めておいた方がスムーズ
- 無料のHobbyプランで月100GBの転送量まで対応。個人利用なら十分
HTMLとVercelの組み合わせは、シンプルな情報共有ページを手軽に公開するのに向いている。旅程だけでなく、イベントの案内や家族への共有メモなど、応用の幅は広い。
コメント