HTML ファイルを、スマホで読み取れる QR コードにする方法

ChatGPT に作ってもらったお店のメニューやイベントの案内を、チラシやポスターに QR コードで載せたい。授業で使うクイズを、生徒のタブレットで開いてもらいたい。手元にあるのは .html のファイル。QR コードを作る前に、そのファイルを URL にします。

このページは、HTML ファイルを URL にして QR コードを作る手順と、印刷する前に確かめること、授業で生徒に配る方法、QR コードから開いた人の数の見方を説明します。Google、Apple、デンソーウェーブのヘルプとドキュメントは、2026 年 10 月 15 日に確かめました。

QR コードに入れるのはファイルではなく URL

スマホのカメラで QR コードを読み取ると、中に入っている URL が画面に出て、タップするとページが開きます。デンソーウェーブのサイト「QRコードドットコム」の FAQ によると、1 つの QR コードに入るのは、いちばん大きいものでも 3 KB 弱。HTML ファイルの中身を入れるのではなく、ファイルをネット上に置いて URL にし、その URL を QR コードにします。

パソコンの中のファイルの場所（C:\Users\… や file:///… で始まるもの）を QR コードにしても、ほかの人のスマホからは開けません。そのファイルは、自分のパソコンの中にしかないからです。

ファイルを URL にする方法はいくつかあります。Netlify Drop や GitHub Pages など、ほかの公開先との比較は、ガイド HTML ファイルをリンクで共有する方法 にまとめてあります。ここでは、Convika で公開して、その URL から QR コードを作るまでを説明します。

HTML ファイルを QR コードにする 4 つの手順

チラシやプリントに印刷した QR コードは、あとから入れ替えられません。入れる URL は、ずっと同じものにします。

ボックスで作るプレビューのリンクが開けるのは 3 分間 だけです。そのため、QR コードを作る前に、ページを Convika で公開します。

1. ファイルをボックスに入れて、見え方を確かめる

ページ冒頭のボックス に .html のファイルをドロップするか、「コードから」に切り替えてコードを貼り付け、「プレビューのリンクをつくる」を押します。アカウントもメールアドレスもいりません。

受け付けるのは、.html か .htm のファイル 1 つ（2 MB まで）か、そのコードです。CSS や画像を別のファイルに分けているなら、作った AI に「CSS をすべて中に入れて、画像は https:// から始まる URL にした、1 つの HTML ファイルにして」と頼んでください。

「プレビューができました」と出たら「プレビューを開く」を押し、レイアウトが崩れていないか、画像が表示されるかを確かめます。このプレビューでは、ページのスクリプトとフォームは止まっています。

2. ページを受け取って、公開する

「このページを受け取る（無料・カード不要）」を押して登録すると、アップロードしたページがそのままアカウントに入り、スクリプトも動くようになります。プレビューの時間が過ぎても、同じ画面から受け取れます。

管理画面で「公開する」を押し、確認の画面でもう一度「公開する」を押すと、yourpage.convika.page のようなアドレスで公開されます。この URL は、「公開停止」を押すまで変わりません。

公開の確認画面で無料のまま選べるのは「一般公開」で、QR コードを読み取った人はパスワードやアカウントなしで開けます。一般公開のページは Google などの検索結果や Convika のギャラリーに出ることがあり、出したくないときは「限定公開」を選びます（Pro・1年パス）。ただし、授業のスライドやチラシに載せた QR コードは、写真に撮られたり転送されたりすると誰でも読み取って開けます。クラスの人など決まった相手だけに見せたいときは、確認画面で「パスワードを知っている人だけ」を選ぶか、「サイト設定」の「閲覧パスワード」でパスワードをかけ、パスワードは QR コードとは別に伝えてください。パスワードは Pro（月 ¥1,800）の機能です。詳しくは HTML のページを限定公開する と HTML ページにパスワードをかけて、知っている人だけに見せる方法 をご覧ください。

Free プランはカード登録なしで使え、1 ページを公開できます。公開したページには、Free では下端に小さく Convika の帯が入ります（Pro で消せます）。

3. QR コードを表示して、画像を保存する

サイトの画面の「公開URL」に、公開したページのアドレスが出ます。

横の「QR コードを表示する」を押すと、この URL の QR コードが大きく表示され、その下に URL も大きな文字で出ます。そのまま教室のスクリーンに映せます。「PNG 画像を保存する」を押せば、QR コードを画像で保存でき、スライドやチラシに貼れます。

QR コードに入るのは「公開URL」に出ている URL そのままで、独自ドメインで公開しているページなら、そのドメインの URL です。QR コードはブラウザの中で作られ、URL がほかのサービスに送られることはありません。

4. 読み取って確かめる

自分のスマホで画面の QR コードを読み取り、出てくる URL が「公開URL」と同じかを確かめます。タップして、ページが画面に収まっているかも見ておきます。

チラシとポスターのように、どこの QR コードから開かれたかを分けて数えたいときは、URL の末尾に目印を付けて、その URL の QR コードを Chrome などで作ります。目印の付け方はこのページの下の節 QR コードから開いた人の数を知る で、Chrome での作り方は下の節 Chrome で QR コードを作る で説明しています。

