「HTML5でノベルゲームを作りたい」

「ブラウザで動くゲームを作りたい」

HTML5＋CSS3＋JavaScriptを使えば、ブラウザで動くノベルゲームが作れる。この記事では、最低限動く構造を作りながら、テキスト表示・画像切り替え・選択肢・公開までの流れをまとめる。

**✨ この記事でわかること**

* HTML5＋CSS3＋JavaScriptでノベルゲームを作る基本的な仕組み
* テキスト表示の実装方法（コード例つき）
* 画像切り替えの実装方法
* 選択肢実装のコード例
* Web公開の方法

HTML5なら、ブラウザだけで完結するノベルゲームが作れる。まずは「動く骨組み」を作って、そこから少しずつ育てていこう。

HTML5でノベルゲームを作るメリット

HTML5で作るメリットは大きく3つ。

ブラウザだけで完結：インストール不要で、すぐ配れる
Web公開が簡単：HTMLファイルをアップロードするだけ（目安5分）
学習コストが低め：HTML／CSS／JavaScriptは情報量が多く学びやすい

ただし、スマホアプリ配信や派手な演出までやりたくなったら、Unityを選んだ方がスムーズなケースも多い。Unityを本格的に学ぶなら、こちらも入口になる。

Unity入門の森

基本的な構造の作り方

ここでは「クリックでテキストが進む」「選択肢で分岐できる」最低限の構造を作る。目安は2時間くらい。

ファイルは次の3つを用意する。

index.html
style.css
game.js

ステップ1：HTMLファイルの作成（所要10分）

まずは画面の箱をHTMLで作る。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ノベルゲーム</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="game-container">
    <img id="character-image" src="character1.png" alt="キャラクター" />

    <div id="text-box">
      <p id="dialogue-text">こんにちは、ノベルゲームの世界へようこそ！</p>
      <div id="choice-buttons"></div>
      <p id="hint">クリックで進む</p>
    </div>
  </div>

  <script src="game.js"></script>
</body>
</html>

役割はシンプルで、セリフは #dialogue-text、選択肢は #choice-buttons に出す。

ステップ2：CSSファイルの作成（所要20分）

次に、見た目を整える。真っ黒背景＋下部テキストボックスの定番レイアウトにする。

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
}

#game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#character-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

#text-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.82);
  padding: 18px;
  min-height: 160px;
  z-index: 2;
  cursor: pointer;
}

#dialogue-text {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 10px;
}

#choice-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.choice-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 14px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 8px;
}

.choice-button:hover {
  background-color: #45a049;
}

#hint {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.7;
}

ステップ3：JavaScriptファイルの作成（所要30分）

最後に「進行」を作る。クリックでセリフを進めて、特定のタイミングで選択肢を出す。

const $text = document.getElementById("dialogue-text");
const $img = document.getElementById("character-image");
const $choices = document.getElementById("choice-buttons");
const $box = document.getElementById("text-box");

// 最低限の会話データ
const dialogues = [
  { text: "こんにちは、ノベルゲームの世界へようこそ！", image: "character1.png" },
  { text: "クリックでセリフが進む仕組みを作っている。", image: "character1.png" },
  { text: "ここで選択肢を出してみる。", image: "character2.png" },
  { text: "「はい」を選んだ。次のセリフへ。", image: "character1.png" },
  { text: "「いいえ」を選んだ。別ルートへ。", image: "character2.png" },
  { text: "ここまでで最低限のノベルゲームが動く。", image: "character1.png" }
];

// 選択肢（dialogueIndex で出すタイミングを指定）
const choiceEvents = [
  {
    dialogueIndex: 2,
    choices: [
      { text: "はい", nextIndex: 3 },
      { text: "いいえ", nextIndex: 4 }
    ]
  }
];

let index = 0;
let isChoosing = false;

function renderDialogue(i) {
  const d = dialogues[i];
  $text.textContent = d.text;
  if (d.image) $img.src = d.image;
}

function clearChoices() {
  $choices.innerHTML = "";
  isChoosing = false;
}

