diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 5e0335b1ff..23b27bddcb 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -3,6 +3,7 @@ import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { addActionsWithEmits } from "./utils/argTypesEnhancers";
+import { store, storeKey } from "@/store";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
 import "@quasar/extras/material-icons/material-icons.css";
@@ -29,6 +30,7 @@ setup((app) => {
     },
   });
   app.use(markdownItPlugin);
+  app.use(store, storeKey);
 });
 
 const preview: Preview = {
diff --git a/src/components/Sing/SequencerRuler/Container.vue b/src/components/Sing/SequencerRuler/Container.vue
index 07111d281f..dcfeab2fb1 100644
--- a/src/components/Sing/SequencerRuler/Container.vue
+++ b/src/components/Sing/SequencerRuler/Container.vue
@@ -1,34 +1,57 @@
 <template>
   <Presentation
-    :offset
-    :numMeasures
-    :tpqn
+    :width
+    :numMeasures="props.numMeasures"
+    :playheadX
+    :playheadTicks
+    :offset="props.offset"
     :tempos
     :timeSignatures
+    :tpqn
     :sequencerZoomX
-    :uiLocked
-    :playheadTicks
     :sequencerSnapType
+    :getSnappedTickFromOffsetX
+    :uiLocked
     @update:playheadTicks="updatePlayheadTicks"
-    @removeTempo="removeTempo"
-    @removeTimeSignature="removeTimeSignature"
-    @setTempo="setTempo"
-    @setTimeSignature="setTimeSignature"
     @deselectAllNotes="deselectAllNotes"
-  />
+  >
+    <!-- TODO: 各コンポーネントもなるべく疎にしたつもりだが、少なくともplayheadまわりがリファクタリング必要そう -->
+    <template #grid>
+      <GridLaneContainer
+        :numMeasures="props.numMeasures"
+        :offset="props.offset"
+      />
+    </template>
+    <template #changes>
+      <ValueChangesLaneContainer
+        :offset="props.offset"
+        :numMeasures="props.numMeasures"
+        @setPlayheadPosition="updatePlayheadTicks"
+      />
+    </template>
+    <template #loop>
+      <LoopLaneContainer
+        :offset="props.offset"
+        :numMeasures="props.numMeasures"
+      />
+    </template>
+  </Presentation>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import Presentation from "./Presentation.vue";
+import GridLaneContainer from "./GridLane/Container.vue";
+import ValueChangesLaneContainer from "./ValueChangesLane/Container.vue";
+import LoopLaneContainer from "./LoopLane/Container.vue";
 import { useStore } from "@/store";
-import { Tempo, TimeSignature } from "@/store/type";
+import { useSequencerRuler } from "@/composables/useSequencerRuler";
 
 defineOptions({
   name: "SequencerRuler",
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     offset: number;
     numMeasures: number;
@@ -42,14 +65,25 @@ withDefaults(
 const store = useStore();
 
 const tpqn = computed(() => store.state.tpqn);
-const tempos = computed(() => store.state.tempos);
 const timeSignatures = computed(() => store.state.timeSignatures);
+const tempos = computed(() => store.state.tempos);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
-const uiLocked = computed(() => store.getters.UI_LOCKED);
 const sequencerSnapType = computed(() => store.state.sequencerSnapType);
-
 const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+const uiLocked = computed(() => store.getters.UI_LOCKED);
 
+// ルーラーおよび内部レーンで共通化した計算ロジック
+const { width, playheadX, getSnappedTickFromOffsetX } = useSequencerRuler({
+  offset: computed(() => props.offset),
+  numMeasures: computed(() => props.numMeasures),
+  tpqn,
+  timeSignatures,
+  sequencerZoomX,
+  playheadTicks,
+  sequencerSnapType,
+});
+
+// NOTE: usePlayheadPositionができたら再生ヘッド周辺を置き換える
 const updatePlayheadTicks = (ticks: number) => {
   void store.actions.SET_PLAYHEAD_POSITION({ position: ticks });
 };
@@ -57,25 +91,4 @@ const updatePlayheadTicks = (ticks: number) => {
 const deselectAllNotes = () => {
   void store.actions.DESELECT_ALL_NOTES();
 };
-
-const setTempo = (tempo: Tempo) => {
-  void store.actions.COMMAND_SET_TEMPO({
-    tempo,
-  });
-};
-const setTimeSignature = (timeSignature: TimeSignature) => {
-  void store.actions.COMMAND_SET_TIME_SIGNATURE({
-    timeSignature,
-  });
-};
-const removeTempo = (position: number) => {
-  void store.actions.COMMAND_REMOVE_TEMPO({
-    position,
-  });
-};
-const removeTimeSignature = (measureNumber: number) => {
-  void store.actions.COMMAND_REMOVE_TIME_SIGNATURE({
-    measureNumber,
-  });
-};
 </script>
diff --git a/src/components/Sing/SequencerRuler/GridLane/Container.vue b/src/components/Sing/SequencerRuler/GridLane/Container.vue
new file mode 100644
index 0000000000..e22543bb25
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/GridLane/Container.vue
@@ -0,0 +1,46 @@
+<template>
+  <Presentation
+    :tpqn
+    :sequencerZoomX
+    :numMeasures
+    :timeSignatures
+    :tsPositions
+    :offset
+    :width
+    :endTicks
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Presentation from "./Presentation.vue";
+import { useStore } from "@/store";
+import { useSequencerRuler } from "@/composables/useSequencerRuler";
+
+defineOptions({
+  name: "GridLaneContainer",
+});
+
+const props = defineProps<{
+  numMeasures: number;
+  offset: number;
+}>();
+
+const store = useStore();
+
+const tpqn = computed(() => store.state.tpqn);
+const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const timeSignatures = computed(() => store.state.timeSignatures);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+const sequencerSnapType = computed(() => store.state.sequencerSnapType);
+
+const { tsPositions, width, endTicks } = useSequencerRuler({
+  offset: computed(() => props.offset),
+  numMeasures: computed(() => props.numMeasures),
+  tpqn,
+  timeSignatures,
+  sequencerZoomX,
+  playheadTicks,
+  sequencerSnapType,
+});
+</script>
diff --git a/src/components/Sing/SequencerRuler/GridLane/Presentation.vue b/src/components/Sing/SequencerRuler/GridLane/Presentation.vue
new file mode 100644
index 0000000000..27fe1d201e
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/GridLane/Presentation.vue
@@ -0,0 +1,144 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width
+    :height
+    shape-rendering="crispEdges"
+  >
+    <defs>
+      <pattern
+        v-for="(gridPattern, patternIndex) in gridPatterns"
+        :id="`grid-lane-measure-${patternIndex}`"
+        :key="`pattern-${patternIndex}`"
+        patternUnits="userSpaceOnUse"
+        :x="-offset + gridPattern.x"
+        :width="gridPattern.patternWidth"
+        :height
+      >
+        <!-- 拍線（小節の最初を除く） -->
+        <line
+          v-for="n in gridPattern.beatsPerMeasure"
+          :key="n"
+          :x1="gridPattern.beatWidth * n"
+          :x2="gridPattern.beatWidth * n"
+          y1="28"
+          :y2="height"
+          class="grid-lane-beat-line"
+        />
+      </pattern>
+    </defs>
+    <rect
+      v-for="(gridPattern, index) in gridPatterns"
+      :key="`grid-${index}`"
+      :x="0.5 + gridPattern.x - offset"
+      y="0"
+      :height
+      :width="gridPattern.width"
+      :fill="`url(#grid-lane-measure-${index})`"
+    />
+    <!-- 小節線と小節番号 -->
+    <template v-for="measureInfo in measureInfos" :key="measureInfo.number">
+      <line
+        :x1="measureInfo.x - offset"
+        :x2="measureInfo.x - offset"
+        y1="0"
+        :y2="height"
+        class="grid-lane-measure-line"
+        :class="{ 'first-measure-line': measureInfo.number === 1 }"
+      />
+      <text
+        :x="measureInfo.x - offset + 4"
+        y="16"
+        class="grid-lane-measure-number"
+      >
+        {{ measureInfo.number }}
+      </text>
+    </template>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { TimeSignature } from "@/store/type";
+import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
+import { getMeasureDuration } from "@/sing/domain";
+import { tickToBaseX } from "@/sing/viewHelper";
+
+defineOptions({
+  name: "GridLanePresentation",
+});
+
+const props = defineProps<{
+  tpqn: number;
+  sequencerZoomX: number;
+  numMeasures: number;
+  timeSignatures: TimeSignature[];
+  offset: number;
+  width: number;
+  endTicks: number;
+  tsPositions: number[];
+}>();
+
+const height = ref(40);
+
+const gridPatterns = useSequencerGrid({
+  timeSignatures: computed(() => props.timeSignatures),
+  tpqn: computed(() => props.tpqn),
+  sequencerZoomX: computed(() => props.sequencerZoomX),
+  numMeasures: computed(() => props.numMeasures),
+});
+
+const measureInfos = computed(() => {
+  return props.timeSignatures.flatMap((timeSignature, i) => {
+    const measureDuration = getMeasureDuration(
+      timeSignature.beats,
+      timeSignature.beatType,
+      props.tpqn,
+    );
+    const nextTsPosition =
+      i !== props.timeSignatures.length - 1
+        ? props.tsPositions[i + 1]
+        : props.endTicks;
+    const start = props.tsPositions[i];
+    const end = nextTsPosition;
+    const numMeasures = Math.floor((end - start) / measureDuration);
+    return Array.from({ length: numMeasures }, (_, index) => {
+      const measureNumber = timeSignature.measureNumber + index;
+      const measurePosition = start + index * measureDuration;
+      const baseX = tickToBaseX(measurePosition, props.tpqn);
+      return {
+        number: measureNumber,
+        x: Math.round(baseX * props.sequencerZoomX),
+      };
+    });
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+
+.grid-lane-beat-line {
+  backface-visibility: hidden;
+  stroke: var(--scheme-color-sing-ruler-beat-line);
+  stroke-width: 1px;
+}
+
+.grid-lane-measure-line {
+  backface-visibility: hidden;
+  stroke: var(--scheme-color-sing-ruler-measure-line);
+  stroke-width: 1px;
+
+  // NOTE: 最初の小節線を非表示。必要に応じて再表示・位置合わせする
+  &.first-measure-line {
+    stroke: var(--scheme-color-sing-ruler-surface);
+  }
+}
+
+.grid-lane-measure-number {
+  font-size: 12px;
+  font-weight: bold;
+  fill: var(--scheme-color-on-surface-variant);
+  user-select: none;
+}
+</style>
diff --git a/src/components/Sing/SequencerRuler/LoopLane/Container.vue b/src/components/Sing/SequencerRuler/LoopLane/Container.vue
new file mode 100644
index 0000000000..9246f6cca4
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/LoopLane/Container.vue
@@ -0,0 +1,364 @@
+<template>
+  <Presentation
+    :width
+    :offset
+    :loopStartX
+    :loopEndX
+    :isLoopEnabled
+    :isDragging
+    :isEmpty
+    :cursorClass
+    :contextMenuData
+    @loopAreaMouseDown="handleLoopAreaMouseDown"
+    @loopRangeClick="handleLoopRangeClick"
+    @loopRangeDoubleClick="handleLoopRangeDoubleClick"
+    @startHandleMouseDown="handleStartHandleMouseDown"
+    @endHandleMouseDown="handleEndHandleMouseDown"
+    @contextMenu="handleContextMenu"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onUnmounted } from "vue";
+import Presentation from "./Presentation.vue";
+import { useStore } from "@/store";
+import { getMeasureDuration, snapTicksToGrid } from "@/sing/domain";
+import { ContextMenuItemData } from "@/components/Menu/ContextMenu/Presentation.vue";
+import { UnreachableError } from "@/type/utility";
+import { useSequencerRuler } from "@/composables/useSequencerRuler";
+
+const store = useStore();
+
+const props = defineProps<{
+  offset: number;
+  numMeasures: number;
+}>();
+
+// クリック位置
+const clickX = ref(0);
+
+const tpqn = computed(() => store.state.tpqn);
+const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const timeSignatures = computed(() => store.state.timeSignatures);
+const isLoopEnabled = computed(() => store.state.isLoopEnabled);
+const loopStartTick = computed(() => store.state.loopStartTick);
+const loopEndTick = computed(() => store.state.loopEndTick);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+const sequencerSnapType = computed(() => store.state.sequencerSnapType);
+
+const { width, endTicks, tsPositions, getSnappedTickFromOffsetX } =
+  useSequencerRuler({
+    offset: computed(() => props.offset),
+    numMeasures: computed(() => props.numMeasures),
+    tpqn,
+    timeSignatures,
+    sequencerZoomX,
+    playheadTicks,
+    sequencerSnapType,
+  });
+
+// ドラッグ関連の状態
+const isDragging = ref(false);
+const dragTarget = ref<"start" | "end" | null>(null);
+const dragStartX = ref(0);
+const dragStartHandleX = ref(0);
+const cursorState = ref<"default" | "ew-resize">("default");
+const lastMouseEvent = ref<MouseEvent | null>(null);
+
+// プレビュー関連
+const previewLoopStartTick = ref(loopStartTick.value);
+const previewLoopEndTick = ref(loopEndTick.value);
+const executePreviewProcess = ref(false);
+let previewRequestId: number | null = null;
+
+// 現在のループ範囲
+const currentLoopStartTick = computed(() =>
+  isDragging.value ? previewLoopStartTick.value : loopStartTick.value,
+);
+const currentLoopEndTick = computed(() =>
+  isDragging.value ? previewLoopEndTick.value : loopEndTick.value,
+);
+
+// ループのX座標を計算
+const loopStartX = computed(() =>
+  Math.round((width.value / endTicks.value) * currentLoopStartTick.value),
+);
+
+const loopEndX = computed(() =>
+  Math.round((width.value / endTicks.value) * currentLoopEndTick.value),
+);
+
+// ループが空かどうか
+const isEmpty = computed(
+  () => currentLoopStartTick.value === currentLoopEndTick.value,
+);
+
+// カーソルのCSSクラス
+const cursorClass = computed(() => {
+  switch (cursorState.value) {
+    case "ew-resize":
+      return "cursor-ew-resize";
+    default:
+      return "";
+  }
+});
+
+// ループ範囲部をクリックで有効/無効をトグル
+const handleLoopRangeClick = () => {
+  void store.actions.COMMAND_SET_LOOP_ENABLED({
+    isLoopEnabled: !isLoopEnabled.value,
+  });
+};
+
+// ループ範囲部をダブルクリックでループ範囲を削除
+const handleLoopRangeDoubleClick = () => {
+  void store.actions.COMMAND_CLEAR_LOOP_RANGE();
+};
+
+// ループのクリックで前処理後にドラッグ開始
+const handleLoopAreaMouseDown = (event: MouseEvent) => {
+  if (event.button !== 0 || (event.ctrlKey && event.button === 0)) return;
+
+  // プレビューを停止
+  executePreviewProcess.value = false;
+  if (previewRequestId != null) {
+    cancelAnimationFrame(previewRequestId);
+    previewRequestId = null;
+  }
+
+  // クリック位置を計算
+  const target = event.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const clickX = event.clientX - rect.left;
+  const tick = getSnappedTickFromOffsetX(clickX);
+
+  // クリック位置をループ範囲の開始/終了に設定
+  previewLoopStartTick.value = tick;
+  previewLoopEndTick.value = tick;
+
+  // ループ範囲を設定
+  void store.actions.COMMAND_SET_LOOP_RANGE({
+    loopStartTick: tick,
+    loopEndTick: tick,
+  });
+
+  // ドラッグ開始
+  startDragging("end", event);
+};
+
+// ドラッグ開始
+const startDragging = (target: "start" | "end", event: MouseEvent) => {
+  if (event.button !== 0) return;
+
+  isDragging.value = true;
+  dragTarget.value = target;
+  dragStartX.value = event.clientX;
+  dragStartHandleX.value =
+    target === "start" ? loopStartX.value : loopEndX.value;
+
+  previewLoopStartTick.value = loopStartTick.value;
+  previewLoopEndTick.value = loopEndTick.value;
+
+  cursorState.value = "ew-resize";
+  lastMouseEvent.value = event;
+  executePreviewProcess.value = true;
+  if (previewRequestId == null) {
+    previewRequestId = requestAnimationFrame(preview);
+  }
+  window.addEventListener("mousemove", handleMouseMove, true);
+  window.addEventListener("mouseup", stopDragging, true);
+};
+
+// ドラッグ中
+const handleMouseMove = (event: MouseEvent) => {
+  if (!isDragging.value) return;
+  lastMouseEvent.value = event;
+  executePreviewProcess.value = true;
+};
+
+// 開始ハンドルドラッグ開始
+const handleStartHandleMouseDown = (event: MouseEvent) => {
+  startDragging("start", event);
+};
+
+// 終了ハンドルドラッグ開始
+const handleEndHandleMouseDown = (event: MouseEvent) => {
+  startDragging("end", event);
+};
+
+// プレビュー処理
+const preview = () => {
+  if (executePreviewProcess.value && lastMouseEvent.value) {
+    executePreviewProcess.value = false;
+    const event = lastMouseEvent.value;
+
+    // ドラッグ中のX座標
+    const dx = event.clientX - dragStartX.value;
+    // ドラッグ中のハンドル位置
+    const newX = dragStartHandleX.value + dx;
+    // ドラッグ中の新しいtick
+    const baseTick = Math.round((endTicks.value * newX) / width.value);
+    const newTick = Math.max(
+      0,
+      snapTicksToGrid(baseTick, timeSignatures.value, tpqn.value),
+    );
+
+    try {
+      // 開始ハンドルのドラッグ
+      if (dragTarget.value === "start") {
+        if (newTick <= previewLoopEndTick.value) {
+          previewLoopStartTick.value = newTick;
+        } else {
+          // 開始ハンドルが終了ハンドルを超えた場合、開始と終了を入れ替える
+          previewLoopStartTick.value = previewLoopEndTick.value;
+          previewLoopEndTick.value = newTick;
+          dragTarget.value = "end";
+          dragStartX.value = event.clientX;
+          dragStartHandleX.value = newX;
+        }
+      }
+      // 終了ハンドルのドラッグ
+      if (dragTarget.value === "end") {
+        if (newTick >= previewLoopStartTick.value) {
+          previewLoopEndTick.value = newTick;
+        } else {
+          // 終了ハンドルが開始ハンドルを下回った場合、開始と終了を入れ替える
+          previewLoopEndTick.value = previewLoopStartTick.value;
+          previewLoopStartTick.value = newTick;
+          dragTarget.value = "start";
+          dragStartX.value = event.clientX;
+          dragStartHandleX.value = newX;
+        }
+      }
+    } catch (error) {
+      throw new Error("Failed to update loop range", { cause: error });
+    }
+  }
+
+  if (isDragging.value) {
+    previewRequestId = requestAnimationFrame(preview);
+  } else {
+    previewRequestId = null;
+  }
+};
+
+// ドラッグ終了処理
+const stopDragging = () => {
+  if (!isDragging.value) return;
+
+  isDragging.value = false;
+  dragTarget.value = null;
+  executePreviewProcess.value = false;
+  cursorState.value = "default";
+
+  window.removeEventListener("mousemove", handleMouseMove, true);
+  window.removeEventListener("mouseup", stopDragging, true);
+
+  if (previewRequestId != null) {
+    cancelAnimationFrame(previewRequestId);
+    previewRequestId = null;
+  }
+
+  try {
+    if (previewLoopStartTick.value === previewLoopEndTick.value) {
+      // ループ範囲 0 の場合はクリア
+      void store.actions.COMMAND_CLEAR_LOOP_RANGE();
+      return;
+    }
+    // ループ設定
+    void store.actions.COMMAND_SET_LOOP_RANGE({
+      loopStartTick: previewLoopStartTick.value,
+      loopEndTick: previewLoopEndTick.value,
+    });
+    // 有効なら再生ヘッドをスタートへ
+    void store.actions.SET_PLAYHEAD_POSITION({
+      position: previewLoopStartTick.value,
+    });
+  } catch (error) {
+    throw new UnreachableError("Failed to set loop range");
+  }
+};
+
+// 右クリックメニュー
+const handleContextMenu = (event: MouseEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  clickX.value = event.clientX - rect.left;
+};
+
+// コンテキストメニューのデータ
+const contextMenuData = computed<ContextMenuItemData[]>(() => [
+  {
+    type: "button",
+    label: isLoopEnabled.value ? "ループ無効" : "ループ有効",
+    onClick: () => {
+      void store.actions.COMMAND_SET_LOOP_ENABLED({
+        isLoopEnabled: !isLoopEnabled.value,
+      });
+    },
+    disabled: false,
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "ループ範囲を作成",
+    onClick: () => {
+      addOneMeasureLoop(clickX.value);
+    },
+    disabled: false,
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "ループ範囲を削除",
+    onClick: () => {
+      void store.actions.COMMAND_CLEAR_LOOP_RANGE();
+    },
+    disabled: isEmpty.value,
+    disableWhenUiLocked: true,
+  },
+]);
+
+// クリック位置から1小節ぶんのループ範囲を作成
+function addOneMeasureLoop(localX: number) {
+  const snappedTick = getSnappedTickFromOffsetX(localX);
+  // そのTick時点にある拍子情報を取得
+  const currentTs = timeSignatures.value.findLast((_, idx) => {
+    return tsPositions.value[idx] <= snappedTick;
+  });
+  if (!currentTs) return;
+
+  const oneMeasureTicks = getMeasureDuration(
+    currentTs.beats,
+    currentTs.beatType,
+    tpqn.value,
+  );
+
+  const startTick = getSnappedTickFromOffsetX(localX);
+  const endTick = Math.min(
+    getSnappedTickFromOffsetX(localX + oneMeasureTicks),
+    endTicks.value,
+  );
+
+  void store.actions.COMMAND_SET_LOOP_RANGE({
+    loopStartTick: startTick,
+    loopEndTick: endTick,
+  });
+  void store.actions.SET_PLAYHEAD_POSITION({
+    position: startTick,
+  });
+}
+
+// アンマウント時に必ずドラッグを停止
+onUnmounted(() => {
+  executePreviewProcess.value = false;
+  if (previewRequestId != null) {
+    cancelAnimationFrame(previewRequestId);
+    previewRequestId = null;
+  }
+  cursorState.value = "default";
+  window.removeEventListener("mousemove", handleMouseMove, true);
+  window.removeEventListener("mouseup", stopDragging, true);
+});
+</script>
diff --git a/src/components/Sing/SequencerRuler/LoopLane/Presentation.vue b/src/components/Sing/SequencerRuler/LoopLane/Presentation.vue
new file mode 100644
index 0000000000..1c06c659d8
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/LoopLane/Presentation.vue
@@ -0,0 +1,307 @@
+<template>
+  <div
+    class="loop-lane"
+    :class="{
+      'is-enabled': isLoopEnabled,
+      'is-dragging': isDragging,
+      'is-empty': isEmpty,
+      [cursorClass]: true,
+    }"
+    :style="{ width: `${width}px` }"
+    @click.stop
+    @contextmenu.prevent="handleContextMenu"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width
+      :height="16"
+      shape-rendering="crispEdges"
+    >
+      <!-- ループエリア -->
+      <rect
+        x="0"
+        y="0"
+        :width
+        height="16"
+        class="loop-background"
+        @mousedown.stop="handleLoopAreaMouseDown"
+        @mouseup.stop
+      />
+      <!-- ループ範囲 -->
+      <rect
+        v-if="!isEmpty"
+        :x="loopStartX - offset + 4"
+        y="0"
+        :width="Math.max(loopEndX - loopStartX - 8, 0)"
+        height="5"
+        rx="2"
+        ry="2"
+        class="loop-range"
+        @click.stop="handleLoopRangeClick"
+        @dblclick.stop="handleLoopRangeDoubleClick"
+      />
+      <!-- ループ開始ハンドル -->
+      <g class="loop-handle-group">
+        <rect
+          :x="loopStartX - offset"
+          y="0"
+          width="2"
+          height="16"
+          rx="1"
+          ry="1"
+          class="loop-handle loop-handle-start"
+          :class="{ 'is-empty': isEmpty }"
+          @mousedown.stop="handleStartHandleMouseDown"
+        />
+        <!-- 開始ハンドルのドラッグエリア(ドラッグしやすくするためハンドルよりも大きい) -->
+        <rect
+          :x="loopStartX - offset - 2"
+          y="0"
+          width="8"
+          height="24"
+          class="loop-handle-drag-area"
+          @mousedown.stop="handleStartHandleMouseDown"
+        />
+      </g>
+      <!-- ループ終了ハンドル -->
+      <g class="loop-handle-group">
+        <rect
+          :x="loopEndX - offset - 2"
+          y="0"
+          width="2"
+          height="16"
+          rx="1"
+          ry="1"
+          class="loop-handle loop-handle-end"
+          :class="{ 'is-empty': isEmpty }"
+          @mousedown.stop="handleEndHandleMouseDown"
+        />
+        <!-- 終了ハンドルのドラッグエリア(ドラッグしやすくするためハンドルよりも大きい) -->
+        <rect
+          :x="loopEndX - offset - 6"
+          y="0"
+          width="8"
+          height="24"
+          class="loop-handle-drag-area"
+          @mousedown.stop="handleEndHandleMouseDown"
+        />
+      </g>
+    </svg>
+    <ContextMenu :menudata="contextMenuData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu/Presentation.vue";
+
+defineOptions({
+  name: "LoopLanePresentation",
+});
+
+defineProps<{
+  width: number;
+  offset: number;
+  loopStartX: number;
+  loopEndX: number;
+  isLoopEnabled: boolean;
+  isDragging: boolean;
+  isEmpty: boolean;
+  cursorClass: string;
+  contextMenuData: ContextMenuItemData[];
+}>();
+
+const emit = defineEmits<{
+  (e: "loopAreaMouseDown", event: MouseEvent): void;
+  (e: "loopRangeClick"): void;
+  (e: "loopRangeDoubleClick"): void;
+  (e: "startHandleMouseDown", event: MouseEvent): void;
+  (e: "endHandleMouseDown", event: MouseEvent): void;
+  (e: "contextMenu", event: MouseEvent): void;
+}>();
+
+const handleLoopAreaMouseDown = (event: MouseEvent) => {
+  emit("loopAreaMouseDown", event);
+};
+
+const handleLoopRangeClick = () => {
+  emit("loopRangeClick");
+};
+
+const handleLoopRangeDoubleClick = () => {
+  emit("loopRangeDoubleClick");
+};
+
+const handleStartHandleMouseDown = (event: MouseEvent) => {
+  emit("startHandleMouseDown", event);
+};
+
+const handleEndHandleMouseDown = (event: MouseEvent) => {
+  emit("endHandleMouseDown", event);
+};
+
+const handleContextMenu = (event: MouseEvent) => {
+  emit("contextMenu", event);
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+
+// レーン背景
+.loop-lane {
+  height: 16px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+  cursor: pointer;
+  z-index: vars.$z-index-sing-loop-background;
+
+  // TODO: ドラッグで追加できることがわかりづらい場合、hoverで変更可能を示す
+  /*
+  &:hover {
+    fill: var(--scheme-color-outline);
+  }
+  */
+
+  &.cursor-ew-resize {
+    cursor: ew-resize;
+  }
+}
+
+// ループ背景
+.loop-background {
+  fill: transparent;
+  z-index: vars.$z-index-sing-loop-background;
+}
+
+// ループ範囲
+.loop-range {
+  fill: var(--scheme-color-primary);
+  z-index: vars.$z-index-sing-loop-range;
+
+  &-area {
+    fill: transparent;
+  }
+}
+
+// ハンドル
+.loop-handle {
+  fill: var(--scheme-color-primary);
+  cursor: ew-resize;
+  z-index: vars.$z-index-sing-loop-handle;
+  opacity: 0.8;
+
+  &.is-empty {
+    fill: var(--scheme-color-outline);
+    opacity: 0.5;
+  }
+
+  &-drag-area {
+    fill: transparent;
+    cursor: ew-resize;
+  }
+}
+
+.loop-handle-group {
+  &:hover {
+    cursor: ew-resize;
+  }
+}
+
+.loop-lane {
+  // 有効時
+  &.is-enabled {
+    .loop-range {
+      fill: var(--scheme-color-primary);
+      opacity: 0.3;
+      z-index: vars.$z-index-sing-loop-range;
+    }
+
+    .loop-handle {
+      fill: var(--scheme-color-primary);
+      z-index: vars.$z-index-sing-loop-handle;
+    }
+  }
+
+  // 無効時
+  &:not(.is-enabled):not(.is-dragging) {
+    .loop-range {
+      fill: var(--scheme-color-outline);
+      opacity: 0.3;
+    }
+
+    .loop-handle {
+      fill: var(--scheme-color-outline);
+      stroke: var(--scheme-color-outline-variant);
+      opacity: 0.5;
+    }
+  }
+
+  // ドラッグ中
+  &.is-dragging {
+    .loop-background {
+      fill: var(--scheme-color-surface-variant);
+      opacity: 0.1;
+    }
+
+    // ドラッグ中（有効時）
+    &.is-enabled {
+      .loop-range {
+        opacity: 0.4;
+      }
+
+      .loop-handle {
+        fill: var(--scheme-color-primary-fixed-dim);
+        stroke: var(--scheme-color-primary-fixed-dim);
+        stroke-width: 1.5px;
+      }
+    }
+
+    // ドラッグ中（無効時）
+    &:not(.is-enabled) {
+      .loop-range {
+        fill: var(--scheme-color-outline);
+        opacity: 0.4;
+      }
+
+      .loop-handle {
+        fill: var(--scheme-color-outline);
+        stroke: var(--scheme-color-outline);
+        stroke-width: 1.5px;
+      }
+    }
+  }
+
+  // 空の状態
+  &.is-empty:not(.is-dragging) {
+    .loop-range,
+    .loop-handle,
+    .loop-drag-area {
+      display: none;
+    }
+  }
+
+  &.is-dragging.is-empty {
+    .loop-handle {
+      fill: var(--scheme-color-outline);
+      stroke: var(--scheme-color-outline);
+      opacity: 0.5;
+    }
+  }
+
+  // ホバー時（ドラッグ中以外）
+  &:not(.is-dragging) {
+    .loop-handle-group:hover {
+      .loop-handle {
+        opacity: 1;
+        stroke-width: 1.5px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Sing/SequencerRuler/LoopLane/index.stories.ts b/src/components/Sing/SequencerRuler/LoopLane/index.stories.ts
new file mode 100644
index 0000000000..416c41659e
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/LoopLane/index.stories.ts
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { fn } from "@storybook/test";
+
+import Presentation from "./Presentation.vue";
+
+const meta: Meta<typeof Presentation> = {
+  component: Presentation,
+  args: {
+    width: 1000,
+    offset: 0,
+    loopStartX: 100,
+    loopEndX: 300,
+    isLoopEnabled: true,
+    isDragging: false,
+    isEmpty: false,
+    cursorClass: "",
+    contextMenuData: [],
+    onLoopAreaMouseDown: fn(),
+    onLoopRangeClick: fn(),
+    onLoopRangeDoubleClick: fn(),
+    onStartHandleMouseDown: fn(),
+    onEndHandleMouseDown: fn(),
+    onContextMenu: fn(),
+  },
+  render: (args) => ({
+    components: { Presentation },
+    setup() {
+      return { args };
+    },
+    template: `<div style="height: 40px; position: relative;"><Presentation v-bind="args" /></div>`,
+  }),
+};
+
+// 表示のみ
+// TODO: テスト追加
+
+export default meta;
+type Story = StoryObj<typeof Presentation>;
+
+export const Default: Story = {
+  name: "デフォルト",
+  args: {},
+};
+
+export const Disabled: Story = {
+  name: "無効状態",
+  args: {
+    isLoopEnabled: false,
+  },
+};
+
+export const Empty: Story = {
+  name: "空の状態",
+  args: {
+    isEmpty: true,
+    loopStartX: 0,
+    loopEndX: 0,
+  },
+};
+
+export const DraggingEnabled: Story = {
+  name: "ドラッグ中(有効)",
+  args: {
+    isLoopEnabled: true,
+    isDragging: true,
+    cursorClass: "cursor-ew-resize",
+  },
+};
+
+export const DraggingDisabled: Story = {
+  name: "ドラッグ中(無効)",
+  args: {
+    isLoopEnabled: false,
+    isDragging: true,
+    cursorClass: "cursor-ew-resize",
+  },
+};
+
+export const LongLoop: Story = {
+  name: "長いループ範囲",
+  args: {
+    loopStartX: 100,
+    loopEndX: 800,
+  },
+};
+
+export const ShortLoop: Story = {
+  name: "短いループ範囲",
+  args: {
+    loopStartX: 100,
+    loopEndX: 150,
+  },
+};
diff --git a/src/components/Sing/SequencerRuler/LoopLane/index.ts b/src/components/Sing/SequencerRuler/LoopLane/index.ts
new file mode 100644
index 0000000000..b671f9f6af
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/LoopLane/index.ts
@@ -0,0 +1,3 @@
+import Container from "./Container.vue";
+
+export default Container;
diff --git a/src/components/Sing/SequencerRuler/Presentation.vue b/src/components/Sing/SequencerRuler/Presentation.vue
index 89811ddcfb..59452cd115 100644
--- a/src/components/Sing/SequencerRuler/Presentation.vue
+++ b/src/components/Sing/SequencerRuler/Presentation.vue
@@ -1,223 +1,56 @@
 <template>
-  <div
-    ref="sequencerRuler"
-    class="sequencer-ruler"
-    @click="onClick"
-    @contextmenu="onContextMenu"
-  >
-    <ContextMenu
-      ref="contextMenu"
-      :header="contextMenuHeader"
-      :menudata="contextMenuData"
-      :uiLocked
-    />
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      :width
-      :height
-      shape-rendering="crispEdges"
-    >
-      <defs>
-        <pattern
-          v-for="(gridPattern, patternIndex) in gridPatterns"
-          :id="`sequencer-ruler-measure-${patternIndex}`"
-          :key="`pattern-${patternIndex}`"
-          patternUnits="userSpaceOnUse"
-          :x="-offset + gridPattern.x"
-          :width="gridPattern.patternWidth"
-          :height
-        >
-          <!-- 拍線（小節の最初を除く） -->
-          <line
-            v-for="n in gridPattern.beatsPerMeasure"
-            :key="n"
-            :x1="gridPattern.beatWidth * n"
-            :x2="gridPattern.beatWidth * n"
-            y1="28"
-            :y2="height"
-            class="sequencer-ruler-beat-line"
-          />
-        </pattern>
-      </defs>
-      <rect
-        v-for="(gridPattern, index) in gridPatterns"
-        :key="`grid-${index}`"
-        :x="0.5 + gridPattern.x - offset"
-        y="0"
-        :height
-        :width="gridPattern.width"
-        :fill="`url(#sequencer-ruler-measure-${index})`"
+  <div ref="sequencerRuler" class="sequencer-ruler" @click="onClick">
+    <div class="sequencer-ruler-content" :style="{ width: `${width}px` }">
+      <div class="sequencer-ruler-grid">
+        <!-- NOTE: slotを使う(Copilotくんが提案してくれた) -->
+        <slot name="grid" />
+      </div>
+      <div class="sequencer-ruler-changes">
+        <slot name="changes" />
+      </div>
+      <div class="sequencer-ruler-loop">
+        <slot name="loop" />
+      </div>
+      <div
+        class="sequencer-ruler-playhead"
+        :style="{
+          transform: `translateX(${playheadX - offset}px)`,
+        }"
       />
-      <!-- 小節線 -->
-      <line
-        v-for="measureInfo in measureInfos"
-        :key="measureInfo.number"
-        :x1="measureInfo.x - offset"
-        :x2="measureInfo.x - offset"
-        y1="20"
-        :y2="height"
-        class="sequencer-ruler-measure-line"
-        :class="{ 'first-measure-line': measureInfo.number === 1 }"
-      />
-      <!-- 小節番号 -->
-      <text
-        v-for="measureInfo in measureInfos"
-        :key="measureInfo.number"
-        font-size="12"
-        :x="measureInfo.x - offset + valueChangeTextPadding"
-        y="34"
-        class="sequencer-ruler-measure-number"
-      >
-        {{ measureInfo.number }}
-      </text>
-      <!-- テンポ・拍子表示 -->
-      <template v-for="valueChange in valueChanges" :key="valueChange.position">
-        <text
-          ref="valueChangeText"
-          font-size="12"
-          :x="valueChange.x - offset + valueChangeTextPadding"
-          y="16"
-          class="sequencer-ruler-value-change"
-          @click.stop="onValueChangeClick($event, valueChange)"
-          @contextmenu.stop="onValueChangeClick($event, valueChange)"
-        >
-          {{ valueChange.displayText }}
-        </text>
-        <line
-          :x1="valueChange.x - offset"
-          :x2="valueChange.x - offset"
-          y1="0"
-          :y2="height"
-          class="sequencer-ruler-value-change-line"
-        />
-      </template>
-    </svg>
-
-    <div class="sequencer-ruler-border-bottom"></div>
-    <div
-      class="sequencer-ruler-playhead"
-      :style="{
-        transform: `translateX(${playheadX - offset}px)`,
-      }"
-    ></div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onUnmounted,
-  ComponentPublicInstance,
-  useTemplateRef,
-  toRef,
-} from "vue";
-import { Dialog } from "quasar";
-import {
-  getMeasureDuration,
-  getNoteDuration,
-  getTimeSignaturePositions,
-  snapTicksToGrid,
-  tickToMeasureNumber,
-} from "@/sing/domain";
-import { baseXToTick, tickToBaseX } from "@/sing/viewHelper";
+import { ref } from "vue";
 import { Tempo, TimeSignature } from "@/store/type";
-import ContextMenu, {
-  ContextMenuItemData,
-} from "@/components/Menu/ContextMenu/Presentation.vue";
-import { UnreachableError } from "@/type/utility";
-import TempoChangeDialog from "@/components/Sing/ChangeValueDialog/TempoChangeDialog.vue";
-import TimeSignatureChangeDialog from "@/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue";
-import { FontSpecification, predictTextWidth } from "@/helpers/textWidth";
-import { createLogger } from "@/helpers/log";
-import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
+defineOptions({
+  name: "RulerPresentation",
+});
 
 const props = defineProps<{
-  offset: number;
+  width: number;
   numMeasures: number;
-  tpqn: number;
+  playheadX: number;
+  offset: number;
   tempos: Tempo[];
   timeSignatures: TimeSignature[];
+  tpqn: number;
   sequencerZoomX: number;
-  uiLocked: boolean;
   sequencerSnapType: number;
+  uiLocked: boolean;
+  getSnappedTickFromOffsetX: (offsetX: number) => number;
 }>();
+
 const playheadTicks = defineModel<number>("playheadTicks", {
   required: true,
 });
+
 const emit = defineEmits<{
   deselectAllNotes: [];
-  setTempo: [tempo: Tempo];
-  removeTempo: [position: number];
-  setTimeSignature: [timeSignature: TimeSignature];
-  removeTimeSignature: [measureNumber: number];
 }>();
 
-const log = createLogger("SequencerRuler");
-
-const height = ref(40);
-const tsPositions = computed(() => {
-  return getTimeSignaturePositions(props.timeSignatures, props.tpqn);
-});
-const endTicks = computed(() => {
-  const lastTs = props.timeSignatures[props.timeSignatures.length - 1];
-  const lastTsPosition = tsPositions.value[tsPositions.value.length - 1];
-  return (
-    lastTsPosition +
-    getMeasureDuration(lastTs.beats, lastTs.beatType, props.tpqn) *
-      (props.numMeasures - lastTs.measureNumber + 1)
-  );
-});
-const width = computed(() => {
-  return tickToBaseX(endTicks.value, props.tpqn) * props.sequencerZoomX;
-});
-const gridPatterns = useSequencerGrid({
-  timeSignatures: toRef(() => props.timeSignatures),
-  tpqn: toRef(() => props.tpqn),
-  sequencerZoomX: toRef(() => props.sequencerZoomX),
-  numMeasures: toRef(() => props.numMeasures),
-});
-
-const measureInfos = computed(() => {
-  return props.timeSignatures.flatMap((timeSignature, i) => {
-    const measureDuration = getMeasureDuration(
-      timeSignature.beats,
-      timeSignature.beatType,
-      props.tpqn,
-    );
-    const nextTsPosition =
-      i !== props.timeSignatures.length - 1
-        ? tsPositions.value[i + 1]
-        : endTicks.value;
-    const start = tsPositions.value[i];
-    const end = nextTsPosition;
-    const numMeasures = Math.floor((end - start) / measureDuration);
-    return Array.from({ length: numMeasures }, (_, index) => {
-      const measureNumber = timeSignature.measureNumber + index;
-      const measurePosition = start + index * measureDuration;
-      const baseX = tickToBaseX(measurePosition, props.tpqn);
-      return {
-        number: measureNumber,
-        x: Math.round(baseX * props.sequencerZoomX),
-      };
-    });
-  });
-});
-
-const playheadX = computed(() => {
-  const baseX = tickToBaseX(playheadTicks.value, props.tpqn);
-  return Math.floor(baseX * props.sequencerZoomX);
-});
-
-const snapTicks = computed(() => {
-  return getNoteDuration(props.sequencerSnapType, props.tpqn);
-});
-
-const getSnappedTickFromOffsetX = (offsetX: number) => {
-  const baseX = (props.offset + offsetX) / props.sequencerZoomX;
-  return snapTicksToGrid(baseXToTick(baseX, props.tpqn), snapTicks.value);
-};
+const sequencerRuler = ref<HTMLDivElement | null>(null);
 
 const onClick = (event: MouseEvent) => {
   emit("deselectAllNotes");
@@ -226,285 +59,40 @@ const onClick = (event: MouseEvent) => {
   if (!sequencerRulerElement) {
     throw new Error("sequencerRulerElement is null.");
   }
-  const ticks = getSnappedTickFromOffsetX(event.offsetX);
-  playheadTicks.value = ticks;
-};
-
-const sequencerRuler = useTemplateRef<HTMLDivElement>("sequencerRuler");
-let resizeObserver: ResizeObserver | undefined;
-
-onMounted(() => {
-  const sequencerRulerElement = sequencerRuler.value;
-  if (!sequencerRulerElement) {
-    throw new Error("sequencerRulerElement is null.");
-  }
-  resizeObserver = new ResizeObserver((entries) => {
-    let blockSize = 0;
-    for (const entry of entries) {
-      for (const borderBoxSize of entry.borderBoxSize) {
-        blockSize = borderBoxSize.blockSize;
-      }
-    }
-    if (blockSize > 0 && blockSize !== height.value) {
-      height.value = blockSize;
-    }
-  });
-  resizeObserver.observe(sequencerRulerElement);
-});
-
-onUnmounted(() => {
-  resizeObserver?.disconnect();
-});
-
-const contextMenu = ref<ComponentPublicInstance<typeof ContextMenu> | null>(
-  null,
-);
-const onContextMenu = async (event: MouseEvent) => {
-  emit("deselectAllNotes");
-
-  const snappedTicks = getSnappedTickFromOffsetX(event.offsetX);
-  playheadTicks.value = snappedTicks;
-};
-
-type ValueChange = {
-  position: number;
-  text: string;
-  tempoChange: Tempo | undefined;
-  timeSignatureChange: TimeSignature | undefined;
-  x: number;
-  displayText: string;
-};
-
-const onValueChangeClick = async (
-  event: MouseEvent,
-  valueChange: ValueChange,
-) => {
-  const ticks = valueChange.position;
+  const ticks = props.getSnappedTickFromOffsetX(event.offsetX);
   playheadTicks.value = ticks;
-  contextMenu.value?.show(event);
 };
-
-const currentMeasure = computed(() =>
-  tickToMeasureNumber(playheadTicks.value, props.timeSignatures, props.tpqn),
-);
-
-const valueChangeTextPadding = 4;
-
-// NOTE: フォントの変更に対応していないが、基本的にフォントが変更されることは少ないので、
-// 複雑性を下げるためにも対応しない
-const valueChangeText = useTemplateRef<SVGTextElement[]>("valueChangeText");
-const valueChangeTextStyle = computed<FontSpecification | null>(() => {
-  if (!valueChangeText.value || valueChangeText.value.length === 0) {
-    return null;
-  }
-  const style = window.getComputedStyle(valueChangeText.value[0]);
-  return {
-    fontFamily: style.fontFamily,
-    fontSize: parseFloat(style.fontSize),
-    fontWeight: style.fontWeight,
-  };
-});
-
-const valueChanges = computed<ValueChange[]>(() => {
-  const timeSignaturesWithTicks = tsPositions.value.map((tsPosition, i) => ({
-    type: "timeSignature" as const,
-    position: tsPosition,
-    timeSignature: props.timeSignatures[i],
-  }));
-  const tempos = props.tempos.map((tempo) => {
-    return {
-      type: "tempo" as const,
-      position: tempo.position,
-      tempo,
-    };
-  });
-
-  const valueChanges: ValueChange[] = [
-    ...Map.groupBy(
-      [...tempos, ...timeSignaturesWithTicks],
-      (item) => item.position,
-    ).entries(),
-  ]
-    .toSorted((a, b) => a[0] - b[0])
-    .map(([tick, items]) => {
-      const tempo = items.find((item) => item.type === "tempo")?.tempo;
-      const timeSignature = items.find(
-        (item) => item.type === "timeSignature",
-      )?.timeSignature;
-
-      const tempoText = tempo?.bpm ?? "";
-      const timeSignatureText = timeSignature
-        ? `${timeSignature.beats}/${timeSignature.beatType}`
-        : "";
-
-      const text = [tempoText, timeSignatureText].join(" ");
-
-      return {
-        position: tick,
-        text,
-        tempoChange: tempo,
-        timeSignatureChange: timeSignature,
-        x: tickToBaseX(tick, props.tpqn) * props.sequencerZoomX,
-        displayText: text,
-      };
-    });
-
-  if (valueChangeTextStyle.value != undefined) {
-    // NOTE: テキストの幅を計算して、表示できるかどうかを判定する
-    //   full: 通常表示（120 4/4）
-    //   ellipsis: fullが入りきらないときに表示する（...）
-    //   hidden: ellipsisも入りきらないときに表示する
-
-    const collapsedTextWidth =
-      predictTextWidth("...", valueChangeTextStyle.value) +
-      valueChangeTextPadding * 2;
-    for (const [i, valueChange] of valueChanges.entries()) {
-      const next = valueChanges.at(i + 1);
-      if (!next) {
-        continue;
-      }
-      const requiredWidth =
-        predictTextWidth(valueChange.text, valueChangeTextStyle.value) +
-        valueChangeTextPadding;
-      const width = next.x - valueChange.x;
-      if (collapsedTextWidth > width) {
-        valueChange.displayText = "";
-      } else if (requiredWidth > width) {
-        valueChange.displayText = "...";
-      }
-    }
-  } else {
-    log.warn("valueChangeTextElement is null. Cannot calculate text width.");
-  }
-
-  return valueChanges;
-});
-
-const currentTempo = computed(() => {
-  const maybeTempo = props.tempos.findLast((tempo) => {
-    return tempo.position <= playheadTicks.value;
-  });
-  if (!maybeTempo) {
-    throw new UnreachableError("assert: At least one tempo exists.");
-  }
-  return maybeTempo;
-});
-const currentTimeSignature = computed(() => {
-  const maybeTimeSignature = props.timeSignatures.findLast((timeSignature) => {
-    return timeSignature.measureNumber <= currentMeasure.value;
-  });
-  if (!maybeTimeSignature) {
-    throw new UnreachableError("assert: At least one time signature exists.");
-  }
-  return maybeTimeSignature;
-});
-const tempoChangeExists = computed(
-  () => currentTempo.value.position === playheadTicks.value,
-);
-const timeSignatureChangeExists = computed(
-  () => currentTimeSignature.value.measureNumber === currentMeasure.value,
-);
-
-const contextMenuHeader = computed(() => {
-  const texts = [];
-  if (tempoChangeExists.value) {
-    texts.push(`テンポ：${currentTempo.value.bpm}`);
-  }
-  if (timeSignatureChangeExists.value) {
-    texts.push(
-      `拍子：${currentTimeSignature.value.beats}/${currentTimeSignature.value.beatType}`,
-    );
-  }
-  return texts.join("、");
-});
-const contextMenuData = computed<ContextMenuItemData[]>(() => {
-  const menuData: ContextMenuItemData[] = [];
-  menuData.push({
-    type: "button",
-    label: tempoChangeExists.value ? `テンポ変化を編集` : "テンポ変化を挿入",
-    onClick: async () => {
-      Dialog.create({
-        component: TempoChangeDialog,
-        componentProps: {
-          tempoChange: currentTempo.value,
-          mode: tempoChangeExists.value ? "edit" : "add",
-        },
-      }).onOk((result: { tempoChange: Omit<Tempo, "position"> }) => {
-        emit("setTempo", {
-          ...result.tempoChange,
-          position: playheadTicks.value,
-        });
-      });
-      contextMenu.value?.hide();
-    },
-    disableWhenUiLocked: true,
-  });
-  if (tempoChangeExists.value) {
-    menuData.push({
-      type: "button",
-      label: "テンポ変化を削除",
-      disabled: currentTempo.value.position === 0,
-      onClick: () => {
-        emit("removeTempo", playheadTicks.value);
-
-        contextMenu.value?.hide();
-      },
-      disableWhenUiLocked: true,
-    });
-  }
-  menuData.push({
-    type: "separator",
-  });
-  menuData.push({
-    type: "button",
-    label: timeSignatureChangeExists.value
-      ? `拍子変化を編集`
-      : "拍子変化を挿入",
-    onClick: async () => {
-      Dialog.create({
-        component: TimeSignatureChangeDialog,
-        componentProps: {
-          timeSignatureChange: currentTimeSignature.value,
-          mode: timeSignatureChangeExists.value ? "edit" : "add",
-        },
-      }).onOk(
-        (result: { timeSignatureChange: Omit<TimeSignature, "position"> }) => {
-          emit("setTimeSignature", {
-            ...result.timeSignatureChange,
-            measureNumber: currentMeasure.value,
-          });
-        },
-      );
-      contextMenu.value?.hide();
-    },
-    disableWhenUiLocked: true,
-  });
-  if (timeSignatureChangeExists.value) {
-    menuData.push({
-      type: "button",
-      label: "拍子変化を削除",
-      disabled: currentMeasure.value === 1,
-      onClick: () => {
-        emit("removeTimeSignature", currentMeasure.value);
-
-        contextMenu.value?.hide();
-      },
-      disableWhenUiLocked: true,
-    });
-  }
-  return menuData;
-});
 </script>
 
 <style scoped lang="scss">
 @use "@/styles/v2/variables" as vars;
-@use "@/styles/colors" as colors;
 
 .sequencer-ruler {
   background: var(--scheme-color-sing-ruler-surface);
   height: 40px;
   position: relative;
   overflow: hidden;
+  isolation: isolate;
+}
+
+.sequencer-ruler-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.sequencer-ruler-grid,
+.sequencer-ruler-changes,
+.sequencer-ruler-loop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sequencer-ruler-loop {
+  height: 20px;
 }
 
 .sequencer-ruler-playhead {
@@ -518,46 +106,4 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
   will-change: transform;
   z-index: vars.$z-index-sing-playhead;
 }
-
-.sequencer-ruler-measure-number {
-  font-weight: 700;
-  fill: var(--scheme-color-on-surface-variant);
-}
-.sequencer-ruler-value-change {
-  font-weight: 700;
-  fill: var(--scheme-color-on-surface-variant);
-
-  &:hover {
-    cursor: pointer;
-
-    text-decoration: underline;
-  }
-}
-
-.sequencer-ruler-value-change-line {
-  backface-visibility: hidden;
-  stroke: var(--scheme-color-on-surface-variant);
-  stroke-width: 1px;
-}
-
-.sequencer-ruler-value-change-hitbox {
-  pointer-events: all;
-}
-
-.sequencer-ruler-measure-line {
-  backface-visibility: hidden;
-  stroke: var(--scheme-color-sing-ruler-measure-line);
-  stroke-width: 1px;
-
-  // NOTE: 最初の小節線を非表示。必要に応じて再表示・位置合わせする
-  &.first-measure-line {
-    stroke: var(--scheme-color-sing-ruler-surface);
-  }
-}
-
-.sequencer-ruler-beat-line {
-  backface-visibility: hidden;
-  stroke: var(--scheme-color-sing-ruler-beat-line);
-  stroke-width: 1px;
-}
 </style>
diff --git a/src/components/Sing/SequencerRuler/ValueChangesLane/Container.vue b/src/components/Sing/SequencerRuler/ValueChangesLane/Container.vue
new file mode 100644
index 0000000000..126932ad8a
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/ValueChangesLane/Container.vue
@@ -0,0 +1,357 @@
+<template>
+  <Presentation
+    :valueChanges
+    :contextMenuData
+    :contextMenuHeader
+    :width
+    :offset
+    :uiLocked
+    @valueChangeClick="onValueChangeClick"
+    @contextMenuHide="onContextMenuHide"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Dialog } from "quasar";
+import Presentation from "./Presentation.vue";
+import { useStore } from "@/store";
+import { tickToMeasureNumber } from "@/sing/domain";
+import { Tempo, TimeSignature } from "@/store/type";
+import { ContextMenuItemData } from "@/components/Menu/ContextMenu/Presentation.vue";
+import TempoChangeDialog from "@/components/Sing/ChangeValueDialog/TempoChangeDialog.vue";
+import TimeSignatureChangeDialog from "@/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue";
+import { useSequencerRuler } from "@/composables/useSequencerRuler";
+
+export type ValueChange = {
+  position: number;
+  text: string;
+  tempoChange: Tempo | undefined;
+  timeSignatureChange: TimeSignature | undefined;
+  x: number;
+};
+
+defineOptions({
+  name: "ValueChangesLaneContainer",
+});
+
+const props = defineProps<{
+  offset: number;
+  numMeasures: number;
+}>();
+
+const emit = defineEmits<{
+  setPlayheadPosition: [position: number];
+}>();
+
+const store = useStore();
+
+const tpqn = computed(() => store.state.tpqn);
+const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const timeSignatures = computed(() => store.state.timeSignatures);
+const tempos = computed(() => store.state.tempos);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+const sequencerSnapType = computed(() => store.state.sequencerSnapType);
+
+const { width, endTicks, tsPositions, getSnappedTickFromOffsetX } =
+  useSequencerRuler({
+    offset: computed(() => props.offset),
+    numMeasures: computed(() => props.numMeasures),
+    tpqn,
+    timeSignatures,
+    sequencerZoomX,
+    playheadTicks,
+    sequencerSnapType,
+  });
+
+const valueChange = ref<ValueChange | null>(null);
+
+// テンポ/拍子変更のメソッド
+const setTempo = (tempo: Tempo) => {
+  void store.actions.COMMAND_SET_TEMPO({ tempo });
+};
+
+const removeTempo = (position: number) => {
+  void store.actions.COMMAND_REMOVE_TEMPO({ position });
+};
+
+const setTimeSignature = (timeSignature: TimeSignature) => {
+  void store.actions.COMMAND_SET_TIME_SIGNATURE({ timeSignature });
+};
+
+const removeTimeSignature = (measureNumber: number) => {
+  void store.actions.COMMAND_REMOVE_TIME_SIGNATURE({ measureNumber });
+};
+
+const valueChanges = computed<ValueChange[]>(() => {
+  const timeSignaturesWithTicks = tsPositions.value.map((tsPosition, i) => ({
+    type: "timeSignature" as const,
+    position: tsPosition,
+    timeSignature: timeSignatures.value[i],
+  }));
+  const valueChangeTempos = tempos.value.map((tempo) => {
+    return {
+      type: "tempo" as const,
+      position: tempo.position,
+      tempo,
+    };
+  });
+
+  return [
+    ...Map.groupBy(
+      [...valueChangeTempos, ...timeSignaturesWithTicks],
+      (item) => item.position,
+    ).entries(),
+  ]
+    .toSorted((a, b) => a[0] - b[0])
+    .map(([tick, items]) => {
+      const tempo = items.find((item) => item.type === "tempo")?.tempo;
+      const timeSignature = items.find(
+        (item) => item.type === "timeSignature",
+      )?.timeSignature;
+
+      const tempoText = tempo?.bpm ?? "";
+      const timeSignatureText = timeSignature
+        ? `${timeSignature.beats}/${timeSignature.beatType}`
+        : "";
+
+      const text = [tempoText, timeSignatureText].filter(Boolean).join(" ");
+
+      return {
+        position: tick,
+        text,
+        tempoChange: tempo,
+        timeSignatureChange: timeSignature,
+        x: (width.value / endTicks.value) * tick,
+      };
+    });
+});
+
+const onValueChangeClick = async (
+  event: MouseEvent,
+  newValueChange: ValueChange | null,
+) => {
+  if (uiLocked.value) return;
+
+  // 再生位置を変更
+  if (newValueChange) {
+    // テキストクリック時は、そのvalueChangeの位置へ移動
+    emit("setPlayheadPosition", newValueChange.position);
+  } else {
+    // 空き部分クリック時は、クリック位置から計算してスナップ位置に合わせる
+    const snappedTick = getSnappedTickFromOffsetX(event.offsetX);
+    emit("setPlayheadPosition", snappedTick);
+  }
+  valueChange.value = newValueChange;
+};
+
+const onContextMenuHide = () => {
+  valueChange.value = null;
+};
+
+const contextMenuData = computed<ContextMenuItemData[]>(() => {
+  const menuData: ContextMenuItemData[] = [];
+
+  if (valueChange.value) {
+    // テンポ変更のメニュー項目
+    if (valueChange.value.tempoChange) {
+      menuData.push({
+        type: "button",
+        label: "テンポ変化を編集",
+        onClick: () => {
+          Dialog.create({
+            component: TempoChangeDialog,
+            componentProps: {
+              tempoChange: valueChange.value!.tempoChange,
+              mode: "edit",
+            },
+          }).onOk((result: { tempoChange: Omit<Tempo, "position"> }) => {
+            setTempo({
+              ...result.tempoChange,
+              position: valueChange.value!.position,
+            });
+          });
+        },
+        disableWhenUiLocked: true,
+      });
+
+      menuData.push({
+        type: "button",
+        label: "テンポ変化を削除",
+        disabled: valueChange.value.position === 0,
+        onClick: () => {
+          removeTempo(valueChange.value!.position);
+        },
+        disableWhenUiLocked: true,
+      });
+    } else {
+      menuData.push({
+        type: "button",
+        label: "テンポ変化を挿入",
+        onClick: () => {
+          Dialog.create({
+            component: TempoChangeDialog,
+            componentProps: {
+              tempoChange: tempos.value[0],
+              mode: "add",
+            },
+          }).onOk((result: { tempoChange: Omit<Tempo, "position"> }) => {
+            setTempo({
+              ...result.tempoChange,
+              position: valueChange.value!.position,
+            });
+          });
+        },
+        disableWhenUiLocked: true,
+      });
+    }
+
+    if (menuData.length > 0) {
+      menuData.push({
+        type: "separator",
+      });
+    }
+
+    // 拍子変更のメニュー項目
+    if (valueChange.value.timeSignatureChange) {
+      menuData.push({
+        type: "button",
+        label: "拍子変化を編集",
+        onClick: () => {
+          Dialog.create({
+            component: TimeSignatureChangeDialog,
+            componentProps: {
+              timeSignatureChange: valueChange.value!.timeSignatureChange,
+              mode: "edit",
+            },
+          }).onOk(
+            (result: {
+              timeSignatureChange: Omit<TimeSignature, "position">;
+            }) => {
+              setTimeSignature({
+                ...result.timeSignatureChange,
+                measureNumber: tickToMeasureNumber(
+                  valueChange.value!.position,
+                  timeSignatures.value,
+                  tpqn.value,
+                ),
+              });
+            },
+          );
+        },
+        disableWhenUiLocked: true,
+      });
+
+      menuData.push({
+        type: "button",
+        label: "拍子変化を削除",
+        disabled: valueChange.value.position === 0,
+        onClick: () => {
+          removeTimeSignature(
+            tickToMeasureNumber(
+              valueChange.value!.position,
+              timeSignatures.value,
+              tpqn.value,
+            ),
+          );
+        },
+        disableWhenUiLocked: true,
+      });
+    } else {
+      menuData.push({
+        type: "button",
+        label: "拍子変化を挿入",
+        onClick: () => {
+          Dialog.create({
+            component: TimeSignatureChangeDialog,
+            componentProps: {
+              timeSignatureChange: timeSignatures.value[0],
+              mode: "add",
+            },
+          }).onOk(
+            (result: {
+              timeSignatureChange: Omit<TimeSignature, "position">;
+            }) => {
+              setTimeSignature({
+                ...result.timeSignatureChange,
+                measureNumber: tickToMeasureNumber(
+                  valueChange.value!.position,
+                  timeSignatures.value,
+                  tpqn.value,
+                ),
+              });
+            },
+          );
+        },
+        disableWhenUiLocked: true,
+      });
+    }
+  } else {
+    // 新規追加のメニュー項目
+    menuData.push({
+      type: "button",
+      label: "テンポ変化を挿入",
+      onClick: () => {
+        Dialog.create({
+          component: TempoChangeDialog,
+          componentProps: {
+            tempoChange: tempos.value[0],
+            mode: "add",
+          },
+        }).onOk((result: { tempoChange: Omit<Tempo, "position"> }) => {
+          setTempo({
+            ...result.tempoChange,
+            position: playheadTicks.value,
+          });
+        });
+      },
+      disableWhenUiLocked: true,
+    });
+
+    menuData.push({
+      type: "button",
+      label: "拍子変化を挿入",
+      onClick: () => {
+        Dialog.create({
+          component: TimeSignatureChangeDialog,
+          componentProps: {
+            timeSignatureChange: timeSignatures.value[0],
+            mode: "add",
+          },
+        }).onOk(
+          (result: {
+            timeSignatureChange: Omit<TimeSignature, "position">;
+          }) => {
+            setTimeSignature({
+              ...result.timeSignatureChange,
+              measureNumber: tickToMeasureNumber(
+                playheadTicks.value,
+                timeSignatures.value,
+                tpqn.value,
+              ),
+            });
+          },
+        );
+      },
+      disableWhenUiLocked: true,
+    });
+  }
+
+  return menuData;
+});
+
+const contextMenuHeader = computed(() => {
+  if (!valueChange.value) return "";
+  const texts = [];
+  if (valueChange.value.tempoChange) {
+    texts.push(`テンポ：${valueChange.value.tempoChange.bpm}`);
+  }
+  if (valueChange.value.timeSignatureChange) {
+    texts.push(
+      `拍子：${valueChange.value.timeSignatureChange.beats}/${valueChange.value.timeSignatureChange.beatType}`,
+    );
+  }
+  return texts.join("、");
+});
+</script>
diff --git a/src/components/Sing/SequencerRuler/ValueChangesLane/Presentation.vue b/src/components/Sing/SequencerRuler/ValueChangesLane/Presentation.vue
new file mode 100644
index 0000000000..ec59362e3a
--- /dev/null
+++ b/src/components/Sing/SequencerRuler/ValueChangesLane/Presentation.vue
@@ -0,0 +1,241 @@
+<template>
+  <div ref="valueChangesLane" class="value-changes-lane">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width
+      :height
+      shape-rendering="crispEdges"
+      class="value-changes-lane-svg"
+    >
+      <!-- レーン全体に透明背景を敷いて、空き部分の右クリックを拾う -->
+      <rect
+        class="lane-background"
+        :width
+        :height
+        fill="transparent"
+        @contextmenu.stop.prevent="onLaneContextMenu"
+      />
+
+      <!-- テンポ・拍子表示 -->
+      <template v-for="item in displayValueChanges" :key="item.position">
+        <g class="value-changes-lane-item">
+          <text
+            ref="valueChangeText"
+            font-size="12"
+            :x="item.x - offset + valueChangeTextPadding"
+            y="32"
+            class="value-changes-lane-value-change"
+            @click.stop="onValueClick($event, item.original)"
+            @contextmenu.stop.prevent="onValueClick($event, item.original)"
+          >
+            {{ item.displayText }}
+          </text>
+          <line
+            :x1="item.x - offset"
+            :x2="item.x - offset"
+            y1="0"
+            :y2="height"
+            class="value-changes-lane-value-change-line"
+          />
+          <rect
+            :x="item.x - offset - 2"
+            y="0"
+            width="40"
+            height="40"
+            fill="transparent"
+            class="value-changes-lane-value-change-hitbox"
+            @click.stop="onValueClick($event, item.original)"
+            @contextmenu.stop.prevent="onValueClick($event, item.original)"
+          />
+        </g>
+      </template>
+    </svg>
+    <ContextMenu
+      ref="contextMenu"
+      :menudata="contextMenuData"
+      :header="contextMenuHeader"
+      :uiLocked
+      @hide="emit('contextMenuHide')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, onMounted, onUnmounted } from "vue";
+import type { ValueChange } from "./Container.vue";
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu/Presentation.vue";
+import { createLogger } from "@/helpers/log";
+import { FontSpecification, predictTextWidth } from "@/helpers/textWidth";
+
+defineOptions({
+  name: "ValueChangesLanePresentation",
+});
+
+const props = defineProps<{
+  width: number;
+  height?: number;
+  offset: number;
+  valueChanges: ValueChange[];
+  contextMenuData: ContextMenuItemData[];
+  contextMenuHeader: string;
+  uiLocked: boolean;
+}>();
+
+const emit = defineEmits<{
+  valueChangeClick: [event: MouseEvent, valueChange: ValueChange | null];
+  contextMenuHide: [];
+}>();
+
+const height = ref(props.height ?? 40);
+const valueChangeTextPadding = 4;
+const contextMenu = ref<InstanceType<typeof ContextMenu> | null>(null);
+const log = createLogger("ValueChangesLane");
+
+// レーンのリサイズ監視
+const valueChangesLane = useTemplateRef<HTMLDivElement>("valueChangesLane");
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  const element = valueChangesLane.value;
+  if (!element) {
+    throw new Error("valueChangesLane element is null.");
+  }
+  resizeObserver = new ResizeObserver((entries) => {
+    let blockSize = 0;
+    for (const entry of entries) {
+      for (const borderBoxSize of entry.borderBoxSize) {
+        blockSize = borderBoxSize.blockSize;
+      }
+    }
+    if (blockSize > 0 && blockSize !== height.value) {
+      height.value = blockSize;
+    }
+  });
+  resizeObserver.observe(element);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+// フォントスタイルの取得
+const valueChangeText = useTemplateRef<SVGTextElement[]>("valueChangeText");
+const valueChangeTextStyle = computed<FontSpecification | null>(() => {
+  if (!valueChangeText.value || valueChangeText.value.length === 0) {
+    return null;
+  }
+  // NOTE: フォントの変更に対応していないが、基本的にフォントが変更されることは少ないので、
+  // 複雑性を下げるためにも対応しない
+  const style = window.getComputedStyle(valueChangeText.value[0]);
+  return {
+    fontFamily: style.fontFamily,
+    fontSize: parseFloat(style.fontSize),
+    fontWeight: style.fontWeight,
+  };
+});
+
+// 表示用のValueChanges（テキスト幅や位置を表示用に考慮）
+// TODO: 良い型があれば修正したい
+type DisplayValueChange = {
+  position: number;
+  x: number;
+  displayText: string;
+  original: ValueChange;
+};
+
+// 表示用のテンポ・拍子
+const displayValueChanges = computed<DisplayValueChange[]>(() => {
+  const result: DisplayValueChange[] = props.valueChanges.map(
+    (valueChange) => ({
+      position: valueChange.position,
+      x: valueChange.x,
+      displayText: valueChange.text,
+      original: valueChange,
+    }),
+  );
+
+  // フォントスタイルが取得できている場合のみテキスト幅の計算を行う
+  if (valueChangeTextStyle.value) {
+    // NOTE: テキストの幅を計算して、表示できるかどうかを判定する
+    //   full: 通常表示（120 4/4）
+    //   ellipsis: fullが入りきらないときに表示する（...）
+    //   hidden: ellipsisも入りきらないときに表示する
+    const collapsedTextWidth =
+      predictTextWidth("...", valueChangeTextStyle.value) +
+      valueChangeTextPadding * 2;
+
+    for (const [i, item] of result.entries()) {
+      const next = result.at(i + 1);
+      if (!next) continue;
+
+      const requiredWidth =
+        predictTextWidth(item.displayText, valueChangeTextStyle.value) +
+        valueChangeTextPadding * 2;
+      const width = next.x - item.x;
+
+      if (collapsedTextWidth > width) {
+        item.displayText = "";
+      } else if (requiredWidth > width) {
+        item.displayText = "...";
+      }
+    }
+  } else {
+    log.warn("valueChangeTextElement is null. Cannot calculate text width.");
+  }
+
+  return result;
+});
+
+const onLaneContextMenu = (event: MouseEvent) => {
+  emit("valueChangeClick", event, null);
+  contextMenu.value?.show(event);
+};
+
+const onValueClick = (event: MouseEvent, valueChange: ValueChange) => {
+  emit("valueChangeClick", event, valueChange);
+  contextMenu.value?.show(event);
+};
+</script>
+
+<style scoped lang="scss">
+.value-changes-lane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.value-changes-lane-svg {
+  pointer-events: auto;
+}
+
+.value-changes-lane-item {
+  pointer-events: none;
+}
+
+.value-changes-lane-value-change {
+  font-weight: 700;
+  fill: var(--scheme-color-on-surface-variant);
+  pointer-events: auto;
+  cursor: pointer;
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+.value-changes-lane-value-change-line {
+  backface-visibility: hidden;
+  stroke: var(--scheme-color-on-surface-variant);
+  stroke-width: 1px;
+  pointer-events: none;
+}
+
+.value-changes-lane-value-change-hitbox {
+  pointer-events: all;
+}
+</style>
diff --git a/src/components/Sing/SequencerRuler/index.stories.ts b/src/components/Sing/SequencerRuler/index.stories.ts
index 9eaef47d25..73673d0ac8 100644
--- a/src/components/Sing/SequencerRuler/index.stories.ts
+++ b/src/components/Sing/SequencerRuler/index.stories.ts
@@ -1,34 +1,57 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { fn, expect, Mock } from "@storybook/test";
-import { ref } from "vue";
-
+import { ref, computed } from "vue";
 import Presentation from "./Presentation.vue";
-import { UnreachableError } from "@/type/utility";
+import GridLaneContainer from "./GridLane/Container.vue";
+import ValueChangesLaneContainer from "./ValueChangesLane/Container.vue";
+import LoopLaneContainer from "./LoopLane/Container.vue";
+
 import { ZOOM_X_MIN, ZOOM_X_MAX, ZOOM_X_STEP } from "@/sing/viewHelper";
+import { UnreachableError } from "@/type/utility";
+import { useSequencerRuler } from "@/composables/useSequencerRuler";
+import { Tempo, TimeSignature } from "@/store/type";
+import { useStore } from "@/store";
 
-const meta: Meta<typeof Presentation> = {
+const meta = {
+  title: "Components/Sing/SequencerRuler",
   component: Presentation,
-  args: {
-    tempos: [
-      {
-        bpm: 120,
-        position: 0,
+  // NOTE: 混合コンポーネントのため実際のstoreをデコレーター経由で利用している
+  // 本来はPresentationのみのテストにすべきかもしれない
+  decorators: [
+    (story, context) => ({
+      components: { story },
+      setup() {
+        // テンポや拍子の変更をエミュレートするため各storyのargsをstoreに設定する
+        const store = useStore();
+        if (context.args.tempos) {
+          store.commit("SET_TEMPOS", {
+            tempos: context.args.tempos as Tempo[],
+          });
+        }
+        if (context.args.timeSignatures) {
+          store.commit("SET_TIME_SIGNATURES", {
+            timeSignatures: context.args.timeSignatures as TimeSignature[],
+          });
+        }
+        return {};
       },
-    ],
+      template: `<story />`,
+    }),
+  ],
+  args: {
+    width: 1000,
+    numMeasures: 32,
+    offset: 0,
+    tempos: [{ bpm: 120, position: 0 }] as Tempo[],
     timeSignatures: [
-      {
-        beats: 4,
-        beatType: 4,
-        measureNumber: 1,
-      },
-    ],
-    sequencerZoomX: 0.25,
+      { beats: 4, beatType: 4, measureNumber: 1 },
+    ] as TimeSignature[],
     tpqn: 480,
-    offset: 0,
-    numMeasures: 32,
+    sequencerZoomX: 0.25,
     sequencerSnapType: 16,
     uiLocked: false,
-    "onUpdate:playheadTicks": fn<(value: number) => void>(),
+    playheadX: 0,
+    "onUpdate:playheadTicks": fn(),
     onDeselectAllNotes: fn(),
   },
   argTypes: {
@@ -42,14 +65,67 @@ const meta: Meta<typeof Presentation> = {
     },
   },
   render: (args) => ({
-    components: { Presentation },
+    components: {
+      Presentation,
+      GridLaneContainer,
+      ValueChangesLaneContainer,
+      LoopLaneContainer,
+    },
     setup() {
       const playheadTicks = ref(0);
-      return { args, playheadTicks };
+      const { width, playheadX, getSnappedTickFromOffsetX } = useSequencerRuler(
+        {
+          offset: computed(() => args.offset as number),
+          numMeasures: computed(() => args.numMeasures as number),
+          tpqn: computed(() => args.tpqn as number),
+          timeSignatures: computed(
+            () => args.timeSignatures as TimeSignature[],
+          ),
+          sequencerZoomX: computed(() => args.sequencerZoomX as number),
+          playheadTicks: computed(() => playheadTicks.value),
+          sequencerSnapType: computed(() => args.sequencerSnapType as number),
+        },
+      );
+
+      return {
+        args,
+        playheadTicks,
+        width,
+        playheadX,
+        getSnappedTickFromOffsetX,
+      };
     },
-    template: `<Presentation v-bind="args" v-model:playheadTicks="playheadTicks" />`,
+    template: `
+      <Presentation
+        v-bind="args"
+        :width="width"
+        :playheadX="playheadX"
+        :getSnappedTickFromOffsetX="getSnappedTickFromOffsetX"
+        v-model:playheadTicks="playheadTicks"
+      >
+        <template #grid>
+          <GridLaneContainer
+            :numMeasures="args.numMeasures"
+            :offset="args.offset"
+          />
+        </template>
+        <template #changes>
+          <ValueChangesLaneContainer
+            :offset="args.offset"
+            :numMeasures="args.numMeasures"
+            @setPlayheadPosition="(ticks) => playheadTicks = ticks"
+          />
+        </template>
+        <template #loop>
+          <LoopLaneContainer
+            :offset="args.offset"
+            :numMeasures="args.numMeasures"
+          />
+        </template>
+      </Presentation>
+    `,
   }),
-};
+} satisfies Meta<typeof Presentation>;
 
 export default meta;
 type Story = StoryObj<typeof Presentation>;
diff --git a/src/components/Sing/ToolBar/ToolBar.vue b/src/components/Sing/ToolBar/ToolBar.vue
index 507a935ff3..d4d4be3035 100644
--- a/src/components/Sing/ToolBar/ToolBar.vue
+++ b/src/components/Sing/ToolBar/ToolBar.vue
@@ -113,6 +113,15 @@
         icon="stop"
         @click="stop"
       />
+      <QBtn
+        flat
+        round
+        size="sm"
+        class="sing-playback-button sing-playback-loop"
+        :class="{ 'sing-playback-loop-enabled': isLoopEnabled }"
+        icon="loop"
+        @click="toggleLoop"
+      />
       <PlayheadPositionDisplay class="sing-playhead-position" />
     </div>
     <!-- settings for edit controls -->
@@ -412,6 +421,12 @@ const goToZero = () => {
   void store.actions.SET_PLAYHEAD_POSITION({ position: 0 });
 };
 
+const isLoopEnabled = computed(() => store.state.isLoopEnabled);
+
+const toggleLoop = () => {
+  void store.actions.SET_LOOP_ENABLED({ isLoopEnabled: !isLoopEnabled.value });
+};
+
 const volume = computed({
   get() {
     return store.state.volume * 100;
@@ -688,6 +703,17 @@ const snapTypeSelectModel = computed({
   }
 }
 
+.sing-playback-loop {
+  margin-left: 8px;
+  color: var(--scheme-color-on-surface-variant);
+  background: transparent;
+
+  &-enabled {
+    color: var(--scheme-color-primary);
+    background: var(--scheme-color-secondary-container);
+  }
+}
+
 .sing-playhead-position {
   margin-left: 16px;
 }
diff --git a/src/composables/useSequencerRuler.ts b/src/composables/useSequencerRuler.ts
new file mode 100644
index 0000000000..2501171446
--- /dev/null
+++ b/src/composables/useSequencerRuler.ts
@@ -0,0 +1,85 @@
+import { computed, ComputedRef } from "vue";
+import { TimeSignature } from "@/store/type";
+import {
+  getTimeSignaturePositions,
+  getMeasureDuration,
+  snapTicksToGrid,
+} from "@/sing/domain";
+import { tickToBaseX, baseXToTick } from "@/sing/viewHelper";
+
+/**
+ * シーケンサのルーラーに関わる計算ロジックをまとめたコンポーザブル。
+ * storeに依存させず、計算に必要なパラメータはすべて外部から受け取る想定。
+ */
+export const useSequencerRuler = (params: {
+  offset: ComputedRef<number>;
+  numMeasures: ComputedRef<number>;
+  tpqn: ComputedRef<number>;
+  timeSignatures: ComputedRef<TimeSignature[]>;
+  sequencerZoomX: ComputedRef<number>;
+  playheadTicks: ComputedRef<number>;
+  sequencerSnapType: ComputedRef<number>;
+}) => {
+  // 拍子ごとのTick位置
+  const tsPositions = computed(() => {
+    return getTimeSignaturePositions(
+      params.timeSignatures.value,
+      params.tpqn.value,
+    );
+  });
+
+  // 終了tick位置
+  const endTicks = computed(() => {
+    const tsList = params.timeSignatures.value;
+    if (tsList.length === 0) return 0;
+    const lastTs = tsList[tsList.length - 1];
+    const positions = tsPositions.value;
+    const lastTsPosition = positions[positions.length - 1];
+    const measureDuration = getMeasureDuration(
+      lastTs.beats,
+      lastTs.beatType,
+      params.tpqn.value,
+    );
+    return (
+      lastTsPosition +
+      measureDuration * (params.numMeasures.value - lastTs.measureNumber + 1)
+    );
+  });
+
+  // ルーラーの幅(px)
+  const width = computed(() => {
+    return (
+      tickToBaseX(endTicks.value, params.tpqn.value) *
+      params.sequencerZoomX.value
+    );
+  });
+
+  // 再生ヘッドのX位置(px)
+  const playheadX = computed(() => {
+    return Math.floor(
+      tickToBaseX(params.playheadTicks.value, params.tpqn.value) *
+        params.sequencerZoomX.value,
+    );
+  });
+
+  /**
+   * 任意のクリック位置(offsetX)から、スナップされたTickを返す
+   */
+  const getSnappedTickFromOffsetX = (offsetX: number) => {
+    const baseX = (params.offset.value + offsetX) / params.sequencerZoomX.value;
+    const baseTick = baseXToTick(baseX, params.tpqn.value);
+    return snapTicksToGrid(
+      baseTick,
+      params.timeSignatures.value,
+      params.tpqn.value,
+    );
+  };
+
+  return {
+    tsPositions,
+    endTicks,
+    width,
+    playheadX,
+    getSnappedTickFromOffsetX,
+  };
+};
diff --git a/src/domain/project/schema.ts b/src/domain/project/schema.ts
index eba32d5989..bcbe1a6f1c 100644
--- a/src/domain/project/schema.ts
+++ b/src/domain/project/schema.ts
@@ -99,6 +99,12 @@ export const trackSchema = z.object({
   pan: z.number(),
 });
 
+export const loopSchema = z.object({
+  startTick: z.number(), // ループ開始ティック
+  endTick: z.number(), // ループ終了ティック
+  isLoopEnabled: z.boolean(),
+});
+
 // プロジェクトファイルのスキーマ
 export const projectSchema = z.object({
   appVersion: z.string(),
@@ -114,6 +120,7 @@ export const projectSchema = z.object({
     timeSignatures: z.array(timeSignatureSchema),
     tracks: z.record(trackIdSchema, trackSchema),
     trackOrder: z.array(trackIdSchema),
+    loop: loopSchema.optional(),
   }),
 });
 
diff --git a/src/sing/audioRendering.ts b/src/sing/audioRendering.ts
index c96ef4d531..911ed36b5f 100644
--- a/src/sing/audioRendering.ts
+++ b/src/sing/audioRendering.ts
@@ -56,6 +56,10 @@ interface EventScheduler {
  * 再生、停止、再生位置の変更などの機能を提供します。
  */
 export class Transport {
+  loop = false;
+  loopStartTime = 0;
+  loopEndTime = 0;
+
   private readonly audioContext: AudioContext;
   private readonly timer: Timer;
   private readonly scheduleAheadTime: number;
@@ -67,6 +71,12 @@ export class Transport {
   private startContextTime = 0;
   private startTime = 0;
   private schedulers = new Map<Sequence, EventScheduler>();
+  private scheduledContextTime = 0;
+  private uncompletedLoopInfos: {
+    readonly contextTime: number;
+    readonly timeBeforeLoop: number;
+    readonly timeAfterLoop: number;
+  }[] = [];
 
   get state() {
     return this._state;
@@ -77,10 +87,8 @@ export class Transport {
    */
   get time() {
     if (this._state === "started") {
-      // 再生中の場合は、現在時刻から再生位置を計算する
       const contextTime = this.audioContext.currentTime;
-      const elapsedTime = contextTime - this.startContextTime;
-      this._time = this.startTime + elapsedTime;
+      this._time = this.calcTime(contextTime);
     }
     return this._time;
   }
@@ -113,13 +121,38 @@ export class Transport {
     this.audioContext = audioContext;
     this.scheduleAheadTime = scheduleAheadTime;
     this.timer = new Timer(lookahead * 1000);
+
     this.timer.start(() => {
       if (this._state === "started") {
-        this.schedule(this.audioContext.currentTime);
+        this.scheduleEvents(this.audioContext.currentTime);
       }
     });
   }
 
+  /**
+   * 再生位置を計算します。再生中にのみ使用可能です。
+   * @param contextTime コンテキスト時刻（この時刻から再生位置を計算）
+   * @returns 計算された再生位置（秒）
+   */
+  private calcTime(contextTime: number) {
+    if (this._state !== "started") {
+      throw new Error("This method can only be used during playback.");
+    }
+    if (contextTime >= this.startContextTime) {
+      const elapsedTime = contextTime - this.startContextTime;
+      return this.startTime + elapsedTime;
+    }
+    while (this.uncompletedLoopInfos.length !== 0) {
+      const loopInfo = this.uncompletedLoopInfos[0];
+      if (contextTime < loopInfo.contextTime) {
+        const timeUntilLoop = loopInfo.contextTime - contextTime;
+        return loopInfo.timeBeforeLoop - timeUntilLoop;
+      }
+      this.uncompletedLoopInfos.shift();
+    }
+    throw new Error("Loop events are not scheduled correctly.");
+  }
+
   /**
    * スケジューラーを作成します。
    * @param sequence スケジューラーでスケジューリングを行うシーケンス
@@ -138,13 +171,15 @@ export class Transport {
   }
 
   /**
-   * スケジューリングを行います。
+   * シーケンスのイベントのスケジューリングを行います。
    * @param contextTime スケジューリングを行う時刻（コンテキスト時刻）
    */
-  private schedule(contextTime: number) {
-    // 再生位置を計算
-    const elapsedTime = contextTime - this.startContextTime;
-    const time = this.startTime + elapsedTime;
+  private scheduleSequenceEvents(contextTime: number) {
+    if (contextTime < this.startContextTime) {
+      // NOTE: ループ未完了の場合にここに来る
+      return;
+    }
+    const time = this.calcTime(contextTime);
 
     // シーケンスの削除を反映
     const removedSequences: Sequence[] = [];
@@ -167,11 +202,73 @@ export class Transport {
       }
     });
 
+    // スケジューリングを行う
     this.schedulers.forEach((scheduler) => {
       scheduler.schedule(time + this.scheduleAheadTime);
     });
   }
 
+  /**
+   * ループイベントのスケジューリングを行います。
+   * @param contextTime スケジューリングを行う時刻（コンテキスト時刻）
+   */
+  private scheduleLoopEvents(contextTime: number) {
+    if (
+      !this.loop ||
+      this.loopEndTime <= this.loopStartTime ||
+      this.startTime >= this.loopEndTime
+    ) {
+      return;
+    }
+
+    const timeUntilLoop = this.loopEndTime - this.startTime;
+    let contextTimeToLoop = this.startContextTime + timeUntilLoop;
+    if (contextTimeToLoop < this.scheduledContextTime) {
+      return;
+    }
+    if (contextTimeToLoop < contextTime) {
+      contextTimeToLoop = contextTime;
+    }
+
+    const loopDuration = this.loopEndTime - this.loopStartTime;
+
+    while (contextTimeToLoop < contextTime + this.scheduleAheadTime) {
+      this.uncompletedLoopInfos.push({
+        contextTime: contextTimeToLoop,
+        timeBeforeLoop: this.loopEndTime,
+        timeAfterLoop: this.loopStartTime,
+      });
+
+      this.startContextTime = contextTimeToLoop;
+      this.startTime = this.loopStartTime;
+
+      this.schedulers.forEach((value) => {
+        value.stop(contextTimeToLoop);
+      });
+      this.schedulers.clear();
+
+      this.sequences.forEach((sequence) => {
+        const scheduler = this.createScheduler(sequence);
+        scheduler.start(contextTimeToLoop, this.loopStartTime);
+        scheduler.schedule(this.loopStartTime + this.scheduleAheadTime);
+        this.schedulers.set(sequence, scheduler);
+      });
+
+      contextTimeToLoop += loopDuration;
+    }
+  }
+
+  /**
+   * イベントのスケジューリングを行います。
+   * @param contextTime スケジューリングを行う時刻（コンテキスト時刻）
+   */
+  private scheduleEvents(contextTime: number) {
+    this.scheduleSequenceEvents(contextTime);
+    this.scheduleLoopEvents(contextTime);
+
+    this.scheduledContextTime = contextTime + this.scheduleAheadTime;
+  }
+
   /**
    * シーケンスを追加します。再生中に追加した場合は、次のスケジューリングで反映されます。
    * @param sequence 追加するシーケンス
@@ -205,8 +302,10 @@ export class Transport {
 
     this.startContextTime = contextTime;
     this.startTime = this._time;
+    this.scheduledContextTime = contextTime;
+    this.uncompletedLoopInfos = [];
 
-    this.schedule(contextTime);
+    this.scheduleEvents(contextTime);
   }
 
   /**
@@ -217,8 +316,7 @@ export class Transport {
     const contextTime = this.audioContext.currentTime;
 
     // 停止する前に再生位置を更新する
-    const elapsedTime = contextTime - this.startContextTime;
-    this._time = this.startTime + elapsedTime;
+    this._time = this.calcTime(contextTime);
 
     this._state = "stopped";
 
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index bbd4482977..977f660cc0 100644
--- a/src/sing/domain.ts
+++ b/src/sing/domain.ts
@@ -1021,7 +1021,52 @@ export const shouldPlayTracks = (tracks: Map<TrackId, Track>): Set<TrackId> => {
 
 /**
  * 指定されたティックを直近のグリッドに合わせる
+ * @param ticks スナップ対象のtick位置
+ * @param timeSignatures 拍子情報の配列
+ * @param tpqn TPQNの値
+ * @returns スナップ後のtick位置
  */
-export function snapTicksToGrid(ticks: number, snapTicks: number): number {
-  return Math.round(ticks / snapTicks) * snapTicks;
+export function snapTicksToGrid(
+  ticks: number,
+  timeSignatures: TimeSignature[],
+  tpqn: number,
+): number {
+  const tsPositions = getTimeSignaturePositions(timeSignatures, tpqn);
+  const nextTsIndex = tsPositions.findIndex((pos) => pos > ticks);
+  const currentTsIndex =
+    nextTsIndex === -1 ? tsPositions.length - 1 : nextTsIndex - 1;
+  const currentTs = timeSignatures[currentTsIndex];
+
+  // 現在の拍子に基づくグリッドサイズを計算
+  const gridSize = getBeatDuration(currentTs.beatType, tpqn);
+
+  // 拍子の開始位置からの相対位置を計算
+  const tsPosition = tsPositions[currentTsIndex];
+  const relativePosition = ticks - tsPosition;
+
+  // グリッドにスナップ
+  const snappedRelativePosition =
+    Math.round(relativePosition / gridSize) * gridSize;
+
+  return tsPosition + snappedRelativePosition;
 }
+
+/*
+ * ループ範囲が有効かどうかを判定する
+ * @param startTick ループ開始位置(tick)
+ * @param endTick ループ終了位置(tick)
+ * @returns ループ範囲が有効な場合はtrue
+ */
+export const isValidLoopRange = (
+  startTick: number,
+  endTick: number,
+): boolean => {
+  return (
+    // 負の値は許容しない
+    startTick >= 0 &&
+    endTick >= 0 &&
+    // 整数である必要がある
+    Number.isInteger(startTick) &&
+    Number.isInteger(endTick)
+  );
+};
diff --git a/src/store/project.ts b/src/store/project.ts
index 3e5a0862d4..579dbc6b0a 100755
--- a/src/store/project.ts
+++ b/src/store/project.ts
@@ -59,7 +59,8 @@ const applySongProjectToStore = async (
   actions: DotNotationDispatch<AllActions>,
   songProject: LatestProjectType["song"],
 ) => {
-  const { tpqn, tempos, timeSignatures, tracks, trackOrder } = songProject;
+  const { tpqn, tempos, timeSignatures, tracks, trackOrder, loop } =
+    songProject;
 
   await actions.SET_TPQN({ tpqn });
   await actions.SET_TEMPOS({ tempos });
@@ -73,6 +74,16 @@ const applySongProjectToStore = async (
       }),
     ),
   });
+
+  // ループ情報を設定（ない場合はデフォルト値を使用）
+  // TODO: オプショナルチェインを避けたい(プロジェクト関連の仕様がよくわかっていない)
+  await actions.SET_LOOP_ENABLED({
+    isLoopEnabled: loop?.isLoopEnabled ?? false,
+  });
+  await actions.SET_LOOP_RANGE({
+    loopStartTick: loop?.startTick ?? 0,
+    loopEndTick: loop?.endTick ?? 0,
+  });
 };
 
 export const projectStore = createPartialStore<ProjectStoreTypes>({
@@ -295,6 +306,9 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
             timeSignatures,
             tracks,
             trackOrder,
+            isLoopEnabled,
+            loopStartTick,
+            loopEndTick,
           } = context.state;
           const projectData: LatestProjectType = {
             appVersion: appInfos.version,
@@ -308,6 +322,11 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
               timeSignatures,
               tracks: Object.fromEntries(tracks),
               trackOrder,
+              loop: {
+                isLoopEnabled,
+                startTick: loopStartTick,
+                endTick: loopEndTick,
+              },
             },
           };
 
diff --git a/src/store/singing.ts b/src/store/singing.ts
index 5df2810978..55db44ace5 100644
--- a/src/store/singing.ts
+++ b/src/store/singing.ts
@@ -93,6 +93,7 @@ import {
   toEntirePhonemeTimings,
   adjustPhonemeTimingsAndPhraseEndFrames,
   phonemeTimingsToPhonemes,
+  isValidLoopRange,
 } from "@/sing/domain";
 import { getOverlappingNoteIds } from "@/sing/storeHelper";
 import {
@@ -758,6 +759,9 @@ export const singingStoreState: SingingStoreState = {
   exportState: "NOT_EXPORTING",
   cancellationOfExportRequested: false,
   isSongSidebarOpen: false,
+  isLoopEnabled: false,
+  loopStartTick: 0,
+  loopEndTick: 0,
 };
 
 export const singingStore = createPartialStore<SingingStoreTypes>({
@@ -1488,6 +1492,21 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       }
       mutations.SET_PLAYBACK_STATE({ nowPlaying: true });
 
+      // TODO: 以下の処理（ループの設定）は再生開始時に毎回行う必要はないので、
+      //       ソングエディタ初期化時に1回だけ行うようにする
+      // NOTE: 初期化のactionを作った方が良いかも
+      transport.loop = state.isLoopEnabled;
+      transport.loopStartTime = tickToSecond(
+        state.loopStartTick,
+        state.tempos,
+        state.tpqn,
+      );
+      transport.loopEndTime = tickToSecond(
+        state.loopEndTick,
+        state.tempos,
+        state.tpqn,
+      );
+
       transport.start();
       animationTimer.start(() => {
         playheadPosition.value = getters.SECOND_TO_TICK(transport.time);
@@ -3448,6 +3467,54 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
+  SET_LOOP_ENABLED: {
+    mutation(state, { isLoopEnabled }) {
+      state.isLoopEnabled = isLoopEnabled;
+    },
+    async action({ mutations }, { isLoopEnabled }) {
+      if (!transport) {
+        throw new Error("transport is undefined");
+      }
+      mutations.SET_LOOP_ENABLED({ isLoopEnabled });
+      transport.loop = isLoopEnabled;
+    },
+  },
+
+  SET_LOOP_RANGE: {
+    mutation(state, { loopStartTick, loopEndTick }) {
+      state.loopStartTick = loopStartTick;
+      state.loopEndTick = loopEndTick;
+    },
+    async action({ state, mutations }, { loopStartTick, loopEndTick }) {
+      if (!transport) {
+        throw new Error("transport is undefined");
+      }
+
+      if (!isValidLoopRange(loopStartTick, loopEndTick)) {
+        throw new Error("The loop range is invalid.");
+      }
+
+      mutations.SET_LOOP_RANGE({ loopStartTick, loopEndTick });
+
+      transport.loopStartTime = tickToSecond(
+        loopStartTick,
+        state.tempos,
+        state.tpqn,
+      );
+      transport.loopEndTime = tickToSecond(
+        loopEndTick,
+        state.tempos,
+        state.tpqn,
+      );
+    },
+  },
+
+  CLEAR_LOOP_RANGE: {
+    action({ mutations }) {
+      mutations.SET_LOOP_RANGE({ loopStartTick: 0, loopEndTick: 0 });
+    },
+  },
+
   EXPORT_SONG_PROJECT: {
     action: createUILockAction(
       async (
@@ -4049,6 +4116,36 @@ export const singingCommandStore = transformCommandStore(
         },
       ),
     },
+    COMMAND_SET_LOOP_ENABLED: {
+      mutation(draft, { isLoopEnabled }) {
+        singingStore.mutations.SET_LOOP_ENABLED(draft, { isLoopEnabled });
+      },
+      action({ mutations }, { isLoopEnabled }) {
+        mutations.COMMAND_SET_LOOP_ENABLED({ isLoopEnabled });
+      },
+    },
+    COMMAND_SET_LOOP_RANGE: {
+      mutation(draft, { loopStartTick, loopEndTick }) {
+        singingStore.mutations.SET_LOOP_RANGE(draft, {
+          loopStartTick,
+          loopEndTick,
+        });
+      },
+      action({ mutations }, { loopStartTick, loopEndTick }) {
+        mutations.COMMAND_SET_LOOP_RANGE({ loopStartTick, loopEndTick });
+      },
+    },
+    COMMAND_CLEAR_LOOP_RANGE: {
+      mutation(draft) {
+        singingStore.mutations.SET_LOOP_RANGE(draft, {
+          loopStartTick: 0,
+          loopEndTick: 0,
+        });
+      },
+      action({ mutations }) {
+        mutations.COMMAND_CLEAR_LOOP_RANGE();
+      },
+    },
   }),
   "song",
 );
diff --git a/src/store/type.ts b/src/store/type.ts
index a57e243881..a6115340e9 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -70,6 +70,7 @@ import {
   tempoSchema,
   timeSignatureSchema,
   trackSchema,
+  loopSchema,
 } from "@/domain/project/schema";
 import { HotkeySettingType } from "@/domain/hotkeyAction";
 import {
@@ -760,6 +761,8 @@ export type Singer = z.infer<typeof singerSchema>;
 
 export type Track = z.infer<typeof trackSchema>;
 
+export type Loop = z.infer<typeof loopSchema>;
+
 export type PhraseState =
   | "SINGER_IS_NOT_SET"
   | "WAITING_TO_BE_RENDERED"
@@ -907,6 +910,9 @@ export type SingingStoreState = {
   exportState: SongExportState;
   cancellationOfExportRequested: boolean;
   isSongSidebarOpen: boolean;
+  isLoopEnabled: boolean;
+  loopStartTick: number;
+  loopEndTick: number;
 };
 
 export type SingingStoreTypes = {
@@ -1381,6 +1387,20 @@ export type SingingStoreTypes = {
     action(payload: { device: string }): void;
   };
 
+  SET_LOOP_ENABLED: {
+    mutation: { isLoopEnabled: boolean };
+    action(payload: { isLoopEnabled: boolean }): void;
+  };
+
+  SET_LOOP_RANGE: {
+    mutation: { loopStartTick: number; loopEndTick: number };
+    action(payload: { loopStartTick: number; loopEndTick: number }): void;
+  };
+
+  CLEAR_LOOP_RANGE: {
+    action(): void;
+  };
+
   EXPORT_SONG_PROJECT: {
     action(payload: {
       fileType: ExportSongProjectFileType;
@@ -1547,6 +1567,21 @@ export type SingingCommandStoreTypes = {
       trackIndexes: number[];
     }): void;
   };
+
+  COMMAND_SET_LOOP_ENABLED: {
+    mutation: { isLoopEnabled: boolean };
+    action(payload: { isLoopEnabled: boolean }): void;
+  };
+
+  COMMAND_SET_LOOP_RANGE: {
+    mutation: { loopStartTick: number; loopEndTick: number };
+    action(payload: { loopStartTick: number; loopEndTick: number }): void;
+  };
+
+  COMMAND_CLEAR_LOOP_RANGE: {
+    mutation: undefined;
+    action(): void;
+  };
 };
 
 /*
diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss
index abe056c97a..f72f2e771a 100644
--- a/src/styles/v2/variables.scss
+++ b/src/styles/v2/variables.scss
@@ -34,6 +34,9 @@ $z-index-sing-background: 0;
 $z-index-sing-note: 10;
 $z-index-sing-note-lyric: 20;
 $z-index-sing-pitch: 30;
-$z-index-sing-playhead: 40;
-$z-index-sing-tool-palette: 50;
-$z-index-sing-lyric-input: 60;
+$z-index-sing-loop-background: 35;
+$z-index-sing-loop-range: 40;
+$z-index-sing-loop-handle: 45;
+$z-index-sing-playhead: 50;
+$z-index-sing-tool-palette: 60;
+$z-index-sing-lyric-input: 70;
diff --git "a/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" "b/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png"
index 175e5c9728..35e8d149d8 100644
Binary files "a/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" and "b/tests/e2e/browser/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.ts-snapshots/\343\202\275\343\203\263\343\202\260\347\224\273\351\235\242-browser-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-dark-storybook-win32.png"
index d9bd5289d8..44931de703 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-dark-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-light-storybook-win32.png"
index 227b1735c0..f14c68042b 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-light-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--default-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-dark-storybook-win32.png"
index 4c92c33a0b..261f38c88c 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-dark-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-light-storybook-win32.png"
index 52168d3efa..c03023cc3a 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-light-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--dense-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-dark-storybook-win32.png"
index 70b2dfe918..1a2ef8568f 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-dark-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-light-storybook-win32.png"
index bededfc443..7dba1efef6 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-light-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-bpm-change-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-dark-storybook-win32.png"
index 85b09c1763..ac6efcacf6 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-dark-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-light-storybook-win32.png"
index d12cbfde46..36d0cca2b1 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-light-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-offset-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-dark-storybook-win32.png"
index a5510d4b5e..171815de5f 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-dark-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-light-storybook-win32.png"
index 32195209fe..42bdacf12b 100644
Binary files "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-light-storybook-win32.png" and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler--with-time-signature-change-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-dark-storybook-win32.png"
new file mode 100644
index 0000000000..d1d8a2f9f2
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-light-storybook-win32.png"
new file mode 100644
index 0000000000..e248b631c9
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--default-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-dark-storybook-win32.png"
new file mode 100644
index 0000000000..15daa53d8f
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-light-storybook-win32.png"
new file mode 100644
index 0000000000..ae697de2b2
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--disabled-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-dark-storybook-win32.png"
new file mode 100644
index 0000000000..ea5742e61b
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-light-storybook-win32.png"
new file mode 100644
index 0000000000..e990fb434a
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-disabled-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-dark-storybook-win32.png"
new file mode 100644
index 0000000000..be26a09401
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-light-storybook-win32.png"
new file mode 100644
index 0000000000..1d0def345c
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--dragging-enabled-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-dark-storybook-win32.png"
new file mode 100644
index 0000000000..218e36b35a
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-light-storybook-win32.png"
new file mode 100644
index 0000000000..798961d72f
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--empty-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-dark-storybook-win32.png"
new file mode 100644
index 0000000000..8c9b56de1a
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-light-storybook-win32.png"
new file mode 100644
index 0000000000..60313210c0
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--long-loop-light-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-dark-storybook-win32.png"
new file mode 100644
index 0000000000..ab992e2300
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-dark-storybook-win32.png" differ
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-light-storybook-win32.png"
new file mode 100644
index 0000000000..20040af0a4
Binary files /dev/null and "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencerruler-looplane--short-loop-light-storybook-win32.png" differ