Chrome で QR コードを作る

管理画面の「QR コードを表示する」で出るのは、公開した URL そのままの QR コードです。末尾に目印を付けた URL のように、ほかの URL の QR コードは、Chrome や、QR コードを作るほかのツールで作ります。

手順は Google の Chrome ヘルプ「Chrome でタブを共有する」にあるものです。どれも、公開したページを Chrome で開いてから操作します。端末ごとの手順はこのあとの 3 つです。

• パソコン。 その他アイコンから「キャスト、保存、共有」＞「QR コードを作成」を選びます。QR リンクのコピーと、「ダウンロード」での QR コードの保存ができます。
• Android。 ツールバーの横にあるその他アイコンから「共有」をタップし、「QR コード」を選びます。画面の手順に沿って、ページを共有するか、QR コードをダウンロードします。
• iPhone・iPad。 上部の共有アイコンから「QR コードを作成」をタップし、QR コードの下の「共有」をタップします。

QR コードを作るほかのツールを使うときも、入れるのは公開した URL です。

印刷する前に確かめること

• 読み取って出てくる URL が、公開したページのものか。 自分のスマホで QR コードを読み取って、出てくる URL を確かめます。ボックスのプレビューのリンクが開けるのは 3 分間 だけ。そのあとは「このプレビューは終了しました」と表示されます。
• ほかの機種でも開けるか。 iPhone と Android のように、別の機種のスマホでも読み取って、ページが開くかを確かめます。細い画面で、文字やボタンがはみ出していないかも見ます。
• QR コードに絵や飾りを重ねていないか。 デンソーウェーブの FAQ は、QR コードにイラストを重ねたり、デザインをのせて変形したりすると、「ちょっとした汚れや欠けでも読み取りが出来なくなったり、読み取りの反応が悪くなってしまうことがあります」として、勧めていません。
• あとで URL が変わらないか。 公開したページは、サイトの画面の「AIで改善」で直しても、Claude や Codex、お使いの MCP クライアントから直したコードを保存しても、公開し直せば同じ URL のままです。直した HTML ファイルも、サイトの画面の「新しいバージョンのアップロード」に入れれば同じ URL のままです。管理画面の「HTMLファイルをアップロードする」から入れると別の URL の新しいページになり、印刷した QR コードは前のページを開きます。「公開停止」を押すと、QR コードからページが開けなくなります。

授業で、生徒の iPad や Chromebook に配る

Gemini や ChatGPT に作ってもらった漢字クイズや計算ゲームを、授業で生徒に開いてもらうときも、配るのは公開した URL です。教室では、このあとの 4 つの渡し方があります。

• スライドや電子黒板に QR コードを映す。 サイトの画面で「QR コードを表示する」を押して、そのまま映します。スライドに入れるなら、手順 3 で保存した画像を貼ります。生徒には、タブレットのカメラで読み取ってもらいます。Apple の iPadのカメラでQRコードをスキャンする によると、iPad ではカメラを開き、写真モードで QR コードを枠の中に収めて、画面下部に出るリンクをタップします。Google の Chromebook ヘルプ Chromebook でカメラ機能を使用する によると、Chromebook ではカメラを起動し、画面下部で「スキャン」＞「QR コード」を選んで、QR コードをビューファインダーに合わせ、出てきた URL をタップします。
• 黒板に URL を書く。 QR コードを読み取れなかった生徒は、URL を打って開けます。アップロードしたページの URL には、ほかのページと重ならないようにランダムな英数字が入るので、1 文字ずつ写してもらうことになります。QR コードと並べて書いておきます。
• プリントに載せる。 QR コードと URL を両方印刷しておけば、家でも同じページを開けます。プリントは配ったあとも手元に残るので、URL は公開を止めるまで変わらないものにします。
• Google Classroom に投稿する。 Classroom のヘルプ 授業ページに資料を追加する によると、クラスの「授業」をクリックし、上部の「作成」から「資料」を選んで、タイトルと説明を入力します。「追加」から「リンク」を選んで公開した URL を入れ、「投稿」をクリックします。課題として出す手順と、生徒にリンクで提出してもらう方法は、ガイド Google Classroom で HTML の教材やゲームを配る方法 にまとめてあります。

Claude で作ったゲームは、Claude の「共有」で作ったリンクを配っても、生徒は開けません。開くには Claude のアカウントが要り、Claude を使えるのは 18 歳以上だからです。HTML にして公開するまでの手順は、ガイド Claude で作ったゲームや教材を、生徒に配る方法 で説明しています。

HTML ファイルそのものを配ると、生徒に届くのはファイルで、ページとして開けるかどうかは端末とアプリしだいです。URL なら、生徒はタップするだけでブラウザでページを開けて、先生がページを直したときも配り直しがいりません。ファイルで受け取った HTML を開くなら、心当たりのないファイルは開かずに、送った人に確かめます。心当たりのあるファイルは、ブラウザで無料の HTML ビューアー を開き、「HTML ファイルを選ぶ」から選ぶと、スクリプトも動く状態で表示できます。ファイルはアップロードされません。少しでも気になるファイルは、選ぶ前に「スクリプトを動かす」のチェックを外します。外すと、ページのスクリプトは動かず、フォームも送信されません。

