【知識ゼロからのAIゲーム制作】世界一やさしい爆速開発入門

第9回：トップページを作ってみよう

プレイページ（play.html）が完成したら、
次に必要になるのがトップページ（index.html）です。

トップページは、
ゲームの第一印象を決める、とても重要なページです。

ここでは、
・ゲームの概要
・どんな操作で遊べるのか
・どんな人に向いているゲームなのか
といった情報を、分かりやすく伝える役割があります。

トップページ制作をAIに依頼してみる

次はトップページ（index.html）の作成をお願いします。
上部に添付の画像を挿入し、
その下に「ゲームスタート」ボタンを設置してください。
ボタンを押したら play.html に遷移させてください。
デザインはポップな雰囲気でお願いします。
play.html とテイストを合わせてください。

了解です 👍
トップページ（index.html）を全文コードで作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>うんち落としゲーム</title>

<style>
:root{
  --w: 360px;
}

body{
  margin:0;
  background:#000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  user-select:none;
  -webkit-user-select:none;
}

#wrap{
  width:var(--w);
  margin:20px auto;
  background:linear-gradient(#bfe9ff, #dff6ff);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== TITLE IMAGE ===== */
#titleBox{
  padding:14px 12px 6px;
  text-align:center;
}
#titleBox img{
  width:100%;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* ===== START BUTTON ===== */
#startBox{
  padding:14px 16px;
  text-align:center;
}
#startBtn{
  display:inline-block;
  width:100%;
  padding:14px 0;
  background:linear-gradient(#ffcc00, #ff9f00);
  color:#fff;
  font-size:22px;
  font-weight:900;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 8px 0 #d27c00, 0 14px 24px rgba(0,0,0,.25);
}
#startBtn:active{
  transform:translateY(4px);
  box-shadow:0 4px 0 #d27c00;
}

/* ===== CONTENT ===== */
.section{
  margin:12px;
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.section h2{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
}
.section p,
.section li{
  font-size:14px;
  line-height:1.6;
}

/* ===== LIST ===== */
ul{
  padding-left:18px;
  margin:6px 0 0;
}
li{
  margin-bottom:6px;
}

/* ===== FOOTER ===== */
#footer{
  text-align:center;
  font-size:12px;
  color:#555;
  padding:10px 0 14px;
}
</style>


<script async src="https://www.googletagmanager.com/gtag/js?id=G-8ME59P08Y5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-8ME59P08Y5');
</script>
</head>

<body>
<div id="wrap">

  
  <div id="titleBox">
    <img src="images/title.png" alt="うんち落としゲーム">
  </div>

  
  <div id="startBox">
    <a id="startBtn" href="play.html">🚽 ゲームスタート 💩</a>
  </div>

  …（以下、ゲーム概要・操作方法・リンク・フッターも
    すべて同じルールで全文エスケープ済み）…

</div>
</body>
</html>

画像とスタートボタンだけのシンプルな構成ですが、
「何のゲームか」「どう始めるか」が一目で分かるトップページになりました。

トップページは、
情報を詰め込みすぎず、
迷わずプレイに進めることが大切です。

これでトップページは完成です。
今回はここまでとします。

まとめ：

トップページは、
ゲームの「顔」となる存在です。

どれだけ面白いゲームを作っても、
トップページが分かりづらければ、
プレイヤーは遊んでくれません。

今回のように、
画像＋スタートボタンというシンプルな構成でも、
十分に役割を果たすトップページは作れます。

AIを使えば、
ページ構成やデザイン案、コードまで一気に作成できるため、
「作る前に悩みすぎる時間」を大幅に減らすことができます。

次はいよいよ、
完成したゲームをサーバーにアップして公開する工程に進みます。

第10回：サーバーにアップして公開してみよう >>

← トップに戻る