ブラウザゲーム開発 | 株式会社メディアインパクト | 京都のWeb制作・ブラウザゲーム開発（すごろく、研修ゲーム）

ブラウザゲームとは

「ブラウザゲーム」は、Webサイト上で動作するゲームです。遊びやキャンペーン用のゲームはもちろん、研修用（eラーニング）のゲームや教育用（子ども向け知育ゲーム含む）もブラウザゲームで実現可能です。

キャンペーン用ゲームであれば、貴社の商品や魅力をゲーム化して、サイト訪問者に楽しみながらそれらの情報に触れていただく（≒ゲーミフィケーションの考え方を使う）ことで、Webサイトを訪れたユーザへの貴社の認知度・関心度・理解度（およびその後の問合せ・成約数）の向上が期待できます。また、単に情報を伝えるだけではなく、ゲーム画面やクリア特典にクーポンやノベルティを設定して、販促支援のツールとしてもご活用いただけます。パソコン上はもちろん、スマートフォンのWebサイト（またはアプリ）でも動作可能です。

研修用ゲームをオンライン化する場合には、紙のボードゲームでは複雑になりすぎて実装や説明に時間を要していたルールやパラメータを画面上で表示・管理できたり、多言語対応やプレイデータの記録も可能であったり、ライセンス販売のための拡張も可能であったりなど、既存の研修教材をブラウザゲーム化することでさらに研修の付加価値を高めることも可能です。

教育用・普及啓発用のゲームとして、すごろくや神経衰弱など、老若男女を問わず遊んだことのあるゲームを、貴社の題材やテーマに置き換えてオリジナル制作することも可能です。

ご要望に応じて、ゲームと名の付くものならだいたい開発可能です。

これまでにも、お客様からのご要望をお受けして、研修用ボードゲーム、研修用カードゲーム、普及啓発用すごろくゲーム、販売促進用ミニゲーム、啓発用レーシングゲーム、疑似体験用人生ゲーム、物理演算ボールあそびゲーム、タイピング練習用ゲーム、警察による特殊詐欺防止用研修ゲーム、販売促進用ロールプレイングゲームなどなどなどを開発・納品させていただきました。ぜひ「こんなゲームを作りたい」というご要望をお聞かせください。大抵のものはお応えできると思います。

教育研修用ゲーム

事例：研修用ボードゲーム開発

企業向けの経営者・幹部・新入社員等の人材育成研修用のボードゲームをオンラインで実施できるように、HTML+CSS+JavaScript+PHP+MySQLを活用したシステムでブラウザゲームの開発を承りました。対面研修よりも、多言語対応や管理者機能（参加者の進行状況の把握や、参加者の行動記録が残るなど）も充実し、より研修の幅が広がったとご好評を得ています。

事例：研修用ボードゲーム開発

株式会社NEXERA様からご依頼を頂き、研修用のブラウザボードゲームの開発を担当させていただきました。会社経営を擬似経験できるBtoBビジネス・マーケティング研修用のボードゲーム「 Marketing Town」について、Webアプリ上でもルールを忠実に再現して開発しました。各プレイヤーは経営者となり、毎回変化する仮想の市場で会社経営を行いながら、実際のビジネス・マーケティングについて学ぶことができるゲームです。研修を受けられた方の経営能力向上の一助となり、社会に役立つ仕事や事業が効果的に広がっていく一端を担うことができることを誇りに感じています。この度はご依頼をいただき誠にありがとうございました。

公式サイトはこちら

事例：研修用すごろくゲーム開発

企業向けの研修用のすごろくゲームをリアルタイムオンラインで複数人で実施・参加できるように、HTML+CSS+JavaScript+PHP+MySQLを活用したシステムでブラウザゲームの開発を承りました。お金と人口を各プレイヤーに配置しつつ、１つのボード上で分岐や強制停止、プレイヤー別の同期処理などを実装し、ご好評をいただいています。

（大変ご好評をいただいているため、弊社自社開発のデモ版を2025年公開予定で制作中です。このデモ版は、お客様に弊社の研修用すごろくを体験していただけることはもちろん、セミオーダーメイドで納期や予算を短縮・低減しながらご提供させていただくためのパッケージの役割も兼ねているものになる見込みです。ご期待ください…！）

