ブラウザゲームの作り方【初心者向けに開発環境と公開方法も解説】

2019/12/23ゲーム制作

初心者向け ブラウザゲーム制作ガイド
悩んでいる人
悩んでいる人

PCとスマホ、どちらでも遊べるブラウザゲームを作りたいです。
でもゲームを作ったことがありません。

何を準備して何を覚えて、どうやって作れば良いのか分かりません。

ブラウザゲームは、初心者でも制作できますか?
ブラウザゲーム開発の方法を教えてください。

こんなお悩みを解決します。

article この記事の内容

  • ブラウザゲーム開発のメリットとデメリットを解説
  • ブラウザゲーム開発に必要なものを解説
  • ブラウザゲームの作り方を学ぶのに適した方法を紹介
  • 個人ゲーム制作の流れやブラウザゲームの公開方法を解説
person
この記事の筆者
運営者アイコン(ドッド工房 Atelier Dodd)
ドッド工房
ゲーム開発歴15年。ゲーム開発の講師経験あり。20作品ゲームをリリースし、50万DL&Play突破。ゲームコンテストで7回以上受賞。インディーゲームも発売。ツクールやUnity等を使用。

先にお伝えしておくと、ブラウザゲームは初心者でも制作できます。

ゲーム制作ツールを使えば、ノーコードで簡単に開発することも可能です。

ドッド工房のふきだし
ドッド工房

率直に言って、スマホゲームアプリよりも簡単に開発できます。

なので、あなたも開発環境さえ準備すれば、すぐにブラウザゲーム開発にチャレンジできますよ。

ちなみに筆者も、これまでに10作品以上のブラウザゲームを公開しています。
»ドッド工房の自作ゲーム

この記事を読めば、あなたはブラウザゲーム開発の始め方からリリースの方法までを知ることができます。

それではご覧ください!

ブラウザゲームとは?

ブラウザゲーム制作 魅力と注意点

ちなみにブラウザゲームとは、文字通りWebブラウザ上で遊べるゲームのことです。

「Google Chrome」「Microsoft Edge」「Mozilla Firefox」「Safari」などのブラウザで動作します。

かつてはAdobe Flashを利用したゲームが主流でした。

しかし、Flashのサポートが2020年12月に終了し、現在はHTML5を活用したゲームが主流となっています。

2Dゲームの場合は、映像の動きが少ないノベルゲームから、動きが激しいアクションゲームまで問題なく動作します。

3Dゲームの場合は、ポリゴン数が少ない、いわゆるローポリのゲームであれば、基本的に問題なく動作します。

ドッド工房のふきだし
ドッド工房

実際に筆者は、2Dゲームと3Dゲームの両方をブラウザゲームとして公開しています。

ブラウザゲーム開発のメリット

ブラウザゲームを開発するメリットは、何といってもユーザーに遊んでもらいやすいことです。

前述のWebブラウザがインストールされていれば、どのデバイスでも関係なく遊べます。

つまり、パソコンだけでなくスマホやタブレット端末などでも遊べるということです。

さらに、ダウンロードの手間も不要なので、ユーザーが手軽にゲームを楽しめます。

ドッド工房のふきだし
ドッド工房

ちなみに筆者は、ブラウザゲームだけでなく、PC用のダウンロードゲームやスマホゲームアプリも公開しています。(※スマホゲームアプリは現在は公開を終了)

2025年3月27日の時点で、それぞれを合計すると480,446回は遊んでいただいています。

なお、そのうちの258,720回はブラウザゲームによるものです。

つまり、全体の約53.8%がブラウザゲームのプレイ回数ということです。

したがって、ブラウザゲームはユーザーに遊んでもらいやすいといえます。


また、もう一つの利点として、自分のサイト上で公開するのにも適しているという点。

これにより、投稿サイトだけでなく、独自のサイトで集客を目指す戦略がとれます。

ドッド工房のふきだし
ドッド工房

もし広告を掲載しているサイトであれば、間接的に収益を得ることもできます。

つまり、ブラウザゲームは、公開方法や展開の仕方をあなたの目的や戦略に応じて柔軟に選べるのです。

ブラウザゲーム開発のデメリット

ブラウザゲームの開発にはいくつかのデメリットがあります。

1つ目は、一般的に広告による収益化にはあまり適さないという点です。

スマホアプリとは違い、ゲーム内広告を実装するのが難しいからです。

ただし、完全に不可能というわけではありません。

