diff --git a/src/lib/assets/life-game-rules/lifespan.js b/src/lib/assets/life-game-rules/lifespan.js
new file mode 100644
index 0000000..1adbad8
--- /dev/null
+++ b/src/lib/assets/life-game-rules/lifespan.js
@@ -0,0 +1,330 @@
+"use strict";
+
+let timer = "stop";
+let generationFigure = 0;
+let isDragging = false;
+let dragMode = 0; // 1: 黒にする, 0: 白にする
+let isPlacingTemplate = false;
+let patternShape = [];
+let patternHeight = 0;
+let patternWidth = 0;
+let previewCells = [];
+
+//変数設定
+let boardSize = 20; //盤面の大きさ(20x20)
+const cellSize = 600 / boardSize; //セルの大きさ(px)
+const maxLifespan = 2; // セルの最大寿命
+
+// around: 周囲の生きたセル数, currentLifespan: 現在の寿命
+function getNextLifespan(around, currentLifespan) {
+  // セルが生きている場合
+  if (currentLifespan > 0) {
+    // 周囲が 2 か 3 なら寿命を維持（減らさない）
+    if (2 <= around && around <= 3) {
+      return currentLifespan;
+    }
+    // 条件を満たさない場合は寿命を減らす
+    return currentLifespan - 1;
+  }
+
+  // セルが死んでいる場合
+  // 周囲が 3 なら誕生
+  if (around === 3) {
+    return maxLifespan;
+  }
+
+  return 0;
+}
+
+// cellの状態に応じた色を返す関数
+function getStyle(cell, lifespan) {
+  if (cell === 0) return "white";
+
+  // cellの値に応じて色を返す場合はここに追加
+  if (lifespan === 2) return "black";
+  if (lifespan === 1) return "gray";
+  if (lifespan === 0) return "white";
+
+  return "black"; // デフォルトは黒
+}
+
+//Boardの初期化
+let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
+const table = document.getElementById("game-board");
+
+//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
+function renderBoard() {
+  // 初回の盤面生成
+  table.innerHTML = "";
+  for (let i = 0; i < boardSize; i++) {
+    const tr = document.createElement("tr");
+    tr.style.padding = "0";
+    for (let j = 0; j < boardSize; j++) {
+      const td = document.createElement("td");
+      td.style.padding = "0";
+      const button = document.createElement("button");
+      button.lifespan = board[i][j] ? maxLifespan : 0; // セルの寿命を設定
+      button.style.backgroundColor = getStyle(board[i][j], button.lifespan); //Boardの対応する値によって色を変更
+
+      // ボードが大きいときは border をつけない
+      if (boardSize >= 50) {
+        button.style.border = "none";
+        table.style.border = "1px solid black";
+      } else {
+        button.style.border = "0.5px solid black";
+      }
+      button.style.width = `${cellSize}px`;
+      button.style.height = `${cellSize}px`;
+      button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
+      button.style.display = "block"; //cellSizeが小さいとき、行間が空きすぎるのを防ぐ
+
+      button.onclick = () => {
+        if (isPlacingTemplate) {
+          clearPreview();
+          isPlacingTemplate = false;
+          if (i + patternHeight < boardSize + 1 && j + patternWidth < boardSize + 1) {
+            for (let r = 0; r < patternHeight; r++) {
+              for (let c = 0; c < patternWidth; c++) {
+                const boardRow = i + r;
+                const boardCol = j + c;
+                board[boardRow][boardCol] = patternShape[r][c];
+                // パターン配置時に寿命を設定
+                if (patternShape[r][c]) {
+                  const btn = table.children[boardRow].children[boardCol].children[0];
+                  btn.lifespan = maxLifespan;
+                }
+              }
+            }
+            rerender();
+            generationChange(0);
+            stop();
+          } else {
+            window.parent.postMessage(
+              {
+                type: "Size shortage",
+                data: {},
+              },
+              "*",
+            );
+          }
+        }
+      };
+      button.onmousedown = (e) => {
+        e.preventDefault();
+        if (timer === "stop" && !isPlacingTemplate) {
+          isDragging = true;
+          board[i][j] = !board[i][j];
+          dragMode = board[i][j];
+          button.lifespan = board[i][j] ? maxLifespan : 0;
+          button.style.backgroundColor = getStyle(board[i][j], button.lifespan);
+        }
+      };
+      button.onmouseenter = () => {
+        if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
+          board[i][j] = dragMode;
+          button.lifespan = board[i][j] ? maxLifespan : 0;
+          button.style.backgroundColor = getStyle(board[i][j], button.lifespan);
+        }
+        if (isPlacingTemplate) {
+          drawPreview(i, j);
+        }
+      };
+      td.appendChild(button);
+      tr.appendChild(td);
+    }
+    table.appendChild(tr);
+  }
+}
+
+table.onmouseleave = () => {
+  if (isPlacingTemplate) {
+    clearPreview();
+  }
+};
+
+function drawPreview(row, col) {
+  clearPreview();
+  for (let r = 0; r < patternHeight; r++) {
+    for (let c = 0; c < patternWidth; c++) {
+      if (patternShape[r][c] === 1) {
+        const boardRow = row + r;
+        const boardCol = col + c;
+        if (boardRow < boardSize && boardCol < boardSize) {
+          const cell = table.rows[boardRow].cells[boardCol].firstChild;
+          cell.style.backgroundColor = "gray";
+          previewCells.push({ row: boardRow, col: boardCol });
+        }
+      }
+    }
+  }
+}
+
+function clearPreview() {
+  previewCells.forEach((cellPos) => {
+    const cell = table.rows[cellPos.row].cells[cellPos.col].firstChild;
+    const lifespan = cell.lifespan || 0;
+    cell.style.backgroundColor = getStyle(board[cellPos.row][cellPos.col], lifespan);
+  });
+  previewCells = [];
+}
+
+function rerender() {
+  // ２回目以降の盤面生成
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      const button = table.children[i].children[j].children[0];
+
+      // 色の更新
+      const currentCellColor = button.style.backgroundColor;
+      const expectedCellColor = getStyle(board[i][j], button.lifespan);
+      if (currentCellColor !== expectedCellColor) {
+        button.style.backgroundColor = expectedCellColor;
+      }
+
+      // セルサイズの更新
+      const currentCellsize = button.style.width;
+      const expectedCellsize = `${cellSize}px`;
+      if (currentCellsize !== expectedCellsize) {
+        button.style.width = expectedCellsize;
+        button.style.height = expectedCellsize;
+      }
+    }
+  }
+}
+
+document.addEventListener("mouseup", () => {
+  isDragging = false;
+});
+
+renderBoard();
+progressBoard();
+
+function generationChange(num) {
+  //現在の世代を表すgenerationFigureを変更し、文章も変更
+  generationFigure = num;
+  window.parent.postMessage(
+    {
+      type: "generation_change",
+      data: generationFigure,
+    },
+    "*",
+  );
+}
+
+function progressBoard() {
+  const newLifespans = Array(boardSize)
+    .fill(0)
+    .map(() => Array(boardSize).fill(0));
+
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      //周囲のマスに黒マスが何個あるかを計算(aroundに格納)↓
+      let around = 0;
+      let tate, yoko;
+      if (i === 0) {
+        tate = [0, 1];
+      } else if (i === boardSize - 1) {
+        tate = [0, -1];
+      } else {
+        tate = [-1, 0, 1];
+      }
+      if (j === 0) {
+        yoko = [0, 1];
+      } else if (j === boardSize - 1) {
+        yoko = [0, -1];
+      } else {
+        yoko = [-1, 0, 1];
+      }
+      for (let ii = 0; ii < tate.length; ii++) {
+        for (let jj = 0; jj < yoko.length; jj++) {
+          if (tate[ii] !== 0 || yoko[jj] !== 0) {
+            const neighborButton = table.children[i + tate[ii]].children[j + yoko[jj]].children[0];
+            around += neighborButton.lifespan > 0 ? 1 : 0;
+          }
+        }
+      }
+      //↑周囲のマスに黒マスが何個あるかを計算(aroundに格納)
+
+      // 前の世代の寿命をボタンから取得し、新しい寿命を計算して保存
+      const button = table.children[i].children[j].children[0];
+      const currentLifespan = button.lifespan;
+      newLifespans[i][j] = getNextLifespan(around, currentLifespan);
+    }
+  }
+
+  // 新しい寿命を適用
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      const button = table.children[i].children[j].children[0];
+      button.lifespan = newLifespans[i][j];
+      board[i][j] = button.lifespan > 0 ? 1 : 0;
+    }
+  }
+
+  generationChange(generationFigure + 1);
+  rerender();
+}
+
+//イベント
+
+on.progress = () => {
+  progressBoard();
+};
+
+on.play = () => {
+  timer = "start";
+};
+
+on.pause = () => {
+  timer = "stop";
+};
+
+on.board_reset = () => {
+  //すべて白にBoardを変更
+  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
+  renderBoard();
+  generationChange(0);
+};
+
+on.board_randomize = () => {
+  //白黒ランダムにBoardを変更
+  board = Array.from({ length: boardSize }, () =>
+    Array.from({ length: boardSize }, () => (Math.random() > 0.5 ? 1 : 0)),
+  );
+  renderBoard();
+  generationChange(0);
+};
+
+on.request_sync = () => {
+  window.parent.postMessage(
+    {
+      type: "sync",
+      data: {
+        generationFigure: generationFigure,
+        boardSize: boardSize,
+      },
+    },
+    "*",
+  );
+  console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
+};
+
+on.place_template = (template) => {
+  patternShape = template;
+  patternHeight = patternShape.length;
+  patternWidth = patternShape[0].length;
+  isPlacingTemplate = true;
+  table.style.cursor = "crosshair";
+  stop();
+};
+
+on.save_board = async () => {
+  window.parent.postMessage({ type: "save_board", data: board }, "*");
+};
+
+on.apply_board = (newBoard) => {
+  board = newBoard;
+  renderBoard();
+  generationChange(0);
+  stop();
+};
diff --git a/src/lib/assets/life-game-rules/probabilistics.js b/src/lib/assets/life-game-rules/probabilistics.js
new file mode 100644
index 0000000..933dabb
--- /dev/null
+++ b/src/lib/assets/life-game-rules/probabilistics.js
@@ -0,0 +1,293 @@
+"use strict";
+
+let timer = "stop";
+let generationFigure = 0;
+let isDragging = false;
+let dragMode = 0; // 1: 黒にする, 0: 白にする
+let isPlacingTemplate = false;
+let patternShape = [];
+let patternHeight = 0;
+let patternWidth = 0;
+let previewCells = [];
+
+//変数設定
+let boardSize = 20; //盤面の大きさ(20x20)
+const cellSize = 600 / boardSize; //セルの大きさ(px)
+
+// around: 周囲の生きたセル数 self: 自身が生きているかどうか
+function isNextAlive(around, self) {
+  // 自身が生きている & 周囲が 2 か 3 で生存 50%の確率でこのルールに従う
+  if (self && 2 <= around && around <= 3) {
+    return Math.random() > 0.5 ? self : !self;
+  }
+  // 自身が生きている & 周囲が2,3以外で死亡 50%の確率でこのルールに従う
+  if (self && (around < 2 || around > 3)) {
+    return Math.random() > 0.5 ? !self : self;
+  }
+  // 自身が死んでいる & 周囲が 3 で誕生 50%の確率でこのルールに従う
+  if (!self && around === 3) {
+    return Math.random() > 0.5 ? 1 : 0;
+  }
+  // 自身が死んでいる & 周囲が3以外で死亡のまま
+  return 0;
+}
+
+// cellの状態に応じた色を返す関数
+function getStyle(cell) {
+  if (cell === 0) return "white";
+  // cellの値に応じて色を返す場合はここに追加
+  return "black"; // デフォルトは黒
+}
+
+//Boardの初期化
+let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
+const table = document.getElementById("game-board");
+
+//盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
+function renderBoard() {
+  // 初回の盤面生成
+  table.innerHTML = "";
+  for (let i = 0; i < boardSize; i++) {
+    const tr = document.createElement("tr");
+    tr.style.padding = "0";
+    for (let j = 0; j < boardSize; j++) {
+      const td = document.createElement("td");
+      td.style.padding = "0";
+      const button = document.createElement("button");
+      button.style.backgroundColor = board[i][j] ? "black" : "white"; //Boardの対応する値によって色を変更
+      // ボードが大きいときは border をつけない
+      if (boardSize >= 50) {
+        button.style.border = "none";
+        table.style.border = "1px solid black";
+      } else {
+        button.style.border = "0.5px solid black";
+      }
+      button.style.width = `${cellSize}px`;
+      button.style.height = `${cellSize}px`;
+      button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
+      button.style.display = "block"; //cellSizeが小さいとき、行間が空きすぎるのを防ぐ
+      button.onclick = () => {
+        if (isPlacingTemplate) {
+          clearPreview();
+          isPlacingTemplate = false;
+          if (i + patternHeight < boardSize + 1 && j + patternWidth < boardSize + 1) {
+            for (let r = 0; r < patternHeight; r++) {
+              for (let c = 0; c < patternWidth; c++) {
+                const boardRow = i + r;
+                const boardCol = j + c;
+                board[boardRow][boardCol] = patternShape[r][c];
+              }
+            }
+            rerender();
+            generationChange(0);
+            stop();
+          } else {
+            window.parent.postMessage(
+              {
+                type: "Size shortage",
+                data: {},
+              },
+              "*",
+            );
+          }
+        }
+      };
+      button.onmousedown = (e) => {
+        e.preventDefault();
+        if (timer === "stop" && !isPlacingTemplate) {
+          isDragging = true;
+          board[i][j] = !board[i][j];
+          dragMode = board[i][j];
+          button.style.backgroundColor = board[i][j] ? "black" : "white";
+        }
+      };
+      button.onmouseenter = () => {
+        if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
+          board[i][j] = dragMode;
+          button.style.backgroundColor = board[i][j] ? "black" : "white";
+        }
+        if (isPlacingTemplate) {
+          drawPreview(i, j);
+        }
+      };
+      td.appendChild(button);
+      tr.appendChild(td);
+    }
+    table.appendChild(tr);
+  }
+}
+
+table.onmouseleave = () => {
+  if (isPlacingTemplate) {
+    clearPreview();
+  }
+};
+
+function drawPreview(row, col) {
+  clearPreview();
+  for (let r = 0; r < patternHeight; r++) {
+    for (let c = 0; c < patternWidth; c++) {
+      if (patternShape[r][c] === 1) {
+        const boardRow = row + r;
+        const boardCol = col + c;
+        if (boardRow < boardSize && boardCol < boardSize) {
+          const cell = table.rows[boardRow].cells[boardCol].firstChild;
+          cell.style.backgroundColor = "gray";
+          previewCells.push({ row: boardRow, col: boardCol });
+        }
+      }
+    }
+  }
+}
+
+function clearPreview() {
+  previewCells.forEach((cellPos) => {
+    const cell = table.rows[cellPos.row].cells[cellPos.col].firstChild;
+    cell.style.backgroundColor = board[cellPos.row][cellPos.col] ? "black" : "white";
+  });
+  previewCells = [];
+}
+
+function rerender() {
+  // ２回目以降の盤面生成
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      const button = table.children[i].children[j].children[0];
+
+      // 色の更新
+      const currentCellColor = button.style.backgroundColor;
+      const expectedCellColor = getStyle(board[i][j]);
+      if (currentCellColor !== expectedCellColor) {
+        button.style.backgroundColor = expectedCellColor;
+      }
+
+      // セルサイズの更新
+      const currentCellsize = button.style.width;
+      const expectedCellsize = `${cellSize}px`;
+      if (currentCellsize !== expectedCellsize) {
+        button.style.width = expectedCellsize;
+        button.style.height = expectedCellsize;
+      }
+    }
+  }
+}
+
+document.addEventListener("mouseup", () => {
+  isDragging = false;
+});
+
+renderBoard();
+progressBoard();
+
+function generationChange(num) {
+  //現在の世代を表すgenerationFigureを変更し、文章も変更
+  generationFigure = num;
+  window.parent.postMessage(
+    {
+      type: "generation_change",
+      data: generationFigure,
+    },
+    "*",
+  );
+}
+
+function progressBoard() {
+  const newBoard = structuredClone(board);
+  for (let i = 0; i < boardSize; i++) {
+    for (let j = 0; j < boardSize; j++) {
+      //周囲のマスに黒マスが何個あるかを計算(aroundに格納)↓
+      let around = 0;
+      let tate, yoko;
+      if (i === 0) {
+        tate = [0, 1];
+      } else if (i === boardSize - 1) {
+        tate = [0, -1];
+      } else {
+        tate = [-1, 0, 1];
+      }
+      if (j === 0) {
+        yoko = [0, 1];
+      } else if (j === boardSize - 1) {
+        yoko = [0, -1];
+      } else {
+        yoko = [-1, 0, 1];
+      }
+      for (let ii = 0; ii < tate.length; ii++) {
+        for (let jj = 0; jj < yoko.length; jj++) {
+          if (tate[ii] !== 0 || yoko[jj] !== 0) {
+            around += board[i + tate[ii]][j + yoko[jj]] !== 0 ? 1 : 0;
+          }
+        }
+      }
+      //↑周囲のマスに黒マスが何個あるかを計算(aroundに格納)
+      newBoard[i][j] = isNextAlive(around, board[i][j]);
+    }
+  }
+  board = newBoard;
+  generationChange(generationFigure + 1);
+  rerender();
+}
+
+//イベント
+
+on.progress = () => {
+  progressBoard();
+};
+
+on.play = () => {
+  timer = "start";
+};
+
+on.pause = () => {
+  timer = "stop";
+};
+
+on.board_reset = () => {
+  //すべて白にBoardを変更
+  board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
+  renderBoard();
+  generationChange(0);
+};
+
+on.board_randomize = () => {
+  //白黒ランダムにBoardを変更
+  board = Array.from({ length: boardSize }, () =>
+    Array.from({ length: boardSize }, () => (Math.random() > 0.5 ? 1 : 0)),
+  );
+  renderBoard();
+  generationChange(0);
+};
+
+on.request_sync = () => {
+  window.parent.postMessage(
+    {
+      type: "sync",
+      data: {
+        generationFigure: generationFigure,
+        boardSize: boardSize,
+      },
+    },
+    "*",
+  );
+  console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
+};
+
+on.place_template = (template) => {
+  patternShape = template;
+  patternHeight = patternShape.length;
+  patternWidth = patternShape[0].length;
+  isPlacingTemplate = true;
+  table.style.cursor = "crosshair";
+  stop();
+};
+
+on.save_board = async () => {
+  window.parent.postMessage({ type: "save_board", data: board }, "*");
+};
+
+on.apply_board = (newBoard) => {
+  board = newBoard;
+  renderBoard();
+  generationChange(0);
+  stop();
+};
diff --git a/src/lib/rules-explanation.ts b/src/lib/rules-explanation.ts
new file mode 100644
index 0000000..e1aa06e
--- /dev/null
+++ b/src/lib/rules-explanation.ts
@@ -0,0 +1,33 @@
+import lifespan from "$lib/assets/life-game-rules/lifespan.js?raw";
+import probabilistics from "$lib/assets/life-game-rules/probabilistics.js?raw";
+
+export type RuleExplanation = {
+  code: string;
+  ja: string;
+  en: string;
+};
+
+export const rulesExplanation = {
+  lifespan: {
+    name: {
+      ja: "寿命システム",
+      en: "Lifespan system",
+    },
+    description: {
+      ja: "それぞれのいのちに寿命を設定できます",
+      en: "Set lifespan for each cell",
+    },
+    code: lifespan,
+  },
+  probabilistics: {
+    name: {
+      ja: "確率システム",
+      en: "Probabilistic system",
+    },
+    description: {
+      ja: "生死に確率を導入できます",
+      en: "Introduce probability to life and death",
+    },
+    code: probabilistics,
+  },
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 14fdc08..e902202 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
   import event from "@/iframe/event.js?raw";
   import lifeGameHTML from "@/iframe/life-game.html?raw";
   import lifeGameJS from "@/iframe/life-game.js?raw";
+  import { rulesExplanation, type RuleExplanation } from "$lib/rules-explanation";
   import patterns from "$lib/board-templates";
   import * as icons from "$lib/icons/index.ts";
   import { BoardManager } from "$lib/models/BoardManager.svelte";
@@ -26,6 +27,7 @@
   let isJapanese = $state(true);
   let resetModalOpen = $state(false);
   let bottomDrawerOpen = $state(false);
+  let ruleDrawerOpen = $state(false);
 
   let generationFigure = $state(0);
   let sizeValue = $state(20);
@@ -138,6 +140,11 @@
       minHeight: "100%",
     },
   });
