AIとゲームづくり②｜ゲームはどう動く？ ブラウザ版とPC版の違い

「AIと、はじめてのゲームづくり」全4回シリーズ｜第2回

「キャラの絵は用意できた。でも、何を足せばゲームになるの？」「ブログで遊ぶゲームと、ダウンロードするゲームは、中が違うの？」

どちらも自然な疑問です。今回は、画面のキャラを左右に動かしてコインを集める、説明用の小さなゲームを使います。遊ぶ人がボタンを押してから、キャラが動くまで。そのあと、友達へ渡すまで。 一つのゲームを追って考えます。

ここでのPC（ピーシー）はパソコン、URL（ユーアールエル）はネット上のページの住所です。ブログなどを見るためのソフトをブラウザと呼びます。PCアプリ版は、ゲームをパソコンへ受け取り、そこから動かし始める形です。漫画では、ざすこが「友達に遊んでもらいたい」と考えるところから追ってみましょう。

マンガの会話をテキストで読む

この絵、ゲームになる？

ざすこ：このキャラで、コインを集めるゲームを作って、友達に遊んでもらいたい！

ジェネコ：いいジェネ！ まず、矢印キーでキャラを動かしてみるジェネ。

ざすこ：あれ？ キーを押しても動かない…。絵を置くだけじゃ遊べないの？

ジェネコ：今あるのは一枚の絵ジェネ。操作に反応する仕組みも必要ジェネ。

ざすこ：「右を押したら右へ」「コインを取ったら得点」って、動きを教えるんだ？

ジェネコ：そうジェネ！ その指示を書いたものを、プログラムと呼ぶジェネ。

友達には、どう渡す？

ざすこ：絵と動きの指示がそろえば、操作できるゲームに近づくんだ！

ジェネコ：次は友達への渡し方ジェネ。URLで遊ぶ形と、PCへ入れる形があるジェネ。

ざすこ：見た目は似てるね。URLで遊ぶ方も、友達のパソコンが動かしてるの？

ジェネコ：この例なら、そうジェネ。どの仕組みで動かすかが違うジェネ。

ざすこ：気軽に遊んでもらいたい！ でも、ブラウザ版なら何でもできるのかな？

ジェネコ：そこを本文で確かめるジェネ。中身と渡し方を、一つずつほどくジェネ！

絵を一枚見せることと、ゲームで遊ぶことは何が違う？

キャラとコインが描かれた絵をパソコンに表示してみます。右の矢印キーを押しても、普通の一枚絵は動きません。絵は「どう見えるか」を伝えますが、「右キーを押されたら何をするか」という決まりは持っていないからです。

そこで、こんな指示を用意します。「右キーを押している間は右へ進む」「コインに触れたら、コインを消して点数を1増やす」。パソコンがこれを受け取り、絵の位置や表示する点数を変えると、操作できるゲームへ近づきます。

プログラムは、コンピューターにしてほしい仕事を順番や条件とともに指示するものです。コードは、その指示を決まった書き方で記した文章です。料理にたとえるなら、材料が絵や音、作業の手順を書いたレシピがプログラムに近い役割です。ただし、コンピューターにはあいまいな部分を人間のように補ってもらえないため、必要な指示を具体的に用意します。

小さなコインゲームにも、五つの中身がある

ここで、似た言葉を一つずつ分けてみましょう。

中身	コインゲームなら	身近なたとえ
素材	キャラの絵、コインの絵、取った音	工作の材料
ルール	コイン1枚で1点、10点でクリア	遊びの決まり
配置や設定	コインを置く場所、キャラの速さ	物を並べる位置や調整つまみ
今の状態	いま3点、まだコインが7枚ある	その時点の記録
動かす仕組み	操作を受け取り、計算し、画面や音に反映する部分	決まりどおりに仕事を進める仕掛け

素材（そざい）は、作品に使う絵や音などの材料です。データという言葉は、パソコンで扱う情報のこと。絵も音も点数も、パソコンの中ではデータとして扱います。

設定（せってい）は、動きや見た目を調整するために決めた値です。速さを「100から50へ変える」なら、速さの設定を変えています。どの数字がどんな意味かは、制作中のゲームで確かめます。

「コイン1枚で1点」はルール。「いま3点」は状態。この二つが違うと分かれば十分です。ルールは同じままでも、遊ぶたびに状態は変わります。セーブは、その状態の一部を後から再開できるよう残す仕事です。

右キーを押すと、パソコンの中では何が起きる？

画面では一瞬の出来事でも、裏側ではいくつかの仕事がつながっています。