function findChoiceEvent(i) {
  return choiceEvents.find(ev => ev.dialogueIndex === i) || null;
}

function renderChoices(ev) {
  $choices.innerHTML = "";
  isChoosing = true;

  ev.choices.forEach(c => {
    const btn = document.createElement("button");
    btn.className = "choice-button";
    btn.textContent = c.text;

    btn.addEventListener("click", (e) => {
      e.stopPropagation(); // テキストボックスのクリック進行と衝突させない
      index = c.nextIndex;
      renderDialogue(index);
      clearChoices();
    });

    $choices.appendChild(btn);
  });
}

function next() {
  if (isChoosing) return;

  index++;
  if (index >= dialogues.length) {
    index = dialogues.length - 1;
    return;
  }

  renderDialogue(index);

  const ev = findChoiceEvent(index);
  if (ev) renderChoices(ev);
}

// 初期表示
renderDialogue(index);

// クリックで進む
$box.addEventListener("click", () => {
  const ev = findChoiceEvent(index);
  if (ev && !isChoosing) {
    renderChoices(ev);
    return;
  }
  next();
});

ここまでできたら、クリックでセリフが進み、指定位置で選択肢が表示されるようになる。

画像の切り替え方法

上の例では、各セリフに image を持たせて、表示時に差し替えている。

function changeImage(imagePath) {
  const img = document.getElementById("character-image");
  img.src = imagePath;
}

function changeBackground(imagePath) {
  document.body.style.backgroundImage = `url(${imagePath})`;
  document.body.style.backgroundSize = "cover";
}

立ち絵・背景の管理が増えてきたら、画像用の要素を分けたり、データ構造を整理すると後が楽になる。

選択肢実装のコード例（フラグ対応）

分岐が増えると「どっちを選んだか」を覚えておきたくなる。そういうときはフラグを持たせる。

const flags = {};

function setFlag(name, value = true) {
  flags[name] = value;
}

function getFlag(name) {
  return !!flags[name];
}

選択肢を押したときに setFlag で保存し、次のセリフや分岐条件に使うイメージ。

Web公開の方法

HTML／CSS／JS（＋画像）をアップロードできれば公開できる。無料で試すなら次の3つが手堅い。

GitHub Pages：無料、簡単、速い（目安5分）
Netlify：ドラッグ＆ドロップでも公開できる（目安10分）
Vercel：GitHub連携の自動デプロイが強い（目安10分）

最初はGitHub Pagesが分かりやすい。リポジトリを作って、設定でPagesを有効化するだけで公開できる。

もっと高度に作りたくなったら

ブラウザで動くノベルゲームはHTML5でも十分作れる。ただ、スマホアプリ配信や演出の作り込みまで視野に入ってくると、Unityが楽になる場面が増える。

本格的にUnityを学びたいなら、Unity入門の森も参考になる。

よくある質問

**Q: HTML5初心者でも作れる？**

A: 作れる。ただしHTML／CSS／JavaScriptの超基礎は必要になる。まずはこの記事のサンプルをそのまま動かして、動いたら文章や画像を差し替えるのが早い。

**Q: スマホ対応は可能？**

A: 可能。レスポンシブ（画面サイズに合わせるCSS調整）でスマホブラウザでも遊べる。アプリ配布までやるならUnityの方がスムーズなケースが多い。

**Q: セーブ機能は実装できる？**

A: できる。簡易ならlocalStorageで保存できる。作品規模が大きくなるほど、保存データの設計が重要になる。

まとめ

HTML5＋CSS3＋JavaScriptを使えば、ブラウザで動くノベルゲームは作れる。

HTMLで箱を作り、CSSで見た目を整え、JavaScriptで進行を作る
セリフ配列＋index管理で「クリックで進む」は実装できる
選択肢はボタン生成→nextIndexへジャンプでOK
公開はGitHub Pagesなどで無料でできる

まずは基本構造を動かして、そこから演出や分岐を増やしていくと作りやすい。