Claude から HTML ファイルをもらった。本物のリンクにするには？

ファイルが自分のパソコンでしか動かない理由

HTML ファイルをダブルクリックすると、ブラウザはディスクから直接それを開きます。自分だけならそれで十分です。ほかの人がリンクで開けるのは、常にオンラインで、リクエストに応えるパソコンにそのファイルがあるときだけです。そのパソコンがホストです。ファイルをそこに置くことが公開（デプロイとも呼ばれます）です。

朗報です。AI が作ったページは、たいてい静的サイトです。HTML、CSS、JavaScript、画像といったファイルだけでできています。静的サイトはいちばん手軽にホスティングできます。サーバーもデータベースも要りません。

まず自分のパソコンで開く

公開する前に、ファイルが動くか確認しましょう。1 分で終わります。

1. コードをテキストファイルにコピーします。AI がチャットにコードを表示した場合は、そのすべてをテキストエディター（Windows ならメモ帳、Mac なら標準テキストモードの TextEdit）に貼り付けます。ダウンロードで渡された場合は、この手順は不要です。
2. index.html として保存します。名前が .txt で終わっていないことを確認してください。新しい空のフォルダーに入れます。
3. ファイルをダブルクリックします。ブラウザで開きます。ページ全体をスクロールし、すべてのリンクとボタンをクリックし、ウィンドウを狭くしてスマホでの見え方を確認します。
4. おかしい点をメモします。チャットで AI に伝えて、もう一度ファイルを出してもらいます。

チャットからファイルを取り出す

AI によっては、あなたのサイトは次のいずれかの形になります：

• チャット内のプレビュー（Claude のアーティファクト、ChatGPT のキャンバス）。ダウンロードできる 1 つのファイルを頼みましょう。
• 複数のファイル（ページ、スタイルシート、画像）。index.html が別のフォルダーの中ではなく最上位にある、サイト全体の .zip を頼みましょう。
• プロジェクトフォルダー。Claude Code、Codex、Cursor などのコーディングツールが作ります。ビルド工程がある場合に公開するのは、プロジェクト全体ではなく、ビルドが作るフォルダー（たいてい dist または build）です。

いちばんシンプルなのは 1 つのファイルです。多くのホストは index.html をホームページとして扱い、Page Lemon では名前に関係なく 1 つの .html ファイルでも動きます。次のように頼めば、その形になります：

• これを、CSS と JavaScript を中に入れた 1 つの index.html として出して。コピー

壊れた画像やリンクを直す

自分のパソコンでは問題なかったページが、オンラインでは空の枠になることがあります。よくある原因は次のとおりです：

• 画像がフォルダーに入っていない。すべての画像を index.html の隣か、それに付随する images のようなサブフォルダーに置きましょう。
• パスが自分のディスクを指している。C:\Users\you\photo.jpg はあなたのパソコンにしかありません。images/photo.jpg のような相対パスを使いましょう。
• 大文字・小文字が違う。Photo.JPG と photo.jpg は、同じファイルとして扱うパソコンもあれば、別のファイルとして扱うホストも多くあります。名前はどこでも小文字にしましょう。
• 名前にスペースがある。Team Photo.jpg ではなく team-photo.jpg を使いましょう。

• すべての画像で、小文字のファイル名と相対パスを使いましょう。コピー

本物のリンクにする方法

どれも使えます。違いは、リンクを得るまでの速さと、あとからサイトを変更しやすいかどうかです。

1. AI に公開してもらう

AI によっては、ツールを使って代わりに公開してくれます。Claude Code や Codex などのコーディングツールは、ファイルを直接アップロードできます。チャットアプリは、サンドボックスからインターネットに出られないことが多く、代わりにファイルを渡してくれます。

Page Lemon なら、同じチャットに 1 行貼り付けるだけです。AI がまだ公開できない場合は、一度接続してから、もう一度頼んでください。

• 私のサイトを PageLemon.com で公開してコピー

2. AI チャットの共有ボタンを使う