事例：すごろくブラウザゲームのサンプルデモ（当社開発）

自社開発のすごろくブラウザゲームのサンプルデモです。このサンプルに対して、スタート画面や各画面の背景画像、キャラクター、マスの内容、クイズ内容などをお客様のご要望に応じて差し替えてご提供させていただく、セミオーダーメイドでのすごろくブラウザゲームの開発も可能です（参考価格帯：200万円～500万＋税）。

サンプルはこちら（PC版のみ）

「すごろくブラウザゲームを作りたいけれどデザイン制作や企画の土台が欲しい」といった場合に、土台としてご活用いただけます。お気軽にお問い合わせください。

実装可能なオプション機能例

ステータス管理機能（例：ゲーム内通貨、Lv、経験値、ポイントなど）
イベント表示処理（例：ラッキーマス、クイズマス、強制停止、ルート分岐など）
ズーム処理（例：広いマップでの広域表示との切替など）
サイコロUI変更（例：ルーレットや他のUIへの変更など）
ルール表示処理（例：遊び方、など）
スマートフォン表示・タブレット表示対応
BGM・SE再生への対応（パソコン版 / スマホ版）※ご入稿推奨
会員登録・ログイン機能
プレイデータの保存（端末への途中保存 / サーバデータベースへの保存）
管理画面作成
プレイヤー登録処理（例：ローカル端末またはオンラインでの複数人プレイの場合など）
複数人プレイ時のルーム選択機能
オンライン複数プレイへの対応
オリジナルデザインデータへの対応
特別なミニゲームとの連携
プレイ結果のSNSへの共有
多言語対応
スコア記録・ランキング機能

マップデータ作成用のテンプレート

オリジナルすごろくゲームを制作させていただく際の、ご入稿データ形式についてご説明いたします。制作を円滑に進めるため、一例として以下にご紹介する形式でのデータのご入稿を推奨しております。

ご入稿いただくデータの主な構成要素は「イベントリスト」「マップ画像」「キャラクター画像」の3つとなります。

「イベントリスト」は、Excelやスプレッドシート等を想定しており、マスごとのイベント内容をテキストでご指定いただくものです。「〇マス進む」といった進行指示のほか、クイズとその選択肢、アイテムの入手など、ゲームの根幹をなす要素を記述します。

「マップ画像」は、ご入稿いただくオリジナルのデザインを、そのままゲームの盤面として使用するものです。こちらはレイヤー分けされたイラストレーター形式や1枚の大きい画像を想定しています。

「キャラクター画像」は、プレイヤーのコマとして使用するものです。こちらは背景が投下されたキャラクターの画像を想定しています。

上記でご紹介した形式は、ゲームの仕様を明確化し、制作工程における認識の齟齬を未然に防ぐ上で有効です。もちろん、これは推奨形式の一例であり、他の形式でのご入稿を希望される場合も個別に対応いたしますので、お気軽にご相談ください。

テンプレートはこちら

事例：すごろくブラウザゲーム「うつ病で休職した勤労者の復職までの道筋すごろく」開発

福岡県立大学人間社会学部小嶋秀幹教授（精神保健学）との共同研究開発で「うつ病で休職した勤労者の復職までの道筋すごろく　オンライン版」を制作させていただきました。すごろくをしながら、うつ病で休職した勤労者の復職までの道筋を追体験することができるすごろくです。

うつ病には大きく２つのタイプがあり、それにより症状や治療経過が異なるところがあります。１つめの「ディスチミア」タイプは「気分変調症」。うつ症状は比較的軽症ですが、長期間続くことが多く、つらさが持続します。また、職場や対人関係の一見ささいな変化で、うつ症状が悪化しやすいことも特徴です。比較的若い年代の勤労者がこのタイプのうつ病になりやすく、リワークプログラムへ参加しながら回復することが有効な方が多くいます。

２つめの「メランコリア」タイプはうつ病の中でも、より重症な、いくつかの特徴を示すものです。このタイプの人は、一般にうつ症状は重症ですが、服薬と休養により、回復しやすい面もあります。療養期間は人により異なり、自殺の危険が高まる人もいますので、十分に療養し、回復してから復職することが大切です。中高年の勤労者がなりやすく、リワークプログラムへの参加が有効な方もいます。

