はじめての個人ゲーム開発 02｜ブラウザとエディタ、3つのファイルを知る

この記事の目次開く・閉じる

今回の仕上がり：名前・色・回数を変えられた

みっけメディア制作の練習画面で、名前を「星あつめ・練習」へ変え、見本を黄色にし、確認回数を2にしました。下は実際に操作した結果です。ゲームの移動や当たり判定ではなく、道具の役割を知るための小さな例です。

サンプルは外部ライブラリを使わず、HTML・CSS・JavaScriptだけで作りました。入力内容を送信・保存する処理はありません。閉じると入力が消えるので、名前を残すメモ帳の代わりにはしないでください。

制作はPCを前提にします。必要なのは、文字としてファイルを編集できるテキストエディタ、Webブラウザ、ファイルをまとめるフォルダです。今使っているブラウザで練習できます。この記事の練習にはアカウント作成や支払いはありません。

エディタではコードを書いて保存します。Windowsのメモ帳など、プレーンテキストを保存できるものが入口です。Wordなどの文書作成ソフトで、文字の装飾を付けた文書として保存しないでください。特定のエディタの購入や拡張機能は、今回の講座の前提にしません。

ブラウザでは保存したHTMLを開き、見た目と操作を確認します。エディタで変更して保存した後、ブラウザを再読み込みする。この往復が制作の基本になります。フォルダの準備とエディタでの保存手順は第03回で扱います。今回は各エディタのインストール画面を操作したと装いません。

ゲームエンジンは使わず、前回決めたHTML・CSS・JavaScriptの方法を続けます。AIも必須ではありません。まずは同じ小さなゲームを、同じ道具で最後まで作ることを優先します。

見出し、説明、入力欄、ボタンなどの構造を書きます。今回の見本の見出しは次の形です。idは、後でJavaScriptからこの見出しを見つけるための名前です。

<h2 id="preview-title">星あつめ</h2>

色や余白などを書きます。今回の練習は、見本にwarmというクラスが付くと、背景が黄色になる設定です。

.preview.warm {
  background: #fff0cd;
}

ボタンを押したら回数を増やす、入力した文字を見出しへ反映する、といった処理を書きます。HTMLの見出しを入力内容に置き換える処理は、次の一行です。今回は読めなくても、「見出しの文字を変える処理」と分かれば十分です。

heading.textContent = title;

練習画面の「HTML」「CSS」のボタンも、変更のきっかけはJavaScriptで処理しています。ボタンを押すこと自体がHTMLやCSSのファイル編集になるわけではありません。構造・見た目・動きを分けて考えるための練習です。

ファイルは同じフォルダへまとめます。今回のHTMLにはhref="style.css"とsrc="script.js"が書かれ、同じ場所の2つのファイルを読むようになっています。

02-tools/
  index.html
  style.css
  script.js

練習画面を開いてください。別画面で試した後、この記事へ戻れます。

サンプルを手元に置く場合は、上のZIPを保存してください。個別に保存するならindex.html・style.css・script.jsの3つが必要です。実際のフォルダ準備とローカルファイルの開き方は、次回に続けます。

名前が変わらないときは、入力した後に「見出しを変える」を押してください。空欄だと変更しません。色を2回押すと元へ戻るため、変化を見たいときは1回ずつ押します。回数が増えない場合は再読み込みを試してください。

保存後に白いページだけになる、色が付かない、ボタンが動かない場合は、ファイルが不足していたり名前が変わっていたりする可能性があります。index.html.txtのような二重の拡張子も確認します。第03回で、保存場所と名前の見方を順番に扱います。

持っていくのは第01回の企画シートと、今回の3つの役割です。ゲーム名は「星あつめ」、30秒以内に10個、左右に動く、失敗したら再挑戦。敵・ショップ・ランキング・ログイン・オンライン対戦は作りません。

前回01：作るゲームを小さく決める · 全12回の目次。次回03：環境を準備するは公開済みです。フォルダーを分け、ファイルを保存してブラウザで開くところまで進めます。

役割の説明はMDNのHTML入門、CSS入門、JavaScript入門を参照しています。本文の手順とサンプルは、この講座向けに制作しました。

2026年10月3日、編集部がブラウザで名前変更、色切り替え、回数更新、初期状態への復帰を実操作しました。画像はその実画面です。サンプルコードはCC0で提供します。ネイティブのエディタ操作、実機スマホでのファイル保存、完成ゲームの動作、外部サービスへの投稿は今回の確認対象ではありません。