diff --git "a/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md" "b/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
index adccd71e66..5647b95a5d 100644
--- "a/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
+++ "b/docs/\347\264\260\343\201\213\343\201\204\350\250\255\350\250\210\346\226\271\351\207\235.md"
@@ -49,3 +49,63 @@ export type HogeFugaType = z.infer<typeof hogeFugaSchema>;
 | 追加時の処理         | zipファイルを所定のフォルダに展開    | エンジンのパスを`config.json`に保存 |
 | 読み込み時の処理     | 所定のフォルダ内にあるものを読む     | `config.json`に保存されたパスを読む |
 | 削除時の処理         | 所定のフォルダ内のディレクトリを削除 | `config.json`からパスを削除         |
+
+## デフォルトエンジンの更新情報
+
+デフォルトエンジンの更新情報をjson形式で管理しています。
+更新情報には最新のパッケージ（VVPP・VVPPPファイル）のURLやバージョンなどを記載しています。
+パッケージの情報はOS・アーキテクチャ・デバイスごとに分けています。
+
+ファイルフォーマットは以下の通りです。
+
+```JSONC
+{
+  //[number] ファイル構造バージョン（仕様変更毎にインクリメントされる）
+  "formatVersion": 1,
+
+  // Windowsの情報
+  "windows": {
+    "x64": {
+      "CPU": {
+        //[string] バージョン
+        "version": "x.x.x",
+
+        // vvppやvvpppの情報
+        "packages": [
+          {
+            //[string] ダウンロードURL
+            "url": "https://example.com/example.vvpp",
+
+            //[string] ファイル名
+            "name": "example.vvpp",
+
+            //[number] バイト数
+            "size": 123456,
+
+            //[string(Optional)] ハッシュ値
+            "hash": "xxxxxxx",
+          },
+          //...
+        ]
+      },
+      "GPU/CPU": { /* 同上 */ }
+    }
+  },
+
+  "macos": {
+    "x64": {
+      "CPU": { /* 同上 */ }
+    },
+    "arm64": {
+      "CPU": { /* 同上 */ }
+    }
+  },
+
+  "linux": {
+    "x64": {
+      "CPU": { /* 同上 */ },
+      "GPU/CPU": { /* 同上 */ }
+    }
+  }
+}
+```
diff --git a/public/howtouse.md b/public/howtouse.md
index c407e21984..9ac56da6b1 100644
--- a/public/howtouse.md
+++ b/public/howtouse.md
@@ -302,6 +302,12 @@ VOICEVOX では、歌声合成機能がプロトタイプ版として提供さ
 
 ソング機能は鋭意制作中です。フィードバックをお待ちしています。
 
+### ノート（音符）の追加
+
+ピアノロールをクリックすることで、その高さのノート（音符）を追加できます。
+ドラッグすることで、長さを指定しつつノートを追加することもできます。
+`Esc`キーでノートの選択状態を解除できます。
+
 ### 歌詞の入力
 
 ノートをダブルクリックすることで歌詞を入力できます。複数の文字を入力すれば一括入力できます。
diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index fd7a09e501..2506cb023d 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -2,6 +2,7 @@
   <button
     class="button"
     :class="variant ? variant : 'default'"
+    :disabled
     @click="(payload) => $emit('click', payload)"
   >
     <!-- 暫定でq-iconを使用 -->
@@ -14,6 +15,7 @@
 defineProps<{
   label: string;
   icon?: string;
+  disabled?: boolean;
   variant?: "default" | "primary" | "danger";
 }>();
 
