ChatGPT・Claude・Gemini が出した HTML コードを動かす・表示する方法

ChatGPT にクイズや誕生日カード、ちょっとした計算ツールを頼んだら、返ってきたのは <!DOCTYPE html> で始まる長いコードでした。このコードは、それだけで 1 つの Web ページです。ただ、チャットの中ではただの文字で、AI がプレビューを出してくれなければページには見えません。このガイドでは、いま手元のスマホやパソコンでそのページを動かす方法と、それぞれの AI のプレビューでできること、できないことを説明します。

リンクがほしいなら、ページ冒頭のボックス を「コードから」に切り替えてコードを貼り、「プレビューのリンクをつくる」を押します。アカウントなしでリンクができます。ただしこのプレビューではスクリプトが止まるので、クイズやゲームはまだ反応しません。「このページを受け取る（無料・カード不要）」から登録すると、ページがアカウントに入り、スクリプトが動いて公開もできるようになります。

手元にあるのがコードではなくダウンロードした .html ファイルなら、iPhone で HTML ファイルを開く方法 か、Mac で開く方法（英語）を見てください。Codex や Claude Code がパソコンの中にファイルを書いたときは、Codex や Claude Code が作った HTML ファイルをプレビューする方法（英語）があります。

1 つのページになっているか確かめる

動かせるページは、<!DOCTYPE html> か <html> で始まり、</html> で終わる 1 つのコードです。CSS は <style> タグの中に、JavaScript は <script> タグの中に入っています。2026 年 10 月 25 日に、AI の回答によくある 4 つの形を Convika の HTML ビューアーに貼って試しました。使ったのは Chromium 156 と、iPhone 15 の画面サイズにした Playwright の WebKit 27.2（テスト用のビルド）で、2 つのブラウザで結果は同じでした。

HTML、CSS、JavaScript が別々のコードブロックに分かれていたり、React のコンポーネントで出てきたりしたときは、1 つのファイルにしてもらいます。同じチャットに次の文を貼ってください。

ページ全体を、<!DOCTYPE html> から </html> までの 1 つの HTML ファイルにして、1 つのコードブロックで出してください。
CSS は <style> タグに、JavaScript は <script> タグに入れてください。
React のコンポーネントなら、ビルドのいらないふつうの HTML と JavaScript に書き直してください。
画像は https:// から始まる URL で指定してください。

ChatGPT・Claude・Gemini からコードをコピーする

AI のボタンはよく変わります。次の表は、2026 年 10 月 27 日に読んだ各社の日本語のヘルプに書かれていることです。アプリそのものは開いていないので、ヘルプに名前が出ている操作だけを書いています。

• ChatGPT。 OpenAI の コードブロックのヘルプ には、「ChatGPT は通常、コードをコードブロックに表示します。」とあります。ブロックの種類や使える機能に応じて、「コードのコピー」や「プレビュー対応のコードブロックでのコードとプレビューの切り替え」ができます。ただし、「利用できる操作は、プラン、デバイス、ワークスペースの設定、モデル、機能の提供状況によって異なります。」
• Claude。 Anthropic の アーティファクトのガイド には、「アーティファクトは会話の横の独自のウィンドウで開きます。」とあります。テンプレートから作ったものは「エクスポート」、レガシーアーティファクトはパネル上部の操作が案内されていて、それ以外の操作は書かれていません。Claude からページを取り出す方法は、作った場所ごとに Claude で作った HTML を、Claude のアカウントがない人にも見せる方法 で説明しています。
• Gemini。 Google の Canvas のヘルプ には、「コードを開いて編集するには、Canvas パネルの右上にある [ コード ] をクリックします。」とあります。「共有とエクスポート」の「コンテンツをコピー」は、ヘルプでは「レポートのテキストをコピーする」ときの操作です。ふつうの回答では、エクスポートのヘルプ が「Replit にエクスポート」を挙げています。これを使うと「メッセージと Gemini アプリの回答が Replit に送信されます」。また、「無料の Replit アカウントへのエクスポートは、Replit で一般公開されます。」

どの AI で作ったときも、最初の <!DOCTYPE html> から最後の </html> まで全部コピーします。途中で切れたコードは、崩れるか真っ白になります。

ブラウザでコードを動かす 4 つの手順

スマホでもパソコンでも同じ手順です。何もインストールせず、何もアップロードしません。

1. コードブロックを全部コピーする

上の節のとおり、最初の <!DOCTYPE html> から最後の </html> までコピーします。コードブロックが 2 つ以上あるときは、先に 1 つのファイルにしてもらいます。

2. HTML ビューアーを開いて「コードから」を選ぶ

ブラウザで Convika の無料の HTML ビューアー を開き、「コードから」を選びます。アカウントはいりません。貼ったコードはブラウザの中だけで使われ、Convika に届くのは「アップロードしてリンクをつくる」を押したときだけです。

3. 貼り付けて「ページを表示する」を押す

枠にコードを貼り、「ページを表示する」を押します。ページは convika.com から切り離した枠の中で、CSS と JavaScript ごと動きます。CDN の Tailwind のような、ほかのサイトの画像、フォント、スクリプトも読み込みます。貼れるコードは 2 MB までです。

