AI でつくった HTML を公開・共有する やりたいこと別の実践ガイド
AI でつくった HTML の公開と共有を、目的別にまとめたガイド一覧です。手元の HTML ファイルを下のボックスに置くだけで、登録なしでプレビューのリンクをつくれます。
よく読まれているガイド
HTML ファイルを LINE で送って、相手のスマホでページとして見てもらう方法
LINE で HTML ファイルを送ると相手のスマホしだいで開けないため、ファイルではなく URL を送ります。ChatGPT や Claude で作った HTML を URL に変えて、トークに貼るだけで見てもらう手順を説明します。
ChatGPT で作った HTML を、無料で公開する方法
ChatGPT で作った HTML も、HTML ファイル 1 つも、無料で公開できます。このガイドは Netlify Drop、GitHub Pages、Cloudflare Pages、Tiiny Host、Convika の 5 つを、独自ドメイン、フォーム、アクセス数で比べています。
HTML ファイルを、どのスマホでも開けるリンクで共有する方法
HTML ファイルをメールや LINE で送ると、届くのはページではなくファイルです。ChatGPT や Claude で作った HTML をアップロードし、どのスマホでもタップで開けるリンクにする方法を、登録なしの手順から説明します。
AI で作った HTML の教材を、Classroom で生徒に配る
Classroom に HTML ファイルを添付すると、生徒に届くのはファイルです。ChatGPT や Gemini、Claude で作った教材やゲームを URL にして「資料」や「課題」にリンクで投稿する手順と、リンクで提出してもらう方法を説明します。
生徒に配る20
Classroom やロイロノート、QR コードで、生徒の端末に迷わず配る手順です。
- AI で作った HTML の教材を、Classroom で生徒に配るClassroom に HTML ファイルを添付すると、生徒に届くのはファイルです。ChatGPT や Gemini、Claude で作った教材やゲームを URL にして「資料」や「課題」にリンクで投稿する手順と、リンクで提出してもらう方法を説明します。
- AI で作った教材やクイズを、ロイロノートで生徒に配る方法ChatGPT や Gemini で作った HTML の教材は、ファイルのままではロイロノートのカードになりません。このガイドは、ページを公開して URL にし、Webカードで生徒に送る手順を、ロイロノートのヘルプにそって説明します。
- 生成 AI で作った小テストを、URL で生徒全員に配るChatGPT や Gemini、Claude で作る 4 択クイズの HTML ファイルを URL にして、生徒が Chromebook や iPad からアカウントなしで解けるようにする手順です。答えるとすぐ正誤と解説が出る小テストを授業で配れます。
- AI で作ったクイズの点数とまちがえた問題を、Google フォームで先生に届けるChatGPT や Gemini、Claude で作った HTML のクイズの最後に、点数とまちがえた問題が入った Google フォームを開くリンクを付ける方法です。事前入力リンクで回答欄の番号を調べる手順、書き換えて使えるコード、届いた回答の確かめ方を説明します。
- 生成 AI で理科・数学のシミュレーションを作り、URL で生徒に配るChatGPT や Claude、Gemini に「1 つの HTML ファイルで」と頼めば、スライダーで動かせるシミュレーションができます。p5.js や three.js が動くかを試した結果と、生徒の端末で開いてもらう手順を説明します。
- ChatGPTやGeminiで単語帳・フラッシュカードを作ってスマホやLINEに送る方法ChatGPTやGeminiに頼んで、タップでめくれる自分だけの単語カードを1つのHTMLファイルで作成。Convikaで公開してURLやQRコードにすれば、受け取る人はアプリの登録なしで、スマホやLINEからそのまま開いて勉強できます。
- AI で英語の並べ替え問題を作って、生徒のスマホで解けるリンクにする日本語の文と答えの英文を ChatGPT や Gemini、Claude に渡すと、単語をタップして並べ、答え合わせができるページを作ってもらえます。頼む文、公開して URL や QR コードで配る手順、答えがページに入っている限界まで。
- Claude で作ったゲームや教材を、Claude を使えない生徒に届けるClaude のアーティファクトは、共有しても 18 歳以上でサインインした人しか開けません。HTML にして公開すれば、18 歳未満の生徒も Chromebook や iPad のブラウザから、アカウントなしで開けます。
- Gemini の Canvas で作ったものを、生徒全員に届ける方法Gemini の Canvas で作ったゲームやクイズは学校の設定によって Classroom に共有できます。生徒が Gemini を使えない学校や Google アカウントがない学校向けに、URL と QR コードにして配る手順を説明します。
- Padlet（パドレット）にAIで作ったHTML教材やページをURLで投稿する方法ChatGPTやGemini、Claudeで作ったHTMLの教材やクイズをPadlet（パドレット）のボードに投稿する方法。HTMLをURLにしてリンクで貼れば、生徒はChromebookやiPadからタップで開けます。差し替えも同じURLでできます。
- AIで漢字テストやひらがな練習を作成してGIGA端末に配る方法ChatGPTやGemini、Claudeに漢字リストを渡して丸つけつきの漢字テストやひらがな練習を1つのHTMLで作成。Convikaで公開すれば、生徒はChromebookやiPadから登録不要でURLやQRコードからすぐ解けます。
- ChromebookでHTMLファイルを開く・作成してクラスに配る方法ChromebookでHTMLファイルを「ファイル」アプリやChrome（Ctrl + O）から開く方法、作成・編集の手順を解説。学校の端末で開けないときや、AIで作ったHTMLをURLやQRコードでクラス全員に配る方法も紹介します。
- 生徒の iPad で HTML の教材を開く。ファイルを配らずリンクと QR でiPad に HTML ファイルを送ると、「ファイル」アプリのプレビューで開き、クイズのボタンやゲームは動きません。AI で作った教材を URL にして、Classroom やロイロノート、QR コードで生徒の iPad に配る手順と、学校の設定で開けないときの対処をまとめました。
- クラス対抗のクイズを AI で作って、電子黒板やプロジェクターで使う3〜4 チームの得点ボタンと「答えを見る」「次の問題」が 1 画面にそろうクラス対抗クイズを、ChatGPT や Convika の AI で作り、電子黒板に URL で映す方法です。ボタンの大きさ、得点の残り方、学校で開けないときまで。
- 生徒が AI で作った作品を、クラスの中だけで見せるリンクにする生徒がChatGPTやGeminiで作ったゲーム・クイズ・診断のHTMLを、検索に出さないリンクにしてPadletやClassroomで共有する方法。名前や顔写真の扱い、作品が増えたとき、学年末に公開を止める手順まで。
- 文化祭のクイズ大会を AI で作る。プロジェクターに映す形と、来た人のスマホで解く形文化祭・学園祭のクイズ大会の出し物を、ChatGPT や Claude、Gemini で HTML ファイル 1 つにして公開する方法です。チーム対抗をプロジェクターに映す形、QR コードから来た人のスマホで解く形、頼む文、当日の置き方、学校のルールまで。
- 謎解きを AI で作って、QR コードで会場を回る。ページは 1 つで文化祭や子ども会、社内イベントの謎解きを、ChatGPT や Claude に作ってもらい、QR コードで会場を回る方法です。1 つのページで地点ごとに問題を出す頼み方、QR コードの作り方、当日まで公開しておく理由、答えが見えてしまうことへの向き合い方まで。
- 九九ゲームを AI で作る。子どものスマホやタブレットでそのまま遊べるリンクにまちがえた九九を最後にもう一度出す九九ゲームを、ChatGPT や Claude、Gemini で HTML ファイル 1 つにして、子どものタブレットやスマホで開けるリンクにする方法です。そのまま使える頼む文、画面の大きさ、保存されることとされないことまで。
- 授業の指名ルーレットや席替えの画面を AI で作り、名簿を残さずに教室で映す指名ルーレット、席替え、タイマー、班分けの画面を ChatGPT や Claude で HTML 1 つにして、教室のモニターで開く方法です。名簿をタブを閉じたら消える形にする頼み方、学校の端末で開くときの注意まで。
- 家庭教師・塾の先生が、生徒ごとの宿題・復習ページを AI で作ってリンクで渡す授業のあとに、生徒 1 人ずつの復習ページを ChatGPT や Claude で作り、保護者にリンクで送る方法です。載せること、頼む文、毎週同じ URL での差し替え、見られたかの確かめ方、名前や成績を載せない理由、生徒ごとにページを分けるときのプランまで。
AI ツール別の手順17
使った AI ツールごとに、つくったページをネット上に公開する手順をまとめました。
- ChatGPT で作った HTML を、無料で公開する方法ChatGPT で作った HTML も、HTML ファイル 1 つも、無料で公開できます。このガイドは Netlify Drop、GitHub Pages、Cloudflare Pages、Tiiny Host、Convika の 5 つを、独自ドメイン、フォーム、アクセス数で比べています。
- スマホだけで、ChatGPT が作ったホームページを公開する（ファイルがなくてもできる）パソコンがなくても、ChatGPTのチャットに出たHTMLのコードをスマホでコピーして貼り付ければ、ページのリンクにできます。貼り付けから公開、LINEで送るまでの手順と、うまく表示されないときの直し方をまとめました。
- ChatGPT・Claude・Gemini が出した HTML コードを動かす・表示する方法AI がチャットに出した HTML のコードは、全部コピーして無料の HTML ビューアーに貼れば、スマホでもパソコンでもページとして動きます。各 AI のプレビューでできることと、.html ファイルで保存する方法も説明します。
- AI で作ったページを後から直したい。URL も QR コードもそのままで差し替える方法公開して配ったあとに誤字や日付の間違いが見つかったら。ChatGPT や Claude に直した HTML をもらい、Convika の「HTML ファイルで更新」で入れ替えると、配ったリンクも印刷した QR コードも、そのまま新しい内容を開きます。
- AI で作ったページを、無料のまま自分のドメインで公開するChatGPT や Claude で作ったページは、Convika の Free プランのまま www.example.com のような自分のドメインで公開できます。DNS に CNAME と TXT を足せば SSL も自動です。Free でできないことも書き、他社の無料プランとくらべました。
- ChatGPTでお店のホームページ作成＆無料公開ChatGPTでお店のホームページを1枚のHTMLで作ってもらい、無料で公開する手順。AIが書いたフォームが届かない原因と対処、検索に出す設定、独自ドメインのつなぎ方まで、WordPressなしで進める方法をまとめました。
- ピアノ教室・習い事の教室、ホームページを AI で作って無料で公開したい個人のピアノ教室や習い事の教室なら、ホームページは1ページで足ります。載せる内容、ChatGPTへの頼み方、体験レッスンの申し込みフォームの付け方、ペライチ・ジンドゥー・Googleサイトとの違いまで、月額なしで始める手順をまとめました。
- Gemini で作ったページを、URL で人に見せる方法Gemini の共有リンクは gemini.google.com の中で開きます。Canvas のコードを Convika に貼り付けると、自分の URL で公開でき、フォームの送信内容とアクセス数も見られます。手順をまとめました。
- Gemini Canvas の共有ができない・相手が開けないときの原因と、別の渡し方「共有」が出ない、送ったリンクを相手が開けない、前のリンクが消えた。Gemini Canvas の共有で止まる原因を Google のヘルプで症状ごとに確かめ、Canvas のコードを Gemini の外の URL にして渡す手順までまとめました。
- Claude で作ったページを、自分のドメインで公開する方法Claude の共有リンクは開く人にもアカウントが必要です。コードを Convika に貼り付ければ、だれでも開ける URL で公開できます。無料プランでも登録を保存するフォーム、アクセス数、www など自分のドメイン 1 つを使えます。
- Claude で作った HTML を、Claude のアカウントがない人にも見せる方法Claude の共有リンクは、開く相手にも Claude のアカウントが必要です。HTML を取り出してアップロードすれば、登録なしでだれでも開けるリンクができます。このガイドは、スマホのアプリや Claude Code で作ったときの取り出し方も説明します。
- Claude のアーティファクトが公開できない・リンクが開かない原因と代わりの方法「公開」ボタンがない、「リンクを持つ誰でも」が選べない、送ったリンクで相手にログイン画面が出る。Claude のアーティファクトが公開できない原因を症状ごとに確かめ、コードを貼り付けて自分の URL で公開する手順までまとめました。
- Copilot が書いた HTML を、誰でも開けるリンクにする方法Copilot が書いた HTML を、サインインなしでだれでも開けるリンクにする手順です。Copilot の共有リンクで届くのは会話で、開くにはサインインが必要です。Convika なら登録なしでプレビューができ、無料プランで公開できます。
- DeepSeek で作った HTML を、誰でも開ける Web ページとして公開するDeepSeek で作った HTML をスマホや Chromebook で開ける URL にして公開。共有リンクは会話を見せるものですが、Convika ならコードやファイルを貼るだけで公開できます。相手のアカウント登録も不要です。
- Claude Code で作ったランディングページを、そのまま公開する方法Claude Code のアーティファクトは claude.ai に 1 枚のページを置けますが、フォームの受け口はなく、アドレスも claude.ai です。Convika をつなげば、公開、フォーム、独自ドメインまで Claude Code に頼めます。
- Claude Design で作ったページを、誰でも開けるリンクで公開する方法Claude Design の共有リンクは開く人にも Claude のアカウントが必要です。「スタンドアロンHTMLとしてエクスポート」したファイルを Convika にアップロードすれば、だれでも開けるページになり、フォームとアクセス数も付きます。
- ChatGPT のキャンバスがなくなったあと、作ったページを開いて人に見せるChatGPT のキャンバスは、2026 年 5 月 28 日に GPT-5.5 から外れ、コードは回答の中のコードブロックに出るようになりました。HTML をプレビューで見る場所と、URL にして人に見せる方法を説明します。
公開範囲を限る5
検索エンジンに出さない設定や、パスワードをつけて開ける人を限る方法を説明します。
- HTML ページにパスワードをかけて、知っている人だけに見せる方法JavaScript で作った画面は、ソースを開けばパスワードが読めてしまいます。ChatGPT や Claude で作った HTML をアップロードし、自分のドメインのままサーバー側で確かめるパスワード付きのページにする方法を説明します。
- HTML のページを限定公開する：検索に出さないことと、開ける人を限ることHTML の「限定公開」は 2 つあります。検索に出さないなら noindex の 1 行、URL を知らない人に開かせないならパスワードです。YouTube の限定公開との違いと、それぞれの手順を説明します。
- Claude の共有リンクが Google 検索に出た件：AI で作ったページを、送った人にだけ見せるにはClaudeの共有リンクやアーティファクトが検索に出た原因と、「設定＞プライバシー」で自分のリンクを確かめて消す手順を解説。AIで作ったページを検索から隠し、送った相手だけに見せる方法も紹介します。
- ポートフォリオにパスワードをかけて限定公開する方法応募企業やクライアントだけに HTML のポートフォリオを見せる方法。検索エンジンに結果へ出さないよう伝える限定公開は Pro の機能。
- AI で作ったホームページを、公開前にお客さんに確認してもらうChatGPT や Claude で作ったページを、一般に公開する前にお客さんや上司に見てもらう方法です。その場での見せ方、確認用の URL の作り方、直したあとの差し替え、見せる相手の絞り方、意見のもらい方、OK が出たあとの公開と独自ドメインまで。
フォーム・閲覧数9
ページに置いたフォームの送信内容を受け取る方法と、訪れた人の数を知る方法です。
- AI で作ったページの問い合わせフォームに、送信内容が届くようにする方法ChatGPT や Claude が書いたフォームは、送信しても内容がどこにも届きません。メールで受け取る方法と、管理画面に保存して CSV で見る方法を比べて、手順を説明します。
- ChatGPT で事前登録ページを作って、登録が届く形で公開する方法ChatGPT にそのまま送れる依頼文と返ってきた HTML の扱い方、登録を保存するフォームを付けて無料で公開する手順をまとめました。どのリンクから何件の登録が来たかも数えられます。ChatGPT Sites との違いも説明します。
- 事前登録フォーム付きのランディングページを、無料で作る方法ChatGPT・Claude・Gemini や Convika の管理画面でページを作り、メールアドレスだけの登録フォームを付けて無料で公開する手順です。どの投稿から登録が来たかも数えられます。Google フォーム・Canva・STUDIO との違いも比べました。
- AI で作ったページのアクセス数と流入元を見る方法ChatGPT や Claude で作ったページに、何人がどこから来たのか。Google アナリティクス、Cloudflare、Clarity、Convika を比べて、アクセス数と流入元を見るまでの手順を説明します。
- Google フォームを HTML のページに埋め込む方法と、ページに直接フォームを付ける方法Google フォームの「HTML を埋め込む」でコピーした HTML を、ページに貼る手順を説明します。スマホで横にはみ出すときの幅の直し方や、埋め込んだフォームが表示されないときに確かめることも説明します。
- AI で作ったイベントの申し込みページ、申し込みが届くようにするには（無料）ChatGPTやClaudeが書いた申し込みフォームは、送信しましたと出ても申し込みが届かないことがあります。理由と、届くフォームへの入れ替え方、Googleフォーム・こくちーずプロ・Peatixとの違い、定員や自動返信が必要なときの選び方まで。
- QR コードで出席を取る。AI のページにフォームをつけて一覧を CSV でAI で作った出席ページは、入力しても記録がどこにも届かないことがあります。届くフォームにつなぐ手順、QR コードの出し方、一覧と CSV の受け取り方、防げないこと、名前だけの出席簿なら Google フォームで足りる理由までまとめました。
- LINE グループの出欠を、AI のページとフォームで集めるLINE グループの出欠は、◯△× なら日程調整や投票で足ります。人数やアレルギーまで聞く、LINE を使っていない人にも答えてもらう、回答を一覧に残すなら、AI で作った出欠ページにフォームを付けて、URL をグループに貼ります。
- Formspree とは？ 無料でどこまで使えて、日本語のページではどうするFormspreeは、HTMLのフォームの送信先を借りるサービスです。無料プランの上限（月50件・保存30日・書き出しと自動返信なし）、有料プランの料金、使い方の4つの手順、安全性、日本語のページで使うときの注意を、公式の料金ページとヘルプで確かめてまとめました。
ほかのサービスと比べる
ほかの公開先サービスの無料プランや商用利用の可否、代わりになるサービスの違いを比べました。
- Netlify Drop の使い方と、ドロップしたあとに起きることNetlify Drop に HTML ファイルやフォルダをドロップして公開する場所（app.netlify.com/drop）と、5 つの手順を日本語で説明します。ログインなしでは URL に仮のパスワードがかかり、受け取り期限は 1 時間です。公開範囲の切り替え、更新、削除のしかたもまとめています。
- ChatGPT Sites は無料で使える？ 無料プランでサイトを公開する方法ChatGPT Sites は無料版（Free）と Go では使えません。一番安い Plus は月 3,000 円です。無料版のまま HTML を公開する方法、使えるプランと料金、できること、上限や規約を整理しました。
- 無料で独自ドメインとフォームが使える、ランディングページの公開先は？ 10 のサービスを比較すでに持っているドメインで、ほかのサービスを足さずにフォームの送信内容まで無料で受け取れるのは Convika と Netlify です。Google サイト、Vercel、ペライチ、STUDIO、Wix、Canva と比べます。
- Netlify Drop は無料？ 月 300 クレジットでできることと、止まるときNetlify Drop は無料です。受け取ったサイトが動く Free プランは月 300 クレジットまで。デプロイ 1 回 15、転送量 1 GB あたり 20 クレジットを使います。
よくある質問
HTML ファイル 共有 スマホ
HTML ファイルのまま送ると、どのアプリで開くかは相手のスマホしだいです。リンクか QR コードにして渡せば、相手はアカウントなしでブラウザですぐに開けます。
ChatGPT でつくったページ 公開 無料
Convika の Free プランなら、1 ページを無料で公開できます。クレジットカードの登録もいりません。
HTML ファイル 公開 登録なし
このページのボックスに手元の HTML ファイルを置くだけで、会員登録をせずにプレビューのリンクをつくれます。
手元の HTML をすぐリンクにする
HTML 公開ツールなら、手元のファイルを置くだけで登録なしでプレビューのリンクをつくれます。Free プランは公開 1 ページまで無料で、カード登録もいりません。
HTML 公開ツールを開く