@@ -31,6 +33,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   align-items: center;
+  text-wrap: nowrap;
   height: vars.$size-control;
   border-radius: vars.$radius-1;
   padding: 0 vars.$padding-2;
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index f9b2048d43..91fa0bb32d 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -29,12 +29,12 @@ defineEmits<{
   color: colors.$display;
   cursor: pointer;
   position: relative;
-  height: vars.$size-listitem;
+  min-height: vars.$size-listitem;
   display: flex;
   align-items: center;
   background-color: colors.$clear;
   border: none;
-  padding: 0 vars.$padding-2;
+  padding: vars.$padding-1 vars.$padding-2;
   border-radius: vars.$radius-1;
   transition: background-color vars.$transition-duration;
 
diff --git a/src/components/Base/BaseNavigationView.stories.ts b/src/components/Base/BaseNavigationView.stories.ts
new file mode 100644
index 0000000000..a427e44afe
--- /dev/null
+++ b/src/components/Base/BaseNavigationView.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseNavigationView from "./BaseNavigationView.vue";
+import BaseListItem from "./BaseListItem.vue";
+
+const meta: Meta<typeof BaseNavigationView> = {
+  component: BaseNavigationView,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseNavigationView>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseNavigationView, BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseNavigationView style="width: 100%; height:480px" v-bind="args">
+        <template #sidebar>
+          <BaseListItem>ListItem</BaseListItem>
+        </template>
+        <div>Content</div>
+      </BaseNavigationView>`,
+  }),
+};
diff --git a/src/components/Base/BaseNavigationView.vue b/src/components/Base/BaseNavigationView.vue
new file mode 100644
index 0000000000..c92dc53b4b
--- /dev/null
+++ b/src/components/Base/BaseNavigationView.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="grid">
+    <div class="sidebar">
+      <BaseScrollArea>
+        <div class="sidebar-inner">
+          <slot name="sidebar" />
+        </div>
+      </BaseScrollArea>
+    </div>
+
+    <main class="content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseScrollArea from "./BaseScrollArea.vue";
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.grid {
+  height: calc(100vh - 90px);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 100%;
+  backdrop-filter: blur(32px);
+  background-color: colors.$background-drawer;
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  width: max-content;
+}
+
+.content {
+  background-color: colors.$background;
+  border-left: 1px solid colors.$border;
+}
+</style>
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 13745fb07d..23cbc9e1ac 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -1,7 +1,9 @@
 <template>
   <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
-    <ScrollAreaViewport class="ScrollAreaViewport">
-      <slot />
+    <ScrollAreaViewport asChild>
+      <div class="ScrollAreaViewport">
+        <slot />
+      </div>
     </ScrollAreaViewport>
     <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
       <ScrollAreaThumb class="ScrollAreaThumb">
@@ -37,11 +39,16 @@ import {
   flex-direction: column;
 }
 
-.ScrollAreaViewport {
+// 親要素のサイズいっぱいに広げさせるためプライベートなデータ属性を使用
+:deep([data-radix-scroll-area-viewport]) {
   width: 100%;
   height: 100%;
 }
 
+:deep(.ScrollAreaViewport) {
+  height: 100%;
+}
+
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
diff --git a/src/components/Base/BaseTextField.stories.ts b/src/components/Base/BaseTextField.stories.ts
new file mode 100644
index 0000000000..e1af66bbc5
--- /dev/null
+++ b/src/components/Base/BaseTextField.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseTextField from "./BaseTextField.vue";
+
+const meta: Meta<typeof BaseTextField> = {
+  component: BaseTextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseTextField>;
+
+export const Default: Story = {};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Placeholder",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
+export const HasError: Story = {
+  args: {
+    hasError: true,
+  },
+  render: (args) => ({
+    components: { BaseTextField },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseTextField v-bind="args">
+        <template #error>
+          ERROR TEXT
+        </template>
+      </BaseTextField>`,
+  }),
+};
diff --git a/src/components/Base/BaseTextField.vue b/src/components/Base/BaseTextField.vue
new file mode 100644
index 0000000000..4d1842d524
--- /dev/null
+++ b/src/components/Base/BaseTextField.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="wrapper">
+    <input
+      v-model="model"
+      type="text"
+      class="input"
+      :class="{ error: hasError }"
+      :placeholder
+      :readonly
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    />
+    <div v-if="hasError" class="error-label">
+      <slot name="error" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  placeholder?: string;
+  hasError?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  click: [payload: MouseEvent];
+}>();
+
+const model = defineModel<string>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.wrapper {
+  width: 100%;
+}
+
+.input {
+  height: vars.$size-control;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+  border: 1px solid colors.$border;
+  border-radius: vars.$radius-1;
+  padding-inline: vars.$padding-1;
+  background-color: colors.$control;
+  color: colors.$display;
+
+  &:focus {
+    @include mixin.on-focus;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &::placeholder {
+    color: colors.$display-sub;
+  }
+}
+
+.error {
+  border: 2px solid colors.$display-warning;
+}
+
+.error-label {
+  color: colors.$display-warning;
+}
+</style>
diff --git a/src/components/Base/BaseToggleGroup.stories.ts b/src/components/Base/BaseToggleGroup.stories.ts
new file mode 100644
index 0000000000..4e779b707c
--- /dev/null
+++ b/src/components/Base/BaseToggleGroup.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseToggleGroup from "./BaseToggleGroup.vue";
+import BaseToggleGroupItem from "./BaseToggleGroupItem.vue";
+
+const meta: Meta<typeof BaseToggleGroup> = {
+  component: BaseToggleGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseToggleGroup>;
+
+export const Single: Story = {
+  args: {
+    type: "single",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: "multiple",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};
diff --git a/src/components/Base/BaseToggleGroup.vue b/src/components/Base/BaseToggleGroup.vue
new file mode 100644
index 0000000000..0cfa4f5a80
--- /dev/null
+++ b/src/components/Base/BaseToggleGroup.vue
@@ -0,0 +1,44 @@
+<template>
+  <ToggleGroupRoot
+    class="ToggleGroup"
+    :type
+    :modelValue
+    :disabled
+    @update:modelValue="
+      (value) => {
+        if (value != undefined) {
+          $emit('update:modelValue', value);
+        }
+      }
+    "
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { ToggleGroupRoot } from "radix-vue";
+
+defineProps<{
+  type: "single" | "multiple";
+  modelValue: string | string[];
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  "update:modelValue": [payload: string | string[]];
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ToggleGroup {
+  display: inline-flex;
+  background-color: var(--mauve-6);
+  border-radius: 4px;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+</style>
diff --git a/src/components/Base/BaseToggleGroupItem.vue b/src/components/Base/BaseToggleGroupItem.vue
new file mode 100644
index 0000000000..af5f37d16c
--- /dev/null
+++ b/src/components/Base/BaseToggleGroupItem.vue
@@ -0,0 +1,99 @@
+<template>
+  <ToggleGroupItem :value class="ToggleGroupItem">
+    <QIcon class="check" name="check" />
+    {{ label }}
+  </ToggleGroupItem>
+</template>
+
+<script setup lang="ts">
+import { ToggleGroupItem } from "radix-vue";
+
+defineProps<{
+  label: string;
+  value: string;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ToggleGroupItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border: 1px solid;
+  transition:
+    background-color vars.$transition-duration,
+    padding vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:first-child {
+    border-top-left-radius: vars.$radius-1;
+    border-bottom-left-radius: vars.$radius-1;
+  }
+  &:last-child {
+    border-top-right-radius: vars.$radius-1;
+    border-bottom-right-radius: vars.$radius-1;
+  }
+
+  &[data-state="off"] {
+    padding: 0
+      calc(#{vars.$padding-1} + (#{vars.$size-icon} + #{vars.$gap-1}) / 2);
+    color: colors.$display;
+    border-color: colors.$border;
+    background-color: colors.$control;
+
+    &:hover:not(:disabled) {
+      background-color: colors.$control-hovered;
+    }
+
+    &:active:not(:disabled) {
+      background-color: colors.$control-pressed;
+    }
+  }
+
+  &[data-state="on"] {
+    padding: 0 vars.$padding-1;
+    color: colors.$display-oncolor;
+    border-color: colors.$border;
+    background-color: colors.$primary;
+
+    &:hover:not(:disabled) {
+      background-color: colors.$primary-hovered;
+    }
+
+    &:active:not(:disabled) {
+      background-color: colors.$primary-pressed;
+    }
+  }
+}
+
+.check {
+  width: vars.$size-icon;
+  height: vars.$size-icon;
+  opacity: 1;
+  margin-right: vars.$gap-1;
+  transition:
+    width vars.$transition-duration,
+    margin-right vars.$transition-duration,
+    opacity vars.$transition-duration;
+}
+
+[data-state="off"] > .check {
+  width: 0;
+  opacity: 0;
+  margin-right: 0;
+}
+</style>
diff --git a/src/components/Dialog/EngineManageDialog.vue b/src/components/Dialog/EngineManageDialog.vue
index 85ed2ebff8..f0f10561bc 100644
--- a/src/components/Dialog/EngineManageDialog.vue
+++ b/src/components/Dialog/EngineManageDialog.vue
@@ -6,7 +6,7 @@
     transitionHide="jump-down"
     class="setting-dialog transparent-backdrop"
   >
-    <QLayout container view="hHh Lpr fFf" class="bg-background">
+    <QLayout>
       <QPageContainer>
         <QHeader class="q-pa-sm">
           <QToolbar>
@@ -23,320 +23,243 @@
             />
           </QToolbar>
         </QHeader>
-        <QPage class="row">
-          <div v-if="uiLockedState" class="ui-lock-popup">
-            <div class="q-pa-md">
-              <QSpinner color="primary" size="2.5rem" />
-              <div class="q-mt-xs">
-                <template v-if="uiLockedState === 'addingEngine'"
-                  >追加中・・・</template
-                >
-                <template v-if="uiLockedState === 'deletingEngine'"
-                  >削除中・・・</template
-                >
-              </div>
+        <div v-if="uiLockedState" class="ui-lock-popup">
+          <div class="q-pa-md">
+            <QSpinner color="primary" size="2.5rem" />
+            <div class="q-mt-xs">
+              <template v-if="uiLockedState === 'addingEngine'"
+                >追加中・・・</template
+              >
+              <template v-if="uiLockedState === 'deletingEngine'"
+                >削除中・・・</template
+              >
             </div>
           </div>
-          <div class="col-4 engine-list-col">
-            <div v-if="isAddingEngine" class="engine-list-disable-overlay" />
-            <div class="engine-list-header text-no-wrap">
-              <div class="row engine-list-title text-h5">エンジン一覧</div>
-              <div class="row no-wrap">
-                <QBtn
-                  outline
-                  textColor="display"
-                  class="text-no-wrap text-bold col-sm q-ma-sm"
-                  :disable="uiLocked"
-                  @click="toAddEngineState"
-                  >追加</QBtn
-                >
-              </div>
+        </div>
+        <BaseNavigationView>
+          <template #sidebar>
+            <div v-if="isAddingEngine" class="list-disable-overlay" />
+            <div class="list-header">
+              <div class="list-title">エンジン一覧</div>
+              <BaseButton
+                label="追加"
+                icon="add"
+                :disable="uiLocked"
+                @click="toAddEngineState"
+              />
             </div>
-            <QList class="engine-list">
-              <template
-                v-for="([type, engineIds], i) in Object.entries(
-                  categorizedEngineIds,
-                )"
-                :key="`engine-list-${i}`"
+            <template
+              v-for="([type, engineIds], i) in Object.entries(
+                categorizedEngineIds,
+              )"
+              :key="`engine-list-${i}`"
+            >
+              <div class="list-label">
+                {{ getEngineTypeName(type) }}
+              </div>
+              <BaseListItem
+                v-for="id in engineIds"
+                :key="id"
+                :selected="selectedId === id"
+                @click="selectEngine(id)"
               >
-                <QSeparator v-if="i > 0" spaced />
-                <QItemLabel header> {{ getEngineTypeName(type) }}</QItemLabel>
-                <QItem
-                  v-for="id in engineIds"
-                  :key="id"
-                  v-ripple
-                  tag="label"
-                  clickable
-                  :active="selectedId === id"
-                  activeClass="active-engine"
-                  @click="selectEngine(id)"
-                >
-                  <QItemSection avatar>
-                    <QAvatar rounded color="primary">
-                      <img
-                        v-if="engineIcons[id]"
-                        :src="engineIcons[id]"
-                        :alt="engineInfos[id].name"
-                      />
-                      <span v-else class="text-display-on-primary"> ? </span>
-                    </QAvatar>
-                  </QItemSection>
-                  <QItemSection>
-                    <QItemLabel class="text-display">{{
-                      engineInfos[id].name
-                    }}</QItemLabel>
-                    <QItemLabel caption class="engine-path">{{
+                <img
+                  v-if="engineIcons[id]"
+                  class="listitem-icon"
+                  :src="engineIcons[id]"
+                  :alt="engineInfos[id].name"
+                />
+                <div v-else class="listitem-unknown">?</div>
+                <div class="listitem-content">
+                  {{ engineInfos[id].name }}
+                  <span caption class="listitem-path">
+                    {{
                       engineManifests[id] != undefined
                         ? engineManifests[id].brandName
                         : engineInfos[id].uuid
-                    }}</QItemLabel>
-                  </QItemSection>
-                </QItem>
-              </template>
-            </QList>
-          </div>
-
-          <!-- 右側のpane -->
-          <div
-            v-if="isAddingEngine"
-            class="col-8 no-wrap text-no-wrap engine-detail"
-          >
-            <div class="q-pl-md q-mt-md">
-              <div class="text-h5 q-ma-sm">エンジンの追加</div>
-
-              <div class="q-ma-sm">
-                <QBtnToggle
-                  v-model="engineLoaderType"
-                  :options="[
-                    { value: 'vvpp', label: 'VVPPファイル' },
-                    { value: 'dir', label: '既存エンジン' },
-                  ]"
-                  color="surface"
-                  unelevated
-                  textColor="display"
-                  toggleColor="primary"
-                  toggleTextColor="display-on-primary"
-                />
-              </div>
-            </div>
-
-            <div v-if="engineLoaderType === 'vvpp'" class="no-wrap q-pl-md">
-              <div class="q-ma-sm">
-                VVPPファイルでエンジンをインストールします。
-              </div>
-              <div class="q-ma-sm">
-                <QInput
-                  ref="vvppFilePathInput"
-                  v-model="vvppFilePath"
-                  dense
-                  readonly
-                  placeholder="VVPPファイルの場所"
-                  @click="selectVvppFile"
-                >
-                  <template #append>
-                    <QBtn
-                      square
-                      dense
-                      flat
-                      color="primary"
-                      icon="folder_open"
+                    }}
+                  </span>
+                </div>
+              </BaseListItem>
+            </template>
+          </template>
+          <div v-if="isAddingEngine" class="detail">
+            <BaseScrollArea>
+              <div class="inner">
+                <div class="title">エンジンの追加</div>
+                <BaseToggleGroup v-model="engineLoaderType" type="single">
+                  <BaseToggleGroupItem label="VVPPファイル" value="vvpp" />
+                  <BaseToggleGroupItem label="既存エンジン" value="dir" />
+                </BaseToggleGroup>
+                <section v-if="engineLoaderType === 'vvpp'" class="section">
+                  <div>VVPPファイルでエンジンをインストールします。</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="vvppFilePath"
+                      placeholder="VVPPファイルの場所"
+                      readonly
+                      :hasError="
+                        newEngineDirValidationState != undefined &&
+                        newEngineDirValidationState !== 'ok'
+                      "
                       @click="selectVvppFile"
                     >
-                      <QTooltip :delay="500" anchor="bottom left">
-                        ファイル選択
-                      </QTooltip>
-                    </QBtn>
-                  </template>
-                  <template #error>
-                    {{
-                      newEngineDirValidationState
-                        ? getEngineDirValidationMessage(
-                            newEngineDirValidationState,
-                          )
-                        : undefined
-                    }}
-                  </template>
-                </QInput>
-              </div>
-            </div>
-            <div v-if="engineLoaderType === 'dir'" class="no-wrap q-pl-md">
-              <div class="q-ma-sm">PC内にあるエンジンを追加します。</div>
-              <div class="q-ma-sm">
-                <QInput
-                  ref="newEngineDirInput"
-                  v-model="newEngineDir"
-                  dense
-                  readonly
-                  :error="
-                    newEngineDirValidationState != undefined &&
-                    newEngineDirValidationState !== 'ok'
-                  "
-                  placeholder="エンジンフォルダの場所"
-                  @click="selectEngineDir"
-                >
-                  <template #append>
-                    <QBtn
-                      square
-                      dense
-                      flat
-                      color="primary"
+                      <template #error>
+                        {{
+                          newEngineDirValidationState
+                            ? getEngineDirValidationMessage(
+                                newEngineDirValidationState,
+                              )
+                            : undefined
+                        }}
+                      </template>
+                    </BaseTextField>
+                    <BaseButton
+                      label="ファイル選択"
                       icon="folder_open"
+                      @click="selectVvppFile"
+                    />
+                  </div>
+                </section>
+                <section v-if="engineLoaderType === 'dir'" class="section">
+                  <div>PC内にあるエンジンを追加します。</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="newEngineDir"
+                      placeholder="エンジンフォルダの場所"
+                      readonly
+                      :hasError="
+                        newEngineDirValidationState != undefined &&
+                        newEngineDirValidationState !== 'ok'
+                      "
                       @click="selectEngineDir"
                     >
-                      <QTooltip :delay="500" anchor="bottom left">
-                        フォルダ選択
-                      </QTooltip>
-                    </QBtn>
-                  </template>
-                  <template #error>
-                    {{
-                      newEngineDirValidationState
-                        ? getEngineDirValidationMessage(
-                            newEngineDirValidationState,
-                          )
-                        : undefined
-                    }}
-                  </template>
-                </QInput>
+                      <template #error>
+                        {{
+                          newEngineDirValidationState
+                            ? getEngineDirValidationMessage(
+                                newEngineDirValidationState,
+                              )
+                            : undefined
+                        }}
+                      </template>
+                    </BaseTextField>
+                    <BaseButton
+                      label="フォルダ選択"
+                      icon="folder_open"
+                      @click="selectEngineDir"
+                    />
+                  </div>
+                </section>
+                <div class="footer">
+                  <BaseButton label="キャンセル" @click="toInitialState" />
+                  <BaseButton
+                    label="追加"
+                    icon="add"
+                    variant="primary"
+                    :disabled="!canAddEngine"
+                    @click="addEngine"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="row q-px-md right-pane-buttons">
-              <QSpace />
-
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                @click="toInitialState"
-                >キャンセル</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disabled="!canAddEngine"
-                @click="addEngine"
-                >追加</QBtn
-              >
-            </div>
+            </BaseScrollArea>
           </div>
-          <div
-            v-else-if="selectedId"
-            class="col-8 no-wrap text-no-wrap engine-detail"
-          >
-            <div class="q-pl-md q-mt-md flex">
-              <img
-                v-if="selectedId in engineIcons"
-                :src="engineIcons[selectedId]"
-                :alt="engineInfos[selectedId].name"
-                class="engine-icon"
-              />
-              <div v-else class="q-mt-sm inline-block">
-                <QAvatar rounded color="primary" size="2rem">
-                  <span class="text-display-on-primary"> ? </span>
-                </QAvatar>
-              </div>
-              <div class="text-h5 q-ma-sm">
-                {{ engineInfos[selectedId].name }}
-              </div>
-            </div>
-
-            <div class="no-wrap q-pl-md">
-              <ul>
-                <li>
-                  バージョン：{{
-                    engineVersions[selectedId]
-                      ? engineVersions[selectedId]
-                      : "（取得に失敗しました）"
-                  }}
-                </li>
-                <li>
-                  URL：
-                  <a
-                    v-if="engineManifests[selectedId]"
-                    :href="engineManifests[selectedId].url"
-                    class="text-display-hyperlink"
-                    target="_blank"
-                    >{{ engineManifests[selectedId].url }}</a
+          <div v-else-if="selectedId" class="detail">
+            <BaseScrollArea>
+              <div class="inner">
+                <div class="engine-title title">
+                  <img
+                    v-if="selectedId in engineIcons"
+                    :src="engineIcons[selectedId]"
+                    :alt="engineInfos[selectedId].name"
+                    class="engine-icon"
+                  />
+                  <div v-else class="engine-unknown">?</div>
+                  {{ engineInfos[selectedId].name }}
+                </div>
+
+                <section class="section">
+                  <ul>
+                    <li>
+                      バージョン：{{
+                        engineVersions[selectedId]
+                          ? engineVersions[selectedId]
+                          : "（取得に失敗しました）"
+                      }}
+                    </li>
+                    <li>
+                      URL：
+                      <a
+                        v-if="engineManifests[selectedId]"
+                        :href="engineManifests[selectedId].url"
+                        class="text-display-hyperlink"
+                        target="_blank"
+                        >{{ engineManifests[selectedId].url }}</a
+                      >
+                      <span v-else>（取得に失敗しました）</span>
+                    </li>
+                  </ul>
+                </section>
+                <section class="section">
+                  <div class="headline">機能</div>
+                  <ul
+                    v-if="
+                      engineManifests[selectedId] &&
+                      engineManifests[selectedId].supportedFeatures
+                    "
                   >
+                    <li
+                      v-for="(value, feature) in engineManifests[selectedId]
+                        .supportedFeatures != null
+                        ? engineManifests[selectedId].supportedFeatures
+                        : null"
+                      :key="feature"
+                      :class="value ? '' : 'text-warning'"
+                    >
+                      {{ getFeatureName(feature) }}：{{
+                        value ? "対応" : "非対応"
+                      }}
+                    </li>
+                  </ul>
                   <span v-else>（取得に失敗しました）</span>
-                </li>
-              </ul>
-            </div>
-            <div class="no-wrap q-pl-md">
-              <div class="text-h6 q-ma-sm">機能</div>
-              <ul
-                v-if="
-                  engineManifests[selectedId] &&
-                  engineManifests[selectedId].supportedFeatures
-                "
-              >
-                <template
-                  v-for="(value, feature) in engineManifests[selectedId]
-                    .supportedFeatures != null
-                    ? engineManifests[selectedId].supportedFeatures
-                    : null"
-                  :key="feature"
-                >
-                  <!-- TODO: vvlib機能がリリースされたらmanageLibraryも表示するようにする -->
-                  <li
-                    v-if="feature != 'manageLibrary'"
-                    :class="value ? '' : 'text-warning'"
-                  >
-                    {{ getFeatureName(feature) }}：{{
-                      value ? "対応" : "非対応"
-                    }}
-                  </li>
-                </template>
-              </ul>
-              <span v-else>（取得に失敗しました）</span>
-            </div>
-            <div class="no-wrap q-pl-md">
-              <div class="text-h6 q-ma-sm">場所</div>
-              <div
-                :class="
-                  'q-ma-sm' + (engineInfos[selectedId].path ? '' : ' disabled')
-                "
-              >
-                <QInput
-                  ref="pathInput"
-                  v-model="engineDir"
-                  disabled
-                  dense
-                  readonly
-                />
+                </section>
+                <section class="section">
+                  <div class="headline">場所</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="engineDir"
+                      :disabled="uiLocked || !engineInfos[selectedId].path"
+                      readonly
+                    />
+                    <BaseButton
+                      icon="folder_open"
+                      label="フォルダを開く"
+                      :disabled="uiLocked || !engineInfos[selectedId].path"
+                      @click="openSelectedEngineDirectory"
+                    />
+                  </div>
+                </section>
+                <div class="footer">
+                  <BaseButton
+                    label="削除"
+                    icon="delete_outline"
+                    :disabled="uiLocked || engineInfos[selectedId].isDefault"
+                    variant="danger"
+                    @click="deleteEngine"
+                  />
+                  <BaseButton
+                    label="再起動"
+                    icon="refresh"
+                    :disabled="
+                      uiLocked || engineStates[selectedId] === 'STARTING'
+                    "
+                    @click="restartSelectedEngine"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="row q-px-md right-pane-buttons">
-              <QSpace />
-
-              <QBtn
-                outline
-                textColor="warning"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || engineInfos[selectedId].isDefault"
-                @click="deleteEngine"
-                >削除</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !engineInfos[selectedId].path"
-                @click="openSelectedEngineDirectory"
-                >フォルダを開く</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || engineStates[selectedId] === 'STARTING'"
-                @click="restartSelectedEngine"
-                >再起動</QBtn
-              >
-            </div>
+            </BaseScrollArea>
           </div>
-        </QPage>
+        </BaseNavigationView>
       </QPageContainer>
     </QLayout>
   </QDialog>
@@ -344,6 +267,13 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import BaseToggleGroup from "../Base/BaseToggleGroup.vue";
+import BaseToggleGroupItem from "../Base/BaseToggleGroupItem.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseListItem from "@/components/Base/BaseListItem.vue";
+import BaseNavigationView from "@/components/Base/BaseNavigationView.vue";
+import BaseTextField from "@/components/Base/BaseTextField.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useStore } from "@/store";
 import { EngineDirValidationResult, EngineId } from "@/type/preload";
 import type { SupportedFeatures } from "@/openapi/models/SupportedFeatures";
@@ -660,75 +590,65 @@ const toDialogClosedState = () => {
 
 <style lang="scss" scoped>
 @use "@/styles/colors" as colors;
-@use "@/styles/variables" as vars;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as newcolors;
 
-.engine-list-col {
-  border-right: solid 1px colors.$surface;
-  position: relative; // オーバーレイのため
-  overflow-x: hidden;
+.list {
+  display: flex;
+  flex-direction: column;
 }
 
-.engine-list-header {
-  margin: 1rem;
-
-  gap: 0.5rem;
+.list-header {
+  display: flex;
+  gap: vars.$gap-1;
   align-items: center;
   justify-content: space-between;
-  .engine-list-title {
-    flex-grow: 1;
-  }
-}
-
-.engine-list {
-  // menubar-height + toolbar-height + window-border-width +
-  // 82(title & buttons) + 30(margin 15x2)
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width + 82px + 30px}
-  );
-  width: 100%;
-  overflow-y: auto;
 }
 
-.engine-path {
-  overflow-wrap: break-word;
+.list-title {
+  @include mixin.headline-2;
 }
 
-.active-engine {
-  background: rgba(colors.$primary-rgb, 0.4);
+.listitem-icon {
+  margin-right: vars.$gap-1;
+  border-radius: vars.$radius-1;
+  width: 32px;
 }
 
-.engine-list-disable-overlay {
-  background-color: rgba($color: #000000, $alpha: 0.4);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 10;
+.listitem-unknown {
+  margin-right: vars.$gap-1;
+  border-radius: vars.$radius-1;
+  background-color: colors.$primary;
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  width: 32px;
+  height: 32px;
 }
 
-.engine-detail {
+.listitem-content {
   display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
+  flex-direction: column;
+  align-items: start;
 }
 
-.right-pane-buttons {
-  padding: 20px;
+.listitem-path {
+  font-size: 0.75rem;
+  overflow-wrap: break-word;
+}
 
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
+.list-label {
+  padding: 8px 16px;
+  padding-top: 16px;
+  color: newcolors.$display-sub;
 }
 
-.engine-icon {
-  height: 2rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-radius: 5px;
+.list-disable-overlay {
+  background-color: rgba($color: #000000, $alpha: 0.4);
+  position: absolute;
+  inset: 0;
+  z-index: 1;
 }
 
 .ui-lock-popup {
@@ -747,4 +667,69 @@ const toDialogClosedState = () => {
     border-radius: 6px;
   }
 }
+
+.detail {
+  height: 100%;
+}
+
+.inner {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
+}
+
+.engine-title {
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+}
+
+.engine-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: vars.$radius-1;
+}
+
+.engine-unknown {
+  width: 40px;
+  height: 40px;
+  border-radius: vars.$radius-1;
+  background-color: colors.$primary;
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+}
+
+.title {
+  @include mixin.headline-1;
+}
+
+.headline {
+  @include mixin.headline-2;
+}
+
+.flex-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: vars.$gap-1;
+}
+
+.footer {
+  gap: vars.$gap-1;
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
+}
+
+:deep(ul) {
+  margin: 0;
+}
 </style>
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index f8efa45c89..ec9bb4c12a 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -360,7 +360,7 @@ const phraseInfosInOtherTracks = computed(() => {
 
 const ctrlKey = useCommandOrControlKey();
 const editTarget = computed(() => state.sequencerEditTarget);
-const editFrameRate = computed(() => state.editFrameRate);
+const editorFrameRate = computed(() => state.editorFrameRate);
 const scrollBarWidth = ref(12);
 const sequencerBody = ref<HTMLElement | null>(null);
 
@@ -601,7 +601,7 @@ const previewDrawPitch = () => {
   if (previewPitchEdit.value.type !== "draw") {
     throw new Error("previewPitchEdit.value.type is not draw.");
   }
-  const frameRate = editFrameRate.value;
+  const frameRate = editorFrameRate.value;
   const cursorBaseX = (scrollX.value + cursorX.value) / zoomX.value;
   const cursorBaseY = (scrollY.value + cursorY.value) / zoomY.value;
   const cursorTicks = baseXToTick(cursorBaseX, tpqn.value);
@@ -675,7 +675,7 @@ const previewErasePitch = () => {
   if (previewPitchEdit.value.type !== "erase") {
     throw new Error("previewPitchEdit.value.type is not erase.");
   }
-  const frameRate = editFrameRate.value;
+  const frameRate = editorFrameRate.value;
   const cursorBaseX = (scrollX.value + cursorX.value) / zoomX.value;
   const cursorTicks = baseXToTick(cursorBaseX, tpqn.value);
   const cursorSeconds = tickToSecond(cursorTicks, tempos.value, tpqn.value);
@@ -827,7 +827,7 @@ const startPreview = (event: MouseEvent, mode: PreviewMode, note?: Note) => {
   } else if (editTarget.value === "PITCH") {
     // 編集ターゲットがピッチのときの処理
 
-    const frameRate = editFrameRate.value;
+    const frameRate = editorFrameRate.value;
     const cursorTicks = baseXToTick(cursorBaseX, tpqn.value);
     const cursorSeconds = tickToSecond(cursorTicks, tempos.value, tpqn.value);
     const cursorFrame = Math.round(cursorSeconds * frameRate);
diff --git a/src/components/Sing/SequencerPhraseIndicator.vue b/src/components/Sing/SequencerPhraseIndicator.vue
index 85049ed190..4994188884 100644
--- a/src/components/Sing/SequencerPhraseIndicator.vue
+++ b/src/components/Sing/SequencerPhraseIndicator.vue
@@ -6,15 +6,16 @@
 import { computed } from "vue";
 import { useStore } from "@/store";
 import { getOrThrow } from "@/helpers/mapHelper";
-import { PhraseSourceHash, PhraseState } from "@/store/type";
+import { PhraseKey, PhraseState } from "@/store/type";
 
 const props = defineProps<{
-  phraseKey: PhraseSourceHash;
+  phraseKey: PhraseKey;
   isInSelectedTrack: boolean;
 }>();
 
 const store = useStore();
 const classNames: Record<PhraseState, string> = {
+  SINGER_IS_NOT_SET: "singer-is-not-set",
   WAITING_TO_BE_RENDERED: "waiting-to-be-rendered",
   NOW_RENDERING: "now-rendering",
   COULD_NOT_RENDER: "could-not-render",
@@ -43,6 +44,10 @@ const className = computed(() => {
   }
 }
 
+.singer-is-not-set {
+  visibility: hidden;
+}
+
 .waiting-to-be-rendered {
   @include tint-if-in-other-track(
     "background-color",
diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
index e03c86fd0e..a5d911cc1e 100644
--- a/src/components/Sing/SequencerPitch.vue
+++ b/src/components/Sing/SequencerPitch.vue
@@ -30,6 +30,7 @@ import { ExhaustiveError } from "@/type/utility";
 import { createLogger } from "@/domain/frontend/log";
 import { getLast } from "@/sing/utility";
 import { getOrThrow } from "@/helpers/mapHelper";
+import { EditorFrameAudioQuery } from "@/store/type";
 
 type PitchLine = {
   readonly color: Color;
@@ -55,21 +56,24 @@ const pitchEditData = computed(() => {
 });
 const previewPitchEdit = computed(() => props.previewPitchEdit);
 const selectedTrackId = computed(() => store.getters.SELECTED_TRACK_ID);
-const editFrameRate = computed(() => store.state.editFrameRate);
+const editorFrameRate = computed(() => store.state.editorFrameRate);
 const singingGuidesInSelectedTrack = computed(() => {
-  const singingGuides = [];
+  const singingGuides: {
+    query: EditorFrameAudioQuery;
+    startTime: number;
+  }[] = [];
   for (const phrase of store.state.phrases.values()) {
     if (phrase.trackId !== selectedTrackId.value) {
       continue;
     }
-    if (phrase.singingGuideKey == undefined) {
+    if (phrase.queryKey == undefined) {
       continue;
     }
-    const singingGuide = getOrThrow(
-      store.state.singingGuides,
-      phrase.singingGuideKey,
-    );
-    singingGuides.push(singingGuide);
+    const phraseQuery = getOrThrow(store.state.phraseQueries, phrase.queryKey);
+    singingGuides.push({
+      startTime: phrase.startTime,
+      query: phraseQuery,
+    });
   }
   return singingGuides;
 });
@@ -259,13 +263,13 @@ const setPitchDataToPitchLine = async (
 
 const generateOriginalPitchData = () => {
   const unvoicedPhonemes = UNVOICED_PHONEMES;
-  const frameRate = editFrameRate.value; // f0（元のピッチ）は編集フレームレートで表示する
+  const frameRate = editorFrameRate.value; // f0（元のピッチ）はエディターのフレームレートで表示する
 
   // 選択中のトラックで使われている歌い方のf0を結合してピッチデータを生成する
   const tempData = [];
   for (const singingGuide of singingGuidesInSelectedTrack.value) {
     // TODO: 補間を行うようにする
-    if (singingGuide.frameRate !== frameRate) {
+    if (singingGuide.query.frameRate !== frameRate) {
       throw new Error(
         "The frame rate between the singing guide and the edit does not match.",
       );
@@ -312,7 +316,7 @@ const generateOriginalPitchData = () => {
 };
 
 const generatePitchEditData = () => {
-  const frameRate = editFrameRate.value;
+  const frameRate = editorFrameRate.value;
 
   const tempData = [...pitchEditData.value];
   // プレビュー中のピッチ編集があれば、適用する
diff --git a/src/domain/defaultEngine.ts b/src/domain/defaultEngine.ts
new file mode 100644
index 0000000000..2be6cbf51e
--- /dev/null
+++ b/src/domain/defaultEngine.ts
@@ -0,0 +1,50 @@
+/**
+ * デフォルトエンジン関連のモジュール
+ */
+
+import { z } from "zod";
+
+/** パッケージ（vvppやvvppp１ファイル）ごとのスキーマ */
+const defaultEnginePackageSchema = z.object({
+  url: z.string(),
+  name: z.string(),
+  size: z.number(),
+  hash: z.string().optional(),
+});
+
+/** デバイスごとのスキーマ */
+const defaultEngineDeviceSchema = z.object({
+  version: z.string(),
+  packages: z.array(defaultEnginePackageSchema),
+});
+
+/** デフォルトエンジンの更新情報のスキーマ */
+const defaultEngineInfosSchema = z.object({
+  formatVersion: z.number(),
+  windows: z.object({
+    x64: z.object({
+      CPU: defaultEngineDeviceSchema,
+      "GPU/CPU": defaultEngineDeviceSchema,
+    }),
+  }),
+  macos: z.object({
+    x64: z.object({
+      CPU: defaultEngineDeviceSchema,
+    }),
+    arm64: z.object({
+      CPU: defaultEngineDeviceSchema,
+    }),
+  }),
+  linux: z.object({
+    x64: z.object({
+      CPU: defaultEngineDeviceSchema,
+      "GPU/CPU": defaultEngineDeviceSchema,
+    }),
+  }),
+});
+
+/** デフォルトエンジンの更新情報を取得する */
+export const fetchDefaultEngineInfos = async (url: string) => {
+  const response = await fetch(url);
+  return defaultEngineInfosSchema.parse(await response.json());
+};
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index 429b534741..039dd5c36e 100644
--- a/src/sing/domain.ts
+++ b/src/sing/domain.ts
@@ -4,15 +4,11 @@ import {
   Note,
   Phrase,
   PhraseSource,
-  SingingGuide,
-  SingingGuideSource,
-  SingingVoiceSource,
   Tempo,
   TimeSignature,
-  phraseSourceHashSchema,
+  PhraseKey,
   Track,
-  singingGuideSourceHashSchema,
-  singingVoiceSourceHashSchema,
+  EditorFrameAudioQuery,
 } from "@/store/type";
 import { FramePhoneme } from "@/openapi";
 import { TrackId } from "@/type/preload";
@@ -297,7 +293,7 @@ export const DEFAULT_BEAT_TYPE = 4;
 export const SEQUENCER_MIN_NUM_MEASURES = 32;
 
 // マルチエンジン対応のために将来的に廃止予定で、利用は非推奨
-export const DEPRECATED_DEFAULT_EDIT_FRAME_RATE = 93.75;
+export const DEPRECATED_DEFAULT_EDITOR_FRAME_RATE = 93.75;
 
 export const VALUE_INDICATING_NO_DATA = -1;
 
@@ -379,23 +375,9 @@ export function isValidPitchEditData(pitchEditData: number[]) {
   );
 }
 
-export const calculatePhraseSourceHash = async (phraseSource: PhraseSource) => {
+export const calculatePhraseKey = async (phraseSource: PhraseSource) => {
   const hash = await calculateHash(phraseSource);
-  return phraseSourceHashSchema.parse(hash);
-};
-
-export const calculateSingingGuideSourceHash = async (
-  singingGuideSource: SingingGuideSource,
-) => {
-  const hash = await calculateHash(singingGuideSource);
-  return singingGuideSourceHashSchema.parse(hash);
-};
-
-export const calculateSingingVoiceSourceHash = async (
-  singingVoiceSource: SingingVoiceSource,
-) => {
-  const hash = await calculateHash(singingVoiceSource);
-  return singingVoiceSourceHashSchema.parse(hash);
+  return PhraseKey(hash);
 };
 
 export function getStartTicksOfPhrase(phrase: Phrase) {
@@ -469,20 +451,21 @@ export function convertToFramePhonemes(phonemes: FramePhoneme[]) {
 }
 
 export function applyPitchEdit(
-  singingGuide: SingingGuide,
+  phraseQuery: EditorFrameAudioQuery,
+  phraseStartTime: number,
   pitchEditData: number[],
-  editFrameRate: number,
+  editorFrameRate: number,
 ) {
-  // 歌い方のフレームレートと編集フレームレートが一致しない場合はエラー
+  // フレーズのクエリのフレームレートとエディターのフレームレートが一致しない場合はエラー
   // TODO: 補間するようにする
-  if (singingGuide.frameRate !== editFrameRate) {
+  if (phraseQuery.frameRate !== editorFrameRate) {
     throw new Error(
-      "The frame rate between the singing guide and the edit data does not match.",
+      "The frame rate between the phrase query and the editor does not match.",
     );
   }
   const unvoicedPhonemes = UNVOICED_PHONEMES;
-  const f0 = singingGuide.query.f0;
-  const phonemes = singingGuide.query.phonemes;
+  const f0 = phraseQuery.f0;
+  const phonemes = phraseQuery.phonemes;
 
   // 各フレームの音素の配列を生成する
   const framePhonemes = convertToFramePhonemes(phonemes);
@@ -490,21 +473,21 @@ export function applyPitchEdit(
     throw new Error("f0.length and framePhonemes.length do not match.");
   }
 
-  // 歌い方の開始フレームと終了フレームを計算する
-  const singingGuideFrameLength = f0.length;
-  const singingGuideStartFrame = Math.round(
-    singingGuide.startTime * singingGuide.frameRate,
+  // フレーズのクエリの開始フレームと終了フレームを計算する
+  const phraseQueryFrameLength = f0.length;
+  const phraseQueryStartFrame = Math.round(
+    phraseStartTime * phraseQuery.frameRate,
   );
-  const singingGuideEndFrame = singingGuideStartFrame + singingGuideFrameLength;
+  const phraseQueryEndFrame = phraseQueryStartFrame + phraseQueryFrameLength;
 
   // ピッチ編集をf0に適用する
-  const startFrame = Math.max(0, singingGuideStartFrame);
-  const endFrame = Math.min(pitchEditData.length, singingGuideEndFrame);
+  const startFrame = Math.max(0, phraseQueryStartFrame);
+  const endFrame = Math.min(pitchEditData.length, phraseQueryEndFrame);
   for (let i = startFrame; i < endFrame; i++) {
-    const phoneme = framePhonemes[i - singingGuideStartFrame];
+    const phoneme = framePhonemes[i - phraseQueryStartFrame];
     const voiced = !unvoicedPhonemes.includes(phoneme);
     if (voiced && pitchEditData[i] !== VALUE_INDICATING_NO_DATA) {
-      f0[i - singingGuideStartFrame] = pitchEditData[i];
+      f0[i - phraseQueryStartFrame] = pitchEditData[i];
     }
   }
 }
diff --git a/src/sing/phraseRendering.ts b/src/sing/phraseRendering.ts
new file mode 100644
index 0000000000..dd4aba5545
--- /dev/null
+++ b/src/sing/phraseRendering.ts
@@ -0,0 +1,793 @@
+/**
+ * フレーズごとに音声合成するフレーズレンダラーと、それに必要な処理。
+ * レンダリングが必要かどうかの判定やキャッシュの作成も行う。
+ */
+
+import {
+  Note,
+  PhraseKey,
+  Singer,
+  SingingVoice,
+  SingingVoiceKey,
+  Tempo,
+  Track,
+  SingingVolumeKey,
+  SingingVolume,
+  EditorFrameAudioQueryKey,
+  EditorFrameAudioQuery,
+} from "@/store/type";
+import { FramePhoneme, Note as NoteForRequestToEngine } from "@/openapi";
+import { applyPitchEdit, decibelToLinear, tickToSecond } from "@/sing/domain";
+import { calculateHash, linearInterpolation } from "@/sing/utility";
+import { EngineId, StyleId, TrackId } from "@/type/preload";
+import { createLogger } from "@/domain/frontend/log";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+import { getOrThrow } from "@/helpers/mapHelper";
+
+const logger = createLogger("sing/phraseRendering");
+
+/**
+ * リクエスト用のノーツ（と休符）を作成する。
+ */
+const createNotesForRequestToEngine = (
+  firstRestDuration: number,
+  lastRestDurationSeconds: number,
+  notes: Note[],
+  tempos: Tempo[],
+  tpqn: number,
+  frameRate: number,
+) => {
+  const notesForRequestToEngine: NoteForRequestToEngine[] = [];
+
+  // 先頭の休符を変換
+  const firstRestStartSeconds = tickToSecond(
+    notes[0].position - firstRestDuration,
+    tempos,
+    tpqn,
+  );
+  const firstRestStartFrame = Math.round(firstRestStartSeconds * frameRate);
+  const firstRestEndSeconds = tickToSecond(notes[0].position, tempos, tpqn);
+  const firstRestEndFrame = Math.round(firstRestEndSeconds * frameRate);
+  notesForRequestToEngine.push({
+    key: undefined,
+    frameLength: firstRestEndFrame - firstRestStartFrame,
+    lyric: "",
+  });
+
+  // ノートを変換
+  for (const note of notes) {
+    const noteOnSeconds = tickToSecond(note.position, tempos, tpqn);
+    const noteOnFrame = Math.round(noteOnSeconds * frameRate);
+    const noteOffSeconds = tickToSecond(
+      note.position + note.duration,
+      tempos,
+      tpqn,
+    );
+    const noteOffFrame = Math.round(noteOffSeconds * frameRate);
+    notesForRequestToEngine.push({
+      key: note.noteNumber,
+      frameLength: noteOffFrame - noteOnFrame,
+      lyric: note.lyric,
+    });
+  }
+
+  // 末尾に休符を追加
+  const lastRestFrameLength = Math.round(lastRestDurationSeconds * frameRate);
+  notesForRequestToEngine.push({
+    key: undefined,
+    frameLength: lastRestFrameLength,
+    lyric: "",
+  });
+
+  // frameLengthが1以上になるようにする
+  for (let i = 0; i < notesForRequestToEngine.length; i++) {
+    const frameLength = notesForRequestToEngine[i].frameLength;
+    const frameToShift = Math.max(0, 1 - frameLength);
+    notesForRequestToEngine[i].frameLength += frameToShift;
+    if (i < notesForRequestToEngine.length - 1) {
+      notesForRequestToEngine[i + 1].frameLength -= frameToShift;
+    }
+  }
+
+  return notesForRequestToEngine;
+};
+
+const shiftKeyOfNotes = (notes: NoteForRequestToEngine[], keyShift: number) => {
+  for (const note of notes) {
+    if (note.key != undefined) {
+      note.key += keyShift;
+    }
+  }
+};
+
+const getPhonemes = (query: EditorFrameAudioQuery) => {
+  return query.phonemes.map((value) => value.phoneme).join(" ");
+};
+
+const shiftPitch = (f0: number[], pitchShift: number) => {
+  for (let i = 0; i < f0.length; i++) {
+    f0[i] *= Math.pow(2, pitchShift / 12);
+  }
+};
+
+const shiftVolume = (volume: number[], volumeShift: number) => {
+  for (let i = 0; i < volume.length; i++) {
+    volume[i] *= decibelToLinear(volumeShift);
+  }
+};
+
+/**
+ * 末尾のpauの区間のvolumeを0にする。（歌とpauの呼吸音が重ならないようにする）
+ * fadeOutDurationSecondsが0の場合は即座にvolumeを0にする。
+ */
+const muteLastPauSection = (
+  volume: number[],
+  phonemes: FramePhoneme[],
+  frameRate: number,
+  fadeOutDurationSeconds: number,
+) => {
+  const lastPhoneme = phonemes.at(-1);
+  if (lastPhoneme == undefined || lastPhoneme.phoneme !== "pau") {
+    throw new Error("No pau exists at the end.");
+  }
+
+  let lastPauStartFrame = 0;
+  for (let i = 0; i < phonemes.length - 1; i++) {
+    lastPauStartFrame += phonemes[i].frameLength;
+  }
+
+  const lastPauFrameLength = lastPhoneme.frameLength;
+  let fadeOutFrameLength = Math.round(fadeOutDurationSeconds * frameRate);
+  fadeOutFrameLength = Math.max(0, fadeOutFrameLength);
+  fadeOutFrameLength = Math.min(lastPauFrameLength, fadeOutFrameLength);
+
+  // フェードアウト処理を行う
+  if (fadeOutFrameLength === 1) {
+    volume[lastPauStartFrame] *= 0.5;
+  } else {
+    for (let i = 0; i < fadeOutFrameLength; i++) {
+      volume[lastPauStartFrame + i] *= linearInterpolation(
+        0,
+        1,
+        fadeOutFrameLength - 1,
+        0,
+        i,
+      );
+    }
+  }
+  // 音量を0にする
+  for (let i = fadeOutFrameLength; i < lastPauFrameLength; i++) {
+    volume[lastPauStartFrame + i] = 0;
+  }
+};
+
+const singingTeacherStyleId = StyleId(6000); // TODO: 設定できるようにする
+const lastRestDurationSeconds = 0.5; // TODO: 設定できるようにする
+const fadeOutDurationSeconds = 0.15; // TODO: 設定できるようにする
+
+/**
+ * フレーズレンダリングに必要なデータのスナップショット
+ */
+type Snapshot = Readonly<{
+  tpqn: number;
+  tempos: Tempo[];
+  tracks: Map<TrackId, Track>;
+  engineFrameRates: Map<EngineId, number>;
+  editorFrameRate: number;
+}>;
+
+/**
+ * フレーズ
+ */
+type Phrase = Readonly<{
+  firstRestDuration: number;
+  notes: Note[];
+  startTime: number;
+  queryKey: {
+    get: () => EditorFrameAudioQueryKey | undefined;
+    set: (value: EditorFrameAudioQueryKey | undefined) => void;
+  };
+  singingVolumeKey: {
+    get: () => SingingVolumeKey | undefined;
+    set: (value: SingingVolumeKey | undefined) => void;
+  };
+  singingVoiceKey: {
+    get: () => SingingVoiceKey | undefined;
+    set: (value: SingingVoiceKey | undefined) => void;
+  };
+}>;
+
+/**
+ * フレーズレンダリングで必要となる外部のキャッシュや関数
+ */
+type ExternalDependencies = Readonly<{
+  queryCache: Map<EditorFrameAudioQueryKey, EditorFrameAudioQuery>;
+  singingVolumeCache: Map<SingingVolumeKey, SingingVolume>;
+  singingVoiceCache: Map<SingingVoiceKey, SingingVoice>;
+
+  phrases: {
+    get: (phraseKey: PhraseKey) => Phrase;
+  };
+  phraseQueries: {
+    get: (queryKey: EditorFrameAudioQueryKey) => EditorFrameAudioQuery;
+    set: (
+      queryKey: EditorFrameAudioQueryKey,
+      query: EditorFrameAudioQuery,
+    ) => void;
+    delete: (queryKey: EditorFrameAudioQueryKey) => void;
+  };
+  phraseSingingVolumes: {
+    get: (singingVolumeKey: SingingVolumeKey) => SingingVolume;
+    set: (
+      singingVolumeKey: SingingVolumeKey,
+      singingVolume: SingingVolume,
+    ) => void;
+    delete: (singingVolumeKey: SingingVolumeKey) => void;
+  };
+  phraseSingingVoices: {
+    set: (singingVoiceKey: SingingVoiceKey, singingVoice: SingingVoice) => void;
+    delete: (singingVoiceKey: SingingVoiceKey) => void;
+  };
+
+  fetchQuery: (
+    engineId: EngineId,
+    engineFrameRate: number,
+    notes: NoteForRequestToEngine[],
+  ) => Promise<EditorFrameAudioQuery>;
+  fetchSingFrameVolume: (
+    notes: NoteForRequestToEngine[],
+    query: EditorFrameAudioQuery,
+    engineId: EngineId,
+    styleId: StyleId,
+  ) => Promise<SingingVolume>;
+  synthesizeSingingVoice: (
+    singer: Singer,
+    query: EditorFrameAudioQuery,
+  ) => Promise<SingingVoice>;
+}>;
+
+/**
+ * フレーズレンダリングのコンテキスト
+ */
+type Context = Readonly<{
+  snapshot: Snapshot;
+  trackId: TrackId;
+  phraseKey: PhraseKey;
+  externalDependencies: ExternalDependencies;
+}>;
+
+export type PhraseRenderStageId =
+  | "queryGeneration"
+  | "singingVolumeGeneration"
+  | "singingVoiceSynthesis";
+
+/**
+ * フレーズレンダリングのステージのインターフェイス。
+ * フレーズレンダラー内で順に実行される。
+ */
+type BaseStage = Readonly<{
+  id: PhraseRenderStageId;
+
+  /**
+   * このステージが実行されるべきかを判定する。
+   * @param context コンテキスト
+   * @returns 実行が必要かどうかのブール値
+   */
+  shouldBeExecuted: (context: Context) => Promise<boolean>;
+
+  /**
+   * 前回の処理結果を削除する。
+   * @param context コンテキスト
+   */
+  deleteExecutionResult: (context: Context) => void;
+
+  /**
+   * ステージの処理を実行する。
+   * @param context コンテキスト
+   */
+  execute: (context: Context) => Promise<void>;
+}>;
+
+// クエリ生成ステージ
+
+/**
+ * クエリの生成に必要なデータ
+ */
+type QuerySource = Readonly<{
+  engineId: EngineId;
+  engineFrameRate: number;
+  tpqn: number;
+  tempos: Tempo[];
+  firstRestDuration: number;
+  notes: Note[];
+  keyRangeAdjustment: number;
+}>;
+
+const generateQuerySource = (context: Context): QuerySource => {
+  const { phrases } = context.externalDependencies;
+
+  const track = getOrThrow(context.snapshot.tracks, context.trackId);
+  if (track.singer == undefined) {
+    throw new Error("track.singer is undefined.");
+  }
+  const engineFrameRate = getOrThrow(
+    context.snapshot.engineFrameRates,
+    track.singer.engineId,
+  );
+  const phrase = phrases.get(context.phraseKey);
+  return {
+    engineId: track.singer.engineId,
+    engineFrameRate,
+    tpqn: context.snapshot.tpqn,
+    tempos: context.snapshot.tempos,
+    firstRestDuration: phrase.firstRestDuration,
+    notes: phrase.notes,
+    keyRangeAdjustment: track.keyRangeAdjustment,
+  };
+};
+
+const calculateQueryKey = async (querySource: QuerySource) => {
+  const hash = await calculateHash(querySource);
+  return EditorFrameAudioQueryKey(hash);
+};
+
+const generateQuery = async (
+  querySource: QuerySource,
+  externalDependencies: ExternalDependencies,
+): Promise<EditorFrameAudioQuery> => {
+  const notesForRequestToEngine = createNotesForRequestToEngine(
+    querySource.firstRestDuration,
+    lastRestDurationSeconds,
+    querySource.notes,
+    querySource.tempos,
+    querySource.tpqn,
+    querySource.engineFrameRate,
+  );
+
+  shiftKeyOfNotes(notesForRequestToEngine, -querySource.keyRangeAdjustment);
+
+  const query = await externalDependencies.fetchQuery(
+    querySource.engineId,
+    querySource.engineFrameRate,
+    notesForRequestToEngine,
+  );
+
+  shiftPitch(query.f0, querySource.keyRangeAdjustment);
+  return query;
+};
+
+const queryGenerationStage: BaseStage = {
+  id: "queryGeneration",
+  shouldBeExecuted: async (context: Context) => {
+    const { phrases } = context.externalDependencies;
+
+    const track = getOrThrow(context.snapshot.tracks, context.trackId);
+    if (track.singer == undefined) {
+      return false;
+    }
+    const phrase = phrases.get(context.phraseKey);
+    const phraseQueryKey = phrase.queryKey.get();
+    const querySource = generateQuerySource(context);
+    const queryKey = await calculateQueryKey(querySource);
+    return phraseQueryKey == undefined || phraseQueryKey !== queryKey;
+  },
+  deleteExecutionResult: (context: Context) => {
+    const { phrases, phraseQueries } = context.externalDependencies;
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseQueryKey = phrase.queryKey.get();
+    if (phraseQueryKey != undefined) {
+      phraseQueries.delete(phraseQueryKey);
+      phrase.queryKey.set(undefined);
+    }
+  },
+  execute: async (context: Context) => {
+    const { phrases, phraseQueries, queryCache } = context.externalDependencies;
+
+    const querySource = generateQuerySource(context);
+    const queryKey = await calculateQueryKey(querySource);
+
+    let query = queryCache.get(queryKey);
+    if (query != undefined) {
+      logger.info(`Loaded query from cache.`);
+    } else {
+      query = await generateQuery(querySource, context.externalDependencies);
+      const phonemes = getPhonemes(query);
+      logger.info(`Generated query. phonemes: ${phonemes}`);
+      queryCache.set(queryKey, query);
+    }
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseQueryKey = phrase.queryKey.get();
+    if (phraseQueryKey != undefined) {
+      phraseQueries.delete(phraseQueryKey);
+    }
+    phraseQueries.set(queryKey, query);
+    phrase.queryKey.set(queryKey);
+  },
+};
+
+// 歌唱ボリューム生成ステージ
+
+/**
+ * 歌唱ボリュームの生成に必要なデータ
+ */
+type SingingVolumeSource = Readonly<{
+  engineId: EngineId;
+  engineFrameRate: number;
+  tpqn: number;
+  tempos: Tempo[];
+  firstRestDuration: number;
+  notes: Note[];
+  keyRangeAdjustment: number;
+  volumeRangeAdjustment: number;
+  queryForVolumeGeneration: EditorFrameAudioQuery;
+}>;
+
+const generateSingingVolumeSource = (context: Context): SingingVolumeSource => {
+  const { phrases, phraseQueries } = context.externalDependencies;
+
+  const track = getOrThrow(context.snapshot.tracks, context.trackId);
+  if (track.singer == undefined) {
+    throw new Error("track.singer is undefined.");
+  }
+  const phrase = phrases.get(context.phraseKey);
+  const phraseQueryKey = phrase.queryKey.get();
+  if (phraseQueryKey == undefined) {
+    throw new Error("phraseQueryKey is undefined.");
+  }
+  const query = phraseQueries.get(phraseQueryKey);
+  const clonedQuery = cloneWithUnwrapProxy(query);
+  applyPitchEdit(
+    clonedQuery,
+    phrase.startTime,
+    track.pitchEditData,
+    context.snapshot.editorFrameRate,
+  );
+  return {
+    engineId: track.singer.engineId,
+    engineFrameRate: query.frameRate,
+    tpqn: context.snapshot.tpqn,
+    tempos: context.snapshot.tempos,
+    firstRestDuration: phrase.firstRestDuration,
+    notes: phrase.notes,
+    keyRangeAdjustment: track.keyRangeAdjustment,
+    volumeRangeAdjustment: track.volumeRangeAdjustment,
+    queryForVolumeGeneration: clonedQuery,
+  };
+};
+
+const calculateSingingVolumeKey = async (
+  singingVolumeSource: SingingVolumeSource,
+) => {
+  const hash = await calculateHash(singingVolumeSource);
+  return SingingVolumeKey(hash);
+};
+
+const generateSingingVolume = async (
+  singingVolumeSource: SingingVolumeSource,
+  externalDependencies: ExternalDependencies,
+) => {
+  const notesForRequestToEngine = createNotesForRequestToEngine(
+    singingVolumeSource.firstRestDuration,
+    lastRestDurationSeconds,
+    singingVolumeSource.notes,
+    singingVolumeSource.tempos,
+    singingVolumeSource.tpqn,
+    singingVolumeSource.engineFrameRate,
+  );
+  const queryForVolumeGeneration = singingVolumeSource.queryForVolumeGeneration;
+
+  shiftKeyOfNotes(
+    notesForRequestToEngine,
+    -singingVolumeSource.keyRangeAdjustment,
+  );
+  shiftPitch(
+    queryForVolumeGeneration.f0,
+    -singingVolumeSource.keyRangeAdjustment,
+  );
+
+  const singingVolume = await externalDependencies.fetchSingFrameVolume(
+    notesForRequestToEngine,
+    queryForVolumeGeneration,
+    singingVolumeSource.engineId,
+    singingTeacherStyleId,
+  );
+
+  shiftVolume(singingVolume, singingVolumeSource.volumeRangeAdjustment);
+  muteLastPauSection(
+    singingVolume,
+    queryForVolumeGeneration.phonemes,
+    singingVolumeSource.engineFrameRate,
+    fadeOutDurationSeconds,
+  );
+  return singingVolume;
+};
+
+const singingVolumeGenerationStage: BaseStage = {
+  id: "singingVolumeGeneration",
+  shouldBeExecuted: async (context: Context) => {
+    const { phrases } = context.externalDependencies;
+
+    const track = getOrThrow(context.snapshot.tracks, context.trackId);
+    if (track.singer == undefined) {
+      return false;
+    }
+    const singingVolumeSource = generateSingingVolumeSource(context);
+    const singingVolumeKey =
+      await calculateSingingVolumeKey(singingVolumeSource);
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVolumeKey = phrase.singingVolumeKey.get();
+    return (
+      phraseSingingVolumeKey == undefined ||
+      phraseSingingVolumeKey !== singingVolumeKey
+    );
+  },
+  deleteExecutionResult: (context: Context) => {
+    const { phrases, phraseSingingVolumes } = context.externalDependencies;
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVolumeKey = phrase.singingVolumeKey.get();
+    if (phraseSingingVolumeKey != undefined) {
+      phraseSingingVolumes.delete(phraseSingingVolumeKey);
+      phrase.singingVolumeKey.set(undefined);
+    }
+  },
+  execute: async (context: Context) => {
+    const { phrases, phraseSingingVolumes, singingVolumeCache } =
+      context.externalDependencies;
+
+    const singingVolumeSource = generateSingingVolumeSource(context);
+    const singingVolumeKey =
+      await calculateSingingVolumeKey(singingVolumeSource);
+
+    let singingVolume = singingVolumeCache.get(singingVolumeKey);
+    if (singingVolume != undefined) {
+      logger.info(`Loaded singing volume from cache.`);
+    } else {
+      singingVolume = await generateSingingVolume(
+        singingVolumeSource,
+        context.externalDependencies,
+      );
+      logger.info(`Generated singing volume.`);
+      singingVolumeCache.set(singingVolumeKey, singingVolume);
+    }
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVolumeKey = phrase.singingVolumeKey.get();
+    if (phraseSingingVolumeKey != undefined) {
+      phraseSingingVolumes.delete(phraseSingingVolumeKey);
+    }
+    phraseSingingVolumes.set(singingVolumeKey, singingVolume);
+    phrase.singingVolumeKey.set(singingVolumeKey);
+  },
+};
+
+// 歌唱音声合成ステージ
+
+/**
+ * 歌唱音声の合成に必要なデータ
+ */
+type SingingVoiceSource = Readonly<{
+  singer: Singer;
+  queryForSingingVoiceSynthesis: EditorFrameAudioQuery;
+}>;
+
+const generateSingingVoiceSource = (context: Context): SingingVoiceSource => {
+  const { phrases, phraseQueries, phraseSingingVolumes } =
+    context.externalDependencies;
+
+  const track = getOrThrow(context.snapshot.tracks, context.trackId);
+  if (track.singer == undefined) {
+    throw new Error("track.singer is undefined.");
+  }
+  const phrase = phrases.get(context.phraseKey);
+  const phraseQueryKey = phrase.queryKey.get();
+  const phraseSingingVolumeKey = phrase.singingVolumeKey.get();
+  if (phraseQueryKey == undefined) {
+    throw new Error("phraseQueryKey is undefined.");
+  }
+  if (phraseSingingVolumeKey == undefined) {
+    throw new Error("phraseSingingVolumeKey is undefined.");
+  }
+  const query = phraseQueries.get(phraseQueryKey);
+  const singingVolume = phraseSingingVolumes.get(phraseSingingVolumeKey);
+  const clonedQuery = cloneWithUnwrapProxy(query);
+  const clonedSingingVolume = cloneWithUnwrapProxy(singingVolume);
+  applyPitchEdit(
+    clonedQuery,
+    phrase.startTime,
+    track.pitchEditData,
+    context.snapshot.editorFrameRate,
+  );
+  clonedQuery.volume = clonedSingingVolume;
+  return {
+    singer: track.singer,
+    queryForSingingVoiceSynthesis: clonedQuery,
+  };
+};
+
+const calculateSingingVoiceKey = async (
+  singingVoiceSource: SingingVoiceSource,
+) => {
+  const hash = await calculateHash(singingVoiceSource);
+  return SingingVoiceKey(hash);
+};
+
+const synthesizeSingingVoice = async (
+  singingVoiceSource: SingingVoiceSource,
+  externalDependencies: ExternalDependencies,
+) => {
+  const singingVoice = await externalDependencies.synthesizeSingingVoice(
+    singingVoiceSource.singer,
+    singingVoiceSource.queryForSingingVoiceSynthesis,
+  );
+  return singingVoice;
+};
+
+const singingVoiceSynthesisStage: BaseStage = {
+  id: "singingVoiceSynthesis",
+  shouldBeExecuted: async (context: Context) => {
+    const { phrases } = context.externalDependencies;
+
+    const track = getOrThrow(context.snapshot.tracks, context.trackId);
+    if (track.singer == undefined) {
+      return false;
+    }
+    const singingVoiceSource = generateSingingVoiceSource(context);
+    const singingVoiceKey = await calculateSingingVoiceKey(singingVoiceSource);
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVoiceKey = phrase.singingVoiceKey.get();
+    return (
+      phraseSingingVoiceKey == undefined ||
+      phraseSingingVoiceKey !== singingVoiceKey
+    );
+  },
+  deleteExecutionResult: (context: Context) => {
+    const { phrases, phraseSingingVoices } = context.externalDependencies;
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVoiceKey = phrase.singingVoiceKey.get();
+    if (phraseSingingVoiceKey != undefined) {
+      phraseSingingVoices.delete(phraseSingingVoiceKey);
+      phrase.singingVoiceKey.set(undefined);
+    }
+  },
+  execute: async (context: Context) => {
+    const { phrases, phraseSingingVoices, singingVoiceCache } =
+      context.externalDependencies;
+
+    const singingVoiceSource = generateSingingVoiceSource(context);
+    const singingVoiceKey = await calculateSingingVoiceKey(singingVoiceSource);
+
+    let singingVoice = singingVoiceCache.get(singingVoiceKey);
+    if (singingVoice != undefined) {
+      logger.info(`Loaded singing voice from cache.`);
+    } else {
+      singingVoice = await synthesizeSingingVoice(
+        singingVoiceSource,
+        context.externalDependencies,
+      );
+      logger.info(`Generated singing voice.`);
+      singingVoiceCache.set(singingVoiceKey, singingVoice);
+    }
+
+    const phrase = phrases.get(context.phraseKey);
+    const phraseSingingVoiceKey = phrase.singingVoiceKey.get();
+    if (phraseSingingVoiceKey != undefined) {
+      phraseSingingVoices.delete(phraseSingingVoiceKey);
+    }
+    phraseSingingVoices.set(singingVoiceKey, singingVoice);
+    phrase.singingVoiceKey.set(singingVoiceKey);
+  },
+};
+
+// フレーズレンダラー
+
+/**
+ * フレーズレンダラー。
+ * 各フレーズごとに、ステージを進めながらレンダリング処理を行う。
+ */
+export type PhraseRenderer = Readonly<{
+  /**
+   * 一番最初のステージのIDを返す。
+   * 一度もレンダリングを行っていないフレーズは、
+   * この（一番最初の）ステージからレンダリング処理を開始する必要がある。
+   * @returns ステージID
+   */
+  getFirstRenderStageId: () => PhraseRenderStageId;
+
+  /**
+   * レンダリングが必要なフレーズかどうかを判断し、
+   * レンダリングが必要であればどのステージから開始されるべきかを判断して、そのステージのIDを返す。
+   * レンダリングが必要ない場合、undefinedが返される。
+   * @param snapshot スナップショット
+   * @param trackId トラックID
+   * @param phraseKey フレーズキー
+   * @returns ステージID または undefined
+   */
+  determineStartStage: (
+    snapshot: Snapshot,
+    trackId: TrackId,
+    phraseKey: PhraseKey,
+  ) => Promise<PhraseRenderStageId | undefined>;
+
+  /**
+   * 指定されたフレーズのレンダリング処理を、指定されたステージから開始する。
+   * レンダリング処理を開始する前に、前回のレンダリング処理結果の削除が行われる。
+   * @param snapshot スナップショット
+   * @param trackId トラックID
+   * @param phraseKey フレーズキー
+   * @param startStageId 開始ステージID
+   */
+  render: (
+    snapshot: Snapshot,
+    trackId: TrackId,
+    phraseKey: PhraseKey,
+    startStageId: PhraseRenderStageId,
+  ) => Promise<void>;
+}>;
+
+const stages: readonly BaseStage[] = [
+  queryGenerationStage,
+  singingVolumeGenerationStage,
+  singingVoiceSynthesisStage,
+];
+
+/**
+ * フレーズレンダラーを作成する。
+ * @param externalDependencies レンダリング処理で必要となる外部のキャッシュや関数
+ * @returns フレーズレンダラー
+ */
+export const createPhraseRenderer = (
+  externalDependencies: ExternalDependencies,
+): PhraseRenderer => {
+  return {
+    getFirstRenderStageId: () => {
+      return stages[0].id;
+    },
+    determineStartStage: async (
+      snapshot: Snapshot,
+      trackId: TrackId,
+      phraseKey: PhraseKey,
+    ) => {
+      const context: Context = {
+        snapshot,
+        trackId,
+        phraseKey,
+        externalDependencies,
+      };
+      for (const stage of stages) {
+        if (await stage.shouldBeExecuted(context)) {
+          return stage.id;
+        }
+      }
+      return undefined;
+    },
+    render: async (
+      snapshot: Snapshot,
+      trackId: TrackId,
+      phraseKey: PhraseKey,
+      startStageId: PhraseRenderStageId,
+    ) => {
+      const context: Context = {
+        snapshot,
+        trackId,
+        phraseKey,
+        externalDependencies,
+      };
+      const startStageIndex = stages.findIndex((value) => {
+        return value.id === startStageId;
+      });
+      if (startStageIndex === -1) {
+        throw new Error("Stage not found.");
+      }
+      for (let i = stages.length - 1; i >= startStageIndex; i--) {
+        stages[i].deleteExecutionResult(context);
+      }
+      for (let i = startStageIndex; i < stages.length; i++) {
+        await stages[i].execute(context);
+      }
+    },
+  };
+};
diff --git a/src/store/singing.ts b/src/store/singing.ts
index dfaae72bde..9dc9aa71ea 100644
--- a/src/store/singing.ts
+++ b/src/store/singing.ts
@@ -14,14 +14,16 @@ import {
   Singer,
   Phrase,
   transformCommandStore,
-  SingingGuide,
   SingingVoice,
-  SingingGuideSourceHash,
-  SingingVoiceSourceHash,
   SequencerEditTarget,
-  PhraseSourceHash,
+  PhraseKey,
   Track,
   SequenceId,
+  SingingVolumeKey,
+  SingingVolume,
+  SingingVoiceKey,
+  EditorFrameAudioQueryKey,
+  EditorFrameAudioQuery,
 } from "./type";
 import { DEFAULT_PROJECT_NAME, sanitizeFileName } from "./utility";
 import {
@@ -31,7 +33,7 @@ import {
   StyleId,
   TrackId,
 } from "@/type/preload";
-import { FrameAudioQuery, Note as NoteForRequestToEngine } from "@/openapi";
+import { Note as NoteForRequestToEngine } from "@/openapi";
 import { ResultError, getValueOrThrow } from "@/type/result";
 import {
   AudioEvent,
@@ -57,18 +59,14 @@ import {
   isValidVolumeRangeAdjustment,
   secondToTick,
   tickToSecond,
-  calculateSingingGuideSourceHash,
-  calculateSingingVoiceSourceHash,
-  decibelToLinear,
-  applyPitchEdit,
   VALUE_INDICATING_NO_DATA,
   isValidPitchEditData,
-  calculatePhraseSourceHash,
+  calculatePhraseKey,
   isValidTempos,
   isValidTimeSignatures,
   isValidTpqn,
   DEFAULT_TPQN,
-  DEPRECATED_DEFAULT_EDIT_FRAME_RATE,
+  DEPRECATED_DEFAULT_EDITOR_FRAME_RATE,
   createDefaultTrack,
   createDefaultTempo,
   createDefaultTimeSignature,
@@ -86,7 +84,6 @@ import {
 import {
   AnimationTimer,
   createPromiseThatResolvesWhen,
-  linearInterpolation,
   round,
 } from "@/sing/utility";
 import { getWorkaroundKeyRangeAdjustment } from "@/sing/workaroundKeyRangeAdjustment";
@@ -98,6 +95,10 @@ import { ufProjectToVoicevox } from "@/sing/utaformatixProject/toVoicevox";
 import { uuid4 } from "@/helpers/random";
 import { convertToWavFileData } from "@/sing/convertToWavFileData";
 import { generateWriteErrorMessage } from "@/helpers/fileHelper";
+import {
+  PhraseRenderStageId,
+  createPhraseRenderer,
+} from "@/sing/phraseRendering";
 
 const logger = createLogger("store/singing");
 
@@ -156,9 +157,8 @@ const offlineRenderTracks = async (
   withLimiter: boolean,
   multiTrackEnabled: boolean,
   tracks: Map<TrackId, Track>,
-  phrases: Map<PhraseSourceHash, Phrase>,
-  singingGuides: Map<SingingGuideSourceHash, SingingGuide>,
-  singingVoices: Map<SingingVoiceSourceHash, SingingVoice>,
+  phrases: Map<PhraseKey, Phrase>,
+  singingVoices: Map<SingingVoiceKey, SingingVoice>,
 ) => {
   const offlineAudioContext = new OfflineAudioContext(
     numberOfChannels,
@@ -182,21 +182,16 @@ const offlineRenderTracks = async (
   }
 
   for (const phrase of phrases.values()) {
-    if (
-      phrase.singingGuideKey == undefined ||
-      phrase.singingVoiceKey == undefined ||
-      phrase.state !== "PLAYABLE"
-    ) {
+    if (phrase.singingVoiceKey == undefined || phrase.state !== "PLAYABLE") {
       continue;
     }
-    const singingGuide = getOrThrow(singingGuides, phrase.singingGuideKey);
     const singingVoice = getOrThrow(singingVoices, phrase.singingVoiceKey);
 
     // TODO: この辺りの処理を共通化する
     const audioEvents = await generateAudioEvents(
       offlineAudioContext,
-      singingGuide.startTime,
-      singingVoice.blob,
+      phrase.startTime,
+      singingVoice,
     );
     const audioPlayer = new AudioPlayer(offlineAudioContext);
     const audioSequence: AudioSequence = {
@@ -249,12 +244,13 @@ if (window.AudioContext) {
 }
 
 const playheadPosition = new FrequentlyUpdatedState(0);
-const singingVoices = new Map<SingingVoiceSourceHash, SingingVoice>();
+const phraseSingingVoices = new Map<SingingVoiceKey, SingingVoice>();
 const sequences = new Map<SequenceId, Sequence & { trackId: TrackId }>();
 const animationTimer = new AnimationTimer();
 
-const singingGuideCache = new Map<SingingGuideSourceHash, SingingGuide>();
-const singingVoiceCache = new Map<SingingVoiceSourceHash, SingingVoice>();
+const queryCache = new Map<EditorFrameAudioQueryKey, EditorFrameAudioQuery>();
+const singingVolumeCache = new Map<SingingVolumeKey, SingingVolume>();
+const singingVoiceCache = new Map<SingingVoiceKey, SingingVoice>();
 
 const initialTrackId = TrackId(crypto.randomUUID());
 
@@ -417,9 +413,10 @@ export const singingStoreState: SingingStoreState = {
    */
   _selectedTrackId: initialTrackId,
 
-  editFrameRate: DEPRECATED_DEFAULT_EDIT_FRAME_RATE,
+  editorFrameRate: DEPRECATED_DEFAULT_EDITOR_FRAME_RATE,
   phrases: new Map(),
-  singingGuides: new Map(),
+  phraseQueries: new Map(),
+  phraseSingingVolumes: new Map(),
   sequencerZoomX: 0.5,
   sequencerZoomY: 0.75,
   sequencerSnapType: 16,
@@ -876,20 +873,37 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
-  SET_SINGING_GUIDE_KEY_TO_PHRASE: {
+  SET_QUERY_KEY_TO_PHRASE: {
+    mutation(
+      state,
+      {
+        phraseKey,
+        queryKey,
+      }: {
+        phraseKey: PhraseKey;
+        queryKey: EditorFrameAudioQueryKey | undefined;
+      },
+    ) {
+      const phrase = getOrThrow(state.phrases, phraseKey);
+
+      phrase.queryKey = queryKey;
+    },
+  },
+
+  SET_SINGING_VOLUME_KEY_TO_PHRASE: {
     mutation(
       state,
       {
         phraseKey,
-        singingGuideKey,
+        singingVolumeKey,
       }: {
-        phraseKey: PhraseSourceHash;
-        singingGuideKey: SingingGuideSourceHash | undefined;
+        phraseKey: PhraseKey;
+        singingVolumeKey: SingingVolumeKey | undefined;
       },
     ) {
       const phrase = getOrThrow(state.phrases, phraseKey);
 
-      phrase.singingGuideKey = singingGuideKey;
+      phrase.singingVolumeKey = singingVolumeKey;
     },
   },
 
@@ -900,8 +914,8 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         phraseKey,
         singingVoiceKey,
       }: {
-        phraseKey: PhraseSourceHash;
-        singingVoiceKey: SingingVoiceSourceHash | undefined;
+        phraseKey: PhraseKey;
+        singingVoiceKey: SingingVoiceKey | undefined;
       },
     ) {
       const phrase = getOrThrow(state.phrases, phraseKey);
@@ -917,7 +931,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         phraseKey,
         sequenceId,
       }: {
-        phraseKey: PhraseSourceHash;
+        phraseKey: PhraseKey;
         sequenceId: SequenceId | undefined;
       },
     ) {
@@ -927,27 +941,45 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
-  SET_SINGING_GUIDE: {
+  SET_PHRASE_QUERY: {
     mutation(
       state,
       {
-        singingGuideKey,
-        singingGuide,
+        queryKey,
+        query,
       }: {
-        singingGuideKey: SingingGuideSourceHash;
-        singingGuide: SingingGuide;
+        queryKey: EditorFrameAudioQueryKey;
+        query: EditorFrameAudioQuery;
       },
     ) {
-      state.singingGuides.set(singingGuideKey, singingGuide);
+      state.phraseQueries.set(queryKey, query);
     },
   },
 
-  DELETE_SINGING_GUIDE: {
+  DELETE_PHRASE_QUERY: {
+    mutation(state, { queryKey }: { queryKey: EditorFrameAudioQueryKey }) {
+      state.phraseQueries.delete(queryKey);
+    },
+  },
+
+  SET_PHRASE_SINGING_VOLUME: {
+    mutation(
+      state,
+      {
+        singingVolumeKey,
+        singingVolume,
+      }: { singingVolumeKey: SingingVolumeKey; singingVolume: SingingVolume },
+    ) {
+      state.phraseSingingVolumes.set(singingVolumeKey, singingVolume);
+    },
+  },
+
+  DELETE_PHRASE_SINGING_VOLUME: {
     mutation(
       state,
-      { singingGuideKey }: { singingGuideKey: SingingGuideSourceHash },
+      { singingVolumeKey }: { singingVolumeKey: SingingVolumeKey },
     ) {
-      state.singingGuides.delete(singingGuideKey);
+      state.phraseSingingVolumes.delete(singingVolumeKey);
     },
   },
 
@@ -1333,6 +1365,19 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         return phraseFirstRestDuration;
       };
 
+      const calculatePhraseStartTime = (
+        phraseFirstRestDuration: number,
+        phraseNotes: Note[],
+        tempos: Tempo[],
+        tpqn: number,
+      ) => {
+        return tickToSecond(
+          phraseNotes[0].position - phraseFirstRestDuration,
+          tempos,
+          tpqn,
+        );
+      };
+
       const searchPhrases = async (
         notes: Note[],
         tempos: Tempo[],
@@ -1340,7 +1385,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         phraseFirstRestMinDurationSeconds: number,
         trackId: TrackId,
       ) => {
-        const foundPhrases = new Map<PhraseSourceHash, Phrase>();
+        const foundPhrases = new Map<PhraseKey, Phrase>();
 
         let phraseNotes: Note[] = [];
         let prevPhraseLastNote: Note | undefined = undefined;
@@ -1365,14 +1410,22 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
               tempos,
               tpqn,
             );
-            const notesHash = await calculatePhraseSourceHash({
+            const phraseStartTime = calculatePhraseStartTime(
+              phraseFirstRestDuration,
+              phraseNotes,
+              tempos,
+              tpqn,
+            );
+            const phraseKey = await calculatePhraseKey({
               firstRestDuration: phraseFirstRestDuration,
               notes: phraseNotes,
+              startTime: phraseStartTime,
               trackId,
             });
-            foundPhrases.set(notesHash, {
+            foundPhrases.set(phraseKey, {
               firstRestDuration: phraseFirstRestDuration,
               notes: phraseNotes,
+              startTime: phraseStartTime,
               state: "WAITING_TO_BE_RENDERED",
               trackId,
             });
@@ -1386,94 +1439,11 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         return foundPhrases;
       };
 
-      // リクエスト用のノーツ（と休符）を作成する
-      const createNotesForRequestToEngine = (
-        firstRestDuration: number,
-        lastRestDurationSeconds: number,
-        notes: Note[],
-        tempos: Tempo[],
-        tpqn: number,
-        frameRate: number,
-      ) => {
-        const notesForRequestToEngine: NoteForRequestToEngine[] = [];
-
-        // 先頭の休符を変換
-        const firstRestStartSeconds = tickToSecond(
-          notes[0].position - firstRestDuration,
-          tempos,
-          tpqn,
-        );
-        const firstRestStartFrame = Math.round(
-          firstRestStartSeconds * frameRate,
-        );
-        const firstRestEndSeconds = tickToSecond(
-          notes[0].position,
-          tempos,
-          tpqn,
-        );
-        const firstRestEndFrame = Math.round(firstRestEndSeconds * frameRate);
-        notesForRequestToEngine.push({
-          key: undefined,
-          frameLength: firstRestEndFrame - firstRestStartFrame,
-          lyric: "",
-        });
-
-        // ノートを変換
-        for (const note of notes) {
-          const noteOnSeconds = tickToSecond(note.position, tempos, tpqn);
-          const noteOnFrame = Math.round(noteOnSeconds * frameRate);
-          const noteOffSeconds = tickToSecond(
-            note.position + note.duration,
-            tempos,
-            tpqn,
-          );
-          const noteOffFrame = Math.round(noteOffSeconds * frameRate);
-          notesForRequestToEngine.push({
-            id: note.id,
-            key: note.noteNumber,
-            frameLength: noteOffFrame - noteOnFrame,
-            lyric: note.lyric,
-          });
-        }
-
-        // 末尾に休符を追加
-        const lastRestFrameLength = Math.round(
-          lastRestDurationSeconds * frameRate,
-        );
-        notesForRequestToEngine.push({
-          key: undefined,
-          frameLength: lastRestFrameLength,
-          lyric: "",
-        });
-
-        // frameLengthが1以上になるようにする
-        for (let i = 0; i < notesForRequestToEngine.length; i++) {
-          const frameLength = notesForRequestToEngine[i].frameLength;
-          const frameToShift = Math.max(0, 1 - frameLength);
-          notesForRequestToEngine[i].frameLength += frameToShift;
-          if (i < notesForRequestToEngine.length - 1) {
-            notesForRequestToEngine[i + 1].frameLength -= frameToShift;
-          }
-        }
-
-        return notesForRequestToEngine;
-      };
-
-      const shiftKeyOfNotes = (
-        notes: NoteForRequestToEngine[],
-        keyShift: number,
-      ) => {
-        for (const note of notes) {
-          if (note.key != undefined) {
-            note.key += keyShift;
-          }
-        }
-      };
-
       const singingTeacherStyleId = StyleId(6000); // TODO: 設定できるようにする
 
       const fetchQuery = async (
         engineId: EngineId,
+        engineFrameRate: number,
         notesForRequestToEngine: NoteForRequestToEngine[],
       ) => {
         try {
@@ -1483,12 +1453,17 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           const instance = await actions.INSTANTIATE_ENGINE_CONNECTOR({
             engineId,
           });
-          return await instance.invoke(
+          const query = await instance.invoke(
             "singFrameAudioQuerySingFrameAudioQueryPost",
           )({
             score: { notes: notesForRequestToEngine },
             speaker: singingTeacherStyleId,
           });
+          const editorQuery: EditorFrameAudioQuery = {
+            ...query,
+            frameRate: engineFrameRate,
+          };
+          return editorQuery;
         } catch (error) {
           const lyrics = notesForRequestToEngine
             .map((value) => value.lyric)
@@ -1501,78 +1476,10 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         }
       };
 
-      const getPhonemes = (frameAudioQuery: FrameAudioQuery) => {
-        return frameAudioQuery.phonemes.map((value) => value.phoneme).join(" ");
-      };
-
-      const shiftGuidePitch = (
-        frameAudioQuery: FrameAudioQuery,
-        pitchShift: number,
-      ) => {
-        frameAudioQuery.f0 = frameAudioQuery.f0.map((value) => {
-          return value * Math.pow(2, pitchShift / 12);
-        });
-      };
-
-      const shiftGuideVolume = (
-        frameAudioQuery: FrameAudioQuery,
-        volumeShift: number,
-      ) => {
-        frameAudioQuery.volume = frameAudioQuery.volume.map((value) => {
-          return value * decibelToLinear(volumeShift);
-        });
-      };
-
-      // 歌とpauの呼吸音が重ならないようにvolumeを制御する
-      // fadeOutDurationSecondsが0の場合は即座にvolumeを0にする
-      const muteLastPauSection = (
-        frameAudioQuery: FrameAudioQuery,
-        frameRate: number,
-        fadeOutDurationSeconds: number,
-      ) => {
-        const lastPhoneme = frameAudioQuery.phonemes.at(-1);
-        if (lastPhoneme == undefined || lastPhoneme.phoneme !== "pau") {
-          throw new Error("No pau exists at the end.");
-        }
-
-        let lastPauStartFrame = 0;
-        for (let i = 0; i < frameAudioQuery.phonemes.length - 1; i++) {
-          lastPauStartFrame += frameAudioQuery.phonemes[i].frameLength;
-        }
-
-        const lastPauFrameLength = lastPhoneme.frameLength;
-        let fadeOutFrameLength = Math.round(fadeOutDurationSeconds * frameRate);
-        fadeOutFrameLength = Math.max(0, fadeOutFrameLength);
-        fadeOutFrameLength = Math.min(lastPauFrameLength, fadeOutFrameLength);
-
-        // フェードアウト処理を行う
-        if (fadeOutFrameLength === 1) {
-          frameAudioQuery.volume[lastPauStartFrame] *= 0.5;
-        } else {
-          for (let i = 0; i < fadeOutFrameLength; i++) {
-            frameAudioQuery.volume[lastPauStartFrame + i] *=
-              linearInterpolation(0, 1, fadeOutFrameLength - 1, 0, i);
-          }
-        }
-        // 音量を0にする
-        for (let i = fadeOutFrameLength; i < lastPauFrameLength; i++) {
-          frameAudioQuery.volume[lastPauStartFrame + i] = 0;
-        }
-      };
-
-      const calculateStartTime = (
-        phrase: Phrase,
-        tempos: Tempo[],
-        tpqn: number,
+      const synthesizeSingingVoice = async (
+        singer: Singer,
+        query: EditorFrameAudioQuery,
       ) => {
-        return tickToSecond(
-          phrase.notes[0].position - phrase.firstRestDuration,
-          tempos,
-          tpqn,
-        );
-      };
-
-      const synthesize = async (singer: Singer, query: FrameAudioQuery) => {
         if (!getters.IS_ENGINE_READY(singer.engineId)) {
           throw new Error("Engine not ready.");
         }
@@ -1606,63 +1513,141 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
        * @param phraseKey フレーズのキー
        * @returns シーケンスID
        */
-      const getPhraseSequenceId = (phraseKey: PhraseSourceHash) => {
+      const getPhraseSequenceId = (phraseKey: PhraseKey) => {
         return getOrThrow(state.phrases, phraseKey).sequenceId;
       };
 
+      /**
+       * フレーズが持つ歌声のキーを取得する。
+       * @param phraseKey フレーズのキー
+       * @returns 歌声のキー
+       */
+      const getPhraseSingingVoiceKey = (phraseKey: PhraseKey) => {
+        return getOrThrow(state.phrases, phraseKey).singingVoiceKey;
+      };
+
       const render = async () => {
         if (!audioContext) {
           throw new Error("audioContext is undefined.");
         }
         const audioContextRef = audioContext;
 
-        // レンダリング中に変更される可能性のあるデータをコピーする
-        const tracks = cloneWithUnwrapProxy(state.tracks);
-
-        const overlappingNoteIdsMap = new Map(
-          [...tracks.keys()].map((trackId) => [
-            trackId,
-            getters.OVERLAPPING_NOTE_IDS(trackId),
-          ]),
-        );
+        const firstRestMinDurationSeconds = 0.12;
 
-        const singerAndFrameRates = new Map(
-          [...tracks].map(([trackId, track]) => [
-            trackId,
-            track.singer
-              ? {
-                  singer: track.singer,
-                  frameRate:
-                    state.engineManifests[track.singer.engineId].frameRate,
-                }
-              : undefined,
-          ]),
-        );
-        const tpqn = state.tpqn;
-        const tempos = state.tempos.map((value) => ({ ...value }));
-        const editFrameRate = state.editFrameRate;
+        // レンダリング中に変更される可能性のあるデータのコピー
+        const snapshot = {
+          tpqn: state.tpqn,
+          tempos: cloneWithUnwrapProxy(state.tempos),
+          tracks: cloneWithUnwrapProxy(state.tracks),
+          trackOverlappingNoteIds: new Map(
+            [...state.tracks.keys()].map((trackId) => [
+              trackId,
+              getters.OVERLAPPING_NOTE_IDS(trackId),
+            ]),
+          ),
+          engineFrameRates: new Map(
+            Object.entries(state.engineManifests).map(
+              ([engineId, engineManifest]) => [
+                engineId as EngineId,
+                engineManifest.frameRate,
+              ],
+            ),
+          ),
+          editorFrameRate: state.editorFrameRate,
+        } as const;
+
+        const phraseRenderer = createPhraseRenderer({
+          queryCache,
+          singingVolumeCache,
+          singingVoiceCache,
+          phrases: {
+            get: (phraseKey: PhraseKey) => {
+              const phrase = getOrThrow(state.phrases, phraseKey);
+              return {
+                firstRestDuration: phrase.firstRestDuration,
+                notes: phrase.notes,
+                startTime: phrase.startTime,
+                queryKey: {
+                  get: () => getOrThrow(state.phrases, phraseKey).queryKey,
+                  set: (value) =>
+                    mutations.SET_QUERY_KEY_TO_PHRASE({
+                      phraseKey,
+                      queryKey: value,
+                    }),
+                },
+                singingVolumeKey: {
+                  get: () =>
+                    getOrThrow(state.phrases, phraseKey).singingVolumeKey,
+                  set: (value) =>
+                    mutations.SET_SINGING_VOLUME_KEY_TO_PHRASE({
+                      phraseKey,
+                      singingVolumeKey: value,
+                    }),
+                },
+                singingVoiceKey: {
+                  get: () =>
+                    getOrThrow(state.phrases, phraseKey).singingVoiceKey,
+                  set: (value) =>
+                    mutations.SET_SINGING_VOICE_KEY_TO_PHRASE({
+                      phraseKey,
+                      singingVoiceKey: value,
+                    }),
+                },
+              };
+            },
+          },
+          phraseQueries: {
+            get: (queryKey) => getOrThrow(state.phraseQueries, queryKey),
+            set: (queryKey, query) =>
+              mutations.SET_PHRASE_QUERY({ queryKey, query }),
+            delete: (queryKey) => mutations.DELETE_PHRASE_QUERY({ queryKey }),
+          },
+          phraseSingingVolumes: {
+            get: (singingVolumeKey) =>
+              getOrThrow(state.phraseSingingVolumes, singingVolumeKey),
+            set: (singingVolumeKey, singingVolume) =>
+              mutations.SET_PHRASE_SINGING_VOLUME({
+                singingVolumeKey,
+                singingVolume,
+              }),
+            delete: (singingVolumeKey) =>
+              mutations.DELETE_PHRASE_SINGING_VOLUME({ singingVolumeKey }),
+          },
+          phraseSingingVoices: {
+            set: (singingVoiceKey, singingVoice) =>
+              phraseSingingVoices.set(singingVoiceKey, singingVoice),
+            delete: (singingVoiceKey) =>
+              phraseSingingVoices.delete(singingVoiceKey),
+          },
+          fetchQuery,
+          fetchSingFrameVolume: (notes, query, engineId, styleId) =>
+            actions.FETCH_SING_FRAME_VOLUME({
+              notes,
+              query,
+              engineId,
+              styleId,
+            }),
+          synthesizeSingingVoice,
+        });
 
-        const firstRestMinDurationSeconds = 0.12;
-        const lastRestDurationSeconds = 0.5;
-        const fadeOutDurationSeconds = 0.15;
+        const renderStartStageIds = new Map<PhraseKey, PhraseRenderStageId>();
 
         // フレーズを更新する
 
-        const foundPhrases = new Map<PhraseSourceHash, Phrase>();
-        for (const [trackId, track] of tracks) {
-          if (!track.singer) {
-            continue;
-          }
-
+        const foundPhrases = new Map<PhraseKey, Phrase>();
+        for (const [trackId, track] of snapshot.tracks) {
           // 重なっているノートを削除する
-          const overlappingNoteIds = getOrThrow(overlappingNoteIdsMap, trackId);
+          const overlappingNoteIds = getOrThrow(
+            snapshot.trackOverlappingNoteIds,
+            trackId,
+          );
           const notes = track.notes.filter(
             (value) => !overlappingNoteIds.has(value.id),
           );
           const phrases = await searchPhrases(
             notes,
-            tempos,
-            tpqn,
+            snapshot.tempos,
+            snapshot.tpqn,
             firstRestMinDurationSeconds,
             trackId,
           );
@@ -1671,8 +1656,8 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           }
         }
 
-        const phrases = new Map<PhraseSourceHash, Phrase>();
-        const disappearedPhraseKeys = new Set<PhraseSourceHash>();
+        const phrases = new Map<PhraseKey, Phrase>();
+        const disappearedPhraseKeys = new Set<PhraseKey>();
 
         for (const phraseKey of state.phrases.keys()) {
           if (!foundPhrases.has(phraseKey)) {
@@ -1681,161 +1666,87 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           }
         }
         for (const [phraseKey, foundPhrase] of foundPhrases) {
+          // 新しいフレーズまたは既存のフレーズの場合
           const existingPhrase = state.phrases.get(phraseKey);
-          if (!existingPhrase) {
-            // 新しいフレーズの場合
-            phrases.set(phraseKey, foundPhrase);
-            continue;
-          }
-
-          const track = getOrThrow(tracks, existingPhrase.trackId);
-
-          const singerAndFrameRate = getOrThrow(
-            singerAndFrameRates,
-            existingPhrase.trackId,
-          );
-
-          // すでに存在するフレーズの場合
-          // 再レンダリングする必要があるかどうかをチェックする
-          // シンガーが未設定の場合、とりあえず常に再レンダリングする
-          // 音声合成を行う必要がある場合、singingVoiceKeyをundefinedにする
-          // 歌い方の推論も行う必要がある場合、singingGuideKeyとsingingVoiceKeyをundefinedにする
-          // TODO: リファクタリングする
-          const phrase = { ...existingPhrase };
-          if (!singerAndFrameRate || phrase.state === "COULD_NOT_RENDER") {
-            if (phrase.singingGuideKey != undefined) {
-              phrase.singingGuideKey = undefined;
-            }
-            if (phrase.singingVoiceKey != undefined) {
-              phrase.singingVoiceKey = undefined;
-            }
-          } else if (phrase.singingGuideKey != undefined) {
-            const calculatedHash = await calculateSingingGuideSourceHash({
-              engineId: singerAndFrameRate.singer.engineId,
-              tpqn,
-              tempos,
-              firstRestDuration: phrase.firstRestDuration,
-              lastRestDurationSeconds,
-              notes: phrase.notes,
-              keyRangeAdjustment: track.keyRangeAdjustment,
-              volumeRangeAdjustment: track.volumeRangeAdjustment,
-              frameRate: singerAndFrameRate.frameRate,
-            });
-            const hash = phrase.singingGuideKey;
-            if (hash !== calculatedHash) {
-              phrase.singingGuideKey = undefined;
-              if (phrase.singingVoiceKey != undefined) {
-                phrase.singingVoiceKey = undefined;
-              }
-            } else if (phrase.singingVoiceKey != undefined) {
-              let singingGuide = getOrThrow(
-                state.singingGuides,
-                phrase.singingGuideKey,
-              );
-
-              // 歌い方をコピーして、ピッチ編集を適用する
-              singingGuide = structuredClone(toRaw(singingGuide));
-              applyPitchEdit(singingGuide, track.pitchEditData, editFrameRate);
-
-              const calculatedHash = await calculateSingingVoiceSourceHash({
-                singer: singerAndFrameRate.singer,
-                frameAudioQuery: singingGuide.query,
-              });
-              const hash = phrase.singingVoiceKey;
-              if (hash !== calculatedHash) {
-                phrase.singingVoiceKey = undefined;
-              }
+          const phrase =
+            existingPhrase == undefined
+              ? foundPhrase
+              : cloneWithUnwrapProxy(existingPhrase);
+          const track = getOrThrow(snapshot.tracks, phrase.trackId);
+          if (track.singer == undefined) {
+            phrase.state = "SINGER_IS_NOT_SET";
+          } else {
+            // 新しいフレーズの場合は最初からレンダリングする
+            // phrase.stateがCOULD_NOT_RENDERだった場合は最初からレンダリングし直す
+            // 既存のフレーズの場合は適切なレンダリング開始ステージを決定する
+            const renderStartStageId =
+              existingPhrase == undefined || phrase.state === "COULD_NOT_RENDER"
+                ? phraseRenderer.getFirstRenderStageId()
+                : await phraseRenderer.determineStartStage(
+                    snapshot,
+                    foundPhrase.trackId,
+                    phraseKey,
+                  );
+            if (renderStartStageId != undefined) {
+              renderStartStageIds.set(phraseKey, renderStartStageId);
+              phrase.state = "WAITING_TO_BE_RENDERED";
             }
           }
-
           phrases.set(phraseKey, phrase);
         }
 
-        // フレーズのstateを更新する
-        for (const phrase of phrases.values()) {
-          if (
-            phrase.singingGuideKey == undefined ||
-            phrase.singingVoiceKey == undefined
-          ) {
-            phrase.state = "WAITING_TO_BE_RENDERED";
-          }
-        }
-
         // 無くなったフレーズのシーケンスを削除する
         for (const phraseKey of disappearedPhraseKeys) {
           const phraseSequenceId = getPhraseSequenceId(phraseKey);
           if (phraseSequenceId != undefined) {
             deleteSequence(phraseSequenceId);
-            mutations.SET_SEQUENCE_ID_TO_PHRASE({
-              phraseKey,
-              sequenceId: undefined,
-            });
           }
         }
 
-        // 使われていない歌い方と歌声を削除する
-        const singingGuideKeysInUse = new Set(
-          [...phrases.values()]
-            .map((value) => value.singingGuideKey)
-            .filter((value) => value != undefined),
-        );
-        const singingVoiceKeysInUse = new Set(
-          [...phrases.values()]
-            .map((value) => value.singingVoiceKey)
-            .filter((value) => value != undefined),
-        );
-        const existingSingingGuideKeys = new Set(state.singingGuides.keys());
-        const existingSingingVoiceKeys = new Set(singingVoices.keys());
-        const singingGuideKeysToDelete = existingSingingGuideKeys.difference(
-          singingGuideKeysInUse,
-        );
-        const singingVoiceKeysToDelete = existingSingingVoiceKeys.difference(
-          singingVoiceKeysInUse,
-        );
-        for (const singingGuideKey of singingGuideKeysToDelete) {
-          mutations.DELETE_SINGING_GUIDE({ singingGuideKey });
-        }
-        for (const singingVoiceKey of singingVoiceKeysToDelete) {
-          singingVoices.delete(singingVoiceKey);
-        }
-
         mutations.SET_PHRASES({ phrases });
 
         logger.info("Phrases updated.");
 
         // 各フレーズのレンダリングを行う
 
+        for (const [phraseKey, phrase] of state.phrases.entries()) {
+          if (
+            phrase.state === "SINGER_IS_NOT_SET" ||
+            phrase.state === "WAITING_TO_BE_RENDERED"
+          ) {
+            // シーケンスが存在する場合は、シーケンスを削除する
+            // TODO: ピッチを編集したときは行わないようにする
+            const phraseSequenceId = getPhraseSequenceId(phraseKey);
+            if (phraseSequenceId != undefined) {
+              deleteSequence(phraseSequenceId);
+              mutations.SET_SEQUENCE_ID_TO_PHRASE({
+                phraseKey,
+                sequenceId: undefined,
+              });
+            }
+
+            // ノートシーケンスを作成して登録し、プレビュー音が鳴るようにする
+            const noteEvents = generateNoteEvents(
+              phrase.notes,
+              snapshot.tempos,
+              snapshot.tpqn,
+            );
+            const polySynth = new PolySynth(audioContextRef);
+            const sequenceId = SequenceId(uuid4());
+            registerSequence(sequenceId, {
+              type: "note",
+              instrument: polySynth,
+              noteEvents,
+              trackId: phrase.trackId,
+            });
+            mutations.SET_SEQUENCE_ID_TO_PHRASE({ phraseKey, sequenceId });
+          }
+        }
         const phrasesToBeRendered = new Map(
           [...state.phrases.entries()].filter(([, phrase]) => {
             return phrase.state === "WAITING_TO_BE_RENDERED";
           }),
         );
-        for (const [phraseKey, phrase] of phrasesToBeRendered) {
-          // シーケンスが存在する場合は、シーケンスを削除する
-          // TODO: ピッチを編集したときは行わないようにする
-
-          const phraseSequenceId = getPhraseSequenceId(phraseKey);
-          if (phraseSequenceId != undefined) {
-            deleteSequence(phraseSequenceId);
-            mutations.SET_SEQUENCE_ID_TO_PHRASE({
-              phraseKey,
-              sequenceId: undefined,
-            });
-          }
-
-          // ノートシーケンスを作成して登録し、プレビュー音が鳴るようにする
-
-          const noteEvents = generateNoteEvents(phrase.notes, tempos, tpqn);
-          const polySynth = new PolySynth(audioContextRef);
-          const sequenceId = SequenceId(uuid4());
-          registerSequence(sequenceId, {
-            type: "note",
-            instrument: polySynth,
-            noteEvents,
-            trackId: phrase.trackId,
-          });
-          mutations.SET_SEQUENCE_ID_TO_PHRASE({ phraseKey, sequenceId });
-        }
         while (phrasesToBeRendered.size > 0) {
           if (startRenderingRequested() || stopRenderingRequested()) {
             return;
@@ -1846,175 +1757,21 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           );
           phrasesToBeRendered.delete(phraseKey);
 
-          const track = getOrThrow(tracks, phrase.trackId);
-
-          const singerAndFrameRate = getOrThrow(
-            singerAndFrameRates,
-            phrase.trackId,
-          );
-
-          // シンガーが未設定の場合は、歌い方の生成や音声合成は行わない
-
-          if (!singerAndFrameRate) {
-            mutations.SET_STATE_TO_PHRASE({
-              phraseKey,
-              phraseState: "PLAYABLE",
-            });
-            continue;
-          }
-
           mutations.SET_STATE_TO_PHRASE({
             phraseKey,
             phraseState: "NOW_RENDERING",
           });
 
           try {
-            // リクエスト（クエリ生成と音量生成）用のノーツを作る
-            const notesForRequestToEngine = createNotesForRequestToEngine(
-              phrase.firstRestDuration,
-              lastRestDurationSeconds,
-              phrase.notes,
-              tempos,
-              tpqn,
-              singerAndFrameRate.frameRate,
-            );
-
-            // リクエスト用のノーツのキーのシフトを行う
-            shiftKeyOfNotes(notesForRequestToEngine, -track.keyRangeAdjustment);
-
-            // 歌い方が存在する場合、歌い方を取得する
-            // 歌い方が存在しない場合、キャッシュがあれば取得し、なければ歌い方を生成する
-
-            let singingGuide: SingingGuide | undefined;
-            if (phrase.singingGuideKey != undefined) {
-              singingGuide = getOrThrow(
-                state.singingGuides,
-                phrase.singingGuideKey,
-              );
-            } else {
-              const singingGuideSourceHash =
-                await calculateSingingGuideSourceHash({
-                  engineId: singerAndFrameRate.singer.engineId,
-                  tpqn,
-                  tempos,
-                  firstRestDuration: phrase.firstRestDuration,
-                  lastRestDurationSeconds,
-                  notes: phrase.notes,
-                  keyRangeAdjustment: track.keyRangeAdjustment,
-                  volumeRangeAdjustment: track.volumeRangeAdjustment,
-                  frameRate: singerAndFrameRate.frameRate,
-                });
-
-              const singingGuideKey = singingGuideSourceHash;
-              const cachedSingingGuide = singingGuideCache.get(singingGuideKey);
-              if (cachedSingingGuide) {
-                singingGuide = cachedSingingGuide;
-
-                logger.info(`Loaded singing guide from cache.`);
-              } else {
-                // クエリを生成する
-                const query = await fetchQuery(
-                  singerAndFrameRate.singer.engineId,
-                  notesForRequestToEngine,
-                );
-
-                const phonemes = getPhonemes(query);
-                logger.info(`Fetched frame audio query. phonemes: ${phonemes}`);
-
-                // ピッチのシフトを行う
-                shiftGuidePitch(query, track.keyRangeAdjustment);
-
-                // フレーズの開始時刻を計算する
-                const startTime = calculateStartTime(phrase, tempos, tpqn);
-
-                singingGuide = {
-                  query,
-                  frameRate: singerAndFrameRate.frameRate,
-                  startTime,
-                };
-
-                singingGuideCache.set(singingGuideKey, singingGuide);
-              }
-              mutations.SET_SINGING_GUIDE({ singingGuideKey, singingGuide });
-              mutations.SET_SINGING_GUIDE_KEY_TO_PHRASE({
-                phraseKey,
-                singingGuideKey,
-              });
-            }
-
-            // ピッチ編集を適用する前に、歌い方をコピーする
-            singingGuide = structuredClone(toRaw(singingGuide));
-
-            // ピッチ編集を適用する
-            applyPitchEdit(singingGuide, track.pitchEditData, editFrameRate);
-
-            // 歌声のキャッシュがあれば取得し、なければ音声合成を行う
-
-            let singingVoice: SingingVoice | undefined;
-
-            const singingVoiceSourceHash =
-              await calculateSingingVoiceSourceHash({
-                singer: singerAndFrameRate.singer,
-                frameAudioQuery: singingGuide.query,
-              });
-
-            const singingVoiceKey = singingVoiceSourceHash;
-            const cachedSingingVoice = singingVoiceCache.get(singingVoiceKey);
-            if (cachedSingingVoice) {
-              singingVoice = cachedSingingVoice;
-
-              logger.info(`Loaded singing voice from cache.`);
-            } else {
-              // 音量生成用のクエリを作る
-              // ピッチ編集を適用したクエリをコピーし、
-              // f0をもう一度シフトして、元の（クエリ生成時の）高さに戻す
-              const queryForVolumeGeneration = structuredClone(
-                singingGuide.query,
-              );
-              shiftGuidePitch(
-                queryForVolumeGeneration,
-                -track.keyRangeAdjustment,
-              );
-
-              // 音量を生成して、生成した音量を歌い方のクエリにセットする
-              // 音量値はAPIを叩く毎に変わるので、calc hashしたあとに音量を取得している
-              const volumes = await actions.FETCH_SING_FRAME_VOLUME({
-                notes: notesForRequestToEngine,
-                frameAudioQuery: queryForVolumeGeneration,
-                styleId: singingTeacherStyleId,
-                engineId: singerAndFrameRate.singer.engineId,
-              });
-              singingGuide.query.volume = volumes;
-
-              // 音量のシフトを行う
-              shiftGuideVolume(singingGuide.query, track.volumeRangeAdjustment);
-
-              // 末尾のpauの区間の音量を0にする
-              muteLastPauSection(
-                singingGuide.query,
-                singerAndFrameRate.frameRate,
-                fadeOutDurationSeconds,
-              );
-
-              // 音声合成を行う
-              const blob = await synthesize(
-                singerAndFrameRate.singer,
-                singingGuide.query,
-              );
-
-              logger.info(`Synthesized.`);
-
-              singingVoice = { blob };
-              singingVoiceCache.set(singingVoiceKey, singingVoice);
-            }
-            singingVoices.set(singingVoiceKey, singingVoice);
-            mutations.SET_SINGING_VOICE_KEY_TO_PHRASE({
+            // フレーズのレンダリングを行う
+            await phraseRenderer.render(
+              snapshot,
+              phrase.trackId,
               phraseKey,
-              singingVoiceKey,
-            });
+              getOrThrow(renderStartStageIds, phraseKey),
+            );
 
             // シーケンスが存在する場合、シーケンスを削除する
-
             const phraseSequenceId = getPhraseSequenceId(phraseKey);
             if (phraseSequenceId != undefined) {
               deleteSequence(phraseSequenceId);
@@ -2025,11 +1782,18 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
             }
 
             // オーディオシーケンスを作成して登録する
-
+            const singingVoiceKey = getPhraseSingingVoiceKey(phraseKey);
+            if (singingVoiceKey == undefined) {
+              throw new Error("singingVoiceKey is undefined.");
+            }
+            const singingVoice = getOrThrow(
+              phraseSingingVoices,
+              singingVoiceKey,
+            );
             const audioEvents = await generateAudioEvents(
               audioContextRef,
-              singingGuide.startTime,
-              singingVoice.blob,
+              phrase.startTime,
+              singingVoice,
             );
             const audioPlayer = new AudioPlayer(audioContext);
             const sequenceId = SequenceId(uuid4());
@@ -2110,12 +1874,12 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       { actions },
       {
         notes,
-        frameAudioQuery,
+        query,
         engineId,
         styleId,
       }: {
         notes: NoteForRequestToEngine[];
-        frameAudioQuery: FrameAudioQuery;
+        query: EditorFrameAudioQuery;
         engineId: EngineId;
         styleId: StyleId;
       },
@@ -2128,7 +1892,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           score: {
             notes,
           },
-          frameAudioQuery,
+          frameAudioQuery: query,
         },
         speaker: styleId,
       });
@@ -2206,8 +1970,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
             state.experimentalSetting.enableMultiTrack,
             state.tracks,
             state.phrases,
-            state.singingGuides,
-            singingVoiceCache,
+            phraseSingingVoices,
           );
 
           const waveFileData = convertToWavFileData(audioBuffer);
diff --git a/src/store/type.ts b/src/store/type.ts
index 51df40b732..8fea94e2e8 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -737,65 +737,48 @@ export type Singer = z.infer<typeof singerSchema>;
 export type Track = z.infer<typeof trackSchema>;
 
 export type PhraseState =
+  | "SINGER_IS_NOT_SET"
   | "WAITING_TO_BE_RENDERED"
   | "NOW_RENDERING"
   | "COULD_NOT_RENDER"
   | "PLAYABLE";
 
 /**
- * 歌い方
+ * エディタ用のFrameAudioQuery
  */
-export type SingingGuide = {
-  query: FrameAudioQuery;
-  frameRate: number;
-  startTime: number;
-};
+export type EditorFrameAudioQuery = FrameAudioQuery & { frameRate: number };
 
 /**
- * 歌い方のソース（歌い方を生成するために必要なデータ）
+ * 歌唱ボリューム
  */
-export type SingingGuideSource = {
-  engineId: EngineId;
-  tpqn: number;
-  tempos: Tempo[];
-  firstRestDuration: number;
-  lastRestDurationSeconds: number;
-  notes: Note[];
-  keyRangeAdjustment: number;
-  volumeRangeAdjustment: number;
-  frameRate: number;
-};
+export type SingingVolume = number[];
 
 /**
  * 歌声
  */
-export type SingingVoice = {
-  blob: Blob;
-};
+export type SingingVoice = Blob;
 
-/**
- * 歌声のソース（歌声を合成するために必要なデータ）
- */
-export type SingingVoiceSource = {
-  singer: Singer;
-  frameAudioQuery: FrameAudioQuery;
-};
-
-export const singingGuideSourceHashSchema = z
+const editorFrameAudioQueryKeySchema = z
   .string()
-  .brand<"SingingGuideSourceHash">();
-export type SingingGuideSourceHash = z.infer<
-  typeof singingGuideSourceHashSchema
+  .brand<"EditorFrameAudioQueryKey">();
+export type EditorFrameAudioQueryKey = z.infer<
+  typeof editorFrameAudioQueryKeySchema
 >;
+export const EditorFrameAudioQueryKey = (
+  id: string,
+): EditorFrameAudioQueryKey => editorFrameAudioQueryKeySchema.parse(id);
 
-export const singingVoiceSourceHashSchema = z
-  .string()
-  .brand<"SingingVoiceSourceHash">();
-export type SingingVoiceSourceHash = z.infer<
-  typeof singingVoiceSourceHashSchema
->;
+const singingVolumeKeySchema = z.string().brand<"SingingVolumeKey">();
+export type SingingVolumeKey = z.infer<typeof singingVolumeKeySchema>;
+export const SingingVolumeKey = (id: string): SingingVolumeKey =>
+  singingVolumeKeySchema.parse(id);
+
+const singingVoiceKeySchema = z.string().brand<"SingingVoiceKey">();
+export type SingingVoiceKey = z.infer<typeof singingVoiceKeySchema>;
+export const SingingVoiceKey = (id: string): SingingVoiceKey =>
+  singingVoiceKeySchema.parse(id);
 
-export const sequenceIdSchema = z.string().brand<"SequenceId">();
+const sequenceIdSchema = z.string().brand<"SequenceId">();
 export type SequenceId = z.infer<typeof sequenceIdSchema>;
 export const SequenceId = (id: string): SequenceId =>
   sequenceIdSchema.parse(id);
@@ -805,25 +788,29 @@ export const SequenceId = (id: string): SequenceId =>
  */
 export type Phrase = {
   firstRestDuration: number;
-  trackId: TrackId;
   notes: Note[];
+  startTime: number;
   state: PhraseState;
-  singingGuideKey?: SingingGuideSourceHash;
-  singingVoiceKey?: SingingVoiceSourceHash;
+  queryKey?: EditorFrameAudioQueryKey;
+  singingVolumeKey?: SingingVolumeKey;
+  singingVoiceKey?: SingingVoiceKey;
   sequenceId?: SequenceId;
+  trackId: TrackId; // NOTE: state.tracksと同期していないので使用する際は注意
 };
 
 /**
- * フレーズのソース
+ * フレーズの生成に必要なデータ
  */
 export type PhraseSource = {
   firstRestDuration: number;
-  trackId: TrackId;
   notes: Note[];
+  startTime: number;
+  trackId: TrackId;
 };
 
-export const phraseSourceHashSchema = z.string().brand<"PhraseSourceHash">();
-export type PhraseSourceHash = z.infer<typeof phraseSourceHashSchema>;
+const phraseKeySchema = z.string().brand<"PhraseKey">();
+export type PhraseKey = z.infer<typeof phraseKeySchema>;
+export const PhraseKey = (id: string): PhraseKey => phraseKeySchema.parse(id);
 
 export type SequencerEditTarget = "NOTE" | "PITCH";
 
@@ -834,9 +821,10 @@ export type SingingStoreState = {
   tracks: Map<TrackId, Track>;
   trackOrder: TrackId[];
   _selectedTrackId: TrackId;
-  editFrameRate: number;
-  phrases: Map<PhraseSourceHash, Phrase>;
-  singingGuides: Map<SingingGuideSourceHash, SingingGuide>;
+  editorFrameRate: number;
+  phrases: Map<PhraseKey, Phrase>;
+  phraseQueries: Map<EditorFrameAudioQueryKey, EditorFrameAudioQuery>;
+  phraseSingingVolumes: Map<SingingVolumeKey, SingingVolume>;
   sequencerZoomX: number;
   sequencerZoomY: number;
   sequencerSnapType: number;
@@ -979,46 +967,64 @@ export type SingingStoreTypes = {
   };
 
   SET_PHRASES: {
-    mutation: { phrases: Map<PhraseSourceHash, Phrase> };
+    mutation: { phrases: Map<PhraseKey, Phrase> };
   };
 
   SET_STATE_TO_PHRASE: {
     mutation: {
-      phraseKey: PhraseSourceHash;
+      phraseKey: PhraseKey;
       phraseState: PhraseState;
     };
   };
 
-  SET_SINGING_GUIDE_KEY_TO_PHRASE: {
+  SET_QUERY_KEY_TO_PHRASE: {
     mutation: {
-      phraseKey: PhraseSourceHash;
-      singingGuideKey: SingingGuideSourceHash | undefined;
+      phraseKey: PhraseKey;
+      queryKey: EditorFrameAudioQueryKey | undefined;
+    };
+  };
+
+  SET_SINGING_VOLUME_KEY_TO_PHRASE: {
+    mutation: {
+      phraseKey: PhraseKey;
+      singingVolumeKey: SingingVolumeKey | undefined;
     };
   };
 
   SET_SINGING_VOICE_KEY_TO_PHRASE: {
     mutation: {
-      phraseKey: PhraseSourceHash;
-      singingVoiceKey: SingingVoiceSourceHash | undefined;
+      phraseKey: PhraseKey;
+      singingVoiceKey: SingingVoiceKey | undefined;
     };
   };
 
   SET_SEQUENCE_ID_TO_PHRASE: {
     mutation: {
-      phraseKey: PhraseSourceHash;
+      phraseKey: PhraseKey;
       sequenceId: SequenceId | undefined;
     };
   };
 
-  SET_SINGING_GUIDE: {
+  SET_PHRASE_QUERY: {
+    mutation: {
+      queryKey: EditorFrameAudioQueryKey;
+      query: EditorFrameAudioQuery;
+    };
+  };
+
+  DELETE_PHRASE_QUERY: {
+    mutation: { queryKey: EditorFrameAudioQueryKey };
+  };
+
+  SET_PHRASE_SINGING_VOLUME: {
     mutation: {
-      singingGuideKey: SingingGuideSourceHash;
-      singingGuide: SingingGuide;
+      singingVolumeKey: SingingVolumeKey;
+      singingVolume: SingingVolume;
     };
   };
 
-  DELETE_SINGING_GUIDE: {
-    mutation: { singingGuideKey: SingingGuideSourceHash };
+  DELETE_PHRASE_SINGING_VOLUME: {
+    mutation: { singingVolumeKey: SingingVolumeKey };
   };
 
   SELECTED_TRACK: {
@@ -1065,7 +1071,7 @@ export type SingingStoreTypes = {
   FETCH_SING_FRAME_VOLUME: {
     action(palyoad: {
       notes: NoteForRequestToEngine[];
-      frameAudioQuery: FrameAudioQuery;
+      query: EditorFrameAudioQuery;
       engineId: EngineId;
       styleId: StyleId;
     }): Promise<number[]>;
diff --git a/tests/unit/backend/common/configManager.spec.ts b/tests/unit/backend/common/configManager.spec.ts
index e4acd0e462..a24cfc0b5f 100644
--- a/tests/unit/backend/common/configManager.spec.ts
+++ b/tests/unit/backend/common/configManager.spec.ts
@@ -37,6 +37,10 @@ class TestConfigManager extends BaseConfigManager {
   }
 }
 
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
 it("新規作成できる", async () => {
   vi.spyOn(TestConfigManager.prototype, "exists").mockImplementation(
     async () => false,
diff --git a/tests/unit/domain/defaultEngine/defaultEngine.spec.ts b/tests/unit/domain/defaultEngine/defaultEngine.spec.ts
new file mode 100644
index 0000000000..ed883d45e4
--- /dev/null
+++ b/tests/unit/domain/defaultEngine/defaultEngine.spec.ts
@@ -0,0 +1,22 @@
+// テスト用のファイルを読み込むのでNode環境で実行する
+// @vitest-environment node
+
+import path from "path";
+import fs from "fs";
+import { fetchDefaultEngineInfos } from "@/domain/defaultEngine";
+
+const currentDir = "tests/unit/domain/defaultEngine";
+
+test("fetchDefaultEngineInfos", async () => {
+  // テスト用のjsonファイルでfetchをモックする
+  // 元ファイルは https://raw.githubusercontent.com/VOICEVOX/voicevox_blog/master/src/generateLatestDefaultEngineInfos.ts
+  const p = path.resolve(currentDir, "latestDefaultEngineInfos.json");
+  const json = fs.readFileSync(p, "utf-8");
+  const spy = vi.spyOn(global, "fetch").mockResolvedValue(new Response(json));
+
+  // 読み込めることを確認
+  const infos = await fetchDefaultEngineInfos("https://example.com/");
+  expect(infos.formatVersion).toBe(1);
+
+  spy.mockRestore();
+});
diff --git a/tests/unit/domain/defaultEngine/latestDefaultEngineInfos.json b/tests/unit/domain/defaultEngine/latestDefaultEngineInfos.json
new file mode 100644
index 0000000000..d5cb343f27
--- /dev/null
+++ b/tests/unit/domain/defaultEngine/latestDefaultEngineInfos.json
@@ -0,0 +1,82 @@
+{
+  "formatVersion": 1,
+  "windows": {
+    "x64": {
+      "CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-windows-cpu-0.20.0.vvpp",
+            "name": "voicevox_engine-windows-cpu-0.20.0.vvpp",
+            "size": 1374659234
+          }
+        ]
+      },
+      "GPU/CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-windows-directml-0.20.0.vvpp",
+            "name": "voicevox_engine-windows-directml-0.20.0.vvpp",
+            "size": 1382829369
+          }
+        ]
+      }
+    }
+  },
+  "macos": {
+    "x64": {
+      "CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-macos-x64-0.20.0.001.vvppp",
+            "name": "voicevox_engine-macos-x64-0.20.0.001.vvppp",
+            "size": 1382766014
+          }
+        ]
+      }
+    },
+    "arm64": {
+      "CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-macos-arm64-0.20.0.001.vvppp",
+            "name": "voicevox_engine-macos-arm64-0.20.0.001.vvppp",
+            "size": 1375008115
+          }
+        ]
+      }
+    }
+  },
+  "linux": {
+    "x64": {
+      "CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-linux-cpu-0.20.0.vvpp",
+            "name": "voicevox_engine-linux-cpu-0.20.0.vvpp",
+            "size": 1399437028
+          }
+        ]
+      },
+      "GPU/CPU": {
+        "version": "0.20.0",
+        "packages": [
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-linux-nvidia-0.20.0.001.vvppp",
+            "name": "voicevox_engine-linux-nvidia-0.20.0.001.vvppp",
+            "size": 1992294400
+          },
+          {
+            "url": "https://github.com/VOICEVOX/voicevox_engine/releases/download/0.20.0/voicevox_engine-linux-nvidia-0.20.0.002.vvppp",
+            "name": "voicevox_engine-linux-nvidia-0.20.0.002.vvppp",
+            "size": 645130316
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/tests/unit/lib/selectPriorPhrase.spec.ts b/tests/unit/lib/selectPriorPhrase.spec.ts
index 8dc7d0f4f2..7509155583 100644
--- a/tests/unit/lib/selectPriorPhrase.spec.ts
+++ b/tests/unit/lib/selectPriorPhrase.spec.ts
@@ -1,11 +1,11 @@
 import { it, expect } from "vitest";
+import { Phrase, PhraseKey, PhraseState } from "@/store/type";
 import {
-  Phrase,
-  PhraseSourceHash,
-  PhraseState,
-  phraseSourceHashSchema,
-} from "@/store/type";
-import { DEFAULT_TPQN, selectPriorPhrase } from "@/sing/domain";
+  DEFAULT_BPM,
+  DEFAULT_TPQN,
+  selectPriorPhrase,
+  tickToSecond,
+} from "@/sing/domain";
 import { NoteId, TrackId } from "@/type/preload";
 import { uuid4 } from "@/helpers/random";
 
@@ -29,30 +29,20 @@ const createPhrase = (
         lyric: "ド",
       },
     ],
+    startTime: tickToSecond(
+      start * DEFAULT_TPQN - firstRestDuration * DEFAULT_TPQN,
+      [{ position: 0, bpm: DEFAULT_BPM }],
+      DEFAULT_TPQN,
+    ),
     state,
   };
 };
-const basePhrases = new Map<PhraseSourceHash, Phrase>([
-  [
-    phraseSourceHashSchema.parse("1"),
-    createPhrase(0, 0, 1, "WAITING_TO_BE_RENDERED"),
-  ],
-  [
-    phraseSourceHashSchema.parse("2"),
-    createPhrase(0, 1, 2, "WAITING_TO_BE_RENDERED"),
-  ],
-  [
-    phraseSourceHashSchema.parse("3"),
-    createPhrase(0, 2, 3, "WAITING_TO_BE_RENDERED"),
-  ],
-  [
-    phraseSourceHashSchema.parse("4"),
-    createPhrase(0, 3, 4, "WAITING_TO_BE_RENDERED"),
-  ],
-  [
-    phraseSourceHashSchema.parse("5"),
-    createPhrase(0, 4, 5, "WAITING_TO_BE_RENDERED"),
-  ],
+const basePhrases = new Map<PhraseKey, Phrase>([
+  [PhraseKey("1"), createPhrase(0, 0, 1, "WAITING_TO_BE_RENDERED")],
+  [PhraseKey("2"), createPhrase(0, 1, 2, "WAITING_TO_BE_RENDERED")],
+  [PhraseKey("3"), createPhrase(0, 2, 3, "WAITING_TO_BE_RENDERED")],
+  [PhraseKey("4"), createPhrase(0, 3, 4, "WAITING_TO_BE_RENDERED")],
+  [PhraseKey("5"), createPhrase(0, 4, 5, "WAITING_TO_BE_RENDERED")],
 ]);
 
 it("しっかり優先順位に従って探している", () => {