4. ボタンを全部押してみる

ボタンやタブを押し、クイズなら最後まで解いてみます。「スマホ」を押すと、スマホの画面幅での見え方がわかります。直したいところがあれば「コードを編集する」を押して書き換え、もう一度「ページを表示する」を押します。何をするコードかわからないときは、先に「スクリプトを動かす」のチェックを外します。ページの HTML と CSS だけが表示されます。

ビューアーで動くもの、動かないもの

同じ 10 月 25 日のテストで、ページ全体を貼ったときの結果です。

• 動いた: ページのスクリプト、クリックを数えるカウンター、cdn.tailwindcss.com の Tailwind。
• ポップアップは出ない: alert() を呼ぶボタンを押しても何も出ず、スクリプトはそのまま先へ進みました。ビューアーの枠には、ダイアログや新しいウィンドウを開く許可がありません。
• 新しいタブは開かない: target="_blank" のリンクを押しても、何も開きませんでした。
• データは保存できない: localStorage に書き込むと SecurityError が出ました。ハイスコアを保存するゲームは、その行で止まることがあります。
• 隣のファイルは届かない: 貼ったコードには、style.css、game.js、photo.png を添えられません。コードがこうしたファイルを名前で指しているときは、ビューアーがページの下にその名前を並べます。直し方は HTML ファイルの文字化け・画像が出ないときの直し方 の「画像・CSS が出ない」にあります。

ポップアップや保存が必要なページは、次の節のようにファイルにしてブラウザで開くほうが向いています。

.html ファイルとして保存する

ページを手元に残したいときや、チャットを開かずに見たいときは、テキストエディターでコードを保存し、名前を .html で終わらせます。

• Mac。 Apple の テキストエディットのガイド では、「ファイル」＞「新規」を選び、「フォーマット」＞「標準テキストにする」を選びます。コードを貼り、「ファイル」＞「保存」を選んで quiz.html のような名前を入れ、拡張子をたずねられたら「.htmlを使用」をクリックします。
• Windows。 メモ帳にコードを貼り、名前を .html で終わらせて保存します。保存したらエクスプローラーで名前を確かめます。拡張子が見えないときは、Microsoft の ファイル名拡張子のヘルプ のとおり、「表示」＞「表示」＞「ファイル名拡張子」を選びます。名前が .html.txt で終わっていたら、それはテキストファイルです。.html で終わるように名前を変えます。Microsoft は、拡張子を変えても「ファイルが別の形式に変換されるわけではなく」と書いています。ここではそれで足ります。中の文字はもう HTML だからです。

ファイルをダブルクリックすると、ブラウザで開きます。コードが全部ファイルの中にあるページなら、そのまま動きます。モジュールのスクリプトやデータのファイルを同じフォルダから読み込むページは、パソコンの中からだとブロックされます。Mac でのテスト（英語）に結果があります。iPhone では、「ファイル」アプリでファイルをタップするとプレビューが開き、iOS 26.3 で試したときは JavaScript が動きませんでした。iPhone ではビューアーを使ってください。ファイルを開いたらコードが出た、真っ白だったというときは、HTML ファイルがページではなくコードや真っ白な画面で開くとき を見てください。

それぞれの AI のプレビューと、届かないところ

自分でページを確かめるなら、どのプレビューでも足ります。足りなくなるのは、ほかの人にページとして開いてもらうときです。ChatGPT の共有リンクで見えるのは会話で、Claude のリンクは Claude のアカウントを求め、Gemini のリンクは gemini.google.com をブラウザで開く必要があります。OpenAI は、「プレビューに外部リソースが必要な場合、接続前に ChatGPT が許可を求めることがあります。」とも書いています。

出典は、OpenAI の 共有のヘルプ、Anthropic の アーティファクトの共有のガイド、Google の Canvas のヘルプで、どれも 2026 年 10 月 27 日に読みました。

リンクにして送る

リンクなら、AI のアカウントがなくても、どのスマホやパソコンでも開けます。Convika なら次のとおりです。

1. ページ冒頭のボックス を「コードから」に切り替えてコードを貼り、「プレビューのリンクをつくる」を押します。アカウントなしで、数秒でリンクができます。開けるのは 3 分間で、スクリプトとフォームは止まっています。ビューアーの「アップロードしてリンクをつくる」でも、同じリンクができます。
2. 「このページを受け取る（無料・カード不要）」から登録します。ページがアカウントに入り、管理画面のプレビューではスクリプトも動きます。
3. 「ページを公開する」を押し、「このページを開ける人」で「一般公開」を選んで「次へ」を押します。はじめての公開では、続いて大きな「無料で公開する」のボタンが出ます。押すとすぐに公開され、ページの下に Convika のバナーが出ます。出したくないときは、その下の「Convika のバナーなしで公開する」から Pro のお申し込み画面に進みます。
4. 「公開URL」のアドレスをコピーして、コードの代わりに送ります。