ストレスの多い社会にあって、うつ病に罹患された方ご本人だけでなく、ご家族の方や周囲の方にも少しでも理解が広まればと心から思います。ブラウザゲーム開発を通じて、そうした普及啓発をお手伝いさせていただけることを誇りに思います。今後ともどうぞよろしくお願いいたします。

プレスリリース：https://www.mediaimpact.co.jp/hukushoku/press.pdf

公式サイトはこちら

世にある「すごろくブラウザゲーム」のご参考情報

世にある普及啓発用のすごろくのご参考情報

事例：日本貨物鉄道株式会社（JR貨物）様・神経衰弱ブラウザゲーム制作

日本貨物鉄道株式会社（JR貨物）様からゲーム内のイラストをご入稿いただき、弊社が神経衰弱ゲームの開発を担当しました。本作はReactを用いて制作したブラウザゲームで、スマートフォン・PCの両方で遊べます。難易度の選択や、「超むずかしい」モードではカードの位置を入れ替えてしまうシャッフルカードなどの機能を搭載しています。

また、全てのカードを集めるまでにめくった回数をXに投稿する機能も搭載しており、全国のライバルたちと競い合うことができます。この度はご依頼をいただきありがとうございました。（公開後、大変ご好評いただいております。反響は、X（Twitter）でハッシュタグ #機関車めくりをご覧ください。）

公式サイトはこちら

モード選択機能で、初心者からマニアまでみんなで楽しく！

シャッフル時は入替機関車がカードを入れ替えます。

事例：株式会社ECC様・研修用パズルゲーム制作

株式会社ECC様からご依頼を頂き、スマートフォンで遊べる2人プレイ用のパズルゲームを制作させていただきました。このゲームは、2人でお題の完成図の作成を目指すゲームです。ひとりは「指示役」としてお題の完成図が見れる状態で、もうひとりの「組み立て役」に口頭で指示を出し、「組み立て役」のスマホ画面内に完成図の再現を目指します。ジェスチャーは禁止です。お互いの画面が見えない状態で、指示役の言葉だけで組み立て役の操作を誘導するため、お互いのコミュニケーションが重要になります。この度はご依頼をいただきましてありがとうございました。

事例：研修用クイズゲーム開発

某業界に特化した研修用のオリジナルクイズ用カードゲームの開発を承りました。カードゲームはブラウザゲームに向いており、ルールに応じた画面表示の工夫や、現在の数値管理、多言語対応も、ブラウザゲームであれば機能的に管理可能です。ご好評いただいております。

事例：タイピングゲーム開発

たてばやし淳（エクセル兄さん）様よりタイピングの練習用ゲーム「タイピングヒーロー」の開発のご依頼をいただき、ご好評をいただいています。ランキング機能や必殺技機能、課題機能、学習記録、ゲストモード、ユーザ名のNGワードなど、ご要望に応じて柔軟に対応いたします。

公式サイトはこちら

事例：バーチャル商店街ゲーム

遊べば遊ぶほど京都市中心部の１２の商店街に詳しくなる自社開発ブラウザゲーム『京都田の字クエスト http://www.tanoji.kyoto/』。京都市様や商店街振興組合の皆様とのご協力で実現しました。
公式サイト：「京都田の字.jp」。
世界最大のゲーム配信プラットフォームSteamでも配信しています（配信ページ）。

＜YouTube動画＞

＜実際の動作版＞

キーボード操作（決定：Z、キャンセル：X、上下左右キー：↑↓←→）。
説明書は公式サイトへ。

公式サイトはこちら

販促・キャンペーン用ゲーム（イベントやキャンペーンのPR用ゲーム）

事例：株式会社集英社×株式会社サイバーエージェントのRPG「集英社ボスラッシュ」

株式会社サイバーエージェント様からのご依頼で「集英社ボスラッシュ」のゲームを制作させていただきました。週刊少年ジャンプなどで言わずと知れた集英社さんと、Amebaマンガを展開中のIT大手のサイバーエージェント社さんがコラボした、マンガを読めば読むほど主人公が強くなる「集英社ボスラッシュ」というブラウザゲームのRPGです。

株式会社サイバーエージェント様からゲーム内の画像や音声データ、ストーリー等のテキスト等のデータをご入稿いただき、弊社がゲーム内のデータ入力・プログラム構築、必要なプラグインの収集・カスタマイズを行う形で構築させていただきました。

