---
title: "HTML5ゲームを共有する方法"
description: "完成したHTML5ゲームをサーバー設定なしで遊んでもらいたい方へ。ファイルをまとめてアップロードするだけで起動URLを作る方法と、公開範囲を調整するコツを解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-html-game"
markdown: "https://giga-site.com/articles/share-html-game/index.md"
category: "コンテンツ別"
publishedAt: "2026-06-21"
updatedAt: "2026-06-25"
readingMinutes: 7
---
# HTML5ゲームを共有する方法
完成したHTML5ゲームを誰かに遊んでもらうには、相手がブラウザでURLを開くだけで起動する状態にするのが近道です。サーバーを借りたりデプロイ設定を覚えたりしなくても、ファイルをまとめてアップロードすれば共有用URLは作れます。この記事では、ブラウザゲームをテスターや友人に届けるときの公開方法と、動作確認・差し替え・限定公開でつまずかないためのポイントを整理します。
> Source HTML: https://giga-site.com/articles/share-html-game
> Article index: https://giga-site.com/articles/index.md
## HTML5ゲームはファイルを渡すより「URL」で遊んでもらう
HTML5ゲームは、index.htmlのほかにCSS、JavaScript、画像や音声、スプライトシートなど複数のファイルで構成されているのが普通です。これをそのままチャットやメールで送ると、相手は全ファイルを正しいフォルダ構成で展開しないと遊べません。受け取った人がうまく展開できず、真っ白な画面だけが返ってくる、というのはよくある行き違いです。
URLで公開してしまえば、相手はリンクを開くだけでゲームが起動します。「ファイルどこに置けばいい？」というやり取りが消え、PCでもスマホでも同じ操作で試してもらえます。テストプレイのフィードバックを早く集めたいときほど、相手の手間を減らす意味は大きくなります。
ブラウザだけで動くゲームには、もうひとつ前提があります。サーバー側でプログラムを動かす仕組み（PHPなどのサーバー処理やデータベース）は使えない、という点です。スコアをサーバーに保存するような作りにしていると、URL共有しただけでは保存部分が動かないので注意してください。
- 相手は展開作業なしでリンクから即起動できる
- PCとスマホで同じURLを試してもらえる
- サーバー処理に依存した機能はブラウザだけでは動かない
## アセットをまとめてZIPで公開すると崩れにくい
画像や効果音を多用するゲームは、ファイル単体ではなく一式をまとめて公開するのが安全です。index.htmlを起点に、CSS・JS・画像・音声を相対パスで参照したままZIPに固めれば、フォルダ構成を保ったまま公開できます。
崩れる原因の多くは参照パスのずれです。読み込みパスを「/Users/...」のような絶対パスや、自分のPC上のパスで書いていると、公開先では画像も音も見つからなくなります。共有前に、参照を相対パスにそろえておくと安心です。
また、ゲームエンジンが書き出したフォルダには、ソースファイルや開発用の設定など、公開に不要なものが混ざることがあります。配布物に残しておきたくないファイルは、ZIPに入れる前に外しておきましょう。
- index.htmlを起点にアセット一式をZIPへまとめる
- 画像・音声・JSの参照は相対パスにそろえる
- ソースや開発用設定など公開に不要なファイルは除く
## 共有前チェックリスト
HTML5ゲームを共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。
チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
- 操作: ボタン、リンク、フォーム、遷移先を確認する
- 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
- 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める
## 公開前に「動く・見える・触れる」を確認する
テスターに渡す前に、自分でも公開URLを一度開いて確認しておくと事故が減ります。とくにHTML5ゲームは、手元では動いても公開先で画像や音が読み込まれない、という落とし穴があります。読み込みエラーが出ていないか、最初のロードがちゃんと完了するかを見ておきましょう。
遊んでもらう端末を想定した確認も大切です。スマホで遊んでほしいなら、タッチ操作が効くか、画面が見切れていないか、縦横どちらの向きで見せたいかを、実機の画面サイズで確かめます。PCのキー操作前提のままだと、スマホのテスターが操作できず止まってしまいます。
AIやノーコードツールで生成したゲームを共有するときは、中身に意図しない外部依存が紛れていないかも気にしておくと安心です。外部スクリプトの読み込みやAPIキーらしき文字列が混ざっていると、公開後に意図しない通信や情報の露出につながることがあります。
- 公開URLを自分で開き、読み込みエラーがないか見る
- 遊んでほしい端末の画面サイズで操作・表示を確かめる
- 外部スクリプトやキー文字列など想定外の依存がないか点検する
## ギガサイト便でHTML5ゲームを共有する手順
ここまでのポイントをまとめて満たせるのが、一時URL共有に特化したギガサイト便です。登録なしでも、トップページにゲームのファイルをドロップすればその場で共有URLが発行されます。アップロード時にはセキュリティスキャンが走り、外部スクリプト依存やAPIキーらしき文字列などの兆候があれば警告してくれるので、公開前の点検にも役立ちます。具体的な流れは次のとおりです。
1. index.htmlとアセット一式をZIPにまとめる
2. トップページにHTMLまたはZIPをドロップしてアップロードする
3. スキャン結果を確認し、内容を理解したうえで公開を選ぶ
4. 誰に遊んでほしいかに合わせて認証方式を選ぶ
5. テスト期間に合わせて公開期限を設定する
6. 発行されたURLをテスターや友人に送って遊んでもらう
7. ビルドを直したら同じURLのままファイルを差し替える
## テスター限定で見せたいときの絞り込み方
未公開のゲームを一部のテスターにだけ見せたいときは、誰が閲覧できるかを設計しておきます。リンクを知っていれば誰でも遊べる「URLのみ」のほか、合言葉を共有して見せるパスワード認証、指定したメール宛の本人確認で絞るメール認証、社内メンバーだけに限定できる会社ドメイン認証から選べます。
一時公開ページにはnoindexが付くため、通常は検索結果に出てきません。ただしnoindexは検索除けであってアクセス制御ではない点に注意してください。関係者以外に遊ばせたくないなら、パスワードやメール認証を併用するのが確実です。
公開期限を設定しておけば、テスト期間が終わったあとに自動で閲覧できなくなり、古いビルドのURLが残り続けることを防げます。誰がどれくらいアクセスしたかはアクセスログで確認でき、URL末尾のスラッグもゲーム名などに合わせて編集できます。
- URLのみ・パスワード・メール認証・会社ドメイン認証から選べる
- noindexは検索除けであり、限定したいなら認証を併用する
- 公開期限で古いビルドのURLを残さない
## よくある質問
### HTML5ゲームを共有するのにサーバーは必要ですか？
ブラウザだけで動くHTML5ゲームなら、サーバーを借りなくても共有できます。HTMLやアセット一式のZIPをアップロードしてURLを発行すれば、相手はリンクを開くだけで遊べます。ただしスコア保存などをサーバー側で処理する作りにしている場合、その部分は静的公開だけでは動きません。
### ゲームのビルドを直したら、URLを送り直す必要がありますか？
いいえ。同じURLのままファイルを差し替えられるので、テスターに新しいリンクを送り直す必要はありません。フィードバックを受けて修正したビルドを差し替えれば、相手は同じURLから最新版を遊べます。
### 完成前のゲームを一部のテスターにだけ遊んでもらえますか？
はい。パスワード認証やメール認証、会社ドメイン認証を使えば、見せたい相手だけに絞って公開できます。一時公開ページにはnoindexが付いて通常は検索結果に出ませんが、noindexはアクセス制御ではないため、限定したいときは認証を併用してください。
### スマホでも遊べる状態で共有できますか？
発行されるのは通常のURLなので、スマホのブラウザからでも開いて遊べます。ただしタッチ操作や画面サイズへの対応はゲーム側の作り次第です。共有前に実機の画面で操作と表示を確認しておくと安心です。
### 改善後の記事では何を確認できますか？
共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。
## 関連記事
- [HTML職務経歴書をURLで共有する方法](https://giga-site.com/articles/share-html-resume/index.md)
- [HTML見積書・請求書を取引先に安全に共有する方法](https://giga-site.com/articles/share-html-invoice/index.md)
- [HTMLメールテンプレートのプレビューを関係者に共有する方法](https://giga-site.com/articles/share-html-email-template/index.md)
- [HTMLダッシュボードを関係者に安全に共有する方法](https://giga-site.com/articles/share-html-dashboard/index.md)
- [HTMLで作った診断・クイズを共有URLで公開する方法](https://giga-site.com/articles/share-html-quiz/index.md)
- [イベント告知HTMLを関係者・参加者に共有する方法](https://giga-site.com/articles/share-html-event-page/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML5ゲームを共有する方法",
"description": "完成したHTML5ゲームをサーバー設定なしで遊んでもらいたい方へ。ファイルをまとめてアップロードするだけで起動URLを作る方法と、公開範囲を調整するコツを解説します。",
"datePublished": "2026-06-21",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/share-html-game",
"url": "https://giga-site.com/articles/share-html-game",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "コンテンツ別",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "HTML5ゲームを共有するのにサーバーは必要ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ブラウザだけで動くHTML5ゲームなら、サーバーを借りなくても共有できます。HTMLやアセット一式のZIPをアップロードしてURLを発行すれば、相手はリンクを開くだけで遊べます。ただしスコア保存などをサーバー側で処理する作りにしている場合、その部分は静的公開だけでは動きません。"
}
},
{
"@type": "Question",
"name": "ゲームのビルドを直したら、URLを送り直す必要がありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "いいえ。同じURLのままファイルを差し替えられるので、テスターに新しいリンクを送り直す必要はありません。フィードバックを受けて修正したビルドを差し替えれば、相手は同じURLから最新版を遊べます。"
}
},
{
"@type": "Question",
"name": "完成前のゲームを一部のテスターにだけ遊んでもらえますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "はい。パスワード認証やメール認証、会社ドメイン認証を使えば、見せたい相手だけに絞って公開できます。一時公開ページにはnoindexが付いて通常は検索結果に出ませんが、noindexはアクセス制御ではないため、限定したいときは認証を併用してください。"
}
},
{
"@type": "Question",
"name": "スマホでも遊べる状態で共有できますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "発行されるのは通常のURLなので、スマホのブラウザからでも開いて遊べます。ただしタッチ操作や画面サイズへの対応はゲーム側の作り次第です。共有前に実機の画面で操作と表示を確認しておくと安心です。"
}
},
{
"@type": "Question",
"name": "改善後の記事では何を確認できますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。"
}
}
]
}
```