1. 操作を受け取る：「右キーが押されている」と分かります。これを入力（にゅうりょく）と呼びます。
2. 次の位置を決める：キャラを少し右へ動かします。壁や画面の端があれば、止まるよう調整します。
3. コインとの接触を調べる：重なったらコインを取り、点数を増やします。
4. 画面を描き直す：新しい位置にキャラを表示し、新しい点数を見せます。
5. 必要な音を鳴らす：コインを取った音を出します。

このような仕事を細かく繰り返すことで、キャラが滑らかに動いて見えます。画面に絵を描いて見せる仕事を描画（びょうが）と呼びます。「描画が重い」は、画面を作る仕事に時間がかかるという意味です。

動画は、あらかじめ用意した映像を順番に見せるものです。ゲームは、遊ぶ人の操作によって、次に見せる画面が変わります。画像や動画を作れることが役立つ一方、それだけで操作への反応まで完成するわけではありません。

3Dゲームの場合は、景色も操作に合わせて変わる

3D（スリーディー）は、奥行きのある立体や空間を扱うことです。机、鍵、部屋を立体で用意し、プレイヤーが右を向いたら右側の景色、前へ進んだら前から見える景色を作ります。

例えば「床を歩き、机の上の鍵を拾い、出口の扉を開ける脱出ゲーム」。これなら「一部屋のゲーム」とだけ聞くより、何をして遊ぶかを想像しやすいでしょう。部屋の動画を一方向へ再生するだけではなく、操作に応じて見える景色を計算する仕組みが必要です。

この計算は、普通のPCゲームなら遊ぶ人のパソコンが行います。パソコンには処理全般を担うCPU（シーピーユー）、画像の計算が得意なGPU（ジーピーユー）などの部品があります。いまは部品の型番を覚えなくて大丈夫です。「画面を作る仕事も、遊ぶPCの力を使う」と押さえましょう。

「作る道具」と「遊ぶときの形」と「売る場所」を分けよう

このあと名前が増えるので、先に置き場所を分けます。お菓子でいう「作る台所」「持ち帰る箱」「売っているお店」の違いに近い考え方です。台所とお店を同じものとして選ばないのと同じです。

• 作る道具：ゲーム制作ソフト。Godot（ゴドー）、Unity（ユニティ）などがあります。詳しい中身は次回です。
• 遊ぶときの形：ブラウザで遊ぶ形、PCアプリとして起動する形などです。
• 売ったり配ったりする場所：Steam（スチーム）、BOOTH（ブース）、DLsite（ディーエルサイト）などです。

同じ制作ソフトから、ブラウザ用とPCアプリ用を用意できる場合があります。ただし、ボタン一つで何も調整せず全環境で同じように遊べる、という意味ではありません。届ける形ごとに確認が必要です。

ブログのURLから遊ぶゲームは、何が動かしているの？

ブラウザは、Webページを見るためのアプリです。Chrome（クローム）、Edge（エッジ）、Safari（サファリ）などが仲間です。いまブログを読んでいる画面も、ブラウザかもしれません。

URL（ユーアールエル）は、ネット上のページやファイルの場所を示す住所のようなものです。友達へ「このURLをひらいて」と送れるのが、ブラウザで遊ぶ形の分かりやすい利点です。

今回のコインゲームをブラウザ版にした場合は、例えばこんな流れになります。

1. 作者が、ゲームを動かすためのファイルをWebサイト側へ置きます。
2. 友達がURLをひらきます。
3. 友達のブラウザが、必要な絵や動きの指示などを読み込みます。
4. ブラウザが、友達のパソコン上で操作を受け取り、ゲームを動かします。

「ネットで遊ぶ」は、必ずしも「遠くの大きなコンピューターが全部計算する」という意味ではありません。この例の多くの計算は、遊ぶ人の端末で行います。遠くのコンピューターがゲームを動かし、映像を送るクラウドゲームは、別の方式です。

Webサイトは、ページやファイルをネットから見られるようにした場所です。サーバーは、それらを送ったり、必要に応じて別の処理をしたりするコンピューターや仕組みを指します。作者がどの仕事をサーバーへ任せるかは、ゲームの設計で変わります。

「HTML形式」という一枚のファイルだけでゲームになるの？

HTML（エイチティーエムエル）は、Webページの組み立てを示す書き方です。入口のページに使われます。実際のゲームには、それ以外にも絵、音、動きの指示などのファイルが付くことがあります。

ですから、ブラウザゲームを「HTMLの一枚絵」と考えるより、ブラウザに読み込ませる作品一式と考える方が近い場合があります。ここでは、細かいプログラムの言語名まで覚える必要はありません。

ざすこのぬいキャッチ【紹介記事はPR】、GenekoBoard、みちくさギャラクシーは、ブラウザで遊ぶ作品を紹介した身近な例です。リンク先で実際の画面を見ると、「ページの中で操作して遊ぶ」が分かりやすくなります。遊べる条件は各紹介記事をご確認ください。