例えば、Unity製のブラウザゲームなら、Ad-Virtuaの設置でゲーム内広告を組み込むこともできます。

他にも、ゲーム内広告の代わりに、Webサイト上に広告を掲載するという手法もあります。

ドッド工房のふきだし
ドッド工房

要するに、ブラウザゲームを埋め込むWebページ自体に、広告を表示するということです。

なので、スマホアプリに比べて複雑になりますが、ブラウザゲームでも広告による収益化は一応可能です。


2つ目は、ゲーミングPCで遊ぶような高品質なグラフィックの3Dゲームには不向きという点。

基本的に描画処理に大きな負荷がかかるゲームは、ブラウザ上で動作させるのが困難といえます。

たとえ、ブラウザ上で動作できたとしても、ゲームの読み込み時間が非常に長くなります。

ドッド工房のふきだし
ドッド工房

その場合、きっとユーザーはロードの長さに嫌気がさし、そのまま遊ぶのをやめてしまうことでしょう。

なので、ブラウザゲーム開発では、実現可能なゲームの種類にどうしても制限があります。

ブラウザゲーム開発に必要な環境を準備する

ブラウザゲーム制作 必要な環境

ブラウザゲームの開発には、以下のとおりいくつかの方法があります。

  • PCを使い、ゲーム制作ツール(ゲームエンジン)を活用する方法
  • PCまたはスマホを使い、ブラウザゲームを制作できるサイトやアプリを活用する方法
  • PCを使い、JavaScriptで自作する方法

どの方法を選ぶかはあなた次第。
あなたがチャレンジしたいブラウザゲーム開発の方法を選びましょう。

ドッド工房のふきだし
ドッド工房

ちなみに、筆者のおすすめは1番目のゲーム制作ツールを活用する方法。
高品質なブラウザゲームでも手軽に開発できるからです。

以下、必要な開発環境について解説していきます。

ゲーム開発に適したPC

ゲーム制作ツールやライブラリを使ってブラウザゲームを開発する場合、PCが必要になります。

ドッド工房のふきだし
ドッド工房

とはいえ、そこまで高性能なPCでなくても大丈夫です。

基本的にブラウザゲーム開発では、2Dゲームやローポリの3Dゲームを制作することが多いからです。

例えば、「第8世代以降のインテルCore i5 / 16GBメモリ / 240GB以上のSSD」程度の性能があれば、上記の開発には対応できます。


ただし、Unityで3Dゲーム開発する場合や、Blenderを使って高品質なCG素材を作成する場合は、もう少しスペックが高いほうが良いです。

ドッド工房のふきだし
ドッド工房

エディターの動作が不安定になったり、レンダリングに時間がかかることもあるためです。

なので、快適に開発したい場合は、性能の良いゲーム開発に適したPCの用意をオススメします。

例えば、以下の記事で紹介している「2Dゲーム開発向けPC」なら十分です。

ハイクオリティなブラウザゲームの開発でも、あなたは快適にこなせますよ。

ゲーム開発向けのパソコンを探す際は、参考にご覧ください。
»ゲーム開発におすすめのPCを厳選【必要なスペックと選び方も解説】

ブラウザゲーム開発が可能なゲーム制作ツール

ブラウザゲームを開発できるゲーム制作ツールには色々なものがあります。

その中でも特に、以下のゲーム制作ツールが、日本では多くの方に利用されています。

  • RPGツクールMV/MZ
  • Unity
  • ティラノビルダー

なお、2Dのブラウザゲームを作りたい場合は、RPGツクールMZがおすすめ。

初心者でも扱いやすく、動作も軽快で、ブラウザゲームの読み込み時間も少なく済むからです。

また、3Dのブラウザゲームを作りたい場合は、Unityを推奨します。

高機能で使いやすく、初心者向けの教材やゲームの作り方に関する情報も豊富だからです。

ドッド工房のふきだし
ドッド工房

しかも、Unity 6からモバイルブラウザも正式サポート。
つまり、スマホ向けブラウザゲームの開発がしやすくなりました。

ちなみにゲームエンジンについて、詳しくは以下の記事にまとめています。

参考にご覧ください。
»ガチでおすすめのゲーム制作ツールは5つ!初心者向けに選び方も解説

ブラウザゲームを制作できるサイトやスマホアプリ

Webサイト上やスマホアプリでブラウザゲームを作ることも可能です。

特に、以下のサイトやスマホアプリがおすすめ。

  • PLiCy(プリシー)
  • 脱出ゲームメーカー

PLiCy(プリシー)

