ChatGPTのチャットからHTMLを公開する方法

ChatGPTは喜んで完全なウェブサイトを書いてくれますし、Canvasはプレビューまで見せてくれます — でもOpenAIがそれをインターネットに公開してくれることはありません。コードは、ウェブページを配信できる場所へ移すまでチャットの中に閉じ込められたまま。その部分が、ここでは30秒で終わります。

  1. 01

    HTMLを見つける

    ページはチャット内のコードブロックか、Canvasの中にあります。ChatGPTがHTML・CSS・JavaScriptに分けて出力した場合は、まず「すべてを1つのindex.htmlにまとめて」とお願いしましょう。

  2. 02

    コードをコピーする

    コードブロックにカーソルを合わせて「コードをコピー」を押すか、Canvas内で全選択してコピーします。これでサイト全体がクリップボードに入りました。

  3. 03

    index.htmlとして保存

    コードをテキストエディタ(メモ帳、TextEdit、VS Codeなど)に貼り付けて、index.htmlという名前で保存します。この名前が重要 — ブラウザがホームページとして扱うファイル名です。

  4. 04

    下のボックスにドロップ

    index.html(またはフォルダごと)をこのページのアップロードボックスにドラッグして、公開ボタンを押します。サイトに専用のウェブアドレスが即座に割り当てられます。

  5. 05

    リンクをシェア

    これで完了 — URLを誰にでも送れます。サイト名の変更、ファイルの更新、削除は、いつでもダッシュボードからどうぞ。

ChatGPTのHTMLをここにドロップ

ファイル1つでもフォルダごとでも — 公開した瞬間に公開リンクが手に入ります。

ウェブサイトをここにドラッグ

index.htmlが入ったフォルダをドロップするか、クリップボードからHTMLを貼り付けるだけで、数秒でオンラインに。セットアップ不要、設定不要、悩みゼロ。

またはChatGPTに公開してもらう

コピーの手間も丸ごとスキップ。用意された指示をコピーしてChatGPTの会話に貼り付ければ、API経由でサイトをアップロードしてくれます — 公開リンクと、所有権を取得するための非公開のオーナー登録リンクが返ってきます。

ターミナルで作業していますか?npx hostingを実行 — アカウント不要です。

ChatGPTからの公開に関する質問

ChatGPT自身がウェブサイトを公開してくれることはできますか?

いいえ。Canvasはチャットの中でプレビューを表示しますが、ページをインターネットに公開するボタンはありません。コードを書くのはChatGPT、それを世界に配信するのはここのような静的ホスティングの役目です。

ChatGPTがHTML・CSS・JSを別々のファイルでくれました。どうすれば?

1つのフォルダに保存してください — index.htmlと、参照しているスタイルやスクリプト — そしてフォルダごとボックスにドラッグします。あるいはChatGPTに「すべてを1つのindex.htmlにインライン化して」とお願いするのも手です。小さなページなら、たいていそのほうが簡単です。

ChatGPTからHTMLを公開するいちばん簡単な方法は?

方法は3つあります。いちばん簡単なのは、ChatGPTからHTMLをコピーしてこのページのボックスに貼り付けること — 即座に公開サイトになります。長く使うなら、ブラウザ拡張機能をインストールすればAIチャットからワンクリックで公開できます。おまかせ派なら、AI向けの指示をChatGPTの会話に貼り付けてください — API経由で代わりに公開してくれます。

公開にアカウントは必要ですか?

このページから公開するには無料アカウントが必要です。サイトの置き場所がダッシュボードになるためです。登録したくない場合は、ターミナルでnpx hostingを実行してください — アカウントなしでデプロイでき、あとから使える非公開のオーナー登録リンクが手に入ります。

ChatGPTが複数のファイルをくれた場合は?

すべてを1つのフォルダにまとめてください — 最上位にindex.html、それに参照しているCSS・JavaScript・画像 — そしてフォルダごとボックスにドラッグします。1サイトあたり最大500ファイル・50 MBです。

料金はいくらですか?サイトはいつまで公開されますか?

無料です。公開したサイトに有効期限はなく、ダッシュボードから削除するまで公開され続けます。いつ再アップロードしてもリンクはそのままです。

別のAIチャットをお使いですか?

手順はどのツールでもほぼ同じです — お使いのツールを選んで具体的な手順をご覧ください。