その先は、作った AI ごとの公開のガイドが、ほかの公開先との比較もあわせて説明しています。ChatGPT、Claude、Gemini の Canvas です。ChatGPT のキャンバスを探していたなら、ChatGPT のキャンバスはどこ？ に何が変わったかをまとめています。

よくある質問

ChatGPT が出した HTML コードを動かすには？

コードブロックを全部コピーして、ブラウザで開いた HTML ビューアーに貼ります。Convika の無料の HTML ビューアー なら、「コードから」を選んで貼り、「ページを表示する」を押します。スクリプトごとページが動き、コードはアップロードされません。ChatGPT の中では、OpenAI のヘルプのとおり、対応するコードブロックで「プレビュー」を選びます。出てくる操作は、プランや端末によって変わります。

ChatGPT の HTML をスマホで開けますか？

開けます。ChatGPT のアプリでコードをコピーし、スマホのブラウザで HTML ビューアーを開いて「コードから」を選び、「ページを表示する」をタップします。iPhone 15 の画面サイズにした Playwright の WebKit 27.2（テスト用のビルド）で試したところ、貼ったページのスクリプトも Tailwind のスタイルも動きました。実機のスマホでは試していません。コードをファイルに保存して iPhone の「ファイル」アプリでタップすると、iOS 26.3 で試したときはプレビューが開き、JavaScript は動きませんでした。

ChatGPT の HTML を保存したら文字で表示されるのはなぜ？

たいていは、名前が .html で終わる標準テキストのファイルになっていないからです。Windows では、エクスプローラーでファイル名拡張子を表示し、page.html.txt を page.html に変えます。Mac では、テキストエディットで貼る前に「フォーマット」＞「標準テキストにする」を選び、保存のときに「.htmlを使用」をクリックします。テストでは、React のコンポーネントはブラウザでも文字のまま出ました。ふつうの HTML と JavaScript で頼み直してください。

ChatGPT のコードを Web サイトにするには？

公開先にコードを置いて、もらった URL を送ります。Convika なら、ボックスを「コードから」に切り替えて貼れば、アカウントなしでプレビューのリンクができます。そのあと Free プランでページを受け取り、公開します。そのリンクは、ChatGPT のアカウントも Convika のアカウントもなく、どのブラウザでも開けます。ChatGPT で作った HTML を、無料で公開する方法 で、公開先を比べています。

Claude にコードを動かすボタンはありますか？

専用のボタンはありません。Claude はページをアーティファクトとして動かし、Anthropic のヘルプによると、アーティファクトは「会話の横の独自のウィンドウで開きます」。ほかの場所で動かすには、コードが必要です。ヘルプにあるのは、テンプレートから作ったものの「エクスポート」と、レガシーアーティファクトのコピーやダウンロードの操作だけです。それ以外のアーティファクトは、ページ全体を 1 つのコードブロックにして返信に出すよう Claude に頼み、HTML ビューアーに貼ります。

Gemini にコードを動かすボタンはありますか？

Canvas にはあります。Canvas パネルにアプリが表示され、右上の「コード」でコード、「コンソールを表示」でエラーが見られます。ふつうの回答には、Google のヘルプにプレビューの案内はありません。案内されているのは「共有とエクスポート」の「Replit にエクスポート」で、HTML にも対応し、メッセージと Gemini の回答を Replit に送ります。無料の Replit アカウントに送ったものは Replit で一般公開される、と Google は注意しています。

HTML ビューアーで押しても反応しないボタンがあるのはなぜ？

ビューアーは、ページを切り離した枠の中で動かすからです。テストでは、alert() の箱は出ず、新しいタブを開くリンクは何も開かず、localStorage は SecurityError を出しました。このどれかを使うボタンは、ビューアーでは反応しません。コードを .html ファイルに保存してブラウザで開くか、公開してください。style.css のように名前で読み込むファイルは、貼ったコードには添えられません。

ビューアーにコードを貼ると、アップロードされますか？

されません。コードを読んでページを表示するのはブラウザで、Convika のサーバーには何も届きません。ただし、フォントや画像、ほかのサイトのスクリプトなど、ページが指しているものはページ自身が読み込みます。コードが Convika に届くのは、「アップロードしてリンクをつくる」を押したときだけです。そのときは、3 分間開ける非公開のリンクのためにアップロードされます。

出典

• ChatGPT でのライティングブロックとコードブロックの使用（OpenAI）（2026 年 10 月 27 日に確認）
• ChatGPT での会話とスケジュール済みタスクの共有（OpenAI）（2026 年 10 月 27 日に確認）
• アーティファクトとは何か、どのように使用するのか（Anthropic）（2026 年 10 月 27 日に確認）
• アーティファクトを共有する（Anthropic）（2026 年 10 月 27 日に確認）
• Canvas でドキュメントやアプリなどを作成する（Google）（2026 年 10 月 27 日に確認）
• Gemini アプリの回答をエクスポートする（Google）（2026 年 10 月 27 日に確認）
• Mac のテキストエディットで HTML 書類を扱う（Apple）（2026 年 10 月 27 日に確認）
• Windows の一般的なファイル名拡張子（Microsoft）（2026 年 10 月 27 日に確認）