Bottle Mail の作り方｜湯けむり Bottle Mail

※ここではまったくHTML（ページの基礎）を触ったことのない人向けに書いています。経験者はスルーでOK。

Bottle Mail を流すのに必要なのは、たった 1枚のHTMLファイル。難しい専門知識はいりません。タイトルと本文を用意して、ファイルに書き込むだけで「瓶」として出航できます。

ここでは、最小限の流れと基礎用語だけを紹介します。世にいう「バイブコーディング」も、AIとの対話がそのままコードになり、動く仕組みになるという考え方。原点は同じ理屈です。細かい疑問は──AIに聞けばいい。

Step 1. タイトルと要約を決める

まずは題名と 一行の要約。この二つが「瓶の表札（ラベル）」になります。

題名は 30文字以内くらい
要約は 80〜120文字で、内容のあらましを伝える

これらは <title> や <meta> にそのまま入ります。わからなければAIに「metaタグの意味をやさしく説明して」と聞けばOK。

一度、AIとの会話をドラフト本文として書き出し、全体を俯瞰してみるのもおすすめです。

AIに聞く例文（開く）

・「Bottle Mail のタイトル候補を5つください。ロマンチックで短め、30字以内。」
・「この要約をやさしい言葉に直してください。子どもにも読める表現で。」

Step 2. 本文を書く

本文は 2〜5段落。1段落は 3〜5文くらいが読みやすいです。

導入の情景（小さな風景）
伝えたい核となる想い
最後に余韻を残す一行

これを <p> ... </p> で囲むだけ。改行も自動で整います。

AIに聞く例文（開く）

・「この段落を情景描写を増やして書き直してください。海や風を入れて。」
・「この文章を短くして、余韻が残る言い方にしてください。」

Step 3. ファイルにまとめる

テキストエディタを開いて、次の最小テンプレに差し込みます（コピペOK）。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>（題名）</title>
  <meta name="description" content="（要約）">
</head>
<body>
  <main>
    <h1>（題名）</h1>
    <p>（本文1）</p>
    <p>（本文2）</p>
  </main>
</body>
</html>

保存名は index.html でも 0001.html でも構いません。ポイントは「1ファイルで完結」していること。

AIに聞く例文（開く）

・「この文章を最小HTMLテンプレに差し込んで、ファイルとして完成形を見せてください。」
・「metaタグの意味を小学生にもわかるように説明してください。」
・「JSON-LDの最小例をください。作者名と日付だけでOK。」

Step 4. アップロードする

作ったファイルをサーバにアップロードします。
そのURLが、あなたのボトルの漂流先になります。

https://example.com/bottle/0001.html

URLはできるだけシンプルに。あとで変えるとリンクが切れてしまいます。

AIに聞く例文（開く）

・「レンタルサーバにindex.htmlをアップロードする手順を3行で説明してください。」
・「アップしたページのURLをSNSに貼ったら、OGP画像が出るか確認する方法を教えてください。」

Step 5. 出航ログに登録する

最後に、そのURLを港（出航ログ）に登録します。登録すると「港の記録帳」に載り、未来の誰かが拾いやすくなります。これであなたのボトルは、情報の大海へ出航します。

基本用語（やさしい言い方）

HTML … 手紙の紙
タイトル … 瓶のラベル
要約 … 一行のあらすじ
URL … 瓶が漂う住所
OGP … SNSで見える表札
JSON-LD … AIが読む名刺（検索やAIに拾われやすくなる）

わからない用語は、そのままAIに聞いてみよう。「HTMLってなに？3行で」──これだけで、やさしい答えが返ってきます。

結び

Bottle Mail の魅力は、完璧じゃなくても流せること。大事なのは「いま書きたい気持ちを、一枚に込める」こと。

書き終えたら、勇気を出してアップロードしよう。そして出航ログに記録すれば──あなたの言葉は潮風に乗り、未来へと旅立ちます。