0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@game-tsukuru

HTML5でノベルゲームを作りたい人へ｜ブラウザで動くゲームの作り方（コード例あり）

Posted at

「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などで無料でできる

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?