ゲームやクイズのスクリプトは、ボックスのプレビューでは止まっていますが、ページを受け取れば動きます。生徒に配る前に、管理画面の「プレビューを開く」で遊んで確かめます。ほかのサイトの API を呼ぶ処理（オンラインランキングなど）は動きません。試した結果は、ガイド ChatGPT・Claude・Gemini で作ったゲームを、友だちがログインなしでスマホで遊べるように公開する で説明しています。公開した URL は、知っている人ならだれでも開けます。生徒の名前のように、クラスの外に出したくないことはページに書きません。AI に 4 択クイズを作ってもらう頼み方から、Classroom やロイロノートで配るまでは、ガイド 生成 AI で作った小テストを、URL で生徒全員に配る にまとめてあります。

QR コードから開いた人の数を知る

QR コードから何人が開いたかは、公開したページの訪問数でわかります。Free プランでも、日ごとの訪問数を、国、デバイス、どこから来たかとあわせて直近 90 日分見られます。だれが開いたかはわからず、自分で読み取って開いた分も数えます。

「QR コードを表示する」の QR コードには目印が付かないので、そこから開いた人は、ほかの訪問とあわせて数えます。QR コードから来た訪問を分けて数えるなら、末尾に ?utm_source=qr を付けた URL の QR コードを、Chrome などで作ります。管理画面の「キャンペーン（UTM）」で、この目印の付いた訪問を分けて数えられます。チラシとポスターのように場所ごとに分けたいときは、?utm_source=flyer と ?utm_source=poster のように値を変えて、QR コードを別々に作ります。目印の付け方は、ガイド AI で作ったページのアクセス数と流入元を見る方法 で説明しています。

QR コードは株式会社デンソーウェーブの登録商標です。

よくある質問

HTML ファイルから QR コードを作れますか？

作れます。ただし、QR コードに入れるのはファイルではなく、そのページの URL です。

HTML ファイルを Convika で公開すると、管理画面の「QR コードを表示する」で、その URL の QR コードが出ます。Chrome の「QR コードを作成」などでも作れます。デンソーウェーブの FAQ によると、1 つの QR コードに入るのは最大で 3 KB 弱です。

QR コードを読み取っても HTML が表示されないときは、どうすればいいですか？

確かめることは 3 つあります。

QR コードに入っている URL がボックスのプレビューのリンクなら、開けるのは 3 分間 だけで、そのあとは「このプレビューは終了しました」と表示されます。パソコンの中のファイルの場所を QR コードにした場合は、ほかの人のスマホからは開けません。プレビューのリンクやファイルの場所で作った QR コードは、公開した URL で作り直してください。

Convika で公開したページなら、「公開停止」を押していないかを確かめます。公開を止めたページは、もう一度「公開する」を押せば、同じ URL でまた開けます。

QR コードに期限はありますか？

QR コードは URL を模様にしたものなので、開けるかどうかは、中に入っている URL しだいです。

Convika で公開したページの URL は、「公開停止」を押すまで変わりません。このページのボックスで作るプレビューのリンクが開けるのは 3 分間 だけなので、QR コードには入れないでください。QR コードを作るツールの URL が中に入っている場合は、開けるかどうかはそのツールしだいです。

QR コードを印刷したあとに直せますか？

直せます。サイトの画面の「AIで改善」に直したい点を書くか、Claude・Codex など、お使いの MCP クライアントから直したコードを保存して公開し直すと、同じ URL のまま直せます。印刷した QR コードは、直したページを開きます。「AIで改善」は、標準のモデルなら 1 回 1 クレジットで、Free プランには最初に 10 クレジットが付きます。

AI で直した HTML ファイルは、サイトの画面の「新しいバージョンのアップロード」に入れれば、同じ URL のまま次のバージョンになり、公開すれば印刷した QR コードも直したページを開きます。管理画面の「HTMLファイルをアップロードする」から入れると別の URL の新しいページになり、印刷した QR コードは前のページを開きます。

授業で iPad や Chromebook に HTML を配るには、どうすればいいですか？

ページを公開して、その URL を配ります。

管理画面の「QR コードを表示する」で出した QR コードを電子黒板やスクリーンに映して、生徒のタブレットのカメラで読み取ってもらうか、Google Classroom の資料にリンクとして投稿します。Apple と Google のヘルプによると、iPad のカメラも Chromebook のカメラも、読み取った QR コードの URL をタップで開けます。ゲームやクイズのスクリプトは、公開したページで動きます。

Convika で QR コードは作れますか？

作れます。公開したページのサイトの画面で、「公開URL」の横の「QR コードを表示する」を押すと、その URL の QR コードが大きく表示されます。「PNG 画像を保存する」を押せば画像で保存でき、スライドやチラシに貼れます。

QR コードはブラウザの中で作られ、URL がほかのサービスに送られることはありません。QR コードから開いた人の数は、Convika の訪問数で見られます。