AI でつくった HTML を公開・共有する やりたいこと別の実践ガイド
AI でつくった HTML の公開と共有を、目的別にまとめたガイド一覧です。手元の HTML ファイルを下のボックスに置くだけで、登録なしでプレビューのリンクをつくれます。
よく読まれているガイド
LINE で HTML のページを見てもらうには、ファイルではなく URL を送る
LINE で HTML ファイルを送ると相手のスマホしだいで開けないため、ファイルではなく URL を送ります。ChatGPT や Claude で作った HTML を URL に変えて、トークに貼るだけで見てもらう手順を説明します。
ChatGPT で作った HTML をプレビューして、無料で公開する方法
ChatGPT で作った HTML は、プレビューで見た目を確かめてから、無料で公開できます。このガイドは Netlify Drop、GitHub Pages、Cloudflare Pages、Tiiny Host、Convika の 5 つを、独自ドメイン、フォーム、アクセス数で比べています。
HTML を URL に変換する方法：HTML ファイルを URL 化して、どのスマホでも開けるリンクで共有する
HTML を URL に変換する（URL 化する）には、HTML ファイルを公開先にアップロードして公開します。ChatGPT や Claude で作った HTML を、登録なしのプレビューから無料で公開した URL にするまでの手順と、添付・PDF・リンクなど HTML ファイルの共有方法の違いを説明します。
Google Classroom で、AI で作ったゲームや HTML の教材をリンクで生徒に配る
Google Classroom でゲームやクイズを配るなら、HTML を公開して URL にし、「資料」か「課題」にリンクで投稿します。ChatGPT や Gemini、Claude で作った教材を生徒がアカウントなしで開ける手順と、リンクで提出してもらう方法です。
生徒に配る21
Classroom やロイロノート、QR コードで、生徒の端末に迷わず配る手順です。
- Google Classroom で、AI で作ったゲームや HTML の教材をリンクで生徒に配るGoogle Classroom でゲームやクイズを配るなら、HTML を公開して URL にし、「資料」か「課題」にリンクで投稿します。ChatGPT や Gemini、Claude で作った教材を生徒がアカウントなしで開ける手順と、リンクで提出してもらう方法です。
- ロイロノートにリンク（URL）を貼り付ける方法と、AI で作った教材の配り方ロイロノートにリンク（URL）を貼り付けるには、テキストカードではなく Webカードを使います。iPad と Chromebook・Windows での作り方と送り方、ChatGPT や Gemini で作った HTML の教材を URL にする手順を、ロイロノートのヘルプにそって説明します。
- 生成 AI で作った小テストを、URL で生徒全員に配るChatGPT や Gemini、Claude で作る 4 択クイズの HTML ファイルを URL にして、生徒が Chromebook や iPad からアカウントなしで解けるようにする手順です。答えるとすぐ正誤と解説が出る小テストを授業で配れます。
- 先生のための Claude スキル：生徒がリンクで開けるクイズと教材Claude のスキルとは何か、Anthropic が出している先生向けのスキル、コピーして使えるクイズ作りのスキル、そしてできたクイズを Classroom やロイロノートで生徒に届ける方法を説明します。
- 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 の Pro・Max・Ultra で「リンクを持つ誰でも」にした共有リンクは、ほとんどアカウントなしで開けます。Free で作ったときやランキングを見せたいときは、HTML にして公開した URL を配ります。
- 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 ツール別の手順26
使った AI ツールごとに、つくったページをネット上に公開する手順をまとめました。
- ChatGPT で作った HTML をプレビューして、無料で公開する方法ChatGPT で作った HTML は、プレビューで見た目を確かめてから、無料で公開できます。このガイドは Netlify Drop、GitHub Pages、Cloudflare Pages、Tiiny Host、Convika の 5 つを、独自ドメイン、フォーム、アクセス数で比べています。
- スマホだけでホームページを公開する方法：ChatGPT が作ったコードを、ファイルなしで無料で URL にスマホだけでホームページを作成・公開できます。ChatGPT のチャットに出た HTML のコードをスマホでコピーして貼り付ければ、ファイルなしで無料公開した URL になります。貼り付けから公開、LINE で送るまでの手順と、うまく表示されないときの直し方をまとめました。
- ChatGPT・Claude・Gemini が出した HTML コードを動かす・表示する方法AI がチャットに出した HTML のコードは、全部コピーして無料の HTML ビューアーに貼れば、スマホでもパソコンでもページとして動きます。各 AI のプレビューでできることと、.html ファイルで保存する方法も説明します。
- ChatGPT で「ファイルが見つかりません」と出てダウンロードできない。期限が切れたファイルを受け取り直すにはChatGPT が作ったファイルは「短時間で有効期限が切れます」と OpenAI のヘルプにあります。「ファイルが見つかりません」と出たときに確かめること、sandbox:/mnt/data のリンク、もう一度受け取る頼み方、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なしで進める方法をまとめました。
- ChatGPT（無料版）で作ったプロフィールページを、無料で公開するChatGPT の無料版で、自分っぽいプロフィールページを作って SNS に貼るまで。そのまま貼れる頼み方（パステル・推し活・シンプル）、ChatGPT の共有プロフィールや Sites とのちがい、Convika で無料で公開する手順をまとめます。
- ピアノ教室・習い事の教室、ホームページを AI で作って無料で公開したい個人のピアノ教室や習い事の教室なら、ホームページは1ページで足ります。載せる内容、ChatGPTへの頼み方、体験レッスンの申し込みフォームの付け方、ペライチ・ジンドゥー・Googleサイトとの違いまで、月額なしで始める手順をまとめました。
- Gemini で作ったページを、URL で人に見せる方法Gemini の共有リンクは gemini.google.com の中で開きます。Canvas のコードを Convika に貼り付けると、自分の URL で公開でき、フォームの送信内容とアクセス数も見られます。手順をまとめました。
- Gemini Canvas の共有ができない・相手が開けないときの原因と、別の渡し方「共有」が出ない、送ったリンクを相手が開けない、前のリンクが消えた。Gemini Canvas の共有で止まる原因を Google のヘルプで症状ごとに確かめ、Canvas のコードを Gemini の外の URL にして渡す手順までまとめました。
- Claude で作ったページを、自分のドメインで公開する方法Claude の共有リンクは、Pro・Max・Ultra で「リンクを持つ誰でも」にすればほとんどアカウントなしで開けます。Free でも URL にしたい、登録を保存するフォームやアクセス数、自分のドメインを使いたいときは、コードを Convika に貼り付けて公開します。
- Claude で作った HTML を、だれでも開けるリンクで見せる方法Claude の共有リンクは、Pro・Max・Ultra で「リンクを持つ誰でも」にすればほとんどアカウントなしで開けます。Free で作ったときや、開かれたかを知りたいときは、HTML をアップロードして、だれでも開けるリンクにします。スマホや Claude Code からの取り出し方も説明します。
- Claude のアーティファクトが公開できない・Claude Code が公開しない・リンクが開かない原因と代わりの方法Claude のアーティファクトが公開できない原因を、症状ごとに確かめます。「公開」ボタンがない、Free で「リンクを持つ誰でも」が選べない、Claude Code が公開できないと答える、アップロードの確認が出る、相手にログイン画面が出る。コードを貼り付けて自分の URL で公開する手順もまとめました。
- Copilot（コパイロット）で作った HTML を、だれでも開ける URL で公開する方法Copilot（コパイロット）で作った HTML を、サインインなしでだれでも開ける URL にして共有する手順です。Copilot の共有リンクで届くのは会話で、開く人にもサインインが必要です。Convika なら登録なしでプレビューでき、Free プランで無料で公開できます。
- DeepSeek で作った HTML を、誰でも開ける Web ページとして公開するDeepSeek で作った HTML をスマホや Chromebook で開ける URL にして公開。共有リンクは会話を見せるものですが、Convika ならコードやファイルを貼るだけで公開できます。相手のアカウント登録も不要です。
- Claude Code で作ったランディングページを、そのまま公開する方法Claude Code のアーティファクトは claude.ai に 1 枚のページを置けますが、フォームの受け口はなく、アドレスも claude.ai です。Convika をつなげば、公開、フォーム、独自ドメインまで Claude Code に頼めます。
- Claude Code で AIO 対策をする方法：AI の回答チェックからページ公開までClaude Code だけでは、ChatGPT や Gemini がお客さんにどう答えているかは見えません。回答を集める道具と公開する道具を MCP でつなぎ、聞く、ページをつくる、公開する、聞き直すを毎週回すやり方を、コマンドと依頼文つきで説明します。
- ChatGPT で自社が紹介されているか無料で調べる方法ChatGPT に自社の名前が出るかは、お客さんの言葉で、社名を出さずに、何度か聞いて数えれば無料で確かめられます。手で聞く 5 つの手順、無料のチェックの違い、AI による概要の確かめ方、名前が出なかったときにやることをまとめました。
- ChatGPT に自分のビジネスを登録する方法ChatGPT の Business Hub でビジネスを検索し、電話・メール・DNS・Shopify のどれかで確認して、OpenAI の審査と Persona の本人確認に進みます。日本から登録できる業種、手順、見られる数字、取り消せないことをまとめました。
- Google の AI による概要に自社サイトが引用されているか確認する方法Google の AI による概要に自社サイトが引用されているかは、手で検索する、Search Console の生成 AI パフォーマンス レポートを見る、無料の AI 表示チェックで聞く、の 3 つで確かめられます。それぞれでわかること、わからないこと、出ないときにやることをまとめました。
- 中小企業が AIO 対策を自分でやる方法：無料で確かめて、答えるページを出すAIO 対策は、外注しなくても始められます。質問を決める、無料で確かめる、答えるページを出す、IndexNow と AI のクローラーを整える、もう一度確かめる。お金をかけない順番、使える無料の道具、やらなくていいこと、ツールに頼むときの費用をまとめました。
- ChatGPT にビジネスを登録できるようになった。AIO 対策・LLMO 対策はもう不要？不要にはなりません。OpenAI は、登録しても表示が増える保証はないと書いています。ビジネスハブでわかること・わからないことと、AIO 対策・LLMO 対策で変わる点をまとめました。
- Claude Design で作ったページを、誰でも開けるリンクで公開する方法Claude Design の共有リンクは、Pro・Max・Ultra で「リンクを持つ誰でも」にすればほとんどアカウントなしで開けます。Free で作ったときや、自分のドメインやフォームがほしいときは、「スタンドアロンHTMLとしてエクスポート」したファイルを Convika で公開します。
- ChatGPT の canvas（キャンバス）がなくなったあと、HTML はコードブロックの「プレビュー」で見るChatGPT の canvas（キャンバス）は、2026 年 5 月 28 日に GPT-5.5 から外れ、コードは回答の中のコードブロックに出るようになりました。HTML を「プレビュー」で見る場所と、URL にして人に見せる方法を説明します。
- Notion の「共有の頭脳」とは？ ChatGPT と Claude が同じ記憶を使えるようになったNotion が 11 月 5 日（日本時間）に発表した、ChatGPT や Claude などの AI が Notion で同じ記憶とスキルを使う仕組みを、エンジニアでない人向けに解説。変わること、設定の 3 ステップ、注意点まで。
公開範囲を限る5
検索エンジンに出さない設定や、パスワードをつけて開ける人を限る方法を説明します。
- HTML ページにパスワードをかけて、知っている人だけに見せる 3 つの方法HTML ページにパスワードをかけるなら、Basic 認証、StatiCrypt での暗号化、パスワード機能のある公開サービスの 3 つです。JavaScript で書いたパスワードはソースで読めます。ChatGPT や Claude で作った HTML にかける手順も説明します。
- HTML のページを限定公開する：検索に出さないことと、開ける人を限ることHTML の「限定公開」は 2 つあります。検索に出さないなら noindex の 1 行、URL を知らない人に開かせないならパスワードです。YouTube の限定公開との違いと、それぞれの手順を説明します。
- Claude の共有リンクが Google 検索に出た件：AI で作ったページを、送った人にだけ見せるにはClaudeの共有リンクやアーティファクトが検索に出た原因と、「設定＞プライバシー」で自分のリンクを確かめて消す手順を解説。AIで作ったページを検索から隠し、送った相手だけに見せる方法も紹介します。
- ポートフォリオにパスワードをかけて限定公開する方法応募企業やクライアントだけに HTML のポートフォリオを見せる方法。検索エンジンに結果へ出さないよう伝える限定公開は Pro の機能。
- AI で作ったホームページを、公開前にお客さんに確認してもらうChatGPT や Claude で作ったページを、一般に公開する前にお客さんや上司に見てもらう方法です。その場での見せ方、確認用の URL の作り方、直したあとの差し替え、見せる相手の絞り方、意見のもらい方、OK が出たあとの公開と独自ドメインまで。
フォーム・閲覧数10
ページに置いたフォームの送信内容を受け取る方法と、訪れた人の数を知る方法です。
- 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 を、ページに貼る手順を説明します。スマホで横にはみ出すときの幅の直し方や、埋め込んだフォームが表示されないときに確かめることも説明します。
- イラスト依頼フォーム付きのプロフィール（リンク集）を無料で作るイラストの依頼を受けるプロフィールは、リンク集に Google フォームのリンクを置くつくり方がよくあります。作品と依頼フォームを 1 ページにまとめて無料で公開し、届いた依頼を管理画面とメールで受け取る方法を、lit.link・POTOFU・Wix とのちがい、フォームの項目、参考画像の受け取り方まで。
- 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 ファイルをブラウザにドロップするだけで公開できる、無料で使える Netlify の機能です。app.netlify.com/drop での 5 つの手順と、ログインなしでかかる仮のパスワード、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 公開ツールを開く