diff --git a/src/components/Sing/PlayheadPositionDisplay.vue b/src/components/Sing/PlayheadPositionDisplay.vue
new file mode 100644
index 0000000000..42292df909
--- /dev/null
+++ b/src/components/Sing/PlayheadPositionDisplay.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div v-if="displayFormat === 'MINUTES_SECONDS'" class="playhead-position">
+      <div>{{ minAndSecStr }}</div>
+      <div class="millisec">.{{ milliSecStr }}</div>
+    </div>
+    <div v-if="displayFormat === 'MEASURES_BEATS'" class="playhead-position">
+      <div>{{ measuresStr }}.</div>
+      <div>{{ beatsIntegerPartStr }}</div>
+      <div class="beats-fractional-part">.{{ beatsFractionalPartStr }}</div>
+    </div>
+    <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useStore } from "@/store";
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu.vue";
+import {
+  getTimeSignaturePositions,
+  MeasuresBeats,
+  ticksToMeasuresBeats,
+} from "@/sing/domain";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
+
+const store = useStore();
+
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+const [displayFormat, setDisplayFormat] = useRootMiscSetting(
+  store,
+  "playheadPositionDisplayFormat",
+);
+
+const timeSignatures = computed(() => {
+  const tpqn = store.state.tpqn;
+  const timeSignatures = store.state.timeSignatures;
+  const tsPositions = getTimeSignaturePositions(timeSignatures, tpqn);
+  return timeSignatures.map((value, index) => ({
+    ...value,
+    position: tsPositions[index],
+  }));
+});
+
+const measuresBeats = computed((): MeasuresBeats => {
+  const tpqn = store.state.tpqn;
+  return ticksToMeasuresBeats(playheadTicks.value, timeSignatures.value, tpqn);
+});
+
+const measuresStr = computed(() => {
+  return measuresBeats.value.measures >= 0
+    ? String(measuresBeats.value.measures).padStart(3, "0")
+    : String(measuresBeats.value.measures);
+});
+
+const beatsIntegerPartStr = computed(() => {
+  const integerPart = Math.floor(measuresBeats.value.beats);
+  return String(integerPart).padStart(2, "0");
+});
+
+const beatsFractionalPartStr = computed(() => {
+  const integerPart = Math.floor(measuresBeats.value.beats);
+  const fractionalPart = Math.floor(
+    (measuresBeats.value.beats - integerPart) * 100,
+  );
+  return String(fractionalPart).padStart(2, "0");
+});
+
+const minAndSecStr = computed(() => {
+  const ticks = playheadTicks.value;
+  const time = store.getters.TICK_TO_SECOND(ticks);
+  const intTime = Math.trunc(time);
+  const min = Math.trunc(intTime / 60);
+  const minStr = String(min).padStart(2, "0");
+  const secStr = String(intTime - min * 60).padStart(2, "0");
+  return `${minStr}:${secStr}`;
+});
+
+const milliSecStr = computed(() => {
+  const ticks = playheadTicks.value;
+  const time = store.getters.TICK_TO_SECOND(ticks);
+  const intTime = Math.trunc(time);
+  const milliSec = Math.trunc((time - intTime) * 1000);
+  const milliSecStr = String(milliSec).padStart(3, "0");
+  return milliSecStr;
+});
+
+const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+const contextMenuData = computed<ContextMenuItemData[]>(() => {
+  return [
+    {
+      type: "button",
+      label: "分:秒",
+      disabled: displayFormat.value === "MINUTES_SECONDS",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MINUTES_SECONDS");
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "小節.拍",
+      disabled: displayFormat.value === "MEASURES_BEATS",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MEASURES_BEATS");
+      },
+      disableWhenUiLocked: false,
+    },
+  ];
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/colors" as colors;
+
+.playhead-position {
+  align-items: center;
+  display: flex;
+  font-weight: 700;
+  font-size: 28px;
+  color: var(--scheme-color-on-surface);
+}
+
+.millisec {
+  font-size: 16px;
+  margin: 10px 0 0 2px;
+}
+
+.beats-fractional-part {
+  font-size: 16px;
+  margin: 10px 0 0 2px;
+}
+</style>
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 31ccc6ccb4..f814b1549b 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -325,7 +325,7 @@ const scrollX = ref(0);
 const scrollY = ref(0);
 
 // 再生ヘッドの位置
-const playheadTicks = ref(0);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 const playheadX = computed(() => {
   const baseX = tickToBaseX(playheadTicks.value, tpqn.value);
   return Math.floor(baseX * zoomX.value);
@@ -1316,10 +1316,8 @@ const onScroll = (event: Event) => {
   }
 };
 
-const playheadPositionChangeListener = (position: number) => {
-  playheadTicks.value = position;
-
-  // オートスクロール
+// オートスクロール
+watch(playheadTicks, (newPlayheadPosition) => {
   const sequencerBodyElement = sequencerBody.value;
   if (!sequencerBodyElement) {
     if (import.meta.env.DEV) {
@@ -1335,7 +1333,7 @@ const playheadPositionChangeListener = (position: number) => {
   const scrollTop = sequencerBodyElement.scrollTop;
   const scrollWidth = sequencerBodyElement.scrollWidth;
   const clientWidth = sequencerBodyElement.clientWidth;
-  const playheadX = tickToBaseX(position, tpqn.value) * zoomX.value;
+  const playheadX = tickToBaseX(newPlayheadPosition, tpqn.value) * zoomX.value;
   const tolerance = 3;
   if (playheadX < scrollLeft) {
     sequencerBodyElement.scrollTo(playheadX, scrollTop);
@@ -1345,7 +1343,7 @@ const playheadPositionChangeListener = (position: number) => {
   ) {
     sequencerBodyElement.scrollTo(playheadX, scrollTop);
   }
-};
+});
 
 // スクロールバーの幅を取得する
 onMounted(() => {
@@ -1392,10 +1390,6 @@ onActivated(() => {
 
 // リスナー登録
 onActivated(() => {
-  void store.actions.ADD_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-
   document.addEventListener("keydown", handleKeydown);
   window.addEventListener("mousemove", onMouseMove);
   window.addEventListener("mouseup", onMouseUp);
@@ -1403,10 +1397,6 @@ onActivated(() => {
 
 // リスナー解除
 onDeactivated(() => {
-  void store.actions.REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-
   document.removeEventListener("keydown", handleKeydown);
   window.removeEventListener("mousemove", onMouseMove);
   window.removeEventListener("mouseup", onMouseUp);
diff --git a/src/components/Sing/SequencerRuler/Container.vue b/src/components/Sing/SequencerRuler/Container.vue
index 8ffcdcfb96..94ebdc6c41 100644
--- a/src/components/Sing/SequencerRuler/Container.vue
+++ b/src/components/Sing/SequencerRuler/Container.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed } from "vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
 
@@ -36,27 +36,12 @@ const tpqn = computed(() => store.state.tpqn);
 const timeSignatures = computed(() => store.state.timeSignatures);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
 
-const playheadTicks = ref(0);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 
 const updatePlayheadTicks = (ticks: number) => {
   void store.actions.SET_PLAYHEAD_POSITION({ position: ticks });
 };
 
-const playheadPositionChangeListener = (position: number) => {
-  playheadTicks.value = position;
-};
-
-onMounted(() => {
-  void store.actions.ADD_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-});
-onUnmounted(() => {
-  void store.actions.REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-});
-
 const deselectAllNotes = () => {
   void store.actions.DESELECT_ALL_NOTES();
 };
diff --git a/src/components/Sing/ToolBar/ToolBar.vue b/src/components/Sing/ToolBar/ToolBar.vue
index c416531aec..65ebb5f09b 100644
--- a/src/components/Sing/ToolBar/ToolBar.vue
+++ b/src/components/Sing/ToolBar/ToolBar.vue
@@ -113,12 +113,7 @@
         icon="stop"
         @click="stop"
       />
-      <div class="sing-playhead-position">
-        <div>{{ playheadPositionMinSecStr }}</div>
-        <div class="sing-playhead-position-millisec">
-          .{{ playHeadPositionMilliSecStr }}
-        </div>
-      </div>
+      <PlayheadPositionDisplay class="sing-playhead-position" />
     </div>
     <!-- settings for edit controls -->
     <div class="sing-controls">
@@ -164,7 +159,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, onMounted, onUnmounted } from "vue";
+import { computed, watch, ref } from "vue";
+import PlayheadPositionDisplay from "../PlayheadPositionDisplay.vue";
 import EditTargetSwicher from "./EditTargetSwicher.vue";
 import { useStore } from "@/store";
 
@@ -383,30 +379,6 @@ const setVolumeRangeAdjustment = () => {
   });
 };
 
-const playheadTicks = ref(0);
-
-/// 再生時間の分と秒
-const playheadPositionMinSecStr = computed(() => {
-  const ticks = playheadTicks.value;
-  const time = store.getters.TICK_TO_SECOND(ticks);
-
-  const intTime = Math.trunc(time);
-  const min = Math.trunc(intTime / 60);
-  const minStr = String(min).padStart(2, "0");
-  const secStr = String(intTime - min * 60).padStart(2, "0");
-
-  return `${minStr}:${secStr}`;
-});
-
-const playHeadPositionMilliSecStr = computed(() => {
-  const ticks = playheadTicks.value;
-  const time = store.getters.TICK_TO_SECOND(ticks);
-  const intTime = Math.trunc(time);
-  const milliSec = Math.trunc((time - intTime) * 1000);
-  const milliSecStr = String(milliSec).padStart(3, "0");
-  return milliSecStr;
-});
-
 const nowPlaying = computed(() => store.state.nowPlaying);
 
 const play = () => {
@@ -463,22 +435,6 @@ const snapTypeSelectModel = computed({
     });
   },
 });
-
-const playheadPositionChangeListener = (position: number) => {
-  playheadTicks.value = position;
-};
-
-onMounted(() => {
-  void store.actions.ADD_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-});
-
-onUnmounted(() => {
-  void store.actions.REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER({
-    listener: playheadPositionChangeListener,
-  });
-});
 </script>
 
 <style scoped lang="scss">
@@ -714,19 +670,7 @@ onUnmounted(() => {
 }
 
 .sing-playhead-position {
-  align-items: center;
-  display: flex;
-  font-size: 28px;
-  font-weight: 700;
   margin-left: 16px;
-  color: var(--scheme-color-on-surface);
-}
-
-.sing-playhead-position-millisec {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 10px 0 0 2px;
-  color: var(--scheme-color-on-surface);
 }
 
 .sing-controls {
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index 9acfef90c6..95d12ab1e7 100644
--- a/src/sing/domain.ts
+++ b/src/sing/domain.ts
@@ -13,6 +13,12 @@ import {
 import { FramePhoneme } from "@/openapi";
 import { TrackId } from "@/type/preload";
 
+// TODO: 後でdomain/type.tsに移す
+export type MeasuresBeats = {
+  measures: number;
+  beats: number;
+};
+
 const BEAT_TYPES = [2, 4, 8, 16];
 const MIN_BPM = 40;
 const MAX_SNAP_TYPE = 32;
@@ -23,7 +29,7 @@ export const isTracksEmpty = (tracks: Track[]) =>
 export const isValidTpqn = (tpqn: number) => {
   return (
     Number.isInteger(tpqn) &&
-    BEAT_TYPES.every((value) => tpqn % value === 0) &&
+    BEAT_TYPES.every((value) => (tpqn * 4) % value === 0) &&
     tpqn % 3 === 0
   );
 };
@@ -210,10 +216,46 @@ export function getMeasureDuration(
   beatType: number,
   tpqn: number,
 ) {
-  const wholeNoteDuration = tpqn * 4;
-  return (wholeNoteDuration / beatType) * beats;
+  return ((tpqn * 4) / beatType) * beats;
 }
 
+// NOTE: 戻り値の単位はtick
+export function getBeatDuration(beatType: number, tpqn: number) {
+  return (tpqn * 4) / beatType;
+}
+
+export const ticksToMeasuresBeats = (
+  ticks: number,
+  timeSignatures: (TimeSignature & { position: number })[],
+  tpqn: number,
+): MeasuresBeats => {
+  let tsIndex = 0;
+  if (ticks >= 0) {
+    for (let i = 0; i < timeSignatures.length; i++) {
+      if (
+        i === timeSignatures.length - 1 ||
+        timeSignatures[i + 1].position > ticks
+      ) {
+        tsIndex = i;
+        break;
+      }
+    }
+  }
+  const ts = timeSignatures[tsIndex];
+
+  const measureDuration = getMeasureDuration(ts.beats, ts.beatType, tpqn);
+  const beatDuration = getBeatDuration(ts.beatType, tpqn);
+
+  const posInTs = ticks - ts.position;
+  const measuresInTs = Math.floor(posInTs / measureDuration);
+  const measures = ts.measureNumber + measuresInTs;
+
+  const posInMeasure = posInTs - measureDuration * measuresInTs;
+  const beats = 1 + posInMeasure / beatDuration;
+
+  return { measures, beats };
+};
+
 export function getNumMeasures(
   notes: Note[],
   tempos: Tempo[],
diff --git a/src/sing/storeHelper.ts b/src/sing/storeHelper.ts
index f8da1a76ee..b0e34a094c 100644
--- a/src/sing/storeHelper.ts
+++ b/src/sing/storeHelper.ts
@@ -1,45 +1,6 @@
 import { NoteId } from "@/type/preload";
 import { Note } from "@/store/type";
 
-/**
- * 頻繁に変更される値を保持します。
- * 値変更時に実行する関数を登録できます。
- */
-export class FrequentlyUpdatedState<T> {
-  private _value: T;
-  private listeners = new Set<(newValue: T) => void>();
-
-  get value() {
-    return this._value;
-  }
-
-  set value(newValue: T) {
-    this._value = newValue;
-    this.listeners.forEach((listener) => {
-      listener(newValue);
-    });
-  }
-
-  constructor(initialValue: T) {
-    this._value = initialValue;
-  }
-
-  addValueChangeListener(listener: (newValue: T) => void) {
-    if (this.listeners.has(listener)) {
-      throw new Error("The listener already exists.");
-    }
-    this.listeners.add(listener);
-    listener(this.value);
-  }
-
-  removeValueChangeListener(listener: (newValue: T) => void) {
-    if (!this.listeners.has(listener)) {
-      throw new Error("The listener does not exist.");
-    }
-    this.listeners.delete(listener);
-  }
-}
-
 export function getOverlappingNoteIds(notes: Note[]): Set<NoteId> {
   const events: {
     type: "start" | "end";
diff --git a/src/store/setting.ts b/src/store/setting.ts
index 4bc91cd74c..7567a96eb7 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -70,6 +70,7 @@ export const settingStoreState: SettingStoreState = {
     panAndGain: true,
   },
   showSingCharacterPortrait: true,
+  playheadPositionDisplayFormat: "MINUTES_SECONDS",
 };
 
 export const settingStore = createPartialStore<SettingStoreTypes>({
@@ -146,6 +147,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         "skipUpdateVersion",
         "undoableTrackOperations",
         "showSingCharacterPortrait",
+        "playheadPositionDisplayFormat",
       ] as const;
 
       // rootMiscSettingKeysに値を足し忘れていたときに型エラーを出す検出用コード
diff --git a/src/store/singing.ts b/src/store/singing.ts
index 050bc2add8..6512aa0349 100644
--- a/src/store/singing.ts
+++ b/src/store/singing.ts
@@ -1,5 +1,5 @@
 import path from "path";
-import { toRaw } from "vue";
+import { ref, toRaw } from "vue";
 import { createPartialStore } from "./vuex";
 import { createUILockAction } from "./ui";
 import {
@@ -85,10 +85,7 @@ import {
   isTracksEmpty,
   shouldPlayTracks,
 } from "@/sing/domain";
-import {
-  FrequentlyUpdatedState,
-  getOverlappingNoteIds,
-} from "@/sing/storeHelper";
+import { getOverlappingNoteIds } from "@/sing/storeHelper";
 import {
   AnimationTimer,
   createPromiseThatResolvesWhen,
@@ -254,7 +251,7 @@ if (window.AudioContext) {
   clipper.output.connect(audioContext.destination);
 }
 
-const playheadPosition = new FrequentlyUpdatedState(0);
+const playheadPosition = ref(0); // 単位はtick
 const phraseSingingVoices = new Map<SingingVoiceKey, SingingVoice>();
 const sequences = new Map<SequenceId, Sequence & { trackId: TrackId }>();
 const animationTimer = new AnimationTimer();
@@ -1104,14 +1101,8 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
-  GET_PLAYHEAD_POSITION: {
-    getter: (state, getters) => () => {
-      if (!transport) {
-        throw new Error("transport is undefined.");
-      }
-      if (state.nowPlaying) {
-        playheadPosition.value = getters.SECOND_TO_TICK(transport.time);
-      }
+  PLAYHEAD_POSITION: {
+    getter() {
       return playheadPosition.value;
     },
   },
@@ -1126,18 +1117,6 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
-  ADD_PLAYHEAD_POSITION_CHANGE_LISTENER: {
-    async action(_, { listener }: { listener: (position: number) => void }) {
-      playheadPosition.addValueChangeListener(listener);
-    },
-  },
-
-  REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER: {
-    async action(_, { listener }: { listener: (position: number) => void }) {
-      playheadPosition.removeValueChangeListener(listener);
-    },
-  },
-
   SET_PLAYBACK_STATE: {
     mutation(state, { nowPlaying }) {
       state.nowPlaying = nowPlaying;
@@ -1156,7 +1135,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
 
       transport.start();
       animationTimer.start(() => {
-        playheadPosition.value = getters.GET_PLAYHEAD_POSITION();
+        playheadPosition.value = getters.SECOND_TO_TICK(transport.time);
       });
     },
   },
@@ -1173,7 +1152,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
 
       transport.stop();
       animationTimer.stop();
-      playheadPosition.value = getters.GET_PLAYHEAD_POSITION();
+      playheadPosition.value = getters.SECOND_TO_TICK(transport.time);
     },
   },
 
@@ -2258,7 +2237,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       }
 
       // パースしたJSONのノートの位置を現在の再生位置に合わせてクオンタイズして貼り付ける
-      const currentPlayheadPosition = getters.GET_PLAYHEAD_POSITION();
+      const currentPlayheadPosition = getters.PLAYHEAD_POSITION;
       const firstNotePosition = notes[0].position;
       // TODO: クオンタイズの処理を共通化する
       const snapType = state.sequencerSnapType;
diff --git a/src/store/type.ts b/src/store/type.ts
index a577651f81..417b8e8329 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -1117,22 +1117,14 @@ export type SingingStoreTypes = {
     getter(time: number): number;
   };
 
-  GET_PLAYHEAD_POSITION: {
-    getter(): number;
+  PLAYHEAD_POSITION: {
+    getter: number;
   };
 
   SET_PLAYHEAD_POSITION: {
     action(payload: { position: number }): void;
   };
 
-  ADD_PLAYHEAD_POSITION_CHANGE_LISTENER: {
-    action(payload: { listener: (position: number) => void }): void;
-  };
-
-  REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER: {
-    action(payload: { listener: (position: number) => void }): void;
-  };
-
   SET_PLAYBACK_STATE: {
     mutation: { nowPlaying: boolean };
   };
diff --git a/src/type/preload.ts b/src/type/preload.ts
index 973ea58505..a539194e0a 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -590,6 +590,9 @@ export const rootMiscSettingSchema = z.object({
     })
     .default({}),
   showSingCharacterPortrait: z.boolean().default(true), // ソングエディタで立ち絵を表示するか
+  playheadPositionDisplayFormat: z
+    .enum(["MINUTES_SECONDS", "MEASURES_BEATS"])
+    .default("MINUTES_SECONDS"), // 再生ヘッド位置の表示モード
 });
 export type RootMiscSettingType = z.infer<typeof rootMiscSettingSchema>;