本作はRPGツクールMVというゲーム制作ソフトで制作したブラウザゲームです。スマートフォン・PCの両方で遊べます。名作マンガのセリフを入力することで主人公が成長したり、新たなスキルを習得する成長システムが搭載しています。マンガを立ち読みできるAmebaマンガへの誘導や、入力に成功したセリフをXに投稿する機能も搭載しています。

ストレスの多い社会にあって、マンガが全世界の人々の心を救っている面があると心から思います。そうしたマンガの普及をお手伝いさせていただけることを誇りに思います。

公式サイトはこちら

事例：株式会社円谷プロダクション様・モザイクアート生成ゲーム制作

株式会社円谷プロダクション様からご依頼を頂き「ウルサマ2022 – GUTS-SELECTからの緊急指令！みんなでモザイクアートをつくろう！」のWebサイト・モザイクアート生成システムの開発を担当させていただきました。Webサイト内のフォームから画像やメッセージを送信すると、それらの内容がモザイクアートの一部として反映されます。投稿が増えれば増えるほどモザイクアートに何が写るかががわかりやすくなります。モザイクアートは、「ウルトラヒーローズEXPO 2022 サマーフェスティバル IN 池袋・サンシャインシティ」のイベント会場および、イベントの公式ページでご覧いただけます。この度はご依頼をいただき誠にありがとうございました。

公式サイトはこちら

事例：一般消費者様向けのイベントキャンペーンブラウザゲーム

某大手店のイベントキャンペーン用のお楽しみ要素として、落ち物ゲームを実装しました。結果はTwitterでシェア可能で、企業公式Twitter同士のスコア争いが話題になるなど、ご好評をいただきました。

事例：啓発用のレーシングゲーム開発

団体の啓発用の特設コンテンツとして特色を盛り込んだレーシングゲームの開発をご依頼いただき、HTML+CSS+JavaScriptを活用してブラウザゲームの開発を承りました。

事例：スタンプラリーゲーム開発

イベント会場でスタンプラリー形式でQRコードを読み込み、コンプリートを目指すデジタルスタンプラリーのブラウザゲーム開発を承りました。紙のスタンプラリーよりも集計や記録等の管理が行いやすく、イベントごとの切り替えも可能なため、ご好評をいただいています。

事例：ブラウザ脱出ゲーム

ブラウザで動作する簡単な脱出ゲームです。PC・スマートフォンのどちらでも操作が可能で、画面をクリック（タッチ）することで操作できます。サンプルはごく簡易的なものですが、ご要望に応じて様々な仕掛けを作ることも可能です。フラグ管理やメッセージ・効果音等の制御等を行いやすくするため、RPGツクールMVで制作しています。

サンプルはこちら

事例：みんなで押せるスイッチ

リアルタイムの同期通信の検証として実装したスイッチです。スイッチを押すと、ページを見ている人全員のスイッチがリアルタイムで切り替わります。複数人で同時プレイするミニゲームやクイズ・チャット等への応用も可能です。

事例：簡単なシューティングゲーム

キーボード操作（決定：Z、パワーアップ：X、上下左右キー：↑↓←→）。ボス戦はございません。
難易度やキャラクターの見た目、アイテムの出現頻度、効果音等の追加は可能です。
（PC向けの操作ですが、スマホ向けの操作を追加することも可能です）

サンプルはこちら

事例：クリックまたはタッチで遊ぶゲーム

マウス・タッチ操作（クリック・タッチで上昇）。
こちらも見た目やルールの追加など、さまざまなカスタマイズが可能です。

サンプルはこちら

事例：簡単なロールプレイングゲーム（RPG）

キーボード操作（決定：ZまたはEnter、キャンセル：X、上下左右キー：↑↓←→）
※タッチ・マウス操作も可
内容については自由にカスタマイズが可能です。
（PC向けの操作ですが、スマホ向けの操作を追加することも可能です）

サンプル1はこちらサンプル2はこちら

サンプル：ウェブサイト上でマウスで引っ張ることができるスイッチ

紐を引っ張ることでなにかの仕掛けを起こすスイッチです。
ウェブサイトのメインビジュアル部分や、ちょっとした仕掛け（サイトのデザインをダークモードに切り替えたり、イースターエッグ的な要素）等、さまざまなアイディアとの組み合わせが可能です。紐スイッチ