PLiCy(プリシー)は、無料ブラウザゲームの投稿ができるサイトです。
かくいう筆者もこのサイトに投稿して公開しています。

でも実は、ブラウザゲームを公開できるだけではありません。

PCやスマホで自作ゲームを作れるサービスも展開しています。
サイト側で素材が用意されており、アクションゲームやRPG、そしてノベルゲームの制作が可能です。

ドッド工房のふきだし
ドッド工房

でも率直に言って、どちらかと言うと子ども向けです。

試しに簡単にブラウザゲームを作ってみたい方には、適しているサイトといえます。
»すぐにブラウザで作ってみよう | たのしいゲームサイト プリシー

脱出ゲームメーカー

脱出ゲームメーカーは、脱出ゲームを制作して公開できるスマホアプリです。

プログラミングの知識がなくても、スマホで簡単にブラウザゲームを制作できます。

ドッド工房のふきだし
ドッド工房

こちらはイラストなどの素材は独自で用意する必要があります。

PCを持っていない方が、スマホで自作の脱出ゲームを作りたい場合には適しています。
»脱出ゲームメーカー – 無料で遊べる!脱出ゲームや謎解きを作成できる!

ブラウザゲーム開発に適したJavaScriptライブラリ

前述のゲーム制作ツールやサイト、スマホアプリを使わない場合は、JavaScriptで作ることになります。

開発するゲームの自由度は高いですが、プログラミングの知識が必要です。

ドッド工房のふきだし
ドッド工房

とはいえ、開発するゲームの内容によっては、意外とシンプルに作れるものもあります。

なので、プログラミング初心者の方でも、努力次第で完成まで開発することは可能です。

ちなみに、ライブラリを活用すれば、クオリティの高いブラウザゲームを開発しやすくなります。

以下の2つは、ブラウザゲームを開発する際におすすめのJavaScriptライブラリです。

  • Phina.js
  • PixiJS

それぞれの詳細は以下のとおり。

Phina.js

Phina.jsは、初心者向けに設計された国産JavaScriptライブラリです。

HTML5のCanvasを活用した2Dゲームライブラリで、ゲームアセット管理や衝突判定などの機能を簡単に実装できます。

公式ドキュメントも日本語で書かれており、英語が苦手な方も安心して使えます。

ドッド工房のふきだし
ドッド工房

簡単にブラウザゲームを作ってみたい方には適しています。

こちらのライブラリの公式サイトはこちら。
»phina.js

PixiJS

PixiJSは、2D視覚化に特化したJavaScriptライブラリです。

WebGLを使って高速な2Dグラフィックの描画ができるので、ゲーム開発でもよく使われます。

実際、RPGツクールMV/MZでも描画エンジンとして採用されています。

活発に更新が継続されており、英語で記述されたドキュメントであれば充実しています。

ドッド工房のふきだし
ドッド工房

なので、将来性があっておすすめです。

こちらのライブラリの公式サイトはこちら。
»PixiJS | The HTML5 Creation Engine | PixiJS

ブラウザゲームの作り方を学習する

ブラウザゲーム制作 おすすめの学び方

開発に必要な環境を準備したら、ブラウザゲームの作り方を学習していきます。

ここで大事なのは「まず慣れること」です。

参考書やWebサイトを読むだけではなく、実際に手を動かしながら学習していきましょう。
そのほうが確実にスキルを身につけられます。

これは筆者の経験に基づいた意見です。

かつて筆者は、Unityの参考書を一気に読破しました。
しかし、エディターを立ち上げても、ほとんど操作できませんでした。

それはなぜか?
頭ではわかっていても、手が操作に慣れていなかったからです。

ドッド工房のふきだし
ドッド工房

なので、あなたはかつての筆者と同じ轍は踏まないようにしてください。

さて、ブラウザゲームの作り方を学ぶのに適した方法は以下のとおり。

  • 参考書を読んで独学する
  • Webサイトを閲覧して独学する

それぞれおすすめの方法を紹介します。

参考書を読んで独学する

ゲーム開発全般に言えますが、基本的には書籍を読みながら覚えていくのがオススメです。

書籍であれば、それなりの有識者によって書かれており、出版に費用がかかっています。

つまり、間違った内容が載っていることが少なく、教材としての信頼性が高いのです。

ドッド工房のふきだし
ドッド工房

また、体系的に情報がまとまっているので、効率よく学習できます。

なので、ブラウザゲームの作り方は、参考書を読んで学ぶのが最適です。

Unityを学べる参考書