+
+  function selectRule(rule: RuleExplanation) {
+    editingCode = rule.code;
+    appliedCode = rule.code;
+  }
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -218,6 +225,34 @@
   </div>
 </div>
 
+<div
+  class="fixed inset-x-0 bottom-0 z-40 transition-transform duration-300 pb-12"
+  class:translate-y-full={!ruleDrawerOpen}
+  class:translate-y-0={ruleDrawerOpen}
+>
+  <div class="bg-[rgb(220,220,220)] shadow-lg p-4 h-30 w-full overflow-x-auto">
+    <div class="flex gap-4">
+      {#each Object.entries(rulesExplanation) as [ruleName, ruleData] (ruleName)}
+        <button
+          class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow cursor-pointer text-left flex-shrink-0 w-64"
+          onclick={() => {
+            selectRule(ruleData.name as RuleExplanation);
+            ruleDrawerOpen = false;
+          }}
+        >
+          <div class="card-body p-4">
+            <h3 class="card-title text-lg text-primary">
+              {isJapanese ? ruleData.name.ja : ruleData.name.en}
+            </h3>
+            <p class="text-sm text-base-content">
+              {isJapanese ? ruleData.description.ja : ruleData.description.en}
+            </p>
+          </div>
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
 <BoardModals manager={boardManager} {isJapanese} onSelect={onBoardSelect} />
 <CodeModals manager={codeManager} {isJapanese} onSelect={onCodeSelect} />
 
@@ -292,7 +327,10 @@
   <div class="flex items-center">
     <button
       class="btn rounded-none h-12 justify-start w-30"
-      onclick={() => (bottomDrawerOpen = !bottomDrawerOpen)}
+      onclick={() => {
+        bottomDrawerOpen = !bottomDrawerOpen;
+        ruleDrawerOpen = false;
+      }}
     >
       {#if bottomDrawerOpen}
         ▼
@@ -452,5 +490,22 @@
     >
       {isJapanese ? "ロード" : "Load"}
     </button>
+    <button
+      class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
+      onclick={() => {
+        isProgress = false;
+        sendEvent("pause");
+        ruleDrawerOpen = !ruleDrawerOpen;
+        bottomDrawerOpen = false;
+      }}
+    >
+      {#if ruleDrawerOpen}
+        ▼
+      {:else if isJapanese}
+        ▲ ルール選択
+      {:else}
+        ▲ Select Rule
+      {/if}
+    </button>
   </div>
 </div>