ダウンロードして遊ぶPCゲームには、何が入っているの？

ダウンロードは、ネット上のファイルを自分の端末へ受け取ることです。アプリは、パソコンやスマホで仕事をするソフトのこと。「PCアプリ版」は、受け取ったゲームを自分のパソコンで起動する形です。

ブラウザを使わないゲームでも、操作を読み、絵や音を出す仕組みは必要です。例えばGodotで作るPCゲームには、作品のデータと、Godotのゲームを動かす部分を一緒に含めて配れます。遊ぶ人がゲーム制作ソフトの編集画面を使う必要は、通常ありません。

「制作の画面」と「遊ぶために動く部分」が別だと考えてください。作者は道具を使って作品を作り、友達には遊べる形を渡します。実際の配布物は、一つの実行ファイルにまとめる場合も、複数のファイルになる場合もあります。Godot公式：Windows用のゲームを出力する

起動（きどう）はアプリを動かし始めること。実行ファイルは、そのアプリを動かす入口となるファイルです。Windowsでは名前の末尾が「.exe（エグゼ）」のものをよく見ます。PC版だから全部同じ形ではなく、Windows用とMac用では用意するものが違います。

Electronは、その二つの間にある別の仕組み

ここは混乱しやすいので、名前を一つずつ見ます。Electron（エレクトロン）は、Webで作った画面や動きを、独立したPCアプリにして動かすための道具です。ゲーム専用の制作ソフトではありません。

例えば、ブラウザ用に作ったコインゲームを、ブラウザに相当する仕組みと一緒にアプリへ入れて配る方法が考えられます。友達はChromeを自分でひらかずにゲームのアイコンから起動しますが、アプリの中ではブラウザの仕組みが働いています。Electron公式の説明

GodotのPCゲームは、通常、Godotのゲームを動かす部分を使います。Electron製のPCゲームは、Webで作ったゲームをブラウザの仕組みと一緒に動かします。どちらも「PCアプリ」になれますが、その中で働く仕組みが違います。

「PCアプリ」と「Electron」を横並びの二種類だと思うと混乱します。PCアプリという大きな仲間の中に、Electronを使って作るものもある、という関係です。

ブラウザでは、何が制限されるの？

ブラウザは、知らないサイトのページもひらく道具です。そのページが、PCの好きな場所へ勝手に保存したり、大音量を鳴らしたりすると困ります。そのため、アプリ全体を使う場合とは違う条件があります。

セーブだけの話ではなく、安全のルール、使える機能、処理の負担を分けて考えます。

セーブ：好きな場所へ勝手にファイルを書けない

セーブは、点数や進行状況などを保存し、後から続きを遊べるようにすることです。ブラウザでもセーブはできます。サイト用の保存領域を使う方法などがあります。ただし、利用者がサイトデータを消すと、保存内容も消える場合があります。

PCの好きなフォルダへ無断で書き込むことはできません。ファイルを選んでもらったり、許可を求めたりする仕組みを使う場面があります。大切な進行状況を残すなら、保存データの持ち出しや、別の保存先を用意する設計も考えます。

音・全画面：最初のクリックが必要なことがある

ページをひらいた瞬間に音を鳴らすことや、画面全体へ広げることには、クリックなどの操作が条件になる場合があります。「スタートを押したら音が出る」という作りにするのは、その対応の例です。

ブラウザを先に起動しておけば解決する話ではありません。ひらいたページが勝手なことをしないために、ページ内で利用者が操作したかが関係します。

3D表現：PC版と同じ機能を全部使えるとは限らない

Godotは、ブラウザ向けとPC向けで使える画面の作り方に違いがあります。例えば、PC向けに選べる一部の光や反射の機能を、そのままブラウザ版へ持っていけません。

鏡に近くの物が映る表現や、複雑な間接光などは、選んだ方式の機能を確認して作ります。間接光（かんせつこう）は、壁などに当たって回り込んだ光です。窓からの光が壁に当たり、部屋がふんわり明るくなる場面を思い浮かべてください。機能の名前を暗記するより、「同じ見た目が出るか実際に確かめる」が大切です。Godot公式：描画方式の違い

「重い3Dゲーム」って、何が重いの？

「重い」は、遊ぶPCがしなければならない仕事が多く、画面が止まる・反応が遅いなどの状態を指す言い方です。作品の雰囲気が重苦しい、という意味ではありません。

立体キャラが一人の庭と、何百人も動く街を比べてみます。後者は、たくさんの形を表示し、人の位置を変え、物にぶつかるか調べ、影も計算します。細かい建物、広い景色、動く光、鏡の映り込みを同時に増やすほど、仕事が増えやすくなります。