Unityを使えるようにしたいなら、以下の書籍がイチオシです。

Unity 6の基本的な使い方を覚えたいなら、これを選んでおけば失敗しません。

画像やイラスト付きで分かりやすく解説されており、初心者でも最後まで読み進められます。

ドッド工房のふきだし
ドッド工房

ちなみに筆者も、このシリーズの「2019完全対応版」でUnityを学びました。

JavaScriptを学べる参考書

JavaScriptでブラウザゲームを開発する場合は、以下の2冊を順に読むのがおすすめ。

なぜなら、2冊目の本はJavaScriptの完全初心者には少し難しいからです。
つまり、読むのに少しだけ知識が必要といえます。

この書籍は、初心者がJavaScriptの入門知識を身につけるのにうってつけ。

ドッド工房のふきだし
ドッド工房

とにかく解説が丁寧で読みやすく、JavaScriptをかじるにはオススメです。

この本を読み終えたら、次は以下の参考書を読みましょう。

この本を読めば、基本的なブラウザゲームの作り方を一通り学べます。

ドッド工房のふきだし
ドッド工房

サンプルコードを実際に打ちながら学んでいけるので、実践的にスキルが身につきます。

Webサイトを閲覧して独学する

一応、ゲーム開発を学べるWebサイトもそれぞれご紹介します。

RPGツクールMV/MZを学べるサイト

RPGツクールMV/MZは、ツールのヘルプが充実しています。

なので、入門的な知識はヘルプを読めば身につけられます。

ただし、エディターの操作に慣れてくると、実現したいことや解決したいことが徐々に出てきます。

そうなると、公式ヘルプだけで解決するのは困難です。

そうなったら、当サイトなどをご利用ください。
»ドッド工房ブログのゲーム制作カテゴリー

ドッド工房のふきだし
ドッド工房

プラグインやスクリプト、動作の軽量化の方法など、ゲーム開発に役立つノウハウを記事にまとめています。

Unityの使い方を学べるサイト

Unityの入門知識や基礎知識を身につけたい場合は、公式の学習サイトを閲覧しましょう。

公式が用意しているものなので、情報の信頼性が高いからです。

ドッド工房のふきだし
ドッド工房

ただし、日本語に対応しているのは一部だけです。
なので、読むためには英語スキルや機械翻訳が必要になります。

以下のリンク先からご覧いただけます。
»Unity Learn

JavaScriptのブラウザゲーム開発を学べるサイト

JavaScriptを使ったブラウザゲームの作り方は、さまざまなサイトで解説されています。

数ある中でも、筆者は以下の記事で学ぶのをおすすめします。
»初心者でも3時間程度でブラウザゲームを作れるようになろう!【2020年版】│作っちゃうおじさん制作記録

ドッド工房のふきだし
ドッド工房

筆者のXの相互フォロワーでもある、ほっとフクロウさんの記事です。

上記の記事では、PixiJSライブラリを活用した実践的なブラウザゲームの作り方を学べます。

画像付きで分かりやすく解説されており、初心者の方にもおすすめです。

個人ゲーム制作の流れ

個人ゲーム開発 進め方

ゲームエンジンの基本的な操作やJavaScriptの基礎的な知識を身につけたら、いよいよあなたのゲームを開発していきます。

しかし、ブラウザゲーム開発を始める際、何から取り組めば良いか分からない場合もあるかと思います。

そこで、基本的な個人ゲーム開発の流れをあなたにお伝えします。

個人ゲーム制作の流れについて、ざっくりとご紹介すると下記のとおりです。

  1. ゲーム制作に必要な開発環境を準備する
  2. ゲームのアイデアを考える
  3. ゲームに使う素材を用意する
  4. ゲームを組み立てる
  5. テストプレイしてデバッグする
  6. README.txt(説明書)を書く
  7. ローカライズ(多言語対応)をする
  8. ゲームをリリースする
  9. フィードバックを基に改善していく

個人ゲーム制作の流れについて、詳しくは以下の記事で解説しています。
»ゲーム制作の流れ【個人ゲーム開発の場合を詳しく解説】

個人ゲーム開発の全体像を把握しておくことで、迷わずに開発を進められます。

ドッド工房のふきだし
ドッド工房

また、この流れに沿って進めていくことで、効率的なゲーム開発が可能になります。

ブラウザゲームの公開方法

ブラウザゲーム 公開方法

ブラウザゲームを完成させたら、さっそくWeb上に公開しましょう。