Claude には、アーティファクトの公開ボタンがあります。Anthropic のヘルプ記事によると、Claude 自身のドメインに公開リンクが作られます。Free、Pro、Max プランでは、リンクを知っていれば誰でも開けます。Team と Enterprise プランでは、リンクは組織内で共有されます。簡単なデモには便利ですが、アドレスはご自身のものではありません。最新のルールは Anthropic のヘルプページで確認してください。

3. ファイルをドロップ、またはコードを貼り付け（設定不要）

AI が公開も接続もできない場合（たとえば ChatGPT の無料プラン）は、pagelemon.com/drop を開きます。ファイルをドロップするか、ファイルがないスマートフォンでは AI が出したコードを貼り付けます。アカウントもインストールも不要で、数秒でリンクができます。あとで同じサイトを変えるには、接続できる AI が必要です。新しいファイルをドロップすると新しいアドレスになります。

比較

最初の 2 列は一般的な傾向で、詳細はサービスごとに異なります。選ぶ前に、各サービスの最新の規約を確認してください。

独自ドメイン

www.yourcafe.co.uk のようなアドレスは、メニューやカードに載せたときに見栄えがします。Page Lemon では、独自ドメインは有料プランに含まれます（Prompter は月額 $6 で、3 つのドメインを含みます）。ドメインはドメイン会社から購入し、毎年その会社に料金を支払います。Page Lemon はドメインを販売していません。しくみはこちら。

• 私のカフェに合うドメインを探してコピー

今日だけでなく、来週のことも考える

リンクを一度得るのは簡単です。難しいのは来週、営業時間を変えたりページを足したくなったときです。次のことを考えてみましょう：

• 変更したあとも、アドレスは同じままですか？編集のたびに新しいリンクになるなら、そのつど共有し直す必要があります。
• AI に変更してもらえるか？サイトを作ったチャットはもう残っていないかもしれません。新しいチャットや別の AI が、現在のサイトを読み込んで更新する手段が必要です。
• まずい変更を取り消せますか？バージョン履歴があれば、間違いの代償は午後いっぱいではなく 1 分で済みます。
• 無料のサイトはどれくらい続きますか？登録しないと期限切れになるものもあります。最初から分かっていれば問題ありません。

Page Lemon では、アカウントなしで公開したサイトは 72 時間公開されます。無料アカウントなら最大 3 つのサイトを残せ、小さな Page Lemon のバッジが付きます。編集してもアドレスは変わらず、すべての変更はあとで戻れるバージョンとして保存されます。

よくある失敗

• 秘密情報を公開してしまう。AI がページに API キーを入れていると、オンラインになった時点で誰でも読めます。静的サイトは秘密を守れません。公開されるものをご覧ください。
• プロジェクト全体を公開してしまう。アップロードするのは完成したサイトだけにして、ソースフォルダ、メモ、.env ファイルは含めないでください。
• フォームがメールを送ってくれると思い込む。普通のウェブページだけでは、メールを送れません。頼る前に、フォームのメッセージがどう届くかを AI に確認してください。
• file:/// のアドレスを共有する。ほかの人には絶対に開けません。

よくある質問

自分には表示されるのに、友だちには表示されないのはなぜですか？

自分のディスクから開いているためです。友だちはそのファイルを持っていません。公開してから、https:// のリンクを送りましょう。

ファイルをメールで送ればいいですか？

送れますが、多くのメールソフトは .html の添付に警告を出しますし、受け取った人は自分で保存して開く必要があります。リンクのほうが、相手にもあなたにも簡単です。

コーディングの知識は必要ですか？

いいえ。必要なのは、ファイルと、それをオンラインに置く方法だけです。あとのこと（あとからの変更を含む）は AI ができます。

ファイルやフォルダーがたくさんある場合は？

最上位に index.html がある .zip を頼み、画像は同じフォルダーかサブフォルダーに置きましょう。小さなサイトなら、すべてを 1 つの index.html にまとめるよう AI に頼む方法もあります。

試すのにいくらかかりますか？

Page Lemon での公開は無料で、アカウントも不要です。アカウントがない場合、サイトは 72 時間公開されます。