さらにブラウザ版では、最初に画像や音などを読み込む時間、端末の空きメモリー、通信量も考えます。メモリーは、パソコンが作業中の情報を置く場所です。机が狭いと材料を広げにくい、というたとえで考えられます。

ブラウザでも3Dゲームは作れます。「何人まで」「何MBまで」と一律に線を引けるわけではありません。ただし、PC向けの豊かな光や影、大きな街を優先する作品では、PCアプリ版を先に考える理由があります。PCアプリでも作り方次第で重くなるため、無制限ではありません。

同じゲームを両方にするなら、ブラウザ側の人物や物の数を減らす、絵や音の容量を抑える、光を簡単にする、保存やタッチ操作を調整する、といった変更を検討します。最初から両方の出力を小さく試すと、後からの作り直しを減らせます。Godot公式：ブラウザ向け出力と制限

実際の作品を見ると、「リッチな3D」と「軽めの表現」はどう違う？

ここでいうリッチな表現は、形・表面・光・影などを細かく組み合わせた見た目のことです。実際のゲーム画面で見比べてみましょう。以下はPCや家庭用ゲーム機で遊ぶ作品の例で、ブラウザ版との性能を実測した比較ではありません。

Horizon Forbidden West（ホライゾン フォビドゥン ウエスト）｜草木や機械獣、衣装まで細かく描く3Dの例

アーロイとヴァールが機械獣に乗る公式スクリーンショット。衣装や機械の細かな形、草木、夕方の光を見比べてみてください。広い世界を探索する作品です。「リッチな表現」は、こうした形や光の工夫を重ねた見た目を指しています。 作品の公式紹介・動作条件を見る

ラチェット＆クランク パラレル・トラブル｜かわいい絵柄でも、細かな3D表現を使う例

リベットの公式スクリーンショットです。毛並み、服の質感、目に入る光、背景のぼけ方に注目すると、「現実そっくりの絵柄だけが豪華な3Dではない」と分かります。カラフルな惑星を駆け回るアクション作品です。 作品の公式紹介・動作条件を見る

Stardew Valley（スターデューバレー）｜平面の絵を活かし、農場の暮らしを作る2Dの例

農場の公式スクリーンショットです。小さな点の集まりで描く「ドット絵」で、家・畑・動物などを見分けられます。農場を育て、住民と交流する遊びが中心です。Steam掲載の最低条件はメモリー2GB、保存容量500MB。比較的軽めの作品の例ですが、長く遊べる仕組みまで簡単に作れる、という意味ではありません。 作品の公式紹介・動作条件を見る

A Short Hike（ア ショート ハイク）｜3Dでも、形と色を整理して島を見せる例

島の公式スクリーンショットです。木や岩を細かく描き込みすぎず、形と色で見せています。歩く・登る・滑空することで山頂を目指す作品です。Steam掲載の最低条件はメモリー2GB、保存容量400MB。「3Dだから全部重い」と決めず、どういう見た目と遊びにするかを考える参考になります。 作品の公式紹介・動作条件を見る

二つの軽めの作品の数値は、2026年10月13日に公式ストアで確認した最低条件の一部です。メモリーは作業中の情報を置く場所、保存容量は作品をしまう場所の広さです。容量が小さいだけで動作の軽さは決まりません。CPUや画像を計算する部品など、ほかの条件も公式ページで確認します。

見た目の豪華さと、面白さは別の軸です。また、この4作品の画面だけで「ブラウザへ移せる・移せない」とは判断できません。使える機能と、遊ぶ機器での動作を確かめながら、自分が届けたい体験に合う表現を選びます。

まとめ｜「どこで、どう遊んでもらいたい？」から考えよう

絵と音に、操作とルールをつなぐ仕組みを加える。それをブラウザで動かす形や、PCアプリとして動かす形へ整える。ここまでを別々の仕事として見られるようになれば、今日のゴールです。

友達へURLを送り、気軽に試してもらいたいならブラウザ版が候補です。PC向けの機能や長い作品に合う配布方法を考えるなら、PCアプリ版が候補になります。どちらが上かではなく、誰に何を体験してもらうかから選びましょう。

次回は、その「操作とルールをつなぐ」作業を助ける道具です。ゲームエンジンとは何か、Godotは何と読むのかという入口から、順に紹介します。

このシリーズについて

ゲームと会話劇は説明用です。紹介したエンジンの描画仕様を2026年10月13日に公式資料で再確認しました。特定の作品の実測性能や、全端末での同じ動作を保証するものではありません。

全4回の道順

• AIとゲームづくり①｜何を用意する？ AIは何を手伝う？
• AIとゲームづくり②｜ゲームはどう動く？ ブラウザ版とPC版の違い
• AIとゲームづくり③｜Godot・Unity・Unreal Engine、どの道具を選ぶ？
• AIとゲームづくり④｜小さな一本を完成させ、公開・販売するまで