ブラウザゲームを公開する方法は2種類あります。
以下のとおりです。

  • フリーゲーム投稿サイトを利用する
  • 自分のサイトやブログで公開する

順番に解説します。

フリーゲーム投稿サイトを利用する

最初は基本的に、フリーゲーム投稿サイトで公開するのがおすすめ。
その理由は下記のとおり。

  • 公開方法が簡単だから
  • 人々の目に触れやすいから

つまり、知名度がまだ無い初心者の方のゲームでも、遊んでもらえる可能性が高いということです。

ドッド工房のふきだし
ドッド工房

なので、最初はフリーゲーム投稿サイトを利用するのが良いでしょう。

基本的にどのサイトでも、投稿方法はそんなに大して変わりません。

作ったゲームのファイルを1つにまとめて、zip形式で圧縮し、投稿フォームにアップロードするという流れです。


ちなみに2025年現在、あなたがこれからブラウザゲームを公開するなら、下記3つのサイトがおすすめ。

投稿サイト左記のサイトの特徴
PLiCy(プリシー)利用者数が多く、ゲームコンテストも定期的に開催。
キッズが多いのでコメント欄は要管理。
フリーゲーム夢現2001年からある歴史の長いフリーゲームサイト。
評価システムがあり、打たれ弱い方は注意。
unityroomUnity製のブラウザゲームを投稿可能。
レベルの高い作品も多い。
無料ブラウザゲームを投稿できるおすすめのサイトとその特徴
ドッド工房のふきだし
ドッド工房

ちなみに、某フリゲ投稿サイトに関しては、表現規制や審査が妙に厳しくなってしまいました。

自分のサイトやブログで公開する

自分のサイトやブログで公開するのも、実は結構おすすめです。

審査やライバルとの競争なども一切無いので、自由に作ったブラウザゲームをのびのびと公開できます。

しかも、公開方法はそこまで難しくありません。
以下の手順で公開できます。

  1. FileZillaなどのFTPソフトを使って、サーバーにゲームデータをアップロードする。
  2. Webページにiframeタグを使って、ゲームを埋め込む。

以上の2ステップです。

ドッド工房のふきだし
ドッド工房

ちなみにステップ②の補足として、iframeタグというのは以下のようなHTMLタグのことを指します。

<iframe src="ゲームのURL" width="800" height="450"></iframe>

上記の「ゲームのURL」の部分に、アップロードしたゲームのページURLを記述。

widthとheightの部分で、ゲーム画面の表示サイズを指定するという具合です。


もし、あなた専用のサイトがまだ無い場合は、まずはサイト制作にチャレンジしてみましょう。

ちなみに、独自ドメインとレンタルサーバーで、WordPressを使うのがおすすめです。

ドッド工房のふきだし
ドッド工房

実は、今あなたがご覧になっているこのブログも、この方法で作成しています。

なお、WordPressブログの始め方は、以下の記事で解説しています。

ぜひ参考にご覧ください。
»ブログの始め方をクリエイター向けに解説【WordPressで作品を広めよう】

ゲームを公開する際は、広報活動(宣伝)も実施すべき

ゲームを公開する際は、広報活動(ゲームの宣伝)も必ず行いましょう。

例えば、下記のことは最低限実施しておくと良いですよ。

  • ゲームの紹介画像を差別化し、目を引くデザインにする
  • ゲームの紹介文をユーザー目線で丁寧に書く
  • Xなどで特定のハッシュタグを活用して、自作のブラウザゲームを宣伝する

広報活動をしっかり行うことで、より多くの方にあなたのブラウザゲームを遊んでもらえます。

個人ゲーム開発者向けの広報活動のやり方は、以下の記事で解説しています。

参考にどうぞ。
»自作ゲームのDL数を増やす方法【無料でできる宣伝と見せ方のコツ】

まとめ

ブラウザゲーム制作 さっそく始めてみよう!

今回は、ブラウザゲームの作り方を、初めてチャレンジする方に向けて解説しました。

ブラウザゲームは、方法さえ選べば、初心者の方でも簡単に作れます。

そして、PCとスマホの両方で遊べるので、たくさん遊んでもらいたい場合にはうってつけです。

ドッド工房のふきだし
ドッド工房

あなたの思い描いているゲームを、ブラウザゲームでさっそく実現してみましょう!

ちなみに、初めてゲーム制作する方は、以下の記事も参考にどうぞ。

個人ゲーム制作の始め方を詳しく解説し、初心者の方がよく抱く疑問にも回答しています。