サンプル：カエルがジャンプするアクションゲーム

ブラウザで動作するジャンプアクションゲーム（足場を飛び移るゲーム）です。マウス・タッチでドラッグした距離・方向に応じてカエルがジャンプします。どれだけ上に登れるかでスコアを競います。

キャラクターや足場の見た目を変えたり、動く足場やアイテム・障害物の追加等、さまざまなアレンジを加えることも可能です。

サンプルはこちら

サンプル：クリックゲーム（風船割り）

ブラウザで動作する風船割りゲームです。マウス・タッチで風船を割ります。

クリックするものを変えたり、動くものの種類を増やしたりのアレンジを加えることで、さまざまなキャンペーン用のミニゲームにご利用いただけます。（例：菌を消して除菌する、食べものを食べる等）

サンプルはこちら

サンプル：物理演算パズル（出世魚ぉーズ）

ブラウザで動作する物理演算パズルです。同じ種類の魚を接触させることで大きなサイズの魚に出世します。

落下物を任意のキャラクターや商品に変えたり、ゲームのルールを調整する等でさまざまなアレンジが可能です。

サンプルはこちら

サンプル：神経衰弱

マウス・タッチ操作（クリック・タッチ、スマホのタップ操作）。
見た目の変更やルールの追加（シャッフルなどのおじゃまカード等）、結果のSNSへのシェア機能など、さまざまなカスタマイズが可能です。

サンプルはこちら

サンプル：目指せギガ盛り！ホットケーキタワー

マウス・タッチ操作（クリック・タッチ、スマホのタップ操作）。
見た目の変更やルールの変更、結果のSNSへのシェア機能など、さまざまなカスタマイズが可能です。

サンプルはこちら

講義例：京都コンピュータ学院（専門学校）でのブラウザゲーム開発の講義開講

最高技術責任者（CTO）の宮嶋清人（Webエンジニア/Webプログラマ）は2015年より京都コンピュータ学院非常勤講師（科目名「PHP実習」「マルチメディアプログラミング」「Webゲームプログラミング」を担当しています。全15回・各回90分×2コマ、約50名。Web制作会社での勤務を希望する受講生がアルバイト・正社員として活躍中）。

【重要】弊社がお請けしやすいブラウザゲームの開発依頼方法について

当社は、基本的にエンジニア集団で開発技術力を強みとしているチームです。逆に、力不足な点として、ゲームのシナリオや台詞を考えたり、キャラクターやマップのデザインをしたりといった企画・デザイン面は社内リソースが不足しており（＝外部の方に依頼せざるを得ず、予算面に跳ね返ってしまう）、「こういうものを作りたい」というデザインや素材を具体的にご提供いただければいただけるほど、費用も期間も工数も抑えて制作できると思います。

最も実現しやすいゲーム開発は、既に実際に紙で実現・運用しているボードゲーム（すごろく、人生ゲームなど）や、パズルゲーム、カードゲーム、研修教材などを、オンラインでプレイできるようにブラウザゲーム化するご依頼です。ゲームの仕様が基本的に固まっており、デザインデータをご提供いただけましたら、ほぼ確実にブラウザゲーム化が実現すると思います。

こうしたご依頼の場合には、従来の紙版のゲームでは複雑になりすぎてしまい実現不能だった機能も、ブラウザゲーム化する際に実現できる可能性がございます（例：多言語対応、データベースへのプレイデータの記録、利用者登録、ログイン管理、複雑なルール追加、各種計数・変数データの表示・管理など）。

これまでに上記のようなご依頼をいただいた複数のクライアント様から、「他社さんでは断られたけれど、メディアインパクトさんに頼んで本当に良かった」とご絶賛をいただいています。Zoom等のオンライン打ち合わせのみで、近畿圏だけでなく、首都圏や全国からのご依頼にお応えしています。お気軽にご相談ください。

（ご予算のボリュームゾーンは200～300万円で、ご依頼から納品まで半年程度のお時間をいただいています。ご予算や内容に応じて、より大規模なものを、プロトタイプ版や正式版などの段階別に開発させていただいたりする場合もございます。また、ごくシンプルな内容に絞って短納期・数十万円台の予算で実現する場合もございます。）