diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 71a8b5c..0daea76 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -40,6 +40,14 @@ const table = document.getElementById("game-board");
 
 //盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
 function renderBoard() {
+  // bodyを中央配置に設定
+  document.body.style.display = "flex";
+  document.body.style.justifyContent = "center";
+  document.body.style.alignItems = "center";
+  document.body.style.minHeight = "100vh";
+  document.body.style.margin = "0";
+  document.body.style.padding = "0";
+
   // 初回の盤面生成
   table.innerHTML = "";
   for (let i = 0; i < boardSize; i++) {
@@ -74,7 +82,6 @@ function renderBoard() {
               }
             }
             rerender();
-            generationChange(0);
             stop();
           } else {
             window.parent.postMessage(
@@ -172,7 +179,6 @@ document.addEventListener("mouseup", () => {
 });
 
 renderBoard();
-progressBoard();
 
 function generationChange(num) {
   //現在の世代を表すgenerationFigureを変更し、文章も変更
diff --git a/src/lib/components/GlobalToast.svelte b/src/lib/components/GlobalToast.svelte
index e25e48f..ef3517f 100644
--- a/src/lib/components/GlobalToast.svelte
+++ b/src/lib/components/GlobalToast.svelte
@@ -14,7 +14,8 @@
 </script>
 
 {#if toast.visible}
-  <div class="toast toast-middle toast-center">
+  <!-- 最前面に配置 -->
+  <div class="toast toast-middle toast-center z-[9999]">
     <div class={`alert ${alertClass} p-3 text-lg`}>
       <div>
         <span>{toast.message}</span>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 97d6e48..e930bc2 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -9,3 +9,4 @@ export { default as language } from "./language.svg";
 export { default as reset } from "./reset.svg";
 export { default as accelerate } from "./accelerate.svg";
 export { default as decelerate } from "./decelerate.svg";
+export { default as questionmark } from "./questionmark.svg";
diff --git a/src/lib/icons/questionmark.svg b/src/lib/icons/questionmark.svg
new file mode 100644
index 0000000..ba1e87b
--- /dev/null
+++ b/src/lib/icons/questionmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 408605c..2abb85e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -163,13 +163,23 @@
     <img class="size-6" src={icons.reset} alt="Reset" />
   </button>
 
-  <label class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap mx-5">
+  <label class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5">
     <input type="checkbox" bind:checked={showEditor} />
     <div class="text-black">
       <img class="size-6" src={icons.CodeBracket} alt="Code Bracket" />
     </div>
   </label>
 
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-5"
+    onclick={() => {
+      // ここにチュートリアル・ヘルプを配置 (初起動時に表示もあり)
+      // 他の方法で実装してもよし
+    }}
+  >
+    <img class="size-6" src={icons.questionmark} alt="Info" />
+  </button>
+
   <button
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] mx-5"
     onclick={() => {