diff --git a/.env.production b/.env.production
index 56146c0a3d..1fe00d6ff2 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,5 @@
-DEFAULT_ENGINE_INFOS=`[
+VITE_APP_NAME=voicevox
+VITE_DEFAULT_ENGINE_INFOS=`[
     {
         "uuid": "074fc39e-678b-4c13-8916-ffca8d505d1d",
         "name": "VOICEVOX Engine",
@@ -9,4 +10,3 @@ DEFAULT_ENGINE_INFOS=`[
     }
 ]`
 VITE_GTM_CONTAINER_ID=GTM-DUMMY
-VV_OUTPUT_LOG_UTF8=1
diff --git a/.env.test b/.env.test
index f02c0b0239..a2c27972a3 100644
--- a/.env.test
+++ b/.env.test
@@ -1,4 +1,5 @@
-DEFAULT_ENGINE_INFOS=`[
+VITE_APP_NAME=voicevox
+VITE_DEFAULT_ENGINE_INFOS=`[
     {
         "uuid": "074fc39e-678b-4c13-8916-ffca8d505d1d",
         "name": "VOICEVOX Engine",
@@ -9,4 +10,3 @@ DEFAULT_ENGINE_INFOS=`[
     }
 ]`
 VITE_GTM_CONTAINER_ID=GTM-DUMMY
-VV_OUTPUT_LOG_UTF8=1
diff --git a/.eslintrc.js b/.eslintrc.js
index 26947de566..3abaecc545 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -56,6 +56,33 @@ module.exports = {
       },
     ],
     "import/order": "error",
+    "no-restricted-syntax": [
+      "warn",
+      {
+        selector:
+          "BinaryExpression[operator='==='][right.type='Literal'][right.value=null]",
+        message:
+          "'=== null'ではなく'== null'を使用してください。詳細: https://github.com/VOICEVOX/voicevox/issues/1513",
+      },
+      {
+        selector:
+          "BinaryExpression[operator='!=='][right.type='Literal'][right.value=null]",
+        message:
+          "'!== null'ではなく'!= null'を使用してください。詳細: https://github.com/VOICEVOX/voicevox/issues/1513",
+      },
+      {
+        selector:
+          "BinaryExpression[operator='==='][right.type='Identifier'][right.name=undefined]",
+        message:
+          "'=== undefined'ではなく'== undefined'を使用してください。詳細: https://github.com/VOICEVOX/voicevox/issues/1513",
+      },
+      {
+        selector:
+          "BinaryExpression[operator='!=='][right.type='Identifier'][right.name=undefined]",
+        message:
+          "'!== undefined'ではなく'!= undefined'を使用してください。詳細: https://github.com/VOICEVOX/voicevox/issues/1513",
+      },
+    ],
   },
   overrides: [
     {
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
index 1a2aba9e14..ad9b7611f1 100644
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -1,6 +1,6 @@
 ---
 name: Question
-about: 質問 (既存のIssueや一般事例を良く調べてからしてください)
+about: 質問（既存のIssueや一般事例を良く調べてからしてください）
 labels: question
 ---
 
diff --git a/.github/actions/download-engine/action.yml b/.github/actions/download-engine/action.yml
index 4c61fcd9d0..73d087bdc9 100644
--- a/.github/actions/download-engine/action.yml
+++ b/.github/actions/download-engine/action.yml
@@ -2,6 +2,10 @@ name: "Download VOICEVOX ENGINE"
 description: |
   VOICEVOX ENGINEをダウンロードし、指定したディレクトリに展開する。
 inputs:
+  repo:
+    description: "リポジトリ名。デフォルトはVOICEVOX/voicevox_engine。"
+    required: false
+    default: "VOICEVOX/voicevox_engine"
   version:
     description: "VOICEVOX ENGINEのバージョン。latest（デフォルト）、prerelease-latest、バージョン番号（例：0.14.4）で指定できる。"
     required: false
@@ -37,7 +41,7 @@ runs:
     - name: Get version
       shell: bash
       run: |
-        curl -s https://api.github.com/repos/voicevox/voicevox_engine/releases \
+        curl -s https://api.github.com/repos/${{ inputs.repo }}/releases \
             -H 'authorization: Bearer ${{ github.token }}' \
             -H 'content-type: application/json' > $TEMPDIR/releases.json
 
@@ -52,8 +56,8 @@ runs:
       shell: bash
       run: |
         if [ "${{ inputs.target }}" = "" ]; then
-          OS="${{ runner.os }}"
-          TARGET="${OS,,}-cpu" # 小文字にする
+          OS=$(echo "${{ runner.os }}" | tr "[:upper:]" "[:lower:]") # 小文字にする
+          TARGET="$OS-cpu"
         else
           TARGET="${{ inputs.target }}"
         fi
@@ -93,4 +97,5 @@ runs:
         else
           echo "run_path=$DEST/run" >> $GITHUB_OUTPUT
         fi
-        cat $TEMPDIR/target.json | jq -r '.tag_name' | sed -e 's_^_version=_' >> $GITHUB_OUTPUT
+        echo "version=$(jq -r '.tag_name' $TEMPDIR/target.json)" >> $GITHUB_OUTPUT
+
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 60652ea503..8a3402e146 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,6 +19,7 @@ on:
       code_signing:
         description: "コード署名する"
         type: boolean
+        default: false
       upload_artifact:
         description: "デバッグ用に成果物をartifactにアップロードするか"
         type: boolean
@@ -26,8 +27,8 @@ on:
 
 env:
   VOICEVOX_ENGINE_REPO_URL: "https://github.com/VOICEVOX/voicevox_engine"
-  VOICEVOX_ENGINE_VERSION: 0.14.5
-  VOICEVOX_RESOURCE_VERSION: 0.14.3
+  VOICEVOX_ENGINE_VERSION: 0.14.6
+  VOICEVOX_RESOURCE_VERSION: 0.14.4
   VOICEVOX_EDITOR_VERSION:
     |- # releaseタグ名か、workflow_dispatchでのバージョン名か、999.999.999-developが入る
     ${{ github.event.release.tag_name || github.event.inputs.version || '999.999.999-develop' }}
@@ -207,17 +208,23 @@ jobs:
       - name: Generate public/licenses.json
         run: npm run license:generate -- -o public/licenses.json
 
-      # build electronでコード署名するには環境変数を指定が必要だけど、
-      # コード署名しない場合に環境変数を定義するとエラーになるので、動的に環境変数を足す
       - name: Define Code Signing Envs
         if: startsWith(matrix.os, 'windows-') && github.event.inputs.code_signing == 'true'
         run: |
-          # 複数行の文字列を環境変数に代入
-          echo 'CSC_LINK<<EOF' >> $GITHUB_ENV
-          echo "${{ secrets.CERT_BASE64 }}" >> $GITHUB_ENV
-          echo 'EOF' >> $GITHUB_ENV
-
-          echo 'CSC_KEY_PASSWORD=${{ secrets.CERT_PASSWORD }}' >> $GITHUB_ENV
+          bash build/codesign_setup.bash
+          THUMBPRINT="$(head -n 1 $THUMBPRINT_PATH)"
+          SIGNTOOL_PATH="$(head -n 1 $SIGNTOOL_PATH_PATH)"
+          echo "::add-mask::$THUMBPRINT"
+
+          echo "WIN_CERTIFICATE_SHA1=$THUMBPRINT" >> $GITHUB_ENV
+          echo 'WIN_SIGNING_HASH_ALGORITHMS=["sha256"]' >> $GITHUB_ENV
+          echo "SIGNTOOL_PATH=$SIGNTOOL_PATH" >> $GITHUB_ENV
+        env:
+          ESIGNERCKA_USERNAME: ${{ secrets.ESIGNERCKA_USERNAME }}
+          ESIGNERCKA_PASSWORD: ${{ secrets.ESIGNERCKA_PASSWORD }}
+          ESIGNERCKA_TOTP_SECRET: ${{ secrets.ESIGNERCKA_TOTP_SECRET }}
+          THUMBPRINT_PATH: /tmp/esignercka_thumbprint.txt
+          SIGNTOOL_PATH_PATH: /tmp/signtool_path.txt
 
       # Build result will be exported to ${{ matrix.artifact_path }}
       - name: Build Electron
@@ -234,8 +241,12 @@ jobs:
       - name: Reset Code Signing Envs
         if: startsWith(matrix.os, 'windows-') && github.event.inputs.code_signing == 'true'
         run: |
-          echo 'CSC_LINK=' >> $GITHUB_ENV
-          echo 'CSC_KEY_PASSWORD=' >> $GITHUB_ENV
+          bash build/codesign_cleanup.bash
+          echo 'WIN_CERTIFICATE_SHA1=' >> $GITHUB_ENV
+          echo 'WIN_SIGNING_HASH_ALGORITHMS=' >> $GITHUB_ENV
+          echo 'SIGNTOOL_PATH=' >> $GITHUB_ENV
+        env:
+          THUMBPRINT_PATH: /tmp/esignercka_thumbprint.txt
 
       - name: Rename NoEngine Prepackage
         run: |
@@ -360,17 +371,23 @@ jobs:
         run: |
           rm ${{ matrix.compressed_artifact_name }}-${{ env.VOICEVOX_EDITOR_VERSION }}.zip
 
-      # build electronでコード署名するには環境変数を指定が必要だけど、
-      # コード署名しない場合に環境変数を定義するとエラーになるので、動的に環境変数を足す
       - name: Define Code Signing Envs
         if: startsWith(matrix.os, 'windows-') && github.event.inputs.code_signing == 'true'
         run: |
-          # 複数行の文字列を環境変数に代入
-          echo 'CSC_LINK<<EOF' >> $GITHUB_ENV
-          echo "${{ secrets.CERT_BASE64 }}" >> $GITHUB_ENV
-          echo 'EOF' >> $GITHUB_ENV
-
-          echo 'CSC_KEY_PASSWORD=${{ secrets.CERT_PASSWORD }}' >> $GITHUB_ENV
+          bash build/codesign_setup.bash
+          THUMBPRINT="$(head -n 1 $THUMBPRINT_PATH)"
+          SIGNTOOL_PATH="$(head -n 1 $SIGNTOOL_PATH_PATH)"
+          echo "::add-mask::$THUMBPRINT"
+
+          echo "WIN_CERTIFICATE_SHA1=$THUMBPRINT" >> $GITHUB_ENV
+          echo 'WIN_SIGNING_HASH_ALGORITHMS=["sha256"]' >> $GITHUB_ENV
+          echo "SIGNTOOL_PATH=$SIGNTOOL_PATH" >> $GITHUB_ENV
+        env:
+          ESIGNERCKA_USERNAME: ${{ secrets.ESIGNERCKA_USERNAME }}
+          ESIGNERCKA_PASSWORD: ${{ secrets.ESIGNERCKA_PASSWORD }}
+          ESIGNERCKA_TOTP_SECRET: ${{ secrets.ESIGNERCKA_TOTP_SECRET }}
+          THUMBPRINT_PATH: /tmp/esignercka_thumbprint.txt
+          SIGNTOOL_PATH_PATH: /tmp/signtool_path.txt
 
       # NOTE: prepackage can be removed before splitting nsis-web archive
       - name: Build Electron
@@ -392,8 +409,12 @@ jobs:
       - name: Reset Code Signing Envs
         if: startsWith(matrix.os, 'windows-') && github.event.inputs.code_signing == 'true'
         run: |
-          echo 'CSC_LINK=' >> $GITHUB_ENV
-          echo 'CSC_KEY_PASSWORD=' >> $GITHUB_ENV
+          bash build/codesign_cleanup.bash
+          echo 'WIN_CERTIFICATE_SHA1=' >> $GITHUB_ENV
+          echo 'WIN_SIGNING_HASH_ALGORITHMS=' >> $GITHUB_ENV
+          echo 'SIGNTOOL_PATH=' >> $GITHUB_ENV
+        env:
+          THUMBPRINT_PATH: /tmp/esignercka_thumbprint.txt
 
       - name: Create Linux AppImage split
         if: endsWith(matrix.installer_artifact_name, '-appimage')
diff --git a/.github/workflows/release_latest_dev.yml b/.github/workflows/release_latest_dev.yml
new file mode 100644
index 0000000000..5c86fe9fe9
--- /dev/null
+++ b/.github/workflows/release_latest_dev.yml
@@ -0,0 +1,43 @@
+name: Release latest dev build
+
+# mainブランチが更新されるたびに開発版をビルドしてデプロイする。
+# バージョン（タグ）は最新リリースのバージョンを`X.Y.Z`としたときの`X.Y+1.0-dev`。
+
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - "docs/**"
+      - "tests/**"
+
+jobs:
+  latest-dev-build:
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'VOICEVOX'
+    steps:
+      - name: Trigger workflow_dispatch
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const latest_release = await github.rest.repos.getLatestRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo
+            });
+
+            const split_version = latest_release.data.tag_name.split('.');
+            const dev_version = `${split_version[0]}.${parseInt(split_version[1]) + 1}.0-dev`;
+
+            github.rest.actions.createWorkflowDispatch({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'build.yml',
+              ref: 'main',
+              inputs: {
+                version: dev_version,
+                prerelease: true
+              }
+            })
+
+            console.log(`Triggered workflow_dispatch for ${dev_version}`);
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 42a3daa9fa..631676390e 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -8,13 +8,15 @@ on:
   workflow_dispatch:
 
 env:
-  VOICEVOX_ENGINE_VERSION: 0.14.4
+  VOICEVOX_ENGINE_REPO: "VOICEVOX/voicevox_nemo_engine" # 軽いのでNemoを使う
+  VOICEVOX_ENGINE_VERSION: "0.14.0"
 
 defaults:
   run:
     shell: bash
-    
+
 jobs:
+  # ビルドのテスト
   build-test:
     runs-on: windows-latest
     steps:
@@ -23,7 +25,8 @@ jobs:
         uses: ./.github/actions/setup-environment
       - run: npm run electron:build_pnever
 
-  test:
+  # unit テスト
+  unit-test:
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v3
@@ -32,23 +35,82 @@ jobs:
 
       - run: npm run test:unit
 
+  # e2e テスト
+  e2e-test:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        include:
+          - os: ubuntu-latest
+            voicevox_engine_asset_name: linux-cpu
+          - os: macos-latest
+            voicevox_engine_asset_name: macos-x64
+          - os: windows-latest
+            voicevox_engine_asset_name: windows-cpu
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup environment
+        uses: ./.github/actions/setup-environment
+
+      - name: Install xvfb and x11-xserver-utils
+        if: startsWith(matrix.os, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y xvfb x11-xserver-utils # for electron
+          sudo apt-get install -y libsndfile1 # for engine
+
       - name: Download VOICEVOX ENGINE
         id: download-engine
         uses: ./.github/actions/download-engine
         with:
+          repo: ${{ env.VOICEVOX_ENGINE_REPO }}
           version: ${{ env.VOICEVOX_ENGINE_VERSION }}
           dest: ${{ github.workspace }}/voicevox_engine
+          target: ${{ matrix.voicevox_engine_asset_name }}
 
-      - name: Run npm run test:e2e
+      - name: Setup
         run: |
+          # playwright
+          npx playwright install
+
+          # run.exe
+          chmod +x ${{ steps.download-engine.outputs.run_path }}
+
+          # .env
           cp .env.test .env
           sed -i -e 's|"../voicevox_engine/run.exe"|"${{ steps.download-engine.outputs.run_path }}"|' .env
+          sed -i -e 's|"executionArgs": \[\],|"executionArgs": ["--port=50021"],|' .env
+
+      - name: Run npm run test:browser-e2e
+        run: |
+          if [ -n "${{ runner.debug }}" ]; then
+            export DEBUG="pw:browser*"
+          fi
+          if [[ ${{ matrix.os }} == ubuntu-* ]]; then
+            xvfb-run --auto-servernum npm run test:browser-e2e
+          else
+            npm run test:browser-e2e
+          fi
+
+      - name: Run npm run test:electron-e2e
+        run: |
           if [ -n "${{ runner.debug }}" ]; then
-            DEBUG=pw:browser* npm run test:e2e
+            export DEBUG="pw:browser*"
+          fi
+          if [[ ${{ matrix.os }} == ubuntu-* ]]; then
+            xvfb-run --auto-servernum npm run test:electron-e2e
           else
-            npm run test:e2e
+            npm run test:electron-e2e
           fi
 
+      - name: Upload playwright report to artifact
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report
+
   lint:
     runs-on: ubuntu-latest
     steps:
diff --git a/.gitignore b/.gitignore
index 44b68a9ab7..c3d792f470 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,8 @@ node_modules
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+/test-results/*
+/playwright-report/
 
 # local env files
 .env.local
diff --git a/Dockerfile b/Dockerfile
index 1026939f4d..ec007cb85b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16.16.0
+FROM node:18.13.0
 
 WORKDIR /opt
 RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs -o rustup_install.sh
@@ -11,4 +11,4 @@ WORKDIR /work
 RUN npm ci
 EXPOSE 3000
 
-CMD ["/bin/sh"]
\ No newline at end of file
+CMD ["/bin/sh"]
diff --git a/README.md b/README.md
index 42f9a96182..5bc838bab9 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ Issue 側で取り組み始めたことを伝えるか、最初に Draft プル
 ## 環境構築
 
 [.node-version](.node-version) に記載されているバージョンの Node.js をインストールしてください。  
-Node.js の管理ツール ([nvs](https://github.com/jasongin/nvs)や[Volta](https://volta.sh)など)を利用すると簡単にインストールでき、Node.js の自動切り替えもできます。
+Node.js の管理ツール（[nvs](https://github.com/jasongin/nvs)や[Volta](https://volta.sh)など）を利用すると簡単にインストールでき、Node.js の自動切り替えもできます。
 
 Node.js をインストール後、[このリポジトリ](https://github.com/VOICEVOX/voicevox.git) を
 Fork して `git clone` し、次のコマンドを実行してください。
@@ -118,7 +118,7 @@ npm ci
 
 ## 実行
 
-`.env.production`をコピーして`.env`を作成し、`DEFAULT_ENGINE_INFOS`内の`executionFilePath`に`voicevox_engine`のフルパスを指定します。
+`.env.production`をコピーして`.env`を作成し、`VITE_DEFAULT_ENGINE_INFOS`内の`executionFilePath`に`voicevox_engine`のフルパスを指定します。
 
 [製品版 VOICEVOX](https://voicevox.hiroshiba.jp/) のディレクトリのパスを指定すれば動きます。
 
@@ -132,7 +132,7 @@ AppImage 版の場合は`$ /path/to/VOICEVOX.AppImage --appimage-mount`でファ
 VOICEVOX エディタの実行とは別にエンジン API のサーバを立てている場合は`executionFilePath`を指定する必要はありません。
 これは製品版 VOICEVOX を起動している場合もあてはまります。
 
-また、エンジン API の宛先エンドポイントを変更する場合は`DEFAULT_ENGINE_INFOS`内の`host`を変更してください。
+また、エンジン API の宛先エンドポイントを変更する場合は`VITE_DEFAULT_ENGINE_INFOS`内の`host`を変更してください。
 
 ```bash
 npm run electron:serve
@@ -159,16 +159,41 @@ npm run electron:build
 
 ## テスト
 
+### 単体テスト
+
 ```bash
 npm run test:unit
-npm run test:e2e
+npm run test-watch:unit # 監視モード
 ```
 
-### 監視モード
+### ブラウザ End to End テスト
+
+Electron の機能が不要な、UI や音声合成などの End to End テストを実行します。
+> **Note**
+> 一部のエンジンの設定を書き換えるテストは、CI(Github Actions)上でのみ実行されるようになっています。
 
 ```bash
-npm run test-watch:unit
-npm run test-watch:e2e
+npm run test:browser-e2e
+npm run test-watch:browser-e2e # 監視モード
+npm run test-watch:browser-e2e -- --headed # テスト中の UI を表示
+```
+
+Playwright を使用しているためテストパターンを生成することもできます。
+ブラウザ版を起動している状態で以下のコマンドを実行してください。
+
+```bash
+npx playwright codegen http://localhost:5173/#/home  --viewport-size=800,600
+```
+
+詳細は [Playwright ドキュメントの Test generator](https://playwright.dev/docs/codegen-intro) を参照してください。
+
+### Electron End to End テスト
+
+Electron の機能が必要な、エンジン起動・終了などを含めた End to End テストを実行します。
+
+```bash
+npm run test:electron-e2e
+npm run test-watch:electron-e2e # 監視モード
 ```
 
 ## 依存ライブラリのライセンス情報の生成
@@ -204,15 +229,9 @@ typos
 ## 型チェック
 
 TypeScript の型チェックを行います。
-※ 現在チェック方法は 2 種類ありますが、将来的に 1 つになります。
 
 ```bash
-# .tsのみ型チェック
 npm run typecheck
-
-# .vueも含めて型チェック
-# ※ 現状、大量にエラーが検出されます。
-npm run typecheck:vue-tsc
 ```
 
 ## Markdownlint
@@ -234,9 +253,7 @@ shellcheck ./build/*.sh
 
 ## OpenAPI generator
 
-音声合成エンジンが起動している状態で以下のコマンドを実行してください。  
-なお、2023/07/02 現在、openapi-generator の最新版に[パッチ](https://github.com/OpenAPITools/openapi-generator/pull/15943)を当てたものを使わないと更新できない状態になっています。  
-詳細は[こちら](https://github.com/VOICEVOX/voicevox/pull/1361)
+音声合成エンジンが起動している状態で以下のコマンドを実行してください。
 
 ```bash
 curl http://127.0.0.1:50021/openapi.json >openapi.json
diff --git a/android/app/src/main/cpp/voicevox_core_wrapper/main.cpp b/android/app/src/main/cpp/voicevox_core_wrapper/main.cpp
index 607bea1355..533d418884 100644
--- a/android/app/src/main/cpp/voicevox_core_wrapper/main.cpp
+++ b/android/app/src/main/cpp/voicevox_core_wrapper/main.cpp
@@ -11,6 +11,7 @@ VoicevoxCore *voicevoxCore;
 
 bool assertCoreLoaded(JNIEnv *env) {
     if (!voicevoxCore) {
+        __android_log_print(ANDROID_LOG_INFO, LOG_TAG, "voicevoxCore is not loaded");
         jclass jExceptionClass = env->FindClass("java/lang/RuntimeException");
         env->ThrowNew(jExceptionClass, "voicevoxCore is not loaded");
         return false;
diff --git a/build/codesign_cleanup.bash b/build/codesign_cleanup.bash
new file mode 100644
index 0000000000..c3e8bb02e3
--- /dev/null
+++ b/build/codesign_cleanup.bash
@@ -0,0 +1,20 @@
+# !!! コードサイニング証明書を取り扱うので取り扱い注意 !!!
+
+# eSignerCKAで読み込んだコードサイニング証明書を破棄する
+
+set -eu
+
+if [ ! -v THUMBPRINT_PATH ]; then # THUMBPRINTの出力先
+    echo "THUMBPRINT_PATHが未定義です"
+    exit 1
+fi
+
+if [ ! -v ESIGNERCKA_INSTALL_DIR ]; then # eSignerCKAのインストール先
+    ESIGNERCKA_INSTALL_DIR='..\eSignerCKA'
+fi
+
+# 証明書を破棄
+powershell "& '$ESIGNERCKA_INSTALL_DIR\eSignerCKATool.exe' unload"
+
+# THUMBPRINTを削除
+rm "$THUMBPRINT_PATH"
diff --git a/build/codesign_setup.bash b/build/codesign_setup.bash
new file mode 100644
index 0000000000..8ad1e06144
--- /dev/null
+++ b/build/codesign_setup.bash
@@ -0,0 +1,61 @@
+# !!! コードサイニング証明書を取り扱うので取り扱い注意 !!!
+
+# eSignerCKAを使ってコードサイニング証明書を読み込む
+# electronから利用するためにTHUMBPRINTとsigntoolのパスを出力する
+
+set -eu
+
+if [ ! -v ESIGNERCKA_USERNAME ]; then # eSignerCKAのユーザー名
+    echo "ESIGNERCKA_USERNAMEが未定義です"
+    exit 1
+fi
+if [ ! -v ESIGNERCKA_PASSWORD ]; then # eSignerCKAのパスワード
+    echo "ESIGNERCKA_PASSWORDが未定義です"
+    exit 1
+fi
+if [ ! -v ESIGNERCKA_TOTP_SECRET ]; then # eSignerCKAのTOTP Secret
+    echo "ESIGNERCKA_TOTP_SECRETが未定義です"
+    exit 1
+fi
+if [ ! -v THUMBPRINT_PATH ]; then # THUMBPRINTの出力先
+    echo "THUMBPRINT_PATHが未定義です"
+    exit 1
+fi
+if [ ! -v SIGNTOOL_PATH_PATH ]; then # 対応しているsigntoolのパスの出力先
+    echo "SIGNTOOL_PATH_PATHが未定義です"
+    exit 1
+fi
+
+if [ ! -v ESIGNERCKA_INSTALL_DIR ]; then
+    ESIGNERCKA_INSTALL_DIR='..\eSignerCKA'
+fi
+
+# eSignerCKAのセットアップ
+if [ ! -d "$ESIGNERCKA_INSTALL_DIR" ]; then
+    curl -LO "https://github.com/SSLcom/eSignerCKA/releases/download/v1.0.6/SSL.COM-eSigner-CKA_1.0.6.zip"
+    unzip -o SSL.COM-eSigner-CKA_1.0.6.zip
+    mv *eSigner*CKA_*.exe eSigner_CKA_Installer.exe
+    powershell "
+        & ./eSigner_CKA_Installer.exe /CURRENTUSER /VERYSILENT /SUPPRESSMSGBOXES /DIR="$ESIGNERCKA_INSTALL_DIR" | Out-Null
+        & '$ESIGNERCKA_INSTALL_DIR\eSignerCKATool.exe' config -mode product -user '$ESIGNERCKA_USERNAME' -pass '$ESIGNERCKA_PASSWORD' -totp '$ESIGNERCKA_TOTP_SECRET' -key '$ESIGNERCKA_INSTALL_DIR\master.key' -r
+        & '$ESIGNERCKA_INSTALL_DIR\eSignerCKATool.exe' unload
+    "
+    rm SSL.COM-eSigner-CKA_1.0.6.zip eSigner_CKA_Installer.exe
+fi
+
+# 証明書を読み込む
+powershell "& '$ESIGNERCKA_INSTALL_DIR\eSignerCKATool.exe' load"
+
+THUMBPRINT=$(
+    powershell '
+        $CodeSigningCert = Get-ChildItem Cert:\CurrentUser\My -CodeSigningCert | Select-Object -First 1
+        echo "$($CodeSigningCert.Thumbprint)"
+    '
+)
+
+# THUMBPRINTを出力
+echo "$THUMBPRINT" >"$THUMBPRINT_PATH"
+
+# 対応しているsigntoolのパスを出力
+SIGNTOOL_PATH=$(ls "C:/Program Files (x86)/Windows Kits/"10/bin/*/x86/signtool.exe | sort -V | tail -n 1) # なぜかこれじゃないと動かない
+echo "$SIGNTOOL_PATH" >"$SIGNTOOL_PATH_PATH"
diff --git a/build/downloadMobileAssets.mts b/build/downloadMobileAssets.mts
index 52a45a788f..16076f0644 100644
--- a/build/downloadMobileAssets.mts
+++ b/build/downloadMobileAssets.mts
@@ -54,11 +54,16 @@ const downloadAndCompressModel = async () => {
       "git",
       "clone",
       "https://github.com/VOICEVOX/voicevox_core.git",
-      __dirname + "/vendored/voicevox_core",
-      "--depth",
-      "1"
+      __dirname + "/vendored/voicevox_core"
     );
   }
+  await runCommand(
+    "git",
+    "-C",
+    __dirname + "/vendored/voicevox_core",
+    "checkout",
+    "b8c1b316203a0963ce3d3aca787fd392cceba930"
+  );
   await runCommand(
     sevenZip,
     "a",
diff --git a/build/installer.nsh b/build/installer.nsh
index 58589d1555..267b951a4e 100644
--- a/build/installer.nsh
+++ b/build/installer.nsh
@@ -799,3 +799,154 @@ FunctionEnd
     ${endif}
   FunctionEnd
 !macroend
+
+; "%VITE_APP_NAME%"が空の状態でビルドすると他のソフトのファイルを消してしまうためビルドエラーにする。
+!define DOLLAR "$"
+!if "$%VITE_APP_NAME%" == "${DOLLAR}%VITE_APP_NAME%"
+  !error 'The environment variable "%VITE_APP_NAME%" is undefined.'
+!endif
+!if "$%VITE_APP_NAME%" == ""
+  !error 'The environment variable "%VITE_APP_NAME%" is empty.'
+!endif
+
+!macro locateVvppTmp callbacks
+  ${Locate} "$APPDATA\$%VITE_APP_NAME%\vvpp-engines\.tmp" "/L=D /M=????????????? /G=0" ${callbacks}
+!macroend
+
+!macro locateVvppEngines callbacks
+  ${Locate} "$APPDATA\$%VITE_APP_NAME%\vvpp-engines" "/L=D /M=*+????????-????-????-????-???????????? /G=0" ${callbacks}
+!macroend
+
+!macro customUninstallPage
+  ; エンジンディレクトリが存在する場合は、消去するかのチェックボックスを案内する
+  ; 存在しない場合はそのまま終了する
+  UninstPage custom un.removeUserDataPage un.removeUserDataPageLeave
+
+  Function un.removeUserDataPage
+    Push $0
+
+    Var /GLOBAL isExistEngine
+    StrCpy $isExistEngine "0"
+
+    ${If} $installMode == "all"
+      SetShellVarContext current
+    ${EndIf}
+
+    Push $R0
+
+    StrCpy $R0 "0"
+    !insertmacro locateVvppTmp un.isExistVvppTmp
+    ${If} $R0 == "1"
+      StrCpy $isExistEngine "1"
+    ${Else}
+      RMDir "$APPDATA\$%VITE_APP_NAME%\vvpp-engines\.tmp"
+    ${EndIf}
+    ClearErrors
+
+    ${If} $isExistEngine == "0"
+      StrCpy $R0 "0"
+      !insertmacro locateVvppEngines un.isExistVvppEngines
+      ${If} $R0 == "1"
+        StrCpy $isExistEngine "1"
+      ${Else}
+        RMDir "$APPDATA\$%VITE_APP_NAME%\vvpp-engines"
+      ${EndIf}
+      ClearErrors
+    ${EndIf}
+
+    Pop $R0
+
+    ${If} $installMode == "all"
+      SetShellVarContext all
+    ${EndIf}
+
+    ${If} $isExistEngine == "0"
+      Pop $0
+      Abort
+    ${EndIf}
+
+    nsDialogs::Create 1018
+    Pop $0
+
+    ${If} $0 == "error"
+      Pop $0
+      Abort
+    ${EndIf}
+
+    ; 既にアンインストールは完了してしまっているためキャンセルボタンは無効化する
+    GetDlgItem $0 $HWNDPARENT 2
+    EnableWindow $0 0
+
+    ${NSD_CreateCheckBox} 0 0 100% 12u "追加エンジンを削除する"
+    Var /GLOBAL removeAdditionalEngineCheckBox
+    Pop $removeAdditionalEngineCheckBox
+
+    nsDialogs::Show
+
+    Pop $0
+  FunctionEnd
+
+  Function un.removeUserDataPageLeave
+    Push $0
+    ; 削除の処理
+    ${NSD_GetState} $removeAdditionalEngineCheckBox $0
+
+    ${If} $0 == ${BST_CHECKED}
+      ${If} $installMode == "all"
+        SetShellVarContext current
+      ${EndIf}
+
+      !insertmacro locateVvppTmp  un.removeVvppTmp
+      RMDir "$APPDATA\$%VITE_APP_NAME%\vvpp-engines\.tmp"
+      !insertmacro locateVvppEngines un.removeVvppEngines
+      RMDir "$APPDATA\$%VITE_APP_NAME%\vvpp-engines"
+      ; 未知のファイルが残っている場合削除されずにエラーフラグが立つのでクリアする
+      ClearErrors
+
+      ${If} $installMode == "all"
+        SetShellVarContext all
+      ${EndIf}
+    ${EndIf}
+    Pop $0
+  FunctionEnd
+
+  Function un.isExistVvppTmp
+    ; 実行された場合は"$R0"に"1"を代入する。
+    StrCpy $R0 "1"
+    Push "StopLocate"
+  FunctionEnd
+
+  Function un.removeVvppTmp
+    RMDir /r "$R9"
+    Push ""
+  FunctionEnd
+
+  Function un.isExistVvppEngines
+    ; "engine_manifest.json"がある場合"$R0"に"1"を代入する。
+    ${If} ${FileExists} "$R9\engine_manifest.json"
+      StrCpy $R0 "1"
+      Push "StopLocate"
+    ${Else}
+      Push ""
+    ${EndIf}
+  FunctionEnd
+
+  Function un.removeVvppEngines
+    ; "engine_manifest.json"があるか確認してから削除する。
+    ${If} ${FileExists} "$R9\engine_manifest.json"
+      RMDir /r "$R9"
+      ClearErrors
+    ${EndIf}
+    Push ""
+  FunctionEnd
+
+  ; MUI_UNPAGE_FINISHの戻るボタンを無効化する
+  !define MUI_PAGE_CUSTOMFUNCTION_SHOW un.disableBack
+
+  Function un.disableBack
+    Push $0
+    GetDlgItem $0 $HWNDPARENT 3
+    EnableWindow $0 0
+    Pop $0
+  FunctionEnd
+!macroend
diff --git a/docker-compose.yml b/docker-compose.yml
index d0ab9641c8..c7215ca192 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -28,6 +28,6 @@ services:
     ports:
       - 3000:3000
     volumes:
-      - .:/work:cache
+      - .:/work:cached
     tty: true
     stdin_open: true
diff --git "a/docs/UI\345\220\215\347\247\260\343\201\250Vue\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\201\256\345\257\276\345\277\234\346\227\251\350\246\213\350\241\250.md" "b/docs/UI\345\220\215\347\247\260\343\201\250Vue\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\201\256\345\257\276\345\277\234\346\227\251\350\246\213\350\241\250.md"
new file mode 100644
index 0000000000..56b96d2d57
--- /dev/null
+++ "b/docs/UI\345\220\215\347\247\260\343\201\250Vue\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\201\256\345\257\276\345\277\234\346\227\251\350\246\213\350\241\250.md"
@@ -0,0 +1,59 @@
+# UI 名称と Vue ファイル名の対応早見表
+
+## 注意事項など
+
+このファイルは更新漏れなどが発生する可能性が高めです。実際のファイルも併せてご確認ください。
+
+各 UI の名称が分からない場合は、[VOICEVOX 専用 UI の名称](./UX・UIデザインの方針.md#voicevox-専用-ui-の名称) をご覧ください。
+
+## 対応早見
+
+全ファイル共通の拡張子`.vue`は省略しています。
+
+### views ディレクトリ
+
+- メイン画面全体 ･･･ [EditorHome](../src/views/EditorHome.vue)
+
+### compornents ディレクトリ
+
+- 最上部のバー（メニュー含む） ･･･ [MenuBar](../src/components/MenuBar.vue)
+  - メニュー
+    - メニューの項目リスト ･･･ [MenuItem](../src/components/MenuItem.vue)
+    - メニューのボタン ･･･ [MenuButton](../src/components/MenuButton.vue)
+    - エンジン
+      - エンジンの管理 ･･･ [EngineManageDialog](../src/components/EngineManageDialog.vue)
+    - 設定
+      - キー割り当て ･･･ [HotkeySettingDialog](../src/components/HotkeySettingDialog.vue)
+      - ツールバーのカスタマイズ ･･･ [HeaderBarCustomDialog](../src/components/HeaderBarCustomDialog.vue)
+      - キャラクター並び替え・試聴 ･･･ [CharacterOrderDialog](../src/components/CharacterOrderDialog.vue)
+        - サンプルボイス一覧の各キャラクター ･･･ [CharacterTryListenCard](../src/components/CharacterTryListenCard.vue)
+      - デフォルトスタイル ･･･ [DefaultStyleListDialog](../src/components/DefaultStyleListDialog.vue)
+        - 個別選択 ･･･ [DefaultStyleSelectDialog](../src/components/DefaultStyleSelectDialog.vue)
+      - 読み方＆アクセント辞書 ･･･ [DictionaryManageDialog](../src/components/DictionaryManageDialog.vue)
+      - オプション ･･･ [SettingDialog](../src/components/SettingDialog.vue)
+        - 書き出しファイル名パターン ･･･ [FileNamePatternDialog](../src/components/FileNamePatternDialog.vue)
+    - ヘルプ ･･･ `help`ディレクトリ
+      - [HelpDialog](../src/components/help/HelpDialog.vue) の`pagedata`の`components`をご参照ください。
+  - ウィンドウ右上のボタン群（ピンボタン含む） ･･･ [TitleBarButtons](../src/components/TitleBarButtons.vue)
+    - ピンボタン以外のボタン ･･･ [MinMaxCloseButtons](../src/components/MinMaxCloseButtons.vue)
+- ツールバー ･･･ [HeaderBar](../src/components/HeaderBar.vue)
+- キャラクター表示欄 ･･･ [CharacterPortrait](../src/components/CharacterPortrait.vue)
+- 台本欄（テキスト欄追加ボタンを含む） ･･･ [views/EditorHome](../src/views/EditorHome.vue) に含まれる
+  - レーン（行番号・テキスト欄含む） ･･･ [AudioCell](../src/components/AudioCell.vue)
+    - キャラクターアイコン ･･･ [CharacterButton](../src/components/CharacterButton.vue)
+    - コンテキスト（右クリック）メニュー ･･･ [ContextMenu](../src/components/ContextMenu.vue)
+- パラメータ調整欄 ･･･ [AudioInfo](../src/components/AudioInfo.vue)
+  - プリセット管理 ･･･ [PresetManageDialog](../src/components/PresetManageDialog.vue)
+- 詳細調整欄（各項目・再生ボタンを含む） ･･･ [AudioDetail](../src/components/AudioDetail.vue)
+  - ｱｸｾﾝﾄ項目のうち、文字以外の部分の UI ･･･ [AudioAccent](../src/components/AudioAccent.vue)
+  - ｲﾝﾄﾈｰｼｮﾝ・長さ項目のスライダー [AudioParameter](../src/components/AudioParameter.vue)
+- その他
+  - 初回起動時に表示される画面
+    - 利用規約 ･･･ [AcceptTermsDialog](../src/components/AcceptTermsDialog.vue)
+    - データ収集とプライバシーポリシー ･･･ [AcceptRetrieveTelemetryDialog](../src/components/AcceptRetrieveTelemetryDialog.vue)
+  - 起動時に表示される画面
+    - 追加キャラクターの紹介 ･･･ [CharacterOrderDialog](../src/components/CharacterOrderDialog.vue)（設定 / キャラクター並び替え・試聴 と共通）
+  - 「音声書き出し」時の成否の通知 ･･･ [SaveAllResultDialog](../src/components/SaveAllResultDialog.vue)
+  - 一度のみ表示されるヒント ･･･ [ToolTip](../src/components/ToolTip.vue)
+  - 音声生成中の進捗表示 ･･･ [ProgressDialog](../src/components/ProgressDialog.vue)
+  - エラー記録用（UI には影響なし） ･･･ [ErrorBoundary](../src/components/ErrorBoundary.vue)
diff --git "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md" "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md"
index ac88e9abca..fe22d824bd 100644
--- "a/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md"
+++ "b/docs/UX\343\203\273UI\343\203\207\343\202\266\343\202\244\343\203\263\343\201\256\346\226\271\351\207\235.md"
@@ -1,9 +1,9 @@
 # UI/UX デザイン方針
 
-## 基本方針
-
 メモ程度ですが、VOICEVOX の UX や UI のデザインの設計方針を共有します。
 
+## 基本方針
+
 - 最も重視していることは、「ユーザーが作ろうとしたコンテンツが完成までたどり着くこと」です
 - この思想から、以下のことを意識してデザインしています
   - 使いたくなるように感じること
@@ -30,6 +30,12 @@
 - 音声の品質を手軽に高められること
   - 音声を調声できることがわかるようなファーストビューにしています
 
+### ミッションとソフトウェアの方針の対応
+
+- [ミッション](./ミッション・バリュー・ビジョン.md#ミッション)達成には UGC（ユーザー生成コンテンツ）が最重要だと考えています
+  - ユーザーが作ったコンテンツが界隈を広げるという考え方です
+- この思想から、より良いコンテンツがより多く作られることをソフトウェアの方針としています
+
 ## デザインの意思決定のプロセス
 
 まだ試行錯誤を重ねていますが、だいたいこのような流れで進めています。
@@ -39,6 +45,7 @@
    - テキストでも手書きの図でもサンプル実装でもなんでも OK です
 2. 実際に実装してプルリクエストを作成
    - UI/UX デザインは触ってみないとわからない部分が多いので、実装をお願いする形になります
+   - デザインの変更はコード量が少なくても内容がかさばるので、+-合計80程度の差分に収めておくとマージまでがスムーズです
 3. 問題箇所を洗い出す
 4. マージ
 5. 全体のデザインを見て必要であればメンテナーが微調整
@@ -46,10 +53,50 @@
 ## 細かいデザインガイドライン
 
 - キャンセルボタンは左
+- ダイアログとトーストの使い分け
+  - ユーザーの操作に起因し、かつエラーや頻度が低いフィードバックにはダイアログを表示（`SHOW_DIALOG_`系）
+    - 例: ［エンジンの再起動が必要です］エンジンが停止しているため、音声を生成できません。エンジンを再起動しますか？［再起動しない/再起動する］
+  - それ以外はトーストで通知（`SHOW_NOTIFY_`系）
+    - 例: 音声を書き出しました。
+    - 例: エンジンが異常終了しました。エンジンの再起動が必要です。
+- ダイアログの warning と confirm の使い分け
+  - 続行することが望まれそうな場合は confirm
+  - キャンセルすることが望まれそうな場合は warning
 
 ## 文章など
 
-### 名称
+### VOICEVOX 専用 UI の名称
+
+🚷 のマークがついてるものはまだユーザー向けの名称ではないもの（案内で使わない）
+
+具体的にどのファイルと対応しているかについては、[UI 名称と Vue ファイル名の対応早見表](UI名称とVueファイル名の対応早見表.md) もご参照ください。
+
+- メニュー ･･･ 最上段のバー、ファイルや設定などの項目がある
+  - ピンボタン 🚷 ･･･ 閉じるボタン辺りの横にある最前面固定機能
+- ツールバー ･･･ メニューの下にあるバー、カスタマイズが可能
+- キャラクター表示欄 🚷 ･･･ 画面左にあるパネル
+- 台本欄 🚷 ･･･ テキスト欄などがあるパネル
+  - レーン 🚷 ･･･ テキスト１行が含まれる区画、ユーザー向けにはこれを指して「テキスト欄」と呼ぶこともある
+    - 行番号 ･･･ レーンの番号、レーンがユーザー向けになったら「レーン番号」へ
+    - キャラクターアイコン ･･･ キャラクターやスタイルを変更できるボタン
+    - テキスト欄 ･･･ 音声合成するためのテキストを入力する区画
+  - テキスト欄追加ボタン 🚷 ･･･ レーンを追加するボタン
+- パラメータ調整欄 🚷 ･･･ 画面右にあるパラメータなどを調整できるパネル
+- 詳細調整欄 🚷 ･･･ 画面下にあるイントネーションなどを調整できるパネル
+  - 項目 ･･･ 詳細調整欄のイントネーションやアクセントなどの選択ボタン
+  - 再生ボタン ･･･ 音声を再生できるボタン
+  - アクセント区間 ･･･ １つのアクセント句を表示する区画（より良い名称を求む）
+  - 文字ごとの区間 🚷 ･･･ アクセント区画の１文字の表示区画、ユーザー向けには「文字ごと」と呼ぶこともある
+  - 読み ･･･ 読み仮名の表示区画
+
+#### その他の UI パーツ
+
+- 欄 ･･･ 視覚的に区切られている場所のこと
+- パラメータの直接入力 🚷 ･･･ パラメータをクリックして直接入力できる区画、普通のテキスト表示と何ら変わらないので名称が無い
+- スライダー ･･･ アクセントや話速などを調整できる
+- 選択中のレーン・アクセント区間 🚷 ･･･ アクティブなレーン・アクセント区間のこと
+
+### その他の概念の名称
 
 - ユーザーに提示する場合は「ディレクトリ」ではなく「フォルダ」
 - マルチエンジン周り
@@ -63,8 +110,9 @@
 
 - アルファベットは半角
 - 括弧は全角
+  - ただし、中身が全て半角文字の場合に限り、括弧も半角
 - です/ます調
-- 項目名は名詞で終わる(体言止め)
+- 項目名は名詞で終わる（体言止め）
 - button の中身は「～する」
 
 ### tooltip
diff --git "a/docs/res/\347\265\202\344\272\206\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md" "b/docs/res/\347\265\202\344\272\206\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
index 06f91c9bb9..cb7761e068 100644
--- "a/docs/res/\347\265\202\344\272\206\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
+++ "b/docs/res/\347\265\202\344\272\206\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
@@ -1,46 +1,57 @@
 # 終了シーケンス図
 
 ```mermaid
-flowchart
-  node_1>"アプリ実行中"] -->|"アプリを再起動"| node_3["back.RESTART_APP"]
+flowchart TD
+  node_1>"アプリ実行中"] -.->|"MacのCmd+Q"| subgraph_2["app.before_quit"]
   style node_1 fill:#ffbbbb,stroke:#ff0000
-  node_3 --> node_4(["willRestart=true"])
-  node_1 -.->|"MacのCmd+Q"| subgraph_2["app.before_quit"]
   node_21{{"winがclose済みか"}} -.->|"NO"| subgraph_1["win.close"]
-  node_1 -->|"アプリ起動直後のVVPPインストール後の再起動"| 132024(["willRestart=true"])
-  132024 --> 512010["app.quit"]
-  512010 -.-> subgraph_2
-  438128["win.close"] -.-> subgraph_1
-  node_1 -.->|"ウィンドウを閉じる"| subgraph_1
-  node_4 --> 438128
-  442878["event.preventDefault"] --> 571782["Vuex.CHECK_EDITED_AND_NOT_WAVE"]
-  node_9["event.preventDefault"] --> 571782
+  node_1 -.->|"MacのCmd+W・WinのAlt+F4"| subgraph_1
   node_15["app.quit"] -.-> subgraph_2
-  a{{"willQuit"}} -.-> subgraph_2
-  node_8["win.destroy"] -.-> subgraph_1
-  701221{{"willRestart"}} -->|"false"| node_21
+  a{{"willQuit"}} -.->|"true"| subgraph_2
   node_21 -.->|"YES"| node_23>"アプリ終了"]
   style node_23 fill:#bbbbff,stroke:#0000ff
-  subgraph 571782["Vuex.CHECK_EDITED_AND_NOT_WAVE"]
-    node_5["back.CLOSE_WINDOW"] --> node_7(["willQuit=true"])
-    node_7 --> node_8
-    453066{" "} -->|"キャンセル"| node_6>"アプリ実行中に戻る"]
-    453066 --> node_5
+  846215{" "} -->|"reload"| 186768["RELOAD_APP"]
+  node_1 -->|"×ボタン"| 295190(["close"])
+  node_1 -->|"アプリを再読み込み"| 929152(["reload"])
+  846215 -->|"close"| 208965["back.CLOSE_WINDOW"]
+  node_9["event.preventDefault"] --> 295190
+  295190 --> 571782["Vuex.CHECK_EDITED_AND_NOT_SAVE"]
+  929152 --> 571782
+  177756{{"alreadyCompleted?"}} -->|"true"| node_21
+  442878["event.preventDefault"] --> 295190
+  node_8["win.destroy"] -.-> subgraph_2
+  705785[["cleanupEngines"]] ~~~ 793927["cleanupEngines"]
+  198115["win.loadURL"] --> 562861>"UIの描画"]
+  454139[["cleanupEngines"]] ~~~ 793927
+  subgraph 186768["RELOAD_APP"]
+    705785 --> 700765{{"alreadyCompleted?"}}
+    700765 -->|"false"| 462289["await"]
+    700765 -->|"true"| 464405[["launchEngines"]]
+    462289 --> 464405
+    464405 --> 198115
+    494918["win.loadURL(dummy)"] --> 705785
   end
-  subgraph subgraph_2["app.before_quit"]
-    c["willQuit"] -->|"false"| node_9
-    node_13["event.preventDefault"] --> node_14["全エンジンkill待機"]
-    node_19(["willRestart=false, willQuit=false"]) --> node_20>"back.start"]
+  subgraph 208965["back.CLOSE_WINDOW"]
+    node_7(["willQuit=true"]) --> node_8
+  end
+  subgraph 571782["Vuex.CHECK_EDITED_AND_NOT_SAVE"]
+    846215 -->|"キャンセル"| node_6>"アプリ実行中に戻る"]
+  end
+  subgraph 793927["cleanupEngines"]
     node_12["engine.killEngineAll"] --> 889691{{"numLivingEngineProcess"}}
-    889691 -->|"&gt;0"| 701221
-    701221 -->|"true"| node_17["event.preventDefault"]
-    c -->|"true"| node_12
     889691 -->|"0"| 916552{{"hasMarkedEngineDirs"}}
-    916552 -->|"false"| 701221
-    916552 -->|"true"| node_13
-    node_17 --> node_19
-    node_14 --> node_18["vvpp.handleMarkedEngineDirs"]
-    node_18 --> node_15
+    node_14["全エンジンkill待機"] --> node_18["vvpp.handleMarkedEngineDirs"]
+    889691 -->|">0"| node_14
+    916552 -->|"false"| node_14
+    916552 -->|"true"| 655722["何もしない"]
+  end
+  subgraph subgraph_2["app.before_quit"]
+    c["willQuit"] -->|"false"| node_9
+    c -->|"true"| 454139
+    454139 --> 177756
+    177756 -->|"false"| node_13["event.preventDefault"]
+    node_13 --> 322763["await"]
+    322763 --> node_15
   end
   subgraph subgraph_1["win.close"]
     a -->|"false"| 442878
diff --git "a/docs/res/\350\265\267\345\213\225\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md" "b/docs/res/\350\265\267\345\213\225\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
index 561956e4a8..191115bc70 100644
--- "a/docs/res/\350\265\267\345\213\225\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
+++ "b/docs/res/\350\265\267\345\213\225\343\202\267\343\203\274\343\202\261\343\203\263\343\202\271\345\233\263.md"
@@ -3,20 +3,17 @@
 ```mermaid
 flowchart
   174170["back.installVvppEngineWithWarning"] --> 786961["back.installVvppEngine"]
-  786961 --> 409576{{"再起動するか"}}
-  409576 -->|"する"| 173803>"アプリ起動直後のVVPPインストール後の再起動へ"]
   764022["（画面読み込み）"] --> 698565["App.vue"]
   764022 --> 332024["EditorHome.vue"]
-  389651["back.start"] --> 733212["back.createWindow"]
-  733212 -.-> 764022
+  733212["back.createWindow"] -.-> 764022
   448821>"アプリ停止中"] -.-> 430173["app.ready"]
   style 448821 fill:#ffbbbb,stroke:#ff0000
   430173 -->|"ある"| 174170
-  409576 -->|"しない"| 389651
-  430173 -->|"ない"| 389651
+  430173 -->|"ない"| 389651["back.start"]
   698565 -.-> 704891>"アプリ実行中"]
   style 704891 fill:#bbbbff,stroke:#0000ff
   332024 -.-> 704891
+  786961 --> 389651
   subgraph 332024["EditorHome.vue"]
     709863["Vuex.GET_ENGINE_INFOS"] --> 773040["Vuex.POST_ENGINE_START"]
     subgraph 773040["Vuex.POST_ENGINE_START"]
@@ -31,13 +28,19 @@ flowchart
     end
   end
   subgraph 389651["back.start"]
-    250263["store.get engineSettings"] --> 222321["store.set engineSettings"]
-    870482["store.get registeredEngineDirs"] --> 250263
-    222321 --> 967432["engine.runEngineAll"]
-    656570["engine.fetchEngineInfos"] --> 870482
-    110954["engine.initializeEngineInfosAndAltPortInfo"] --> 656570
-    subgraph 656570["engine.fetchEngineInfos"]
-      267019["engine.fetchAdditionalEngineInfos"]
+    967432["engine.runEngineAll"] --> 733212
+    subgraph 733212["back.createWindow"]
+      613440["win.loadURL"]
+    end
+    subgraph 548965["launchEngines"]
+      250263["store.get engineSettings"] --> 222321["store.set engineSettings"]
+      870482["store.get registeredEngineDirs"] --> 250263
+      222321 --> 967432
+      656570["engine.fetchEngineInfos"] --> 870482
+      110954["engine.initializeEngineInfosAndAltPortInfo"] --> 656570
+      subgraph 656570["engine.fetchEngineInfos"]
+        267019["engine.fetchAdditionalEngineInfos"]
+      end
     end
   end
   subgraph 430173["app.ready"]
@@ -49,7 +52,4 @@ flowchart
       225701["win.show"]
     end
   end
-  subgraph 733212["back.createWindow"]
-    613440["win.loadURL"]
-  end
 ```
diff --git "a/docs/\343\202\263\343\203\274\343\203\211\343\201\256\346\255\251\343\201\215\346\226\271.md" "b/docs/\343\202\263\343\203\274\343\203\211\343\201\256\346\255\251\343\201\215\346\226\271.md"
index 0ed42e2a27..9bfa7de10e 100644
--- "a/docs/\343\202\263\343\203\274\343\203\211\343\201\256\346\255\251\343\201\215\346\226\271.md"
+++ "b/docs/\343\202\263\343\203\274\343\203\211\343\201\256\346\255\251\343\201\215\346\226\271.md"
@@ -80,6 +80,7 @@ TODO
   - App.vue ･･･ Vue のルートになるコンポーネント。他の全てのコンポーネントの親。
   - views ディレクトリ ･･･ 画面全体を覆うような Vue コンポーネントのディレクトリ。
   - components ディレクトリ ･･･ UI のパーツになる Vue コンポーネントディレクトリ。
+    - 具体的にどの UI と対応しているかについては、[UI 名称と Vue ファイル名の対応早見表](UI名称とVueファイル名の対応早見表.md) もご参照ください。
   - store ディレクトリ ･･･ Vuex のストアのディレクトリ。アプリのロジックの大半はここに書かれる。
   - electron ディレクトリ ･･･ Electron の ipc 通信などのコードが置かれるディレクトリ。
   - browser ディレクトリ ･･･ WIP
@@ -112,12 +113,17 @@ flowchart LR
   945949 -->|"条件２"| 871294["受動的な処理は点線\n（イベント発生など）"]
   366994 --> 617606["大きい関数（subgraph）"]
   871294 -.->|"発生条件"| 617606
-  617606 --> 314405>"なんらかの状態"]
-  617606 --> 230853>"シーケンスの終了"]
+  572391[["外に定義した関数"]] --> 314405>"なんらかの状態"]
+  572391 --> 230853>"シーケンスの終了"]
   style 230853 fill:#bbbbff,stroke:#0000ff
+  617606 --> 572391
+  572391 ~~~|"透明な線で結んでもよし"| 513532["外に定義した関数"]
   subgraph 617606["大きい関数（subgraph）"]
     776462["処理開始"] --> 992786["処理終了"]
   end
+  subgraph 513532["外に定義した関数"]
+    327013["処理"]
+  end
 ```
 
 処理の prefix 一覧
diff --git "a/docs/\343\203\225\343\202\251\343\203\263\343\203\210\343\201\253\343\201\244\343\201\204\343\201\246.md" "b/docs/\343\203\225\343\202\251\343\203\263\343\203\210\343\201\253\343\201\244\343\201\204\343\201\246.md"
index 6ed601cd9e..1d4c57a480 100644
--- "a/docs/\343\203\225\343\202\251\343\203\263\343\203\210\343\201\253\343\201\244\343\201\204\343\201\246.md"
+++ "b/docs/\343\203\225\343\202\251\343\203\263\343\203\210\343\201\253\343\201\244\343\201\204\343\201\246.md"
@@ -13,7 +13,7 @@ VOICEVOX では改変したRounded M+ 1pを使用しています。
 Rounded M+をダウンロードします。
 2. [ttfautohint](https://freetype.org/ttfautohint/)をインストールします。[^longnote]:[ttfautohint-py](https://pypi.org/project/ttfautohint-py/)を使用しました。
 3. [woff2](https://github.com/google/woff2)をビルドします。
-4. `rounded-mplus-20150529.7z`から`rounded-mplus-1p-(ウェイト).ttf`を全て`src/fonts`に解凍します。
+4. `rounded-mplus-20150529.7z`から`rounded-mplus-1p-（ウェイト）.ttf`を全て`src/fonts`に解凍します。
 5. ttfautohintを使用して、Rounded M+のヒント情報を削除します。名前は`Unhinted Rounded M+ 1p`とします。
 6. woff2を使用して、ttfからwoff2へ変換します。
 
diff --git "a/docs/\345\205\250\344\275\223\346\247\213\346\210\220.md" "b/docs/\345\205\250\344\275\223\346\247\213\346\210\220.md"
index 3868803f24..41dd5175e5 100644
--- "a/docs/\345\205\250\344\275\223\346\247\213\346\210\220.md"
+++ "b/docs/\345\205\250\344\275\223\346\247\213\346\210\220.md"
@@ -12,8 +12,9 @@
 [The Open Source Definition](https://opensource.org/osd)
 
 そのため VOICEVOX では、キャラクターの要素（声や見た目）を含まない OSS 版と、OSS 版をもとに構築してキャラクターの要素を含めた製品版を分けて開発・配布しています。
+
 <img src="./res/全体構成_OSS版と製品版の違い.svg" width="320">
-<!-- 修正時はエディタ側のドキュメントも要修正 -->
+<!-- 修正時は全体向け側のドキュメントも要修正 -->
 <!-- https://github.com/VOICEVOX/.github/blob/main/profile/README.md -->
 
 ## 構成
diff --git "a/docs/\350\211\262\343\201\253\343\201\244\343\201\204\343\201\246.md" "b/docs/\350\211\262\343\201\253\343\201\244\343\201\204\343\201\246.md"
index 510bf8e463..4a644c7121 100644
--- "a/docs/\350\211\262\343\201\253\343\201\244\343\201\204\343\201\246.md"
+++ "b/docs/\350\211\262\343\201\253\343\201\244\343\201\204\343\201\246.md"
@@ -9,7 +9,6 @@
 | 変数名 | 役割 |
 | ---- | ---- |
 | primary | プライマリーカラー |
-| primary-light | 明るめのプライマリーカラー |
 | display | 情報を表示するための色。文字色とか |
 | display-on-primary | プライマリーカラー上の情報を表示するための色 |
 | display-hyperlink | リンクを表示するための色 |
diff --git a/electron-builder.config.js b/electron-builder.config.js
index b3fede70ac..8fa391c643 100644
--- a/electron-builder.config.js
+++ b/electron-builder.config.js
@@ -1,6 +1,10 @@
 // @ts-check
 const path = require("path");
 const fs = require("fs");
+const dotenv = require("dotenv");
+
+const dotenvPath = path.join(process.cwd(), ".env.production");
+dotenv.config({ path: dotenvPath });
 
 const VOICEVOX_ENGINE_DIR =
   process.env.VOICEVOX_ENGINE_DIR ?? "../voicevox_engine/run.dist/";
@@ -17,6 +21,12 @@ const LINUX_EXECUTABLE_NAME = process.env.LINUX_EXECUTABLE_NAME;
 // ${productName}-${version}.${ext}
 const MACOS_ARTIFACT_NAME = process.env.MACOS_ARTIFACT_NAME;
 
+// コード署名証明書
+const WIN_CERTIFICATE_SHA1 = process.env.WIN_CERTIFICATE_SHA1;
+const WIN_SIGNING_HASH_ALGORITHMS = process.env.WIN_SIGNING_HASH_ALGORITHMS
+  ? JSON.parse(process.env.WIN_SIGNING_HASH_ALGORITHMS)
+  : undefined;
+
 const isMac = process.platform === "darwin";
 
 // electron-builderのextraFilesは、ファイルのコピー先としてVOICEVOX.app/Contents/を使用する。
@@ -78,10 +88,6 @@ const builderOptions = {
       from: "build/README.txt",
       to: extraFilePrefix + "README.txt",
     },
-    {
-      from: ".env.production",
-      to: extraFilePrefix + ".env",
-    },
     {
       from: VOICEVOX_ENGINE_DIR,
       to: extraFilePrefix,
@@ -108,6 +114,12 @@ const builderOptions = {
         arch: ["x64"],
       },
     ],
+    certificateSha1:
+      WIN_CERTIFICATE_SHA1 !== "" ? WIN_CERTIFICATE_SHA1 : undefined,
+    signingHashAlgorithms:
+      WIN_SIGNING_HASH_ALGORITHMS !== ""
+        ? WIN_SIGNING_HASH_ALGORITHMS
+        : undefined,
   },
   nsisWeb: {
     artifactName:
diff --git a/openapitools.json b/openapitools.json
index 3b40e47a45..06ac150787 100644
--- a/openapitools.json
+++ b/openapitools.json
@@ -2,6 +2,6 @@
   "$schema": "node_modules/@openapitools/openapi-generator-cli/config.schema.json",
   "spaces": 2,
   "generator-cli": {
-    "version": "5.3.0"
+    "version": "7.0.0"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index b9e745e661..d5c53cff6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,12 +14,13 @@
         "@capacitor/splash-screen": "5.0.2",
         "@gtm-support/vue-gtm": "1.2.3",
         "@quasar/extras": "1.10.10",
+        "async-lock": "1.4.0",
         "buffer": "6.0.3",
         "clone-deep": "4.0.1",
         "core-js": "3.12.1",
         "crypto-js": "4.1.1",
         "dayjs": "1.10.7",
-        "dotenv": "16.0.0",
+        "diff": "5.1.0",
         "electron-log": "4.4.8",
         "electron-store": "8.1.0",
         "electron-window-state": "5.0.3",
@@ -48,8 +49,10 @@
         "@openapitools/openapi-generator-cli": "2.3.3",
         "@playwright/test": "1.32.1",
         "@quasar/vite-plugin": "1.3.0",
+        "@types/async-lock": "1.4.0",
         "@types/clone-deep": "4.0.1",
         "@types/crypto-js": "4.1.1",
+        "@types/diff": "5.0.3",
         "@types/electron-devtools-installer": "2.2.2",
         "@types/encoding-japanese": "1.0.18",
         "@types/glob": "8.0.0",
@@ -68,7 +71,8 @@
         "@vue/test-utils": "2.3.0",
         "cross-env": "7.0.3",
         "cross-var": "1.1.0",
-        "electron": "23.3.10",
+        "dotenv": "16.0.0",
+        "electron": "25.3.2",
         "electron-builder": "24.0.0-alpha.12",
         "electron-devtools-installer": "3.2.0",
         "eslint": "8.24.0",
@@ -1986,6 +1990,12 @@
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
       "dev": true
     },
+    "node_modules/@types/async-lock": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@types/async-lock/-/async-lock-1.4.0.tgz",
+      "integrity": "sha512-2+rYSaWrpdbQG3SA0LmMT6YxWLrI81AqpMlSkw3QtFc2HGDufkweQSn30Eiev7x9LL0oyFrBqk1PXOnB9IEgKg==",
+      "dev": true
+    },
     "node_modules/@types/cacheable-request": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
@@ -2034,6 +2044,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/diff": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/diff/-/diff-5.0.3.tgz",
+      "integrity": "sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==",
+      "dev": true
+    },
     "node_modules/@types/electron-devtools-installer": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@types/electron-devtools-installer/-/electron-devtools-installer-2.2.2.tgz",
@@ -2149,9 +2165,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.3.0.tgz",
-      "integrity": "sha512-8/bnjSZD86ZfpBsDlCIkNXIvm+h6wi9g7IqL+kmFkQ+Wvu3JrasgLElfiPgoo8V8vVfnEi0QVS12gbl94h9YsQ==",
+      "version": "18.18.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
+      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==",
       "devOptional": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -2712,15 +2728,6 @@
         "pretty-format": "^27.5.1"
       }
     },
-    "node_modules/@vitest/utils/node_modules/diff": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
-      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
     "node_modules/@volar/language-core": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.4.0.tgz",
@@ -3794,6 +3801,11 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/async-lock": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
+      "integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -6917,6 +6929,14 @@
         "wrappy": "1"
       }
     },
+    "node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -7025,6 +7045,7 @@
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
       "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -7119,14 +7140,14 @@
       }
     },
     "node_modules/electron": {
-      "version": "23.3.10",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.10.tgz",
-      "integrity": "sha512-PcEQo8letcJYUAP3x+GN4Qf4atS65EVxe3VhKrQUnSI6GA5+K1zrs3ur88iHXD4a3mJaH/491Y4pBTLxFqwXnA==",
+      "version": "25.3.2",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-25.3.2.tgz",
+      "integrity": "sha512-xiktJvXraaE/ARf2OVHFyTze1TksSbsbJgOaBtdIiBvUduez6ipATEPIec8Msz1n6eQ+xqYb6YF8tDuIZtJSPw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^16.11.26",
+        "@types/node": "^18.11.18",
         "extract-zip": "^2.0.1"
       },
       "bin": {
@@ -7436,12 +7457,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/electron/node_modules/@types/node": {
-      "version": "16.11.41",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.41.tgz",
-      "integrity": "sha512-mqoYK2TnVjdkGk8qXAVGc/x9nSaTpSrFaGFm43BUH3IdoBV0nta6hYaGmdOvIMlbHJbUEVen3gvwpwovAZKNdQ==",
-      "dev": true
-    },
     "node_modules/elementtree": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/elementtree/-/elementtree-0.1.7.tgz",
@@ -18761,6 +18776,12 @@
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
       "dev": true
     },
+    "@types/async-lock": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@types/async-lock/-/async-lock-1.4.0.tgz",
+      "integrity": "sha512-2+rYSaWrpdbQG3SA0LmMT6YxWLrI81AqpMlSkw3QtFc2HGDufkweQSn30Eiev7x9LL0oyFrBqk1PXOnB9IEgKg==",
+      "dev": true
+    },
     "@types/cacheable-request": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
@@ -18809,6 +18830,12 @@
         "@types/ms": "*"
       }
     },
+    "@types/diff": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/diff/-/diff-5.0.3.tgz",
+      "integrity": "sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==",
+      "dev": true
+    },
     "@types/electron-devtools-installer": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@types/electron-devtools-installer/-/electron-devtools-installer-2.2.2.tgz",
@@ -18924,9 +18951,9 @@
       }
     },
     "@types/node": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.3.0.tgz",
-      "integrity": "sha512-8/bnjSZD86ZfpBsDlCIkNXIvm+h6wi9g7IqL+kmFkQ+Wvu3JrasgLElfiPgoo8V8vVfnEi0QVS12gbl94h9YsQ==",
+      "version": "18.18.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
+      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==",
       "devOptional": true
     },
     "@types/normalize-package-data": {
@@ -19325,14 +19352,6 @@
         "loupe": "^2.3.6",
         "picocolors": "^1.0.0",
         "pretty-format": "^27.5.1"
-      },
-      "dependencies": {
-        "diff": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
-          "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
-          "dev": true
-        }
       }
     },
     "@volar/language-core": {
@@ -20243,6 +20262,11 @@
       "integrity": "sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==",
       "dev": true
     },
+    "async-lock": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
+      "integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -22872,6 +22896,11 @@
         "wrappy": "1"
       }
     },
+    "diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -22962,7 +22991,8 @@
     "dotenv": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
-      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q=="
+      "integrity": "sha512-qD9WU0MPM4SWLPJy/r2Be+2WgQj8plChsyrCNQzW/0WjvcJQiKQJ9mH3ZgB3fxbUUxgc/11ZJ0Fi5KiimWGz2Q==",
+      "dev": true
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -23044,22 +23074,14 @@
       }
     },
     "electron": {
-      "version": "23.3.10",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-23.3.10.tgz",
-      "integrity": "sha512-PcEQo8letcJYUAP3x+GN4Qf4atS65EVxe3VhKrQUnSI6GA5+K1zrs3ur88iHXD4a3mJaH/491Y4pBTLxFqwXnA==",
+      "version": "25.3.2",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-25.3.2.tgz",
+      "integrity": "sha512-xiktJvXraaE/ARf2OVHFyTze1TksSbsbJgOaBtdIiBvUduez6ipATEPIec8Msz1n6eQ+xqYb6YF8tDuIZtJSPw==",
       "dev": true,
       "requires": {
         "@electron/get": "^2.0.0",
-        "@types/node": "^16.11.26",
+        "@types/node": "^18.11.18",
         "extract-zip": "^2.0.1"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "16.11.41",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.41.tgz",
-          "integrity": "sha512-mqoYK2TnVjdkGk8qXAVGc/x9nSaTpSrFaGFm43BUH3IdoBV0nta6hYaGmdOvIMlbHJbUEVen3gvwpwovAZKNdQ==",
-          "dev": true
-        }
       }
     },
     "electron-builder": {
diff --git a/package.json b/package.json
index 61b85eb7d3..cb9500c493 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,14 @@
   "scripts": {
     "test:unit": "vitest --run",
     "test-watch:unit": "vitest --watch",
-    "test:e2e": "playwright test",
-    "test-watch:e2e": "cross-env PWTEST_WATCH=1 playwright test",
+    "test:electron-e2e": "cross-env VITE_TARGET=electron playwright test",
+    "test-watch:electron-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=electron playwright test",
+    "test:browser-e2e": "cross-env VITE_TARGET=browser playwright test --reporter=html",
+    "test-watch:browser-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=browser playwright test --reporter=html",
     "lint": "eslint --ext .js,.vue,.ts *.config.* src tests build",
     "fmt": "eslint --ext .js,.vue,.ts *.config.* src tests build --fix",
     "markdownlint": "markdownlint --ignore node_modules/ --ignore dist/ --ignore dist_electron/ --ignore build/vendored/voicevox_engine --ignore build/vendored/voicevox_core ./",
     "typecheck": "tsc --noEmit",
-    "typecheck:vue-tsc": "vue-tsc --noEmit",
     "electron:build": "cross-env VITE_TARGET=electron vite build && electron-builder --config electron-builder.config.js",
     "electron:build_dir": "cross-env VITE_TARGET=electron vite build && electron-builder --config electron-builder.config.js --dir",
     "electron:build_pnever": "cross-env VITE_TARGET=electron vite build && electron-builder --config electron-builder.config.js --publish never",
@@ -46,12 +47,13 @@
     "@capacitor/splash-screen": "5.0.2",
     "@gtm-support/vue-gtm": "1.2.3",
     "@quasar/extras": "1.10.10",
+    "async-lock": "1.4.0",
     "buffer": "6.0.3",
     "clone-deep": "4.0.1",
     "core-js": "3.12.1",
     "crypto-js": "4.1.1",
     "dayjs": "1.10.7",
-    "dotenv": "16.0.0",
+    "diff": "5.1.0",
     "electron-log": "4.4.8",
     "electron-store": "8.1.0",
     "electron-window-state": "5.0.3",
@@ -83,8 +85,10 @@
     "@openapitools/openapi-generator-cli": "2.3.3",
     "@playwright/test": "1.32.1",
     "@quasar/vite-plugin": "1.3.0",
+    "@types/async-lock": "1.4.0",
     "@types/clone-deep": "4.0.1",
     "@types/crypto-js": "4.1.1",
+    "@types/diff": "5.0.3",
     "@types/electron-devtools-installer": "2.2.2",
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
@@ -103,7 +107,8 @@
     "@vue/test-utils": "2.3.0",
     "cross-env": "7.0.3",
     "cross-var": "1.1.0",
-    "electron": "23.3.10",
+    "dotenv": "16.0.0",
+    "electron": "25.3.2",
     "electron-builder": "24.0.0-alpha.12",
     "electron-devtools-installer": "3.2.0",
     "eslint": "8.24.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 19a3fa6583..9865ea2294 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,10 +1,44 @@
-import type { PlaywrightTestConfig } from "@playwright/test";
+import type { PlaywrightTestConfig, Project } from "@playwright/test";
+import { z } from "zod";
+
+import dotenv from "dotenv";
+dotenv.config({ override: true });
+
+let project: Project;
+const additionalWebServer: PlaywrightTestConfig["webServer"] = [];
+
+if (process.env.VITE_TARGET === "electron") {
+  project = { name: "electron", testDir: "./tests/e2e/electron" };
+} else if (process.env.VITE_TARGET === "browser") {
+  project = { name: "browser", testDir: "./tests/e2e/browser" };
+
+  // エンジンの起動が必要
+  const defaultEngineInfosEnv = process.env.VITE_DEFAULT_ENGINE_INFOS ?? "[]";
+  const envSchema = z // FIXME: electron起動時のものと共通化したい
+    .object({
+      host: z.string(),
+      executionFilePath: z.string(),
+      executionArgs: z.array(z.string()),
+    })
+    .passthrough()
+    .array();
+  const engineInfos = envSchema.parse(JSON.parse(defaultEngineInfosEnv));
+
+  engineInfos.forEach((info) => {
+    additionalWebServer.push({
+      command: `${info.executionFilePath} ${info.executionArgs.join(" ")}`,
+      url: `${info.host}/version`,
+      reuseExistingServer: !process.env.CI,
+    });
+  });
+} else {
+  throw new Error(`VITE_TARGETの指定が不正です。${process.env.VITE_TARGET}`);
+}
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -18,12 +52,20 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
+    timeout: 30 * 1000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
+  reporter: [
+    [
+      "html",
+      {
+        open: process.env.CI ? "never" : "on-failure",
+      },
+    ],
+  ],
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   use: {
@@ -31,19 +73,25 @@ const config: PlaywrightTestConfig = {
     actionTimeout: 0,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+    video: {
+      mode: "retain-on-failure",
+    },
   },
 
   /* Configure projects for major browsers */
-  projects: [{ name: "electron" }],
+  projects: [project],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   // outputDir: 'test-results/',
 
-  webServer: {
-    command: "cross-env VITE_TARGET=electron vite --mode test",
-    port: 5173,
-    reuseExistingServer: !process.env.CI,
-  },
+  webServer: [
+    {
+      command: "vite --mode test",
+      port: 5173,
+      reuseExistingServer: !process.env.CI,
+    },
+    ...additionalWebServer,
+  ],
 };
 
 export default config;
diff --git a/public/contact.md b/public/contact.md
index 595da69dca..131378d7ff 100644
--- a/public/contact.md
+++ b/public/contact.md
@@ -13,6 +13,11 @@
 - OS の種類・VOICEVOX のバージョン
 - 解決のために試されたこと
 - ウイルス対策ソフトなどの有無（関係がありそうであれば）
+- エラーログ
+
+エラーログは VOICEVOX ソフトウェア内のヘルプ → お問い合わせ → 「ログフォルダを開く」ボタンから確認できます。
+
+エラーログには PC ユーザー名などのシステム情報が含まれる場合があります。頂いたデータは問題解決のためのみに使用し、プライバシーは厳重に保護します。
 
 開発者の方は GitHub Issue にてご報告・ご連絡ください。
 
diff --git a/public/howtouse.md b/public/howtouse.md
index 96dc755b96..2ab9b59016 100644
--- a/public/howtouse.md
+++ b/public/howtouse.md
@@ -11,7 +11,7 @@
 
 ### Windows 版
 
-起動しようとすると「Windows によって PC が保護されました」というダイアログが表示されるかもしれません。その際は「詳細情報」をクリックし、「実行」を選んでください。
+起動しようとすると「Windows によって PC が保護されました」というダイアログが表示されるかもしれません。その際は「詳細情報」をクリックし、発行元が「Kazuyuki Hiroshiba」であることを確認してから「実行」を選んでください。
 
 <img src="res/image14.png" style="max-height: 16rem" alt="「Windows によって PC が保護されました」というダイアログ" /> → <img src="res/image15.png" style="max-height: 16rem" alt="「詳細情報」をクリックし、「実行」を選んでいる様子。" />
 
@@ -111,7 +111,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 
 <img src="res/image18.png" style="max-height: 14rem" alt="イントネーション調整スペースを縦に広くした様子"/>
 
-マウスホイールで調整することもできます。Ctrl キー (Mac 版では Command キー) を押しながらマウスホイールを使うと更に細かく調整できます。Alt キー (Mac 版では Option キー) を押しながらイントネーションや長さを調整することで、同じアクセント区間内を同時に調整できます。
+マウスホイールで調整することもできます。Ctrl キー（Mac 版では Command キー）を押しながらマウスホイールを使うと更に細かく調整できます。Alt キー（Mac 版では Option キー）を押しながらイントネーションや長さを調整することで、同じアクセント区間内を同時に調整できます。
 
 また、「キ」や「ツ」や「ス」などが無声化されている場合、バーが灰色になっています。イントネーション欄のテキストをクリックすることで無声化を解くことができます。
 
@@ -158,7 +158,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 ```txt
 四国めたん,おはようございます,こんにちは
 ずんだもん,こんばんは
-四国めたん(あまあま),さようなら
+四国めたん（あまあま）,さようなら
 ```
 
 このように読み込まれます。
@@ -179,7 +179,7 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
 ## ショートカットキー
 
 「設定」の「キー割り当て」で変更することができます。
-(Mac 版をご利用の場合は Ctrl を Command に、Alt を Option に読み替えてください。)
+（Mac 版をご利用の場合は Ctrl を Command に、Alt を Option に読み替えてください。）
 
 - 上下キー
   - 上下のテキスト欄に移動
diff --git a/public/qAndA.md b/public/qAndA.md
index d7c35dea48..d38987779b 100644
--- a/public/qAndA.md
+++ b/public/qAndA.md
@@ -14,7 +14,7 @@ Windows／Mac／Linux 搭載の PC に対応しています。
 
 ### GPU 版
 
-GPU 搭載の Windows PC と、Nvidia 製 GPU 搭載の Linux PC に対応しています。
+DirectML 対応の GPU を搭載した Windows PC と、Nvidia 製 GPU 搭載の Linux PC に対応しています。
 
 ## インストールに関する質問
 
@@ -47,11 +47,11 @@ GPU 搭載の Windows PC と、Nvidia 製 GPU 搭載の Linux PC に対応して
 
 #### Windows 版のインストール先
 
-`C:\Users\(ユーザー名)\AppData\Local\Programs\VOICEVOX`
+`C:\Users\（ユーザー名）\AppData\Local\Programs\VOICEVOX`
 
 #### Mac 版のインストール先
 
-`/Applications/VOICEVOX` もしくは `/Users/(ユーザー名)/Applications/VOICEVOX`
+`/Applications/VOICEVOX` もしくは `/Users/（ユーザー名）/Applications/VOICEVOX`
 
 ### Q. アップデート方法を教えてください
 
@@ -89,11 +89,11 @@ VOICEVOX Twitter アカウント [@voicevox_pj](https://twitter.com/voicevox_pj)
 
 #### Windows 版の設定ファイル
 
-`C:\Users\(ユーザー名)\AppData\Roaming\voicevox\config.json`
+`C:\Users\（ユーザー名）\AppData\Roaming\voicevox\config.json`
 
 #### Mac 版の設定ファイル
 
-`/Users/(ユーザー名)/Library/Application Support/voicevox/config.json`
+`/Users/（ユーザー名）/Library/Application Support/voicevox/config.json`
 
 ### Q. エンジンの起動が失敗したというエラーが表示されます
 
@@ -129,15 +129,15 @@ VOICEVOX Twitter アカウント [@voicevox_pj](https://twitter.com/voicevox_pj)
 
 ### Q. エラーログはどこで確認できますか？
 
-以下のフォルダに保存されています。
+ヘルプ → お問い合わせ → ログフォルダを開くボタン から確認できます。具体的には以下のフォルダに保存されています。
 
 #### Windows 版
 
-`C:\Users\(ユーザー名)\AppData\Roaming\voicevox\logs`
+`C:\Users\（ユーザー名）\AppData\Roaming\voicevox\logs`
 
 #### Mac 版
 
-`/Users/(ユーザー名)/Library/Application Support/voicevox/logs`
+`/Users/（ユーザー名）/Library/Logs/voicevox-cpu`
 
 ### Q. Ubuntu 22.04 で動きません
 
@@ -168,7 +168,7 @@ sudo apt install libfuse2
 ### Q. 音楽配信サービスなどで公開する場合のクレジット表記はどうすれば良いですか？
 
 概要欄の無い楽曲投稿系プラットフォームの場合、タイトルやアーティストなどの欄にクレジットを記載するか、楽曲中に音声クレジットを挿入してください。  
-タイトルの例「タイトル (VOICEVOX:キャラクター名)」「タイトル feat. キャラクター名(VOICEVOX)」など  
+タイトルの例「タイトル（VOICEVOX:キャラクター名）」「タイトル feat. キャラクター名(VOICEVOX)」など  
 アーティストの例「キャラクター名(VOICEVOX)」「VOICEVOX:キャラクター名」など
 
 ### Q. スピーカーでの音声案内など、機械で音声を流したい場合のクレジット記載はどうすれば良いですか？
diff --git a/public/res/image14.png b/public/res/image14.png
index 6ec096e41c..3c1f901f9e 100644
Binary files a/public/res/image14.png and b/public/res/image14.png differ
diff --git a/public/res/image15.png b/public/res/image15.png
index 829c9ac5a2..72f574d98a 100644
Binary files a/public/res/image15.png and b/public/res/image15.png differ
diff --git a/public/themes/dark.json b/public/themes/dark.json
index ac1d71b333..a3bef2b9bf 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -5,7 +5,6 @@
   "isDark": true,
   "colors": {
     "primary": "#86C591",
-    "primary-light": "#86C591",
     "display": "#E1E1E1",
     "display-on-primary": "#1F1F1F",
     "display-hyperlink": "#58A6FF",
diff --git a/public/themes/default.json b/public/themes/default.json
index 4dc4277f7a..9d04773fd8 100644
--- a/public/themes/default.json
+++ b/public/themes/default.json
@@ -5,7 +5,6 @@
   "isDark": false,
   "colors": {
     "primary": "#A5D4AD",
-    "primary-light": "#A5D4AD",
     "display": "#121212",
     "display-on-primary": "#121212",
     "display-hyperlink": "#0969DA",
diff --git a/public/updateInfos.json b/public/updateInfos.json
index dcfcfe976a..a1495513ad 100644
--- a/public/updateInfos.json
+++ b/public/updateInfos.json
@@ -1,4 +1,11 @@
 [
+  {
+    "version": "0.14.8",
+    "descriptions": [
+      "キャラクター「栗田まろん」「あいえるたん」「満別花丸」「琴詠ニア」を追加"
+    ],
+    "contributors": []
+  },
   {
     "version": "0.14.7",
     "descriptions": [
diff --git a/src/background.ts b/src/background.ts
index 20834bde3a..6b03994913 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -11,25 +11,19 @@ import {
   Menu,
   shell,
   nativeTheme,
+  net,
 } from "electron";
 import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
-import Store, { Schema } from "electron-store";
-import dotenv from "dotenv";
 
 import log from "electron-log";
 import dayjs from "dayjs";
 import windowStateKeeper from "electron-window-state";
-import zodToJsonSchema from "zod-to-json-schema";
 import { hasSupportedGpu } from "./electron/device";
-import { textEditContextMenu } from "./electron/contextMenu";
 import {
   HotkeySetting,
   ThemeConf,
-  AcceptTermsStatus,
   EngineInfo,
-  ElectronStoreType,
   SystemError,
-  electronStoreSchema,
   defaultHotkeySettings,
   isMac,
   defaultToolbarButtonSetting,
@@ -52,6 +46,7 @@ import VvppManager, { isVvppFile } from "./background/vvppManager";
 import configMigration014 from "./background/configMigration014";
 import { failure, success } from "./type/result";
 import { ipcMainHandle, ipcMainSend } from "@/electron/ipc";
+import { getStoreWithError } from "@/background/electronStore";
 
 type SingleInstanceLockData = {
   filePath: string | undefined;
@@ -70,11 +65,17 @@ if (isTest) {
 } else if (isDevelopment) {
   suffix = "-dev";
 }
-console.log(`Environment: ${import.meta.env.MODE}, appData: voicevox${suffix}`);
+const appName = import.meta.env.VITE_APP_NAME + suffix;
+console.log(`Environment: ${import.meta.env.MODE}, appData: ${appName}`);
+
+// バージョン0.14より前の設定ファイルの保存場所
+const beforeUserDataDir = app.getPath("userData"); // マイグレーション用
+
+// appnameをvoicevoxとしてsetする
+app.setName(appName);
 
 // Electronの設定ファイルの保存場所を変更
-const beforeUserDataDir = app.getPath("userData"); // 設定ファイルのマイグレーション用
-const fixedUserDataDir = path.join(app.getPath("appData"), `voicevox${suffix}`);
+const fixedUserDataDir = path.join(app.getPath("appData"), appName);
 if (!fs.existsSync(fixedUserDataDir)) {
   fs.mkdirSync(fixedUserDataDir);
 }
@@ -107,24 +108,15 @@ process.on("unhandledRejection", (reason) => {
   log.error(reason);
 });
 
-// .envから設定をprocess.envに読み込み
 let appDirPath: string;
 let __static: string;
 
-// NOTE: 開発版では、カレントディレクトリにある .env ファイルを読み込む。
-//       一方、配布パッケージ版では .env ファイルが実行ファイルと同じディレクトリに配置されているが、
-//       Linux・macOS ではそのディレクトリはカレントディレクトリとはならないため、.env ファイルの
-//       パスを明示的に指定する必要がある。Windows の配布パッケージ版でもこの設定で起動できるため、
-//       全 OS で共通の条件分岐とした。
 if (isDevelopment) {
   // __dirnameはdist_electronを指しているので、一つ上のディレクトリに移動する
   appDirPath = path.resolve(__dirname, "..");
-  dotenv.config({ override: true });
   __static = path.join(appDirPath, "public");
 } else {
   appDirPath = path.dirname(app.getPath("exe"));
-  const envPath = path.join(appDirPath, ".env");
-  dotenv.config({ path: envPath });
   process.chdir(appDirPath);
   __static = __dirname;
 }
@@ -133,74 +125,10 @@ protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true, stream: true } },
 ]);
 
-// 設定ファイル
-const electronStoreJsonSchema = zodToJsonSchema(electronStoreSchema);
-if (!("properties" in electronStoreJsonSchema)) {
-  throw new Error("electronStoreJsonSchema must be object");
-}
-let store: Store<ElectronStoreType>;
-try {
-  store = new Store<ElectronStoreType>({
-    schema: electronStoreJsonSchema.properties as Schema<ElectronStoreType>,
-    migrations: {
-      ">=0.13": (store) => {
-        // acceptTems -> acceptTerms
-        const prevIdentifier = "acceptTems";
-        const prevValue = store.get(prevIdentifier, undefined) as
-          | AcceptTermsStatus
-          | undefined;
-        if (prevValue) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          store.delete(prevIdentifier as any);
-          store.set("acceptTerms", prevValue);
-        }
-      },
-      ">=0.14": (store) => {
-        // FIXME: できるならEngineManagerからEnginIDを取得したい
-        if (process.env.DEFAULT_ENGINE_INFOS == undefined)
-          throw new Error("DEFAULT_ENGINE_INFOS == undefined");
-        const engineId = EngineId(
-          JSON.parse(process.env.DEFAULT_ENGINE_INFOS)[0].uuid
-        );
-        if (engineId == undefined)
-          throw new Error("DEFAULT_ENGINE_INFOS[0].uuid == undefined");
-        const prevDefaultStyleIds = store.get("defaultStyleIds");
-        store.set(
-          "defaultStyleIds",
-          prevDefaultStyleIds.map((defaultStyle) => ({
-            engineId,
-            speakerUuid: defaultStyle.speakerUuid,
-            defaultStyleId: defaultStyle.defaultStyleId,
-          }))
-        );
-
-        const outputSamplingRate: number =
-          // @ts-expect-error 削除されたパラメータ。
-          store.get("savingSetting").outputSamplingRate;
-        store.set(`engineSettings.${engineId}`, {
-          useGpu: store.get("useGpu"),
-          outputSamplingRate:
-            outputSamplingRate === 24000 ? "engineDefault" : outputSamplingRate,
-        });
-        // @ts-expect-error 削除されたパラメータ。
-        store.delete("savingSetting.outputSamplingRate");
-        // @ts-expect-error 削除されたパラメータ。
-        store.delete("useGpu");
-      },
-    },
-  });
-} catch (e) {
-  log.error(e);
-  dialog.showErrorBox(
-    "設定ファイルの読み込みに失敗しました。",
-    `${app.getPath(
-      "userData"
-    )} にある config.json の名前を変えることで解決することがあります（ただし設定がすべてリセットされます）。`
-  );
-  app.exit(1);
-  throw e;
-}
+const firstUrl = process.env.VITE_DEV_SERVER_URL ?? "app://./index.html";
 
+// 設定ファイル
+const store = getStoreWithError();
 // engine
 const vvppEngineDir = path.join(app.getPath("userData"), "vvpp-engines");
 
@@ -208,10 +136,26 @@ if (!fs.existsSync(vvppEngineDir)) {
   fs.mkdirSync(vvppEngineDir);
 }
 
+const onEngineProcessError = (engineInfo: EngineInfo, error: Error) => {
+  const engineId = engineInfo.uuid;
+  log.error(`ENGINE ${engineId} ERROR: ${error}`);
+
+  // winが作られる前にエラーが発生した場合はwinへの通知を諦める
+  // FIXME: winが作られた後にエンジンを起動させる
+  if (win != undefined) {
+    ipcMainSend(win, "DETECTED_ENGINE_ERROR", { engineId });
+  } else {
+    log.error(`onEngineProcessError: win is undefined`);
+  }
+
+  dialog.showErrorBox("音声合成エンジンエラー", error.message);
+};
+
 const engineManager = new EngineManager({
   store,
   defaultEngineDir: appDirPath,
   vvppEngineDir,
+  onEngineProcessError,
 });
 const vvppManager = new VvppManager({ vvppEngineDir });
 
@@ -247,10 +191,10 @@ async function installVvppEngine(vvppPath: string) {
  */
 async function installVvppEngineWithWarning({
   vvppPath,
-  restartNeeded,
+  reloadNeeded,
 }: {
   vvppPath: string;
-  restartNeeded: boolean;
+  reloadNeeded: boolean;
 }) {
   const result = dialog.showMessageBoxSync(win, {
     type: "warning",
@@ -266,21 +210,22 @@ async function installVvppEngineWithWarning({
 
   await installVvppEngine(vvppPath);
 
-  if (restartNeeded) {
+  if (reloadNeeded) {
     dialog
       .showMessageBox(win, {
         type: "info",
-        title: "再起動が必要です",
+        title: "再読み込みが必要です",
         message:
-          "VVPPファイルを読み込みました。反映には再起動が必要です。今すぐ再起動しますか？",
-        buttons: ["再起動", "キャンセル"],
+          "VVPPファイルを読み込みました。反映には再読み込みが必要です。今すぐ再読み込みしますか？",
+        buttons: ["再読み込み", "キャンセル"],
         noLink: true,
         cancelId: 1,
       })
       .then((result) => {
         if (result.response === 0) {
-          appState.willRestart = true;
-          app.quit();
+          ipcMainSend(win, "CHECK_EDITED_AND_NOT_SAVE", {
+            closeOrReload: "reload",
+          });
         }
       });
   }
@@ -335,6 +280,18 @@ async function uninstallVvppEngine(engineId: EngineId) {
   }
 }
 
+// テーマの読み込み
+const themes = readThemeFiles();
+function readThemeFiles() {
+  const themes: ThemeConf[] = [];
+  const dir = path.join(__static, "themes");
+  for (const file of fs.readdirSync(dir)) {
+    const theme = JSON.parse(fs.readFileSync(path.join(dir, file)).toString());
+    themes.push(theme);
+  }
+  return themes;
+}
+
 // 使い方テキストの読み込み
 const howToUseText = fs.readFileSync(
   path.join(__static, HowToUseTextFileName),
@@ -428,8 +385,6 @@ migrateHotkeySettings();
 
 const appState = {
   willQuit: false,
-  willRestart: false,
-  isMultiEngineOffMode: false,
 };
 let filePathOnMac: string | undefined = undefined;
 // create window
@@ -439,6 +394,10 @@ async function createWindow() {
     defaultHeight: 600,
   });
 
+  const currentTheme = store.get("currentTheme");
+  const backgroundColor = themes.find((value) => value.name == currentTheme)
+    ?.colors.background;
+
   win = new BrowserWindow({
     x: mainWindowState.x,
     y: mainWindowState.y,
@@ -449,6 +408,7 @@ async function createWindow() {
     trafficLightPosition: { x: 6, y: 4 },
     minWidth: 320,
     show: false,
+    backgroundColor,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       nodeIntegration: false,
@@ -458,7 +418,7 @@ async function createWindow() {
     icon: path.join(__static, "icon.png"),
   });
 
-  let projectFilePath: string | undefined = "";
+  let projectFilePath = "";
   if (isMac) {
     if (filePathOnMac) {
       if (filePathOnMac.endsWith(".vvproj")) {
@@ -479,21 +439,16 @@ async function createWindow() {
     }
   }
 
-  const parameter =
-    "#/?isMultiEngineOffMode=" +
-    appState.isMultiEngineOffMode +
-    "&projectFilePath=" +
-    projectFilePath;
-
-  if (process.env.VITE_DEV_SERVER_URL) {
-    await win.loadURL(process.env.VITE_DEV_SERVER_URL + parameter);
-  } else {
-    protocol.registerFileProtocol("app", (request, callback) => {
-      const filePath = new URL(request.url).pathname;
-      callback(path.join(__dirname, filePath));
+  // ソフトウェア起動時はプロトコルを app にする
+  if (process.env.VITE_DEV_SERVER_URL == undefined) {
+    protocol.handle("app", (request) => {
+      const filePath = path.join(__dirname, new URL(request.url).pathname);
+      return net.fetch(`file://${filePath}`);
     });
-    win.loadURL("app://./index.html" + parameter);
   }
+
+  await loadUrl({ projectFilePath });
+
   if (isDevelopment && !isTest) win.webContents.openDevTools();
 
   win.on("maximize", () => win.webContents.send("DETECT_MAXIMIZED"));
@@ -512,7 +467,9 @@ async function createWindow() {
   win.on("close", (event) => {
     if (!appState.willQuit) {
       event.preventDefault();
-      ipcMainSend(win, "CHECK_EDITED_AND_NOT_SAVE");
+      ipcMainSend(win, "CHECK_EDITED_AND_NOT_SAVE", {
+        closeOrReload: "close",
+      });
       return;
     }
   });
@@ -528,8 +485,31 @@ async function createWindow() {
   mainWindowState.manage(win);
 }
 
-// UI処理を開始。その他の準備が完了した後に呼ばれる。
+/**
+ * 画面の読み込みを開始する。
+ * @param obj.isMultiEngineOffMode マルチエンジンオフモードにするかどうか。無指定時はfalse扱いになる。
+ * @param obj.projectFilePath 初期化時に読み込むプロジェクトファイル。無指定時は何も読み込まない。
+ * @returns ロードの完了を待つPromise。
+ */
+async function loadUrl(obj: {
+  isMultiEngineOffMode?: boolean;
+  projectFilePath?: string;
+}) {
+  const fragment =
+    "#/home" +
+    `?isMultiEngineOffMode=${obj?.isMultiEngineOffMode ?? false}` +
+    `&projectFilePath=${obj?.projectFilePath ?? ""}`;
+  return win.loadURL(`${firstUrl}${fragment}`);
+}
+
+// 開始。その他の準備が完了した後に呼ばれる。
 async function start() {
+  await launchEngines();
+  await createWindow();
+}
+
+// エンジンの準備と起動
+async function launchEngines() {
   // エンジンの追加と削除を反映させるためEngineInfoとAltPortInfoを再生成する。
   engineManager.initializeEngineInfosAndAltPortInfo();
   const engineInfos = engineManager.fetchEngineInfos();
@@ -542,8 +522,51 @@ async function start() {
   }
   store.set("engineSettings", engineSettings);
 
-  await engineManager.runEngineAll(win);
-  await createWindow();
+  await engineManager.runEngineAll();
+}
+
+/**
+ * エンジンの停止とエンジン終了後処理を行う。
+ * 全処理が完了済みの場合 alreadyCompleted を返す。
+ * そうでない場合は Promise を返す。
+ */
+function cleanupEngines(): Promise<void> | "alreadyCompleted" {
+  const killingProcessPromises = engineManager.killEngineAll();
+  const numLivingEngineProcess = Object.entries(killingProcessPromises).length;
+
+  // 前処理が完了している場合
+  if (numLivingEngineProcess === 0 && !vvppManager.hasMarkedEngineDirs()) {
+    return "alreadyCompleted";
+  }
+
+  let numEngineProcessKilled = 0;
+
+  // 非同期的にすべてのエンジンプロセスをキル
+  const waitingKilledPromises: Promise<void>[] = Object.entries(
+    killingProcessPromises
+  ).map(([engineId, promise]) => {
+    return promise
+      .catch((error) => {
+        // TODO: 各エンジンプロセスキルの失敗をUIに通知する
+        log.error(`ENGINE ${engineId}: Error during killing process: ${error}`);
+        // エディタを終了するため、エラーが起きてもエンジンプロセスをキルできたとみなす
+      })
+      .finally(() => {
+        numEngineProcessKilled++;
+        log.info(
+          `ENGINE ${engineId}: Process killed. ${numEngineProcessKilled} / ${numLivingEngineProcess} processes killed`
+        );
+      });
+  });
+
+  // すべてのエンジンプロセスキル処理が完了するまで待機
+  return Promise.all(waitingKilledPromises).then(() => {
+    // エンジン終了後の処理を実行
+    log.info(
+      "All ENGINE process kill operations done. Running post engine kill process"
+    );
+    return vvppManager.handleMarkedEngineDirs();
+  });
 }
 
 const menuTemplateForMac: Electron.MenuItemConstructorOptions[] = [
@@ -736,10 +759,6 @@ ipcMainHandle("SHOW_IMPORT_FILE_DIALOG", (_, { title }) => {
   })?.[0];
 });
 
-ipcMainHandle("OPEN_TEXT_EDIT_CONTEXT_MENU", () => {
-  textEditContextMenu.popup({ window: win });
-});
-
 ipcMainHandle("IS_AVAILABLE_GPU_MODE", () => {
   return hasSupportedGpu(process.platform);
 });
@@ -773,6 +792,10 @@ ipcMainHandle("LOG_INFO", (_, ...params) => {
   log.info(...params);
 });
 
+ipcMainHandle("OPEN_LOG_DIRECTORY", () => {
+  shell.openPath(app.getPath("logs"));
+});
+
 ipcMainHandle("ENGINE_INFOS", () => {
   // エンジン情報を設定ファイルに保存しないためにstoreは使わない
   return engineManager.fetchEngineInfos();
@@ -783,7 +806,7 @@ ipcMainHandle("ENGINE_INFOS", () => {
  * エンジンの起動が開始したらresolve、起動が失敗したらreject。
  */
 ipcMainHandle("RESTART_ENGINE", async (_, { engineId }) => {
-  await engineManager.restartEngine(engineId, win);
+  await engineManager.restartEngine(engineId);
 });
 
 ipcMainHandle("OPEN_ENGINE_DIRECTORY", async (_, { engineId }) => {
@@ -809,14 +832,10 @@ ipcMainHandle("THEME", (_, { newData }) => {
     store.set("currentTheme", newData);
     return;
   }
-  const dir = path.join(__static, "themes");
-  const themes: ThemeConf[] = [];
-  const files = fs.readdirSync(dir);
-  files.forEach((file) => {
-    const theme = JSON.parse(fs.readFileSync(path.join(dir, file)).toString());
-    themes.push(theme);
-  });
-  return { currentTheme: store.get("currentTheme"), availableThemes: themes };
+  return {
+    currentTheme: store.get("currentTheme"),
+    availableThemes: themes,
+  };
 });
 
 ipcMainHandle("ON_VUEX_READY", () => {
@@ -871,10 +890,25 @@ ipcMainHandle("VALIDATE_ENGINE_DIR", (_, { engineDir }) => {
   return engineManager.validateEngineDir(engineDir);
 });
 
-ipcMainHandle("RESTART_APP", async (_, { isMultiEngineOffMode }) => {
-  appState.willRestart = true;
-  appState.isMultiEngineOffMode = isMultiEngineOffMode;
-  win.close();
+ipcMainHandle("RELOAD_APP", async (_, { isMultiEngineOffMode }) => {
+  win.hide(); // FIXME: ダミーページ表示のほうが良い
+
+  // FIXME: 同じようなURLだとスーパーリロードされないことがあるので一度ダミーページを読み込む
+  await win.loadURL(firstUrl + "dummypage");
+
+  log.info("Checking ENGINE status before reload app");
+  const engineCleanupResult = cleanupEngines();
+
+  // エンジンの停止とエンジン終了後処理の待機
+  if (engineCleanupResult != "alreadyCompleted") {
+    await engineCleanupResult;
+  }
+  log.info("Post engine kill process done. Now reloading app");
+
+  await launchEngines();
+
+  await loadUrl({ isMultiEngineOffMode: !!isMultiEngineOffMode });
+  win.show();
 });
 
 ipcMainHandle("WRITE_FILE", (_, { filePath, buffer }) => {
@@ -920,31 +954,16 @@ app.on("window-all-closed", () => {
 app.on("before-quit", async (event) => {
   if (!appState.willQuit) {
     event.preventDefault();
-    ipcMainSend(win, "CHECK_EDITED_AND_NOT_SAVE");
+    ipcMainSend(win, "CHECK_EDITED_AND_NOT_SAVE", { closeOrReload: "close" });
     return;
   }
 
   log.info("Checking ENGINE status before app quit");
+  const engineCleanupResult = cleanupEngines();
 
-  const killingProcessPromises = engineManager.killEngineAll();
-  const numLivingEngineProcess = Object.entries(killingProcessPromises).length;
-
-  // すべてのエンジンプロセスが停止している
-  if (numLivingEngineProcess === 0 && !vvppManager.hasMarkedEngineDirs()) {
-    if (appState.willRestart) {
-      // 再起動フラグが立っている場合はフラグを戻して再起動する
-      log.info(
-        "Post engine kill process done. Now restarting app because of willRestart flag"
-      );
-      event.preventDefault();
-
-      appState.willRestart = false;
-      appState.willQuit = false;
-
-      start();
-    } else {
-      log.info("Post engine kill process done. Now quit app");
-    }
+  // エンジンの停止とエンジン終了後処理が完了している
+  if (engineCleanupResult == "alreadyCompleted") {
+    log.info("Post engine kill process done. Now quit app");
     return;
   }
 
@@ -954,34 +973,7 @@ app.on("before-quit", async (event) => {
   log.info("Interrupt app quit to kill ENGINE processes");
   event.preventDefault();
 
-  let numEngineProcessKilled = 0;
-
-  // 非同期的にすべてのエンジンプロセスをキル
-  const waitingKilledPromises: Array<Promise<void>> = Object.entries(
-    killingProcessPromises
-  ).map(([engineId, promise]) => {
-    return promise
-      .catch((error) => {
-        // TODO: 各エンジンプロセスキルの失敗をUIに通知する
-        log.error(`ENGINE ${engineId}: Error during killing process: ${error}`);
-        // エディタを終了するため、エラーが起きてもエンジンプロセスをキルできたとみなす
-      })
-      .finally(() => {
-        numEngineProcessKilled++;
-        log.info(
-          `ENGINE ${engineId}: Process killed. ${numEngineProcessKilled} / ${numLivingEngineProcess} processes killed`
-        );
-      });
-  });
-
-  // すべてのエンジンプロセスキル処理が完了するまで待機
-  await Promise.all(waitingKilledPromises);
-
-  // エンジン終了後の処理を実行
-  log.info(
-    "All ENGINE process kill operations done. Running post engine kill process"
-  );
-  await vvppManager.handleMarkedEngineDirs();
+  await engineCleanupResult;
 
   // アプリケーションの終了を再試行する
   log.info("Attempting to quit app again");
@@ -1039,7 +1031,7 @@ app.on("ready", async () => {
     if (checkMultiEngineEnabled()) {
       await installVvppEngineWithWarning({
         vvppPath: filePath,
-        restartNeeded: false,
+        reloadNeeded: false,
       });
     }
   }
@@ -1058,7 +1050,7 @@ app.on("second-instance", async (event, argv, workDir, rawData) => {
     if (checkMultiEngineEnabled()) {
       await installVvppEngineWithWarning({
         vvppPath: data.filePath,
-        restartNeeded: true,
+        reloadNeeded: true,
       });
     }
   } else if (data.filePath.endsWith(".vvproj")) {
diff --git a/src/background/electronStore.ts b/src/background/electronStore.ts
new file mode 100644
index 0000000000..f62f6e71ca
--- /dev/null
+++ b/src/background/electronStore.ts
@@ -0,0 +1,100 @@
+import { app, dialog, shell } from "electron";
+import Store, { Schema } from "electron-store";
+import log from "electron-log";
+import zodToJsonSchema from "zod-to-json-schema";
+import {
+  AcceptTermsStatus,
+  ElectronStoreType,
+  EngineId,
+  electronStoreSchema,
+} from "@/type/preload";
+
+function getStore() {
+  const electronStoreJsonSchema = zodToJsonSchema(electronStoreSchema);
+  if (!("properties" in electronStoreJsonSchema)) {
+    throw new Error("electronStoreJsonSchema must be object");
+  }
+  return new Store<ElectronStoreType>({
+    schema: electronStoreJsonSchema.properties as Schema<ElectronStoreType>,
+    migrations: {
+      ">=0.13": (store) => {
+        // acceptTems -> acceptTerms
+        const prevIdentifier = "acceptTems";
+        const prevValue = store.get(prevIdentifier, undefined) as
+          | AcceptTermsStatus
+          | undefined;
+        if (prevValue) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          store.delete(prevIdentifier as any);
+          store.set("acceptTerms", prevValue);
+        }
+      },
+      ">=0.14": (store) => {
+        // FIXME: できるならEngineManagerからEnginIDを取得したい
+        if (import.meta.env.VITE_DEFAULT_ENGINE_INFOS == undefined)
+          throw new Error("VITE_DEFAULT_ENGINE_INFOS == undefined");
+        const engineId = EngineId(
+          JSON.parse(import.meta.env.VITE_DEFAULT_ENGINE_INFOS)[0].uuid
+        );
+        if (engineId == undefined)
+          throw new Error("VITE_DEFAULT_ENGINE_INFOS[0].uuid == undefined");
+        const prevDefaultStyleIds = store.get("defaultStyleIds");
+        store.set(
+          "defaultStyleIds",
+          prevDefaultStyleIds.map((defaultStyle) => ({
+            engineId,
+            speakerUuid: defaultStyle.speakerUuid,
+            defaultStyleId: defaultStyle.defaultStyleId,
+          }))
+        );
+
+        const outputSamplingRate: number =
+          // @ts-expect-error 削除されたパラメータ。
+          store.get("savingSetting").outputSamplingRate;
+        store.set(`engineSettings.${engineId}`, {
+          useGpu: store.get("useGpu"),
+          outputSamplingRate:
+            outputSamplingRate === 24000 ? "engineDefault" : outputSamplingRate,
+        });
+        // @ts-expect-error 削除されたパラメータ。
+        store.delete("savingSetting.outputSamplingRate");
+        // @ts-expect-error 削除されたパラメータ。
+        store.delete("useGpu");
+      },
+    },
+  });
+}
+
+export function getStoreWithError(): Store<ElectronStoreType> {
+  try {
+    return getStore();
+  } catch (e) {
+    log.error(e);
+    app.whenReady().then(() => {
+      dialog
+        .showMessageBox({
+          type: "error",
+          title: "設定ファイルの読み込みエラー",
+          message: `設定ファイルの読み込みに失敗しました。${app.getPath(
+            "userData"
+          )} にある config.json の名前を変えることで解決することがあります（ただし設定がすべてリセットされます）。設定ファイルがあるフォルダを開きますか？`,
+          buttons: ["いいえ", "はい"],
+          noLink: true,
+          cancelId: 0,
+        })
+        .then(async ({ response }) => {
+          if (response === 1) {
+            await shell.openPath(app.getPath("userData"));
+            // 直後にexitするとフォルダが開かないため
+            await new Promise((resolve) => {
+              setTimeout(resolve, 500);
+            });
+          }
+        })
+        .finally(() => {
+          app.exit(1);
+        });
+    });
+    throw e;
+  }
+}
diff --git a/src/background/engineManager.ts b/src/background/engineManager.ts
index 8a52cdcf04..d35f5e4eb7 100644
--- a/src/background/engineManager.ts
+++ b/src/background/engineManager.ts
@@ -5,7 +5,7 @@ import treeKill from "tree-kill";
 import Store from "electron-store";
 import shlex from "shlex";
 
-import { app, BrowserWindow, dialog } from "electron";
+import { app, dialog } from "electron"; // FIXME: ここでelectronをimportするのは良くない
 
 import log from "electron-log";
 import { z } from "zod";
@@ -16,7 +16,6 @@ import {
   isAssignablePort,
   url2HostInfo,
 } from "./portManager";
-import { ipcMainSend } from "@/electron/ipc";
 
 import {
   EngineInfo,
@@ -39,7 +38,8 @@ type EngineProcessContainer = {
  */
 function createDefaultEngineInfos(defaultEngineDir: string): EngineInfo[] {
   // TODO: envから直接ではなく、envに書いたengine_manifest.jsonから情報を得るようにする
-  const defaultEngineInfosEnv = process.env.DEFAULT_ENGINE_INFOS ?? "[]";
+  const defaultEngineInfosEnv =
+    import.meta.env.VITE_DEFAULT_ENGINE_INFOS ?? "[]";
 
   const envSchema = z
     .object({
@@ -70,6 +70,7 @@ export class EngineManager {
   store: Store<ElectronStoreType>;
   defaultEngineDir: string;
   vvppEngineDir: string;
+  onEngineProcessError: (engineInfo: EngineInfo, error: Error) => void;
 
   defaultEngineInfos: EngineInfo[] = [];
   additionalEngineInfos: EngineInfo[] = [];
@@ -81,14 +82,17 @@ export class EngineManager {
     store,
     defaultEngineDir,
     vvppEngineDir,
+    onEngineProcessError,
   }: {
     store: Store<ElectronStoreType>;
     defaultEngineDir: string;
     vvppEngineDir: string;
+    onEngineProcessError: (engineInfo: EngineInfo, error: Error) => void;
   }) {
     this.store = store; // FIXME: エンジンマネージャーがelectron-storeを持たなくても良いようにする
     this.defaultEngineDir = defaultEngineDir;
     this.vvppEngineDir = vvppEngineDir;
+    this.onEngineProcessError = onEngineProcessError;
 
     this.initializeEngineInfosAndAltPortInfo();
     this.engineProcessContainers = {};
@@ -207,23 +211,21 @@ export class EngineManager {
 
   /**
    * 全てのエンジンを起動する。
-   * FIXME: winを受け取らなくても良いようにする
    */
-  async runEngineAll(win: BrowserWindow) {
+  async runEngineAll() {
     const engineInfos = this.fetchEngineInfos();
     log.info(`Starting ${engineInfos.length} engine/s...`);
 
     for (const engineInfo of engineInfos) {
       log.info(`ENGINE ${engineInfo.uuid}: Start launching`);
-      await this.runEngine(engineInfo.uuid, win);
+      await this.runEngine(engineInfo.uuid);
     }
   }
 
   /**
    * エンジンを起動する。
-   * FIXME: winを受け取らなくても良いようにする
    */
-  async runEngine(engineId: EngineId, win: BrowserWindow) {
+  async runEngine(engineId: EngineId) {
     const engineInfos = this.fetchEngineInfos();
     const engineInfo = engineInfos.find(
       (engineInfo) => engineInfo.uuid === engineId
@@ -330,6 +332,7 @@ export class EngineManager {
 
     const engineProcess = spawn(enginePath, args, {
       cwd: path.dirname(enginePath),
+      env: { ...process.env, VV_OUTPUT_LOG_UTF8: "1" },
     });
     engineProcessContainer.engineProcess = engineProcess;
 
@@ -341,14 +344,16 @@ export class EngineManager {
       log.error(`ENGINE ${engineId} STDERR: ${data.toString("utf-8")}`);
     });
 
+    // onEngineProcessErrorを一度だけ呼ぶためのフラグ。"error"と"close"がどちらも呼ばれることがある。
+    // 詳細 https://github.com/VOICEVOX/voicevox/pull/1053/files#r1051436950
+    let errorNotified = false;
+
     engineProcess.on("error", (err) => {
       log.error(`ENGINE ${engineId} ERROR: ${err}`);
-      // FIXME: "close"イベントでダイアログが表示されて２回表示されてしまうのを防ぐ
-      // 詳細 https://github.com/VOICEVOX/voicevox/pull/1053/files#r1051436950
-      dialog.showErrorBox(
-        "音声合成エンジンエラー",
-        `音声合成エンジンが異常終了しました。${err}`
-      );
+      if (!errorNotified) {
+        errorNotified = true;
+        this.onEngineProcessError(engineInfo, err);
+      }
     });
 
     engineProcess.on("close", (code, signal) => {
@@ -358,12 +363,14 @@ export class EngineManager {
       log.info(`ENGINE ${engineId}: Process exited with code ${code}`);
 
       if (!engineProcessContainer.willQuitEngine) {
-        ipcMainSend(win, "DETECTED_ENGINE_ERROR", { engineId });
-        const dialogMessage =
+        const errorMessage =
           engineInfos.length === 1
             ? "音声合成エンジンが異常終了しました。エンジンを再起動してください。"
             : `${engineInfo.name}が異常終了しました。エンジンを再起動してください。`;
-        dialog.showErrorBox("音声合成エンジンエラー", dialogMessage);
+        if (!errorNotified) {
+          errorNotified = true;
+          this.onEngineProcessError(engineInfo, new Error(errorMessage));
+        }
       }
     });
   }
@@ -449,9 +456,8 @@ export class EngineManager {
 
   /**
    * エンジンを再起動する。
-   * FIXME: winを受け取らなくても良いようにする
    */
-  async restartEngine(engineId: EngineId, win: BrowserWindow) {
+  async restartEngine(engineId: EngineId) {
     // FIXME: killEngine関数を使い回すようにする
     await new Promise<void>((resolve, reject) => {
       const engineProcessContainer: EngineProcessContainer | undefined =
@@ -472,7 +478,7 @@ export class EngineManager {
           `ENGINE ${engineId}: Process is not started yet or already killed. Starting process...`
         );
 
-        this.runEngine(engineId, win);
+        this.runEngine(engineId);
         resolve();
         return;
       }
@@ -485,12 +491,14 @@ export class EngineManager {
       const restartEngineOnProcessClosedCallback = () => {
         log.info(`ENGINE ${engineId}: Process killed. Restarting process...`);
 
-        this.runEngine(engineId, win);
+        this.runEngine(engineId);
         resolve();
       };
 
       if (engineProcess === undefined)
         throw Error("engineProcess === undefined");
+      if (engineProcess.pid === undefined)
+        throw Error("engineProcess.pid === undefined");
 
       engineProcess.once("close", restartEngineOnProcessClosedCallback);
 
diff --git a/src/background/vvppManager.ts b/src/background/vvppManager.ts
index bfc1725a2c..170a3eb1b4 100644
--- a/src/background/vvppManager.ts
+++ b/src/background/vvppManager.ts
@@ -6,6 +6,7 @@ import { moveFile } from "move-file";
 import { app, dialog } from "electron";
 import MultiStream from "multistream";
 import glob, { glob as callbackGlob } from "glob";
+import AsyncLock from "async-lock";
 import {
   EngineId,
   EngineInfo,
@@ -41,18 +42,19 @@ export const isVvppFile = (filePath: string) => {
   );
 };
 
+const lockKey = "lock-key-for-vvpp-manager";
+
 // # 軽い概要
 //
 // フォルダ名："エンジン名+UUID"
 // エンジン名にフォルダ名に使用できない文字が含まれている場合は"_"に置換する。連続する"_"は1つにする。
 // 拡張子は".vvpp"または".vvppp"。".vvppp"は分割されているファイルであることを示す。
 // engine.0.vvppp、engine.1.vvppp、engine.2.vvppp、...というように分割されている。
-// UUIDはengine_manifest.jsonのuuidを使用する
+// UUIDはengine_manifest.jsonのuuidを使用し、同一エンジンの判定にはこれを使用する。
 //
 // 追加：
 // * エンジンを仮フォルダ（vvpp-engines/.tmp/現在の時刻）に展開する
 // * エンジンが既に存在しているか確認する
-//   最後のUUIDで比較する
 //   - 存在していた場合：上書き処理を行う
 //   - 存在していなかった場合：仮フォルダをvvpp-engines/エンジン名+UUIDに移動する
 //
@@ -72,6 +74,8 @@ export class VvppManager {
   willDeleteEngineIds: Set<EngineId>;
   willReplaceEngineDirs: Array<{ from: string; to: string }>;
 
+  private lock = new AsyncLock();
+
   constructor({ vvppEngineDir }: { vvppEngineDir: string }) {
     this.vvppEngineDir = vvppEngineDir;
     this.willDeleteEngineIds = new Set();
@@ -115,7 +119,7 @@ export class VvppManager {
     return true;
   }
 
-  async extractVvpp(
+  private async extractVvpp(
     vvppLikeFilePath: string
   ): Promise<{ outputDir: string; manifest: MinimumEngineManifest }> {
     const nonce = new Date().getTime().toString();
@@ -192,7 +196,7 @@ export class VvppManager {
 
         const args = ["x", "-o" + outputDir, archiveFile, "-t" + format];
 
-        let sevenZipPath = import.meta.env.VITE_7Z_BIN_NAME as string;
+        let sevenZipPath = import.meta.env.VITE_7Z_BIN_NAME;
         if (!sevenZipPath) {
           throw new Error("7z path is not defined");
         }
@@ -257,7 +261,13 @@ export class VvppManager {
     }
   }
 
+  /**
+   * 追加
+   */
   async install(vvppPath: string) {
+    await this.lock.acquire(lockKey, () => this._install(vvppPath));
+  }
+  private async _install(vvppPath: string) {
     const { outputDir, manifest } = await this.extractVvpp(vvppPath);
     const dirName = this.toValidDirName(manifest);
     const engineDirectory = path.join(this.vvppEngineDir, dirName);
@@ -280,6 +290,9 @@ export class VvppManager {
   }
 
   async handleMarkedEngineDirs() {
+    await this.lock.acquire(lockKey, () => this._handleMarkedEngineDirs());
+  }
+  private async _handleMarkedEngineDirs() {
     await Promise.all(
       [...this.willDeleteEngineIds].map(async (engineId) => {
         let deletingEngineDir: string | undefined = undefined;
diff --git a/src/browser/fileImpl.ts b/src/browser/fileImpl.ts
index 3f8efdc527..608891a452 100644
--- a/src/browser/fileImpl.ts
+++ b/src/browser/fileImpl.ts
@@ -113,7 +113,7 @@ export const writeFileImpl: typeof window[typeof SandboxKey]["writeFile"] =
   async (obj: { filePath: string; buffer: ArrayBuffer }) => {
     const path = obj.filePath;
 
-    if (path.indexOf(sep) === -1) {
+    if (!path.includes(sep)) {
       const aTag = document.createElement("a");
       const blob = URL.createObjectURL(new Blob([obj.buffer]));
       aTag.href = blob;
@@ -151,7 +151,7 @@ export const checkFileExistsImpl: typeof window[typeof SandboxKey]["checkFileExi
   async (file) => {
     const path = file;
 
-    if (path.indexOf(sep) === -1) {
+    if (!path.includes(sep)) {
       return Promise.resolve(false);
     }
 
diff --git a/src/browser/sandbox.ts b/src/browser/sandbox.ts
index 2353dc7656..d2688d7516 100644
--- a/src/browser/sandbox.ts
+++ b/src/browser/sandbox.ts
@@ -168,10 +168,6 @@ export const api: Sandbox = {
       "ブラウザ版では現在ファイルの読み込みをサポートしていません"
     );
   },
-  openTextEditContextMenu() {
-    // NOTE: ブラウザ版では不要
-    return Promise.resolve();
-  },
   isAvailableGPUMode() {
     // TODO: WebAssembly版をサポートする時に実装する
     // FIXME: canvasでWebGLから調べたり、WebGPUがサポートされているかを調べたりで判断は出来そう
@@ -213,6 +209,9 @@ export const api: Sandbox = {
     console.info(...params);
     return;
   },
+  openLogDirectory() {
+    throw new Error(`Not supported on Browser version: openLogDirectory`);
+  },
   /* eslint-enable no-console */
   engineInfos() {
     return Promise.resolve([defaultEngine]);
@@ -262,6 +261,8 @@ export const api: Sandbox = {
       await this.setSetting("currentTheme", newData);
       return;
     }
+    // NOTE: Electron版では起動時にテーマ情報が必要なので、
+    //       この実装とは違って起動時に読み込んだキャッシュを返すだけになっている。
     return Promise.all(
       // FIXME: themeファイルのいい感じのパスの設定
       ["/themes/default.json", "/themes/dark.json"].map((url) =>
@@ -309,7 +310,7 @@ export const api: Sandbox = {
   validateEngineDir(/* engineDir: string */) {
     throw new Error(`Not supported on Browser version: validateEngineDir`);
   },
-  restartApp(/* obj: { isMultiEngineOffMode: boolean } */) {
-    throw new Error(`Not supported on Browser version: restartApp`);
+  reloadApp(/* obj: { isMultiEngineOffMode: boolean } */) {
+    throw new Error(`Not supported on Browser version: reloadApp`);
   },
 };
diff --git a/src/browser/storeImpl.ts b/src/browser/storeImpl.ts
index 08fb4aac49..436b79c633 100644
--- a/src/browser/storeImpl.ts
+++ b/src/browser/storeImpl.ts
@@ -7,7 +7,7 @@ import {
   engineSettingSchema,
 } from "@/type/preload";
 
-const dbName = "voicevox-web";
+const dbName = `${import.meta.env.VITE_APP_NAME}-web`;
 const settingStoreKey = "electronStore";
 // FIXME: DBのschemaを変更したら、dbVersionを上げる
 // TODO: 気づけるようにしたい
diff --git a/src/components/AccentPhrase.vue b/src/components/AccentPhrase.vue
new file mode 100644
index 0000000000..822528d2d7
--- /dev/null
+++ b/src/components/AccentPhrase.vue
@@ -0,0 +1,458 @@
+<template>
+  <div
+    ref="container"
+    class="mora-table"
+    :class="[isActive && 'mora-table-focus', uiLocked || 'mora-table-hover']"
+    @click="$emit('click', index)"
+  >
+    <context-menu :menudata="contextMenudata" />
+    <!-- スライダーここから -->
+    <!-- ｱｸｾﾝﾄ項目のスライダー -->
+    <template v-if="selectedDetail === 'accent'">
+      <audio-accent
+        :accent-phrase-index="index"
+        :accent-phrase="accentPhrase"
+        :ui-locked="uiLocked"
+        :shift-key-flag="shiftKeyFlag"
+        :on-change-accent="changeAccent"
+      />
+    </template>
+    <!-- ｲﾝﾄﾈｰｼｮﾝ項目のスライダー -->
+    <template v-if="selectedDetail === 'pitch'">
+      <div
+        v-for="(mora, moraIndex) in accentPhrase.moras"
+        :key="moraIndex"
+        class="q-mb-sm pitch-cell"
+        :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
+      >
+        <audio-parameter
+          :mora-index="moraIndex"
+          :value="mora.pitch"
+          :ui-locked="uiLocked"
+          :min="minPitch"
+          :max="maxPitch"
+          :disable="mora.pitch == 0.0"
+          :type="'pitch'"
+          :clip="false"
+          :shift-key-flag="shiftKeyFlag"
+          @change-value="changeMoraData"
+        />
+      </div>
+      <div v-if="accentPhrase.pauseMora" />
+    </template>
+    <!-- 長さ項目のスライダー -->
+    <template v-if="selectedDetail === 'length'">
+      <div
+        v-for="(mora, moraIndex) in accentPhrase.moras"
+        :key="moraIndex"
+        class="q-mb-sm pitch-cell"
+        :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
+      >
+        <!-- consonant length -->
+        <audio-parameter
+          v-if="mora.consonant && mora.consonantLength != undefined"
+          :mora-index="moraIndex"
+          :value="mora.consonantLength"
+          :ui-locked="uiLocked"
+          :min="minMoraLength"
+          :max="maxMoraLength"
+          :step="0.001"
+          :type="'consonant'"
+          :clip="true"
+          :shift-key-flag="shiftKeyFlag"
+          @change-value="changeMoraData"
+          @mouse-over="handleLengthHoverText"
+        />
+        <!-- vowel length -->
+        <audio-parameter
+          :mora-index="moraIndex"
+          :value="mora.vowelLength"
+          :ui-locked="uiLocked"
+          :min="minMoraLength"
+          :max="maxMoraLength"
+          :step="0.001"
+          :type="'vowel'"
+          :clip="mora.consonant ? true : false"
+          :shift-key-flag="shiftKeyFlag"
+          @change-value="changeMoraData"
+          @mouse-over="handleLengthHoverText"
+        />
+      </div>
+      <div
+        v-if="accentPhrase.pauseMora"
+        class="q-mb-sm pitch-cell"
+        :style="{
+          'grid-column': `${accentPhrase.moras.length * 2 + 1} / span 1`,
+        }"
+      >
+        <!-- pause length -->
+        <audio-parameter
+          :mora-index="accentPhrase.moras.length"
+          :value="accentPhrase.pauseMora.vowelLength"
+          :ui-locked="uiLocked"
+          :min="0"
+          :max="1.0"
+          :step="0.01"
+          :type="'pause'"
+          :shift-key-flag="shiftKeyFlag"
+          @change-value="changeMoraData"
+        />
+      </div>
+    </template>
+    <!-- スライダーここまで -->
+    <!-- 読みテキスト・アクセント句の分割と結合ここから -->
+    <template v-for="(mora, moraIndex) in accentPhrase.moras" :key="moraIndex">
+      <div
+        class="text-cell"
+        :class="{
+          'text-cell-highlighted': isEditableMora(mora.vowel, moraIndex),
+        }"
+        :style="{
+          'grid-column': `${moraIndex * 2 + 1} / span 1`,
+        }"
+        @mouseover="handleHoverText(true, moraIndex)"
+        @mouseleave="handleHoverText(false, moraIndex)"
+        @click.stop="uiLocked || handleChangeVoicing(mora, moraIndex)"
+      >
+        <span class="text-cell-inner">
+          {{ getHoveredText(mora, moraIndex) }}
+        </span>
+        <q-popup-edit
+          v-if="selectedDetail == 'accent' && !uiLocked"
+          v-slot="scope"
+          :model-value="pronunciation"
+          auto-save
+          transition-show="none"
+          transition-hide="none"
+          @save="handleChangePronounce($event)"
+        >
+          <q-input
+            v-model="scope.value"
+            dense
+            :input-style="{
+              width: `${scope.value.length + 1}em`,
+              minWidth: '50px',
+            }"
+            :aria-label="`${index + 1}番目のアクセント区間の読み`"
+            autofocus
+            outlined
+            @keyup.enter="scope.set"
+          />
+        </q-popup-edit>
+      </div>
+      <div
+        v-if="!isLast || moraIndex < accentPhrase.moras.length - 1"
+        :class="[
+          'splitter-cell',
+          {
+            'splitter-cell-accent': selectedDetail == 'accent',
+            'splitter-cell-be-split':
+              moraIndex == accentPhrase.moras.length - 1,
+            'splitter-cell-be-split-pause': accentPhrase.pauseMora,
+          },
+        ]"
+        :style="{ 'grid-column': `${moraIndex * 2 + 2} / span 1` }"
+        @click.stop="uiLocked || toggleAccentPhraseSplit(false, moraIndex)"
+      />
+    </template>
+    <template v-if="accentPhrase.pauseMora">
+      <div class="text-cell">
+        <span class="text-cell-inner">
+          {{ accentPhrase.pauseMora.text }}
+        </span>
+      </div>
+      <div
+        class="
+          splitter-cell splitter-cell-be-split splitter-cell-be-split-pause
+        "
+        @click.stop="uiLocked || toggleAccentPhraseSplit(true)"
+      />
+    </template>
+    <!-- 読みテキスト・アクセント句の分割と結合ここまで -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import AudioAccent from "./AudioAccent.vue";
+import AudioParameter from "./AudioParameter.vue";
+import ContextMenu from "./ContextMenu.vue";
+import { MenuItemButton } from "./MenuBar.vue";
+import { useStore } from "@/store";
+import { AudioKey, MoraDataType } from "@/type/preload";
+import { Mora } from "@/openapi/models/Mora";
+import { AccentPhrase } from "@/openapi";
+
+const props =
+  defineProps<{
+    audioKey: AudioKey;
+    accentPhrase: AccentPhrase;
+    index: number;
+    isActive: boolean;
+    isLast: boolean;
+    selectedDetail: DetailTypes;
+    shiftKeyFlag: boolean;
+    altKeyFlag: boolean;
+  }>();
+
+defineEmits<{
+  (e: "click", index: number): void;
+}>();
+
+const container = ref<HTMLElement>();
+defineExpose({
+  container,
+});
+
+type DetailTypes = "accent" | "pitch" | "length";
+
+const store = useStore();
+
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+
+const contextMenudata = ref<[MenuItemButton]>([
+  {
+    type: "button",
+    label: "削除",
+    onClick: () => {
+      store.dispatch("COMMAND_DELETE_ACCENT_PHRASE", {
+        audioKey: props.audioKey,
+        accentPhraseIndex: props.index,
+      });
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+
+const pronunciation = computed(() => {
+  let textString = props.accentPhrase.moras.map((mora) => mora.text).join("");
+  if (props.accentPhrase.pauseMora) {
+    textString += "、";
+  }
+  return textString;
+});
+
+const handleChangePronounce = (newPronunciation: string) => {
+  let popUntilPause = false;
+  newPronunciation = newPronunciation
+    .replace(/,/g, "、")
+    // 連続する読点をまとめる
+    .replace(/、{2,}/g, "、");
+  if (newPronunciation.endsWith("、")) {
+    if (props.isLast) {
+      // 末尾の読点を削除
+      newPronunciation = newPronunciation.slice(0, -1);
+    } else {
+      // 生成エラー回避
+      newPronunciation += "ア";
+      popUntilPause = true;
+    }
+  }
+  store.dispatch("COMMAND_CHANGE_SINGLE_ACCENT_PHRASE", {
+    audioKey: props.audioKey,
+    newPronunciation,
+    accentPhraseIndex: props.index,
+    popUntilPause,
+  });
+};
+
+const hoveredMoraIndex = ref<number | undefined>(undefined);
+const handleHoverText = (isOver: boolean, moraIndex: number) => {
+  if (props.selectedDetail == "accent" || props.selectedDetail == "pitch") {
+    hoveredMoraIndex.value = isOver ? moraIndex : undefined;
+  }
+};
+
+const lengthHoveredPhonemeType = ref<"vowel" | "consonant">("vowel");
+const handleLengthHoverText = (
+  isOver: boolean,
+  phoneme: MoraDataType,
+  moraIndex: number
+) => {
+  if (phoneme !== "vowel" && phoneme !== "consonant")
+    throw new Error("phoneme != hoveredType");
+  lengthHoveredPhonemeType.value = phoneme;
+  // the pause and pitch templates don't emit a mouseOver event
+  hoveredMoraIndex.value = isOver ? moraIndex : undefined;
+};
+
+const unvoicableVowels = ["U", "I", "i", "u"];
+
+/**
+ * 各モーラが、hover中のモーラをそのままクリックした場合に編集範囲に含まれるかどうか。
+ * 強調表示するかの判定に使われる。
+ */
+const isEditableMora = (vowel: string, moraIndex: number) => {
+  if (uiLocked.value) {
+    return false;
+  }
+  if (props.selectedDetail == "accent") {
+    // クリック時の動作はそのアクセント句の読み変更。
+    // よって、いずれかのモーラがhoverされているならそのアクセント句を強調表示する。
+    return hoveredMoraIndex.value !== undefined;
+  }
+  if (props.selectedDetail == "pitch") {
+    // クリック時の動作は無声化/有声化の切り替え。
+    // よって、hover中のモーラが無声化可能かを判定しそのモーラを強調表示する。
+    return (
+      moraIndex === hoveredMoraIndex.value && unvoicableVowels.includes(vowel)
+    );
+  }
+  return false;
+};
+
+const getHoveredText = (mora: Mora, moraIndex: number) => {
+  if (props.selectedDetail != "length") return mora.text;
+  if (moraIndex === hoveredMoraIndex.value) {
+    if (lengthHoveredPhonemeType.value == "vowel") {
+      return mora.vowel.toUpperCase();
+    } else {
+      return mora.consonant?.toUpperCase();
+    }
+  } else {
+    return mora.text;
+  }
+};
+
+const changeAccent = (accentPhraseIndex: number, accent: number) =>
+  store.dispatch("COMMAND_CHANGE_ACCENT", {
+    audioKey: props.audioKey,
+    accentPhraseIndex,
+    accent,
+  });
+const toggleAccentPhraseSplit = (isPause: boolean, moraIndex?: number) => {
+  store.dispatch("COMMAND_CHANGE_ACCENT_PHRASE_SPLIT", {
+    audioKey: props.audioKey,
+    accentPhraseIndex: props.index,
+    ...(!isPause ? { isPause, moraIndex: moraIndex as number } : { isPause }),
+  });
+};
+
+const lastPitches = computed(() =>
+  props.accentPhrase.moras.map((mora) => mora.pitch)
+);
+
+const maxPitch = 6.5;
+const minPitch = 3;
+const maxMoraLength = 0.3;
+const minMoraLength = 0;
+const changeMoraData = (
+  moraIndex: number,
+  data: number,
+  type: MoraDataType
+) => {
+  const accentPhraseIndex = props.index;
+  if (!props.altKeyFlag) {
+    if (type == "pitch") {
+      lastPitches.value[moraIndex] = data;
+    }
+    return store.dispatch("COMMAND_SET_AUDIO_MORA_DATA", {
+      audioKey: props.audioKey,
+      accentPhraseIndex,
+      moraIndex,
+      data,
+      type,
+    });
+  } else {
+    return store.dispatch("COMMAND_SET_AUDIO_MORA_DATA_ACCENT_PHRASE", {
+      audioKey: props.audioKey,
+      accentPhraseIndex,
+      moraIndex,
+      data,
+      type,
+    });
+  }
+};
+
+const handleChangeVoicing = (mora: Mora, moraIndex: number) => {
+  if (
+    props.selectedDetail == "pitch" &&
+    unvoicableVowels.includes(mora.vowel)
+  ) {
+    let data = 0;
+    if (mora.pitch == 0) {
+      if (lastPitches.value[moraIndex] == 0) {
+        // 元々無声だった場合、適当な値を代入
+        data = 5.5;
+      } else {
+        data = lastPitches.value[moraIndex];
+      }
+    }
+    changeMoraData(moraIndex, data, "voicing");
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.text-cell {
+  min-width: 20px;
+  max-width: 20px;
+  grid-row-start: 3;
+  text-align: center;
+  white-space: nowrap;
+  color: colors.$display;
+  position: relative;
+}
+.text-cell-inner {
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+.text-cell-highlighted {
+  font-weight: bold;
+  cursor: pointer;
+}
+.splitter-cell {
+  min-width: 20px;
+  max-width: 20px;
+  grid-row: 3 / span 1;
+  z-index: vars.$detail-view-splitter-cell-z-index;
+}
+.splitter-cell-accent {
+  @extend.splitter-cell;
+  grid-row: 2 / 4;
+}
+.splitter-cell:hover {
+  background-color: colors.$text-splitter-hover;
+  cursor: pointer;
+}
+.splitter-cell-be-split {
+  min-width: 40px;
+  max-width: 40px;
+  grid-row: 1 / span 3;
+}
+.splitter-cell-be-split-pause {
+  min-width: 20px;
+  max-width: 20px;
+}
+.pitch-cell {
+  grid-row: 1 / span 2;
+  min-width: 20px;
+  max-width: 20px;
+  display: inline-block;
+  position: relative;
+}
+
+.mora-table {
+  display: inline-grid;
+  align-self: stretch;
+  grid-template-rows: 1fr 60px 30px;
+
+  &:last-child {
+    padding-right: 20px;
+  }
+}
+
+.mora-table-hover:hover {
+  cursor: pointer;
+  background-color: colors.$active-point-hover;
+}
+
+.mora-table-focus {
+  // hover色に負けるので、importantが必要
+  background-color: colors.$active-point-focus !important;
+}
+</style>
diff --git a/src/components/AcceptTermsDialog.vue b/src/components/AcceptTermsDialog.vue
index c7e96baa6a..6ad2047f28 100644
--- a/src/components/AcceptTermsDialog.vue
+++ b/src/components/AcceptTermsDialog.vue
@@ -86,7 +86,9 @@ const handler = (acceptTerms: boolean) => {
   store.dispatch("SET_ACCEPT_TERMS", {
     acceptTerms: acceptTerms ? "Accepted" : "Rejected",
   });
-  !acceptTerms ? store.dispatch("CHECK_EDITED_AND_NOT_SAVE") : undefined;
+  !acceptTerms
+    ? store.dispatch("CHECK_EDITED_AND_NOT_SAVE", { closeOrReload: "close" })
+    : undefined;
 
   modelValueComputed.value = false;
 };
diff --git a/src/components/AudioAccent.vue b/src/components/AudioAccent.vue
index a01f1eb365..ebc9208f3c 100644
--- a/src/components/AudioAccent.vue
+++ b/src/components/AudioAccent.vue
@@ -12,7 +12,7 @@
           v-if="accentPhrase.moras.length > 1"
           snap
           dense
-          color="primary-light"
+          color="primary"
           track-size="2px"
           :min="previewAccentSlider.qSliderProps.min.value"
           :max="previewAccentSlider.qSliderProps.max.value"
@@ -106,7 +106,9 @@ const accentLine = computed(() => {
 });
 
 // クリックでアクセント句が選択されないように、@click.stopに渡す
-const stopPropagation = undefined;
+const stopPropagation = () => {
+  // fn is not a function エラーを回避するために何もしない関数を渡す
+};
 </script>
 
 <style scoped lang="scss">
@@ -149,7 +151,7 @@ div {
     text-align: center;
     cursor: pointer;
     svg line {
-      stroke: colors.$primary-light;
+      stroke: colors.$primary;
       stroke-dasharray: 3;
     }
   }
diff --git a/src/components/AudioCell.vue b/src/components/AudioCell.vue
index e514511fdd..13f323f310 100644
--- a/src/components/AudioCell.vue
+++ b/src/components/AudioCell.vue
@@ -1,9 +1,27 @@
 <template>
-  <div class="audio-cell">
+  <div
+    ref="root"
+    class="audio-cell"
+    tabindex="-1"
+    :class="{
+      active: isActiveAudioCell,
+      selected: isSelectedAudioCell && isMultiSelectEnabled,
+    }"
+    @keydown.prevent.up="moveUpCell"
+    @keydown.prevent.down="moveDownCell"
+    @focus="onRootFocus"
+  >
+    <!-- 複数選択用のヒットボックス -->
+    <div
+      v-if="(isCtrlOrCommandKeyDown || isShiftKeyDown) && isMultiSelectEnabled"
+      class="click-hitbox"
+      tabindex="-1"
+      @click="onClickWithModifierKey"
+    />
     <q-icon
       v-if="isActiveAudioCell"
       name="arrow_right"
-      color="primary-light"
+      color="primary"
       size="sm"
       class="absolute active-arrow"
     />
@@ -20,26 +38,35 @@
       :loading="isInitializingSpeaker"
       :show-engine-info="isMultipleEngine"
       :ui-locked="uiLocked"
-      @focus="setActiveAudioKey()"
+      @focus="
+        if (!isSelectedAudioCell) {
+          selectAndSetActiveAudioKey();
+        }
+      "
     />
+    <!--
+      input.valueをスクリプトから変更した場合は@changeが発火しないため、
+      @blurと@keydown.prevent.enter.exactに分けている
+    -->
     <q-input
-      ref="textfield"
+      ref="textField"
       filled
       dense
       hide-bottom-space
       class="full-width"
-      color="primary-light"
+      color="primary"
       :disable="uiLocked"
       :error="audioTextBuffer.length >= 80"
       :model-value="audioTextBuffer"
       :aria-label="`${textLineNumberIndex}行目`"
       @update:model-value="setAudioTextBuffer"
-      @change="willRemove || pushAudioText()"
+      @focus="
+        clearInputSelection();
+        selectAndSetActiveAudioKey();
+      "
+      @blur="pushAudioTextIfNeeded()"
       @paste="pasteOnAudioCell"
-      @focus="setActiveAudioKey()"
-      @keydown.prevent.up.exact="moveUpCell"
-      @keydown.prevent.down.exact="moveDownCell"
-      @mouseup.right="onRightClickTextField"
+      @keydown.prevent.enter.exact="pushAudioTextIfNeeded"
     >
       <template #error>
         文章が長いと正常に動作しない可能性があります。
@@ -56,16 +83,30 @@
           @click="removeCell"
         />
       </template>
+      <context-menu
+        ref="contextMenu"
+        :header="contextMenuHeader"
+        :menudata="contextMenudata"
+        @before-show="
+          startContextMenuOperation();
+          readyForContextMenu();
+        "
+        @before-hide="endContextMenuOperation()"
+      />
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref } from "vue";
+import { computed, watch, ref, nextTick, onMounted, onUnmounted } from "vue";
 import { QInput } from "quasar";
 import CharacterButton from "./CharacterButton.vue";
+import { MenuItemButton, MenuItemSeparator } from "./MenuBar.vue";
+import ContextMenu from "./ContextMenu.vue";
 import { useStore } from "@/store";
-import { AudioKey, Voice } from "@/type/preload";
+import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
+import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 
 const props =
   defineProps<{
@@ -74,13 +115,28 @@ const props =
 
 const emit =
   defineEmits<{
-    (e: "focusCell", payload: { audioKey: AudioKey }): void;
+    // focusTarget：
+    //   textField: テキストフィールドにフォーカス。複数選択が解除される。特別な理由がない限りはこちらを使う。
+    //   root: AudioCell自体にフォーカス。こちらは複数選択を解除しない。
+    (
+      e: "focusCell",
+      payload: { audioKey: AudioKey; focusTarget?: "textField" | "root" }
+    ): void;
   }>();
 
 defineExpose({
   audioKey: computed(() => props.audioKey),
-  focusTextField: () => {
-    textfield.value?.focus();
+  focusCell: ({
+    focusTarget: baseFocusTarget,
+  }: {
+    focusTarget?: "textField" | "root";
+  }) => {
+    const focusTarget = baseFocusTarget ?? "textField";
+    if (focusTarget === "textField") {
+      textField.value?.focus();
+    } else {
+      root.value?.focus();
+    }
   },
   removeCell: () => {
     removeCell();
@@ -94,13 +150,99 @@ const userOrderedCharacterInfos = computed(() => {
     throw new Error("USER_ORDERED_CHARACTER_INFOS == undefined");
   return infos;
 });
-const isInitializingSpeaker = computed(
-  () => store.state.audioKeyInitializingSpeaker === props.audioKey
+const isInitializingSpeaker = computed(() =>
+  store.state.audioKeysWithInitializingSpeaker.includes(props.audioKey)
 );
 const audioItem = computed(() => store.state.audioItems[props.audioKey]);
 
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
+const isMultiSelectEnabled = computed(
+  () => store.state.experimentalSetting.enableMultiSelect
+);
+
+const selectAndSetActiveAudioKey = () => {
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", { audioKeys: [props.audioKey] });
+};
+
+const onRootFocus = () => {
+  selectAndSetActiveAudioKey();
+};
+// 複数選択：Ctrl（Cmd）またはShiftキーが押されている時のクリック処理
+const onClickWithModifierKey = (event: MouseEvent) => {
+  if (uiLocked.value) return;
+  const currentActiveAudioKey = store.getters.ACTIVE_AUDIO_KEY;
+  const currentSelectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
+  let newActiveAudioKey: AudioKey | undefined = currentActiveAudioKey;
+  let newSelectedAudioKeys: AudioKey[] = [...currentSelectedAudioKeys];
+  if (event.shiftKey) {
+    if (currentActiveAudioKey) {
+      const currentAudioIndex = store.state.audioKeys.indexOf(
+        currentActiveAudioKey
+      );
+      const clickedAudioIndex = store.state.audioKeys.indexOf(props.audioKey);
+      const minIndex = Math.min(currentAudioIndex, clickedAudioIndex);
+      const maxIndex = Math.max(currentAudioIndex, clickedAudioIndex);
+      const audioKeysBetween = store.state.audioKeys.slice(
+        minIndex,
+        maxIndex + 1
+      );
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, ...audioKeysBetween];
+    }
+  } else if (isOnCommandOrCtrlKeyDown(event)) {
+    // Ctrlキーを押しながらクリックしたとき：
+    //   activeなAudioCellなら：
+    //     selectedが複数ある場合はactiveを次のselectedに移動し、selectedから除外する。
+    //     selectedが1つの場合はなにもしない。
+    //   選択していないAudioCellならactiveを移動し、以前の選択をselectedに追加する。
+    //   選択しているAudioCellならselectedから除外する。activeは変更しない。
+    if (props.audioKey === currentActiveAudioKey) {
+      if (currentSelectedAudioKeys.length > 1) {
+        const currentAudioIndex = currentSelectedAudioKeys.indexOf(
+          currentActiveAudioKey
+        );
+        newActiveAudioKey =
+          currentSelectedAudioKeys[
+            (currentAudioIndex + 1) % currentSelectedAudioKeys.length
+          ];
+        newSelectedAudioKeys = currentSelectedAudioKeys.filter(
+          (audioKey) => audioKey !== props.audioKey
+        );
+      }
+    } else if (currentSelectedAudioKeys.includes(props.audioKey)) {
+      newActiveAudioKey = currentActiveAudioKey;
+      newSelectedAudioKeys = currentSelectedAudioKeys.filter(
+        (audioKey) => audioKey !== props.audioKey
+      );
+    } else {
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, props.audioKey];
+    }
+  }
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: newActiveAudioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+    audioKeys: newSelectedAudioKeys,
+  });
+};
+
+const isCtrlOrCommandKeyDown = ref(false);
+const isShiftKeyDown = ref(false);
+
+const keyEventListener = (e: KeyboardEvent) => {
+  isCtrlOrCommandKeyDown.value = isOnCommandOrCtrlKeyDown(e);
+  isShiftKeyDown.value = e.shiftKey;
+};
+onMounted(() => {
+  window.addEventListener("keydown", keyEventListener);
+  window.addEventListener("keyup", keyEventListener);
+});
+onUnmounted(() => {
+  window.removeEventListener("keydown", keyEventListener);
+  window.removeEventListener("keyup", keyEventListener);
+});
+
 const selectedVoice = computed<Voice | undefined>({
   get() {
     const { engineId, styleId } = audioItem.value.voice;
@@ -120,8 +262,10 @@ const selectedVoice = computed<Voice | undefined>({
   },
   set(voice: Voice | undefined) {
     if (voice == undefined) return;
-    store.dispatch("COMMAND_CHANGE_VOICE", {
-      audioKey: props.audioKey,
+    store.dispatch("COMMAND_MULTI_CHANGE_VOICE", {
+      audioKeys: isMultiSelectEnabled.value
+        ? store.getters.SELECTED_AUDIO_KEYS
+        : [props.audioKey],
       voice,
     });
   },
@@ -130,6 +274,9 @@ const selectedVoice = computed<Voice | undefined>({
 const isActiveAudioCell = computed(
   () => props.audioKey === store.getters.ACTIVE_AUDIO_KEY
 );
+const isSelectedAudioCell = computed(() =>
+  store.getters.SELECTED_AUDIO_KEYS.includes(props.audioKey)
+);
 
 const audioTextBuffer = ref(audioItem.value.text);
 const isChangeFlag = ref(false);
@@ -149,8 +296,9 @@ watch(
   }
 );
 
-const pushAudioText = async () => {
-  if (isChangeFlag.value) {
+const pushAudioTextIfNeeded = async (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  if (!willRemove.value && isChangeFlag.value && !willFocusOrBlur.value) {
     isChangeFlag.value = false;
     await store.dispatch("COMMAND_CHANGE_AUDIO_TEXT", {
       audioKey: props.audioKey,
@@ -159,44 +307,79 @@ const pushAudioText = async () => {
   }
 };
 
-const setActiveAudioKey = () => {
-  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
+// バグ修正用
+// see https://github.com/VOICEVOX/voicevox/pull/1364#issuecomment-1620594931
+const clearInputSelection = () => {
+  if (!willFocusOrBlur.value) {
+    textFieldSelection.toEmpty();
+  }
 };
-const isEnableSplitText = computed(() => store.state.splitTextWhenPaste);
+
 // コピペしたときに句点と改行で区切る
+const textSplitType = computed(() => store.state.splitTextWhenPaste);
 const pasteOnAudioCell = async (event: ClipboardEvent) => {
-  if (event.clipboardData && isEnableSplitText.value !== "OFF") {
-    let texts: string[] = [];
-    const clipBoardData = event.clipboardData.getData("text/plain");
-    switch (isEnableSplitText.value) {
-      case "PERIOD_AND_NEW_LINE":
-        texts = clipBoardData.replaceAll("。", "。\n\r").split(/[\n\r]/);
-        break;
-      case "NEW_LINE":
-        texts = clipBoardData.split(/[\n\r]/);
-        break;
+  event.preventDefault();
+  paste({ text: event.clipboardData?.getData("text/plain") });
+};
+/**
+ * 貼り付け。
+ * ブラウザ版を考えるとClipboard APIをなるべく回避したいため、積極的に`options.text`を指定してください。
+ */
+const paste = async (options?: { text?: string }) => {
+  const text = options ? options.text : await navigator.clipboard.readText();
+  if (text === undefined) return;
+
+  // 複数行貼り付けできるか試す
+  if (textSplitType.value !== "OFF") {
+    const textSplitter: Record<
+      SplitTextWhenPasteType,
+      (text: string) => string[]
+    > = {
+      PERIOD_AND_NEW_LINE: (text) =>
+        text.replaceAll("。", "。\r\n").split(/[\r\n]/),
+      NEW_LINE: (text) => text.split(/[\r\n]/),
+      OFF: (text) => [text],
+    };
+    const texts = textSplitter[textSplitType.value](text);
+
+    if (texts.length >= 2 && texts.some((text) => text !== "")) {
+      await putMultilineText(texts);
+      return;
     }
+  }
 
-    if (texts.length > 1) {
-      event.preventDefault();
-      blurCell(); // フォーカスを外して編集中のテキスト内容を確定させる
+  const beforeLength = audioTextBuffer.value.length;
+  const end = textFieldSelection.selectionEnd ?? 0;
+  setAudioTextBuffer(textFieldSelection.getReplacedStringTo(text));
+  await nextTick();
+  // 自動的に削除される改行などの文字数を念のため考慮している
+  textFieldSelection.setCursorPosition(
+    end + audioTextBuffer.value.length - beforeLength
+  );
+};
+const putMultilineText = async (texts: string[]) => {
+  // フォーカスを外して編集中のテキスト内容を確定させる
+  if (document.activeElement instanceof HTMLInputElement) {
+    document.activeElement.blur();
+  }
 
-      const prevAudioKey = props.audioKey;
-      if (audioTextBuffer.value == "") {
-        const text = texts.shift();
-        if (text == undefined) return;
-        setAudioTextBuffer(text);
-        await pushAudioText();
-      }
+  const prevAudioKey = props.audioKey;
+  if (audioTextBuffer.value == "") {
+    const text = texts.shift();
+    if (text == undefined) throw new Error("予期せぬタイプエラーです。");
+    setAudioTextBuffer(text);
+    await pushAudioTextIfNeeded();
+  }
 
-      const audioKeys = await store.dispatch("COMMAND_PUT_TEXTS", {
-        texts,
-        voice: audioItem.value.voice,
-        prevAudioKey,
-      });
-      if (audioKeys)
-        emit("focusCell", { audioKey: audioKeys[audioKeys.length - 1] });
-    }
+  const audioKeys = await store.dispatch("COMMAND_PUT_TEXTS", {
+    texts,
+    voice: audioItem.value.voice,
+    prevAudioKey,
+  });
+  if (audioKeys.length > 0) {
+    emit("focusCell", {
+      audioKey: audioKeys[audioKeys.length - 1],
+    });
   }
 };
 
@@ -215,20 +398,33 @@ const textLineNumberWidth = computed(() => {
 
 // 上下に移動
 const audioKeys = computed(() => store.state.audioKeys);
-const moveUpCell = (e?: KeyboardEvent) => {
+const moveCell = (offset: number) => (e?: KeyboardEvent) => {
   if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) - 1;
-  if (index >= 0) {
-    emit("focusCell", { audioKey: audioKeys.value[index] });
-  }
-};
-const moveDownCell = (e?: KeyboardEvent) => {
-  if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) + 1;
-  if (index < audioKeys.value.length) {
-    emit("focusCell", { audioKey: audioKeys.value[index] });
+  const index = audioKeys.value.indexOf(props.audioKey) + offset;
+  if (index >= 0 && index < audioKeys.value.length) {
+    const selectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
+    if (isMultiSelectEnabled.value && e?.shiftKey) {
+      emit("focusCell", {
+        audioKey: audioKeys.value[index],
+        focusTarget: "root",
+      });
+      store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+        audioKeys: [
+          ...selectedAudioKeys,
+          props.audioKey,
+          audioKeys.value[index],
+        ],
+      });
+    } else {
+      emit("focusCell", {
+        audioKey: audioKeys.value[index],
+        focusTarget: "textField",
+      });
+    }
   }
 };
+const moveUpCell = moveCell(-1);
+const moveDownCell = moveCell(1);
 
 // 消去
 const willRemove = ref(false);
@@ -242,9 +438,13 @@ const removeCell = async () => {
 
     const index = audioKeys.value.indexOf(props.audioKey);
     if (index > 0) {
-      emit("focusCell", { audioKey: audioKeys.value[index - 1] });
+      emit("focusCell", {
+        audioKey: audioKeys.value[index - 1],
+      });
     } else {
-      emit("focusCell", { audioKey: audioKeys.value[index + 1] });
+      emit("focusCell", {
+        audioKey: audioKeys.value[index + 1],
+      });
     }
 
     store.dispatch("COMMAND_REMOVE_AUDIO_ITEM", {
@@ -259,21 +459,140 @@ const deleteButtonEnable = computed(() => {
 });
 
 // テキスト編集エリアの右クリック
-const onRightClickTextField = () => {
-  store.dispatch("OPEN_TEXT_EDIT_CONTEXT_MENU");
+const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+
+// FIXME: 可能なら`isRangeSelected`と`contextMenuHeader`をcomputedに
+const isRangeSelected = ref(false);
+const contextMenuHeader = ref<string | undefined>("");
+const contextMenudata = ref<
+  [
+    MenuItemButton,
+    MenuItemButton,
+    MenuItemButton,
+    MenuItemSeparator,
+    MenuItemButton,
+    MenuItemSeparator,
+    MenuItemButton
+  ]
+>([
+  // NOTE: audioTextBuffer.value の変更が nativeEl.value に反映されるのはnextTick。
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      if (textFieldSelection.isEmpty) return;
+
+      const text = textFieldSelection.getAsString();
+      const start = textFieldSelection.selectionStart;
+      setAudioTextBuffer(textFieldSelection.getReplacedStringTo(""));
+      await nextTick();
+      navigator.clipboard.writeText(text);
+      textFieldSelection.setCursorPosition(start);
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: () => {
+      contextMenu.value?.hide();
+      if (textFieldSelection.isEmpty) return;
+
+      navigator.clipboard.writeText(textFieldSelection.getAsString());
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "貼り付け",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      paste();
+    },
+    disableWhenUiLocked: true,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "全選択",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      textField.value?.select();
+    },
+    disableWhenUiLocked: true,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "内容をテキストのみに適用",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      isChangeFlag.value = false;
+      await store.dispatch("COMMAND_CHANGE_DISPLAY_TEXT", {
+        audioKey: props.audioKey,
+        text: audioTextBuffer.value,
+      });
+      textField.value?.blur();
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+/**
+ * コンテキストメニューの開閉によりFocusやBlurが発生する可能性のある間は`true`。
+ */
+// no-focus を付けた場合と付けてない場合でタイミングが異なるため、両方に対応。
+const willFocusOrBlur = ref(false);
+const startContextMenuOperation = () => {
+  willFocusOrBlur.value = true;
 };
-
-const blurCell = (event?: KeyboardEvent) => {
-  if (event?.isComposing) {
-    return;
-  }
-  if (document.activeElement instanceof HTMLInputElement) {
-    document.activeElement.blur();
+const readyForContextMenu = () => {
+  const getMenuItemButton = (label: string) => {
+    const item = contextMenudata.value.find((item) => item.label === label);
+    if (item?.type !== "button")
+      throw new Error("コンテキストメニューアイテムの取得に失敗しました。");
+    return item;
+  };
+
+  const MAX_HEADER_LENGTH = 15;
+  const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
+
+  // 選択範囲を1行目に表示
+  const selectionText = textFieldSelection.getAsString();
+  if (selectionText.length === 0) {
+    isRangeSelected.value = false;
+    getMenuItemButton("切り取り").disabled = true;
+    getMenuItemButton("コピー").disabled = true;
+  } else {
+    isRangeSelected.value = true;
+    getMenuItemButton("切り取り").disabled = false;
+    getMenuItemButton("コピー").disabled = false;
+    if (selectionText.length > MAX_HEADER_LENGTH) {
+      // 長すぎる場合適度な長さで省略
+      contextMenuHeader.value =
+        selectionText.length <= MAX_HEADER_LENGTH
+          ? selectionText
+          : `${selectionText.substring(
+              0,
+              SHORTED_HEADER_FRAGMENT_LENGTH
+            )} ... ${selectionText.substring(
+              selectionText.length - SHORTED_HEADER_FRAGMENT_LENGTH
+            )}`;
+    } else {
+      contextMenuHeader.value = selectionText;
+    }
   }
 };
+const endContextMenuOperation = async () => {
+  await nextTick();
+  willFocusOrBlur.value = false;
+};
+
+const root = ref<HTMLElement>();
 
-// フォーカス
-const textfield = ref<QInput>();
+// テキスト欄
+const textField = ref<QInput>();
+const textFieldSelection = new SelectionHelperForQInput(textField);
 
 // 複数エンジン
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
@@ -285,8 +604,16 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
 .audio-cell {
   display: flex;
+  position: relative;
   padding: 0.4rem 0.5rem;
   margin: 0.2rem 0.5rem;
+  &:focus {
+    // divはフォーカスするとデフォルトで青い枠が出るので消す
+    outline: none;
+  }
+  &.selected {
+    background-color: rgba(colors.$active-point-focus-rgb, 0.5);
+  }
 
   &:first-child {
     margin-top: 0.6rem;
@@ -299,7 +626,7 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
   gap: 0px 1rem;
 
   .active-arrow {
-    left: -5px;
+    left: -1rem;
     height: 2rem;
   }
 
@@ -314,7 +641,7 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     &.active {
       opacity: 1;
       font-weight: bold;
-      color: colors.$primary-light;
+      color: colors.$primary;
     }
   }
 
@@ -322,7 +649,7 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     :deep(.q-field__control) {
       height: 2rem;
       background: none;
-      border-bottom: 1px solid colors.$primary-light;
+      border-bottom: 1px solid colors.$primary;
 
       &::before {
         border-bottom: none;
@@ -348,4 +675,15 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     color: colors.$display;
   }
 }
+
+.click-hitbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: none;
+  z-index: 1;
+  cursor: default;
+}
 </style>
diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue
index f1a0cbab90..d5f12150ab 100644
--- a/src/components/AudioDetail.vue
+++ b/src/components/AudioDetail.vue
@@ -28,25 +28,23 @@
           </q-tabs>
         </div>
         <div class="play-button-wrapper">
-          <template v-if="!nowPlayingContinuously">
-            <q-btn
-              v-if="!nowPlaying && !nowGenerating"
-              fab
-              color="primary-light"
-              text-color="display-on-primary"
-              icon="play_arrow"
-              @click="play"
-            ></q-btn>
-            <q-btn
-              v-else
-              fab
-              color="primary-light"
-              text-color="display-on-primary"
-              icon="stop"
-              :disable="nowGenerating"
-              @click="stop"
-            ></q-btn>
-          </template>
+          <q-btn
+            v-if="!nowPlaying && !nowGenerating"
+            fab
+            color="primary"
+            text-color="display-on-primary"
+            icon="play_arrow"
+            @click="play"
+          ></q-btn>
+          <q-btn
+            v-else
+            fab
+            color="primary"
+            text-color="display-on-primary"
+            icon="stop"
+            :disable="nowGenerating"
+            @click="stop"
+          ></q-btn>
         </div>
       </div>
 
@@ -76,231 +74,44 @@
           <span v-if="isMac">Option</span><span v-else>Alt</span> + ホイール:
           一括調整
         </tool-tip>
-        <div
+        <accent-phrase
           v-for="(accentPhrase, accentPhraseIndex) in accentPhrases"
           :key="accentPhraseIndex"
-          :ref="addAccentPhraseElem"
-          class="mora-table"
-          :class="[
-            accentPhraseIndex === activePoint && 'mora-table-focus',
-            uiLocked || 'mora-table-hover',
-          ]"
-          @click="setPlayAndStartPoint(accentPhraseIndex)"
-        >
-          <template v-if="selectedDetail === 'accent'">
-            <audio-accent
-              :accent-phrase-index="accentPhraseIndex"
-              :accent-phrase="accentPhrase"
-              :ui-locked="uiLocked"
-              :shift-key-flag="shiftKeyFlag"
-              :on-change-accent="changeAccent"
-            />
-          </template>
-          <template v-if="selectedDetail === 'pitch'">
-            <div
-              v-for="(mora, moraIndex) in accentPhrase.moras"
-              :key="moraIndex"
-              class="q-mb-sm pitch-cell"
-              :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
-            >
-              <!-- div for input width -->
-              <audio-parameter
-                :mora-index="moraIndex"
-                :accent-phrase-index="accentPhraseIndex"
-                :value="mora.pitch"
-                :ui-locked="uiLocked"
-                :min="minPitch"
-                :max="maxPitch"
-                :disable="mora.pitch == 0.0"
-                :type="'pitch'"
-                :clip="false"
-                :shift-key-flag="shiftKeyFlag"
-                @change-value="changeMoraData"
-              />
-            </div>
-            <div v-if="accentPhrase.pauseMora" />
-          </template>
-          <template v-if="selectedDetail === 'length'">
-            <div
-              v-for="(mora, moraIndex) in accentPhrase.moras"
-              :key="moraIndex"
-              class="q-mb-sm pitch-cell"
-              :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
-            >
-              <!-- consonant length -->
-              <audio-parameter
-                v-if="mora.consonant && mora.consonantLength != undefined"
-                :mora-index="moraIndex"
-                :accent-phrase-index="accentPhraseIndex"
-                :value="mora.consonantLength"
-                :ui-locked="uiLocked"
-                :min="minMoraLength"
-                :max="maxMoraLength"
-                :step="0.001"
-                :type="'consonant'"
-                :clip="true"
-                :shift-key-flag="shiftKeyFlag"
-                @change-value="changeMoraData"
-                @mouse-over="handleLengthHoverText"
-              />
-              <!-- vowel length -->
-              <audio-parameter
-                :mora-index="moraIndex"
-                :accent-phrase-index="accentPhraseIndex"
-                :value="mora.vowelLength"
-                :ui-locked="uiLocked"
-                :min="minMoraLength"
-                :max="maxMoraLength"
-                :step="0.001"
-                :type="'vowel'"
-                :clip="mora.consonant ? true : false"
-                :shift-key-flag="shiftKeyFlag"
-                @change-value="changeMoraData"
-                @mouse-over="handleLengthHoverText"
-              />
-            </div>
-          </template>
-          <div
-            v-if="accentPhrase.pauseMora && selectedDetail == 'length'"
-            class="q-mb-sm pitch-cell"
-            :style="{
-              'grid-column': `${accentPhrase.moras.length * 2 + 1} / span 1`,
-            }"
-          >
-            <!-- pause length -->
-            <audio-parameter
-              :mora-index="accentPhrase.moras.length"
-              :accent-phrase-index="accentPhraseIndex"
-              :value="accentPhrase.pauseMora.vowelLength"
-              :ui-locked="uiLocked"
-              :min="0"
-              :max="1.0"
-              :step="0.01"
-              :type="'pause'"
-              :shift-key-flag="shiftKeyFlag"
-              @change-value="changeMoraData"
-            />
-          </div>
-          <template
-            v-for="(mora, moraIndex) in accentPhrase.moras"
-            :key="moraIndex"
-          >
-            <div
-              class="text-cell"
-              :class="{
-                'text-cell-hovered': isHovered(
-                  mora.vowel,
-                  accentPhraseIndex,
-                  moraIndex
-                ),
-              }"
-              :style="{
-                'grid-column': `${moraIndex * 2 + 1} / span 1`,
-              }"
-              @mouseover="handleHoverText(true, accentPhraseIndex, moraIndex)"
-              @mouseleave="handleHoverText(false, accentPhraseIndex, moraIndex)"
-              @click.stop="
-                uiLocked ||
-                  handleChangeVoicing(mora, accentPhraseIndex, moraIndex)
-              "
-            >
-              <span class="text-cell-inner">
-                {{ getHoveredText(mora, accentPhraseIndex, moraIndex) }}
-              </span>
-              <q-popup-edit
-                v-if="selectedDetail == 'accent' && !uiLocked"
-                v-slot="scope"
-                :model-value="pronunciationByPhrase[accentPhraseIndex]"
-                auto-save
-                transition-show="none"
-                transition-hide="none"
-                @save="handleChangePronounce($event, accentPhraseIndex)"
-              >
-                <q-input
-                  v-model="scope.value"
-                  dense
-                  :input-style="{
-                    width: `${scope.value.length + 1}em`,
-                    minWidth: '50px',
-                  }"
-                  autofocus
-                  outlined
-                  @keyup.enter="scope.set"
-                />
-              </q-popup-edit>
-            </div>
-            <div
-              v-if="
-                accentPhrases != undefined &&
-                (accentPhraseIndex < accentPhrases.length - 1 ||
-                  moraIndex < accentPhrase.moras.length - 1)
-              "
-              :class="[
-                'splitter-cell',
-                {
-                  'splitter-cell-accent': selectedDetail == 'accent',
-                  'splitter-cell-be-split':
-                    moraIndex == accentPhrase.moras.length - 1,
-                  'splitter-cell-be-split-pause': accentPhrase.pauseMora,
-                },
-              ]"
-              :style="{ 'grid-column': `${moraIndex * 2 + 2} / span 1` }"
-              @click.stop="
-                uiLocked ||
-                  toggleAccentPhraseSplit(accentPhraseIndex, false, moraIndex)
-              "
-            />
-          </template>
-          <template v-if="accentPhrase.pauseMora">
-            <div class="text-cell">
-              <span class="text-cell-inner">
-                {{ accentPhrase.pauseMora.text }}
-              </span>
-            </div>
-            <div
-              class="
-                splitter-cell
-                splitter-cell-be-split
-                splitter-cell-be-split-pause
-              "
-              @click.stop="
-                uiLocked || toggleAccentPhraseSplit(accentPhraseIndex, true)
-              "
-            />
-          </template>
-        </div>
+          ref="accentPhraseComponents"
+          :audio-key="activeAudioKey"
+          :accent-phrase="accentPhrase"
+          :index="accentPhraseIndex"
+          :is-last="
+            accentPhrases !== undefined &&
+            accentPhrases.length - 1 === accentPhraseIndex
+          "
+          :is-active="accentPhraseIndex === activePoint"
+          :selected-detail="selectedDetail"
+          :shift-key-flag="shiftKeyFlag"
+          :alt-key-flag="altKeyFlag"
+          @click="setPlayAndStartPoint"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUpdate,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  VNodeRef,
-  watch,
-} from "vue";
-import { useQuasar } from "quasar";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import ToolTip from "./ToolTip.vue";
 import AudioInfo from "./AudioInfo.vue";
 import AudioAccent from "./AudioAccent.vue";
 import AudioParameter from "./AudioParameter.vue";
+import AccentPhrase from "./AccentPhrase.vue";
 import { useStore } from "@/store";
 import {
   AudioKey,
   HotkeyAction,
   HotkeyReturnType,
   isMac,
-  MoraDataType,
 } from "@/type/preload";
 import { setHotkeyFunctions } from "@/store/setting";
-import { EngineManifest, Mora } from "@/openapi/models";
+import { EngineManifest } from "@/openapi/models";
 
 const props =
   defineProps<{
@@ -308,7 +119,6 @@ const props =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const isMobile = import.meta.env.VITE_TARGET === "mobile";
 
@@ -371,11 +181,11 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
       if (
         !uiLocked.value &&
         store.getters.ACTIVE_AUDIO_KEY &&
-        store.state.audioPlayStartPoint !== undefined
+        store.getters.AUDIO_PLAY_START_POINT !== undefined
       ) {
         store.dispatch("COMMAND_RESET_SELECTED_MORA_PITCH_AND_LENGTH", {
           audioKey: store.getters.ACTIVE_AUDIO_KEY,
-          accentPhraseIndex: store.state.audioPlayStartPoint,
+          accentPhraseIndex: store.getters.AUDIO_PLAY_START_POINT,
         });
       }
     },
@@ -385,14 +195,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
 setHotkeyFunctions(hotkeyMap, true);
 
 // detail selector
-type DetailTypes =
-  | "parameter"
-  | "accent"
-  | "pitch"
-  | "length"
-  | "play"
-  | "stop"
-  | "save";
+type DetailTypes = "parameter" | "accent" | "pitch" | "length";
 const selectedDetail = ref<DetailTypes>("accent");
 
 // accent phrase
@@ -423,7 +226,7 @@ const activePointScrollMode = computed(() => store.state.activePointScrollMode);
 // 再生開始アクセント句
 const startPoint = computed({
   get: () => {
-    return store.state.audioPlayStartPoint;
+    return store.getters.AUDIO_PLAY_START_POINT;
   },
   set: (startPoint) => {
     store.dispatch("SET_AUDIO_PLAY_START_POINT", { startPoint });
@@ -447,75 +250,14 @@ const setPlayAndStartPoint = (accentPhraseIndex: number) => {
   }
 };
 
-const lastPitches = ref<number[][]>([]);
-watch(accentPhrases, async (newPhrases) => {
+watch(accentPhrases, async () => {
   activePoint.value = startPoint.value;
   // 連続再生時に、最初に選択されていた場所に戻るためにscrollToActivePointを呼ぶ必要があるが、
   // DOMの描画が少し遅いので、nextTickをはさむ
   await nextTick();
   scrollToActivePoint();
-  if (newPhrases) {
-    lastPitches.value = newPhrases.map((phrase) =>
-      phrase.moras.map((mora) => mora.pitch)
-    );
-  } else {
-    lastPitches.value = [];
-  }
 });
 
-const changeAccent = (accentPhraseIndex: number, accent: number) =>
-  store.dispatch("COMMAND_CHANGE_ACCENT", {
-    audioKey: props.activeAudioKey,
-    accentPhraseIndex,
-    accent,
-  });
-const toggleAccentPhraseSplit = (
-  accentPhraseIndex: number,
-  isPause: boolean,
-  moraIndex?: number
-) => {
-  store.dispatch("COMMAND_CHANGE_ACCENT_PHRASE_SPLIT", {
-    audioKey: props.activeAudioKey,
-    accentPhraseIndex,
-    ...(!isPause ? { isPause, moraIndex: moraIndex as number } : { isPause }),
-  });
-};
-
-const maxPitch = 6.5;
-const minPitch = 3;
-const maxMoraLength = 0.3;
-const minMoraLength = 0;
-const changeMoraData = (
-  accentPhraseIndex: number,
-  moraIndex: number,
-  data: number,
-  type: MoraDataType
-) => {
-  if (!altKeyFlag.value) {
-    if (type == "pitch") {
-      lastPitches.value[accentPhraseIndex][moraIndex] = data;
-    }
-    store.dispatch("COMMAND_SET_AUDIO_MORA_DATA", {
-      audioKey: props.activeAudioKey,
-      accentPhraseIndex,
-      moraIndex,
-      data,
-      type,
-    });
-  } else {
-    if (accentPhrases.value === undefined) {
-      throw Error("accentPhrases.value === undefined");
-    }
-    store.dispatch("COMMAND_SET_AUDIO_MORA_DATA_ACCENT_PHRASE", {
-      audioKey: props.activeAudioKey,
-      accentPhraseIndex,
-      moraIndex,
-      data,
-      type,
-    });
-  }
-};
-
 // audio play
 const play = async () => {
   try {
@@ -530,53 +272,35 @@ const play = async () => {
     } else {
       window.electron.logError(e);
     }
-    $q.dialog({
+    store.dispatch("SHOW_ALERT_DIALOG", {
       title: "再生に失敗しました",
       message: msg ?? "エンジンの再起動をお試しください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "display",
-      },
     });
   }
 };
 
 const stop = () => {
-  store.dispatch("STOP_AUDIO", { audioKey: props.activeAudioKey });
+  store.dispatch("STOP_AUDIO");
 };
 
-const nowPlaying = computed(
-  () => store.state.audioStates[props.activeAudioKey]?.nowPlaying
-);
+const nowPlaying = computed(() => store.getters.NOW_PLAYING);
 const nowGenerating = computed(
   () => store.state.audioStates[props.activeAudioKey]?.nowGenerating
 );
 
-// continuously play
-const nowPlayingContinuously = computed(
-  () => store.state.nowPlayingContinuously
-);
-
 const audioDetail = ref<HTMLElement>();
-let accentPhraseElems: HTMLElement[] = [];
-const addAccentPhraseElem: VNodeRef = (elem) => {
-  if (elem instanceof HTMLElement) {
-    accentPhraseElems.push(elem);
-  }
-};
-onBeforeUpdate(() => {
-  accentPhraseElems = [];
-});
+
+const accentPhraseComponents = ref<InstanceType<typeof AccentPhrase>[]>([]);
 
 const scrollToActivePoint = () => {
   if (
     activePoint.value === undefined ||
     !audioDetail.value ||
-    accentPhraseElems.length === 0
+    accentPhraseComponents.value.length === 0
   )
     return;
-  const elem = accentPhraseElems[activePoint.value];
+  const elem = accentPhraseComponents.value[activePoint.value].container;
+  if (elem == undefined) throw new Error("elem == undefined");
 
   if (activePointScrollMode.value === "CONTINUOUSLY") {
     const scrollCount = Math.max(
@@ -607,31 +331,42 @@ const scrollToActivePoint = () => {
   }
 };
 
-// NodeJS.Timeout型が直接指定できないので、typeofとReturnTypeで取ってきている
-let focusInterval: ReturnType<typeof setInterval> | undefined;
+let requestId: number | undefined;
 watch(nowPlaying, async (newState) => {
   if (newState) {
     const accentPhraseOffsets = await store.dispatch("GET_AUDIO_PLAY_OFFSETS", {
       audioKey: props.activeAudioKey,
     });
-    // 現在再生されているaudio elementの再生時刻を0.01秒毎に取得(監視)し、
+    // 現在再生されているaudio elementの再生時刻を描画毎に取得(監視)し、
     // それに合わせてフォーカスするアクセント句を変えていく
-    focusInterval = setInterval(() => {
+    const focusAccentPhrase = () => {
       const currentTime = store.getters.ACTIVE_AUDIO_ELEM_CURRENT_TIME;
-      for (let i = 1; i < accentPhraseOffsets.length; i++) {
-        if (
-          currentTime !== undefined &&
-          accentPhraseOffsets[i - 1] <= currentTime &&
-          currentTime < accentPhraseOffsets[i]
-        ) {
-          activePoint.value = i - 1;
-          scrollToActivePoint();
-        }
+      if (currentTime === undefined) {
+        throw new Error("currentTime === undefined)");
+      }
+      const playingAccentPhraseIndex =
+        accentPhraseOffsets.findIndex(
+          (currentOffset) => currentTime < currentOffset
+        ) - 1;
+      if (playingAccentPhraseIndex === -1) {
+        // accentPhraseOffsets[0] は必ず 0 なので到達しないはず
+        throw new Error("playingAccentPhraseIndex === -1");
+      }
+      if (playingAccentPhraseIndex === -2) {
+        // データと音声ファイルの長さに誤差があるため許容
+        // see https://github.com/VOICEVOX/voicevox/issues/785
+        return;
+      }
+      if (activePoint.value !== playingAccentPhraseIndex) {
+        activePoint.value = playingAccentPhraseIndex;
+        scrollToActivePoint();
       }
-    }, 10);
-  } else if (focusInterval !== undefined) {
-    clearInterval(focusInterval);
-    focusInterval = undefined;
+      requestId = window.requestAnimationFrame(focusAccentPhrase);
+    };
+    requestId = window.requestAnimationFrame(focusAccentPhrase);
+  } else if (requestId !== undefined) {
+    window.cancelAnimationFrame(requestId);
+    requestId = undefined;
     // startPointがundefinedの場合、一旦最初のアクセント句までスクロール、その後activePointの選択を解除(undefinedに)する
     activePoint.value = startPoint.value ?? 0;
     scrollToActivePoint();
@@ -639,154 +374,6 @@ watch(nowPlaying, async (newState) => {
   }
 });
 
-const pronunciationByPhrase = computed(() => {
-  const textArray: Array<string> = [];
-  accentPhrases.value?.forEach((accentPhrase) => {
-    let textString = "";
-    accentPhrase.moras.forEach((mora) => {
-      textString += mora.text;
-    });
-    if (accentPhrase.pauseMora) {
-      textString += "、";
-    }
-    textArray.push(textString);
-  });
-  return textArray;
-});
-
-const handleChangePronounce = (
-  newPronunciation: string,
-  phraseIndex: number
-) => {
-  let popUntilPause = false;
-  newPronunciation = newPronunciation.replace(",", "、");
-  if (accentPhrases.value == undefined)
-    throw new Error("accentPhrases.value == undefined");
-  if (
-    newPronunciation.slice(-1) == "、" &&
-    accentPhrases.value.length - 1 != phraseIndex
-  ) {
-    newPronunciation += pronunciationByPhrase.value[phraseIndex + 1];
-    popUntilPause = true;
-  }
-  store.dispatch("COMMAND_CHANGE_SINGLE_ACCENT_PHRASE", {
-    audioKey: props.activeAudioKey,
-    newPronunciation,
-    accentPhraseIndex: phraseIndex,
-    popUntilPause,
-  });
-};
-
-type hoveredType = "vowel" | "consonant";
-
-type hoveredInfoType = {
-  accentPhraseIndex: number | undefined;
-  moraIndex?: number | undefined;
-  type?: hoveredType;
-};
-
-const accentHoveredInfo = reactive<hoveredInfoType>({
-  accentPhraseIndex: undefined,
-});
-
-const pitchHoveredInfo = reactive<hoveredInfoType>({
-  accentPhraseIndex: undefined,
-  moraIndex: undefined,
-});
-
-const lengthHoveredInfo = reactive<hoveredInfoType>({
-  accentPhraseIndex: undefined,
-  moraIndex: undefined,
-  type: "vowel",
-});
-
-const handleHoverText = (
-  isOver: boolean,
-  phraseIndex: number,
-  moraIndex: number
-) => {
-  if (selectedDetail.value == "accent") {
-    if (isOver) {
-      accentHoveredInfo.accentPhraseIndex = phraseIndex;
-    } else {
-      accentHoveredInfo.accentPhraseIndex = undefined;
-    }
-  } else if (selectedDetail.value == "pitch") {
-    if (isOver) {
-      pitchHoveredInfo.accentPhraseIndex = phraseIndex;
-      pitchHoveredInfo.moraIndex = moraIndex;
-    } else {
-      pitchHoveredInfo.accentPhraseIndex = undefined;
-      pitchHoveredInfo.moraIndex = undefined;
-    }
-  }
-};
-
-const handleLengthHoverText = (
-  isOver: boolean,
-  phoneme: MoraDataType,
-  phraseIndex: number,
-  moraIndex?: number
-) => {
-  if (phoneme !== "vowel" && phoneme !== "consonant")
-    throw new Error("phoneme != hoveredType");
-  lengthHoveredInfo.type = phoneme;
-  // the pause and pitch templates don't emit a mouseOver event
-  if (isOver) {
-    lengthHoveredInfo.accentPhraseIndex = phraseIndex;
-    lengthHoveredInfo.moraIndex = moraIndex;
-  } else {
-    lengthHoveredInfo.accentPhraseIndex = undefined;
-    lengthHoveredInfo.moraIndex = undefined;
-  }
-};
-
-const unvoicableVowels = ["U", "I", "i", "u"];
-
-const isHovered = (
-  vowel: string,
-  accentPhraseIndex: number,
-  moraIndex: number
-) => {
-  let isHover = false;
-  if (!uiLocked.value) {
-    if (selectedDetail.value == "accent") {
-      if (accentPhraseIndex === accentHoveredInfo.accentPhraseIndex) {
-        isHover = true;
-      }
-    } else if (selectedDetail.value == "pitch") {
-      if (
-        accentPhraseIndex === pitchHoveredInfo.accentPhraseIndex &&
-        moraIndex === pitchHoveredInfo.moraIndex &&
-        unvoicableVowels.indexOf(vowel) > -1
-      ) {
-        isHover = true;
-      }
-    }
-  }
-  return isHover;
-};
-
-const getHoveredText = (
-  mora: Mora,
-  accentPhraseIndex: number,
-  moraIndex: number
-) => {
-  if (selectedDetail.value != "length") return mora.text;
-  if (
-    accentPhraseIndex === lengthHoveredInfo.accentPhraseIndex &&
-    moraIndex === lengthHoveredInfo.moraIndex
-  ) {
-    if (lengthHoveredInfo.type == "vowel") {
-      return mora.vowel.toUpperCase();
-    } else {
-      return mora.consonant?.toUpperCase();
-    }
-  } else {
-    return mora.text;
-  }
-};
-
 const shiftKeyFlag = ref(false);
 const altKeyFlag = ref(false);
 
@@ -795,28 +382,6 @@ const keyEventListter = (event: KeyboardEvent) => {
   altKeyFlag.value = event.altKey;
 };
 
-const handleChangeVoicing = (
-  mora: Mora,
-  accentPhraseIndex: number,
-  moraIndex: number
-) => {
-  if (
-    selectedDetail.value == "pitch" &&
-    unvoicableVowels.indexOf(mora.vowel) > -1
-  ) {
-    let data = 0;
-    if (mora.pitch == 0) {
-      if (lastPitches.value[accentPhraseIndex][moraIndex] == 0) {
-        // 元々無声だった場合、適当な値を代入
-        data = 5.5;
-      } else {
-        data = lastPitches.value[accentPhraseIndex][moraIndex];
-      }
-    }
-    changeMoraData(accentPhraseIndex, moraIndex, data, "voicing");
-  }
-};
-
 onMounted(() => {
   window.addEventListener("keyup", keyEventListter);
   document.addEventListener("keydown", keyEventListter);
@@ -829,11 +394,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
 
-$pitch-label-height: 24px;
-
 .tip-tweakable-slider-by-scroll {
   position: absolute;
   right: 4px;
@@ -852,9 +414,9 @@ $pitch-label-height: 24px;
     flex-direction: column;
     justify-content: space-between;
     .detail-selector .q-tab--active {
-      background-color: rgba(colors.$primary-light-rgb, 0.3);
+      background-color: rgba(colors.$primary-rgb, 0.3);
       :deep(.q-tab__indicator) {
-        background-color: colors.$primary-light;
+        background-color: colors.$primary;
       }
     }
     .play-button-wrapper {
@@ -879,88 +441,6 @@ $pitch-label-height: 24px;
 
     display: flex;
     overflow-x: scroll;
-
-    .mora-table {
-      display: inline-grid;
-      align-self: stretch;
-      grid-template-rows: 1fr 60px 30px;
-
-      &:last-child {
-        padding-right: 20px;
-      }
-
-      div {
-        padding: 0px;
-        &.text-cell {
-          min-width: 20px;
-          max-width: 20px;
-          grid-row-start: 3;
-          text-align: center;
-          white-space: nowrap;
-          color: colors.$display;
-          position: relative;
-
-          .text-cell-inner {
-            position: absolute;
-            transform: translateX(-50%);
-            z-index: 10;
-          }
-        }
-        &.text-cell-hovered {
-          font-weight: bold;
-          cursor: pointer;
-        }
-        &.splitter-cell {
-          min-width: 20px;
-          max-width: 20px;
-          grid-row: 3 / span 1;
-          z-index: vars.$detail-view-splitter-cell-z-index;
-        }
-        &.splitter-cell-accent {
-          @extend.splitter-cell;
-          grid-row: 2 / 4;
-        }
-        &.splitter-cell:hover {
-          background-color: colors.$text-splitter-hover;
-          cursor: pointer;
-        }
-        &.splitter-cell-be-split {
-          min-width: 40px;
-          max-width: 40px;
-          grid-row: 1 / span 3;
-        }
-        &.splitter-cell-be-split-pause {
-          min-width: 20px;
-          max-width: 20px;
-        }
-        &.accent-cell {
-          grid-row: 2 / span 1;
-          div {
-            min-width: 20px + 20px;
-            max-width: 20px + 20px;
-            display: inline-block;
-            cursor: pointer;
-          }
-        }
-        &.pitch-cell {
-          grid-row: 1 / span 2;
-          min-width: 20px;
-          max-width: 20px;
-          display: inline-block;
-          position: relative;
-        }
-      }
-    }
-
-    .mora-table-hover:hover {
-      cursor: pointer;
-      background-color: colors.$active-point-hover;
-    }
-
-    .mora-table-focus {
-      // hover色に負けるので、importantが必要
-      background-color: colors.$active-point-focus !important;
-    }
   }
 }
 </style>
diff --git a/src/components/AudioInfo.vue b/src/components/AudioInfo.vue
index 8eb78391a1..4705401ecd 100644
--- a/src/components/AudioInfo.vue
+++ b/src/components/AudioInfo.vue
@@ -18,7 +18,7 @@
                 <q-item-section avatar>
                   <q-avatar
                     icon="add_circle_outline"
-                    color="primary-light"
+                    color="primary"
                     text-color="display-on-primary"
                   ></q-avatar>
                 </q-item-section>
@@ -34,7 +34,7 @@
                 <q-item-section avatar>
                   <q-avatar
                     icon="edit_note"
-                    color="primary-light"
+                    color="primary"
                     text-color="display-on-primary"
                   ></q-avatar>
                 </q-item-section>
@@ -52,7 +52,7 @@
           v-model="presetSelectModel"
           :options="selectablePresetList"
           class="col overflow-hidden"
-          color="primary-light"
+          color="primary"
           text-color="display-on-primary"
           outlined
           dense
@@ -102,7 +102,7 @@
                 autofocus
                 hide-selected
                 label="タイトル"
-                color="primary-light"
+                color="primary"
                 use-input
                 input-debounce="0"
                 :model-value="presetName"
@@ -195,7 +195,7 @@
         <q-slider
           dense
           snap
-          color="primary-light"
+          color="primary"
           track-size="2px"
           :min="parameter.slider.qSliderProps.min.value"
           :max="parameter.slider.qSliderProps.max.value"
@@ -237,6 +237,7 @@
                 : "未設定"
             }}
           </div>
+          <!-- 横幅が狭い場合に改行させるため分割 -->
           <div
             v-if="
               morphingTargetCharacterInfo &&
@@ -278,7 +279,7 @@
         <q-slider
           dense
           snap
-          color="primary-light"
+          color="primary"
           track-size="2px"
           :min="morphingRateSlider.qSliderProps.min.value"
           :max="morphingRateSlider.qSliderProps.max.value"
@@ -349,6 +350,7 @@ const supportedFeatures = computed(
         .supportedFeatures) as EngineManifest["supportedFeatures"] | undefined
 );
 
+// FIXME: slider.onChangeとhandleParameterChangeでstate変更が２経路になっているので統一する
 type Parameter = {
   label: string;
   slider: PreviewSliderHelper;
@@ -367,6 +369,11 @@ const parameters = computed<Parameter[]>(() => [
       step: () => 0.01,
       scrollStep: () => 0.1,
       scrollMinStep: () => 0.01,
+      onChange: (speedScale: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_SPEED_SCALE", {
+          audioKey: props.activeAudioKey,
+          speedScale,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_SPEED_SCALE",
     key: "speedScale",
@@ -381,6 +388,11 @@ const parameters = computed<Parameter[]>(() => [
       min: () => -0.15,
       step: () => 0.01,
       scrollStep: () => 0.01,
+      onChange: (pitchScale: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_PITCH_SCALE", {
+          audioKey: props.activeAudioKey,
+          pitchScale,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_PITCH_SCALE",
     key: "pitchScale",
@@ -397,6 +409,11 @@ const parameters = computed<Parameter[]>(() => [
       step: () => 0.01,
       scrollStep: () => 0.1,
       scrollMinStep: () => 0.01,
+      onChange: (intonationScale: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_INTONATION_SCALE", {
+          audioKey: props.activeAudioKey,
+          intonationScale,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_INTONATION_SCALE",
     key: "intonationScale",
@@ -412,6 +429,11 @@ const parameters = computed<Parameter[]>(() => [
       step: () => 0.01,
       scrollStep: () => 0.1,
       scrollMinStep: () => 0.01,
+      onChange: (volumeScale: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_VOLUME_SCALE", {
+          audioKey: props.activeAudioKey,
+          volumeScale,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_VOLUME_SCALE",
     key: "volumeScale",
@@ -426,6 +448,11 @@ const parameters = computed<Parameter[]>(() => [
       step: () => 0.01,
       scrollStep: () => 0.1,
       scrollMinStep: () => 0.01,
+      onChange: (prePhonemeLength: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_PRE_PHONEME_LENGTH", {
+          audioKey: props.activeAudioKey,
+          prePhonemeLength,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_PRE_PHONEME_LENGTH",
     key: "prePhonemeLength",
@@ -440,6 +467,11 @@ const parameters = computed<Parameter[]>(() => [
       step: () => 0.01,
       scrollStep: () => 0.1,
       scrollMinStep: () => 0.01,
+      onChange: (postPhonemeLength: number) =>
+        store.dispatch("COMMAND_SET_AUDIO_POST_PHONEME_LENGTH", {
+          audioKey: props.activeAudioKey,
+          postPhonemeLength,
+        }),
     }),
     action: "COMMAND_SET_AUDIO_POST_PHONEME_LENGTH",
     key: "postPhonemeLength",
@@ -588,7 +620,7 @@ const setMorphingRate = (rate: number) => {
   if (info == undefined) {
     throw new Error("audioItem.value.morphingInfo == undefined");
   }
-  store.dispatch("COMMAND_SET_MORPHING_INFO", {
+  return store.dispatch("COMMAND_SET_MORPHING_INFO", {
     audioKey: props.activeAudioKey,
     morphingInfo: {
       rate,
@@ -666,12 +698,11 @@ type PresetSelectModelType = {
 };
 
 // プリセットの変更
-const changePreset = (presetKey: PresetKey | undefined): void => {
+const changePreset = (presetKey: PresetKey | undefined) =>
   store.dispatch("COMMAND_SET_AUDIO_PRESET", {
     audioKey: props.activeAudioKey,
     presetKey,
   });
-};
 
 const presetList = computed<{ label: string; key: PresetKey }[]>(() =>
   presetKeys.value
diff --git a/src/components/AudioParameter.vue b/src/components/AudioParameter.vue
index bf49501e54..59a455cd7e 100644
--- a/src/components/AudioParameter.vue
+++ b/src/components/AudioParameter.vue
@@ -8,11 +8,11 @@
         !disable && (valueLabel.visible || previewSlider.state.isPanning.value)
       "
       class="value-label"
-      color="primary-light"
+      color="primary"
       text-color="display-on-primary"
     >
       {{
-        previewSlider.state.currentValue.value
+        previewSlider.state.currentValue.value != undefined
           ? previewSlider.state.currentValue.value.toFixed(precisionComputed)
           : undefined
       }}
@@ -21,7 +21,7 @@
       vertical
       reverse
       snap
-      color="primary-light"
+      color="primary"
       track-size="2.5px"
       :style="clipPathComputed"
       :min="previewSlider.qSliderProps.min.value"
@@ -46,7 +46,6 @@ import { MoraDataType } from "@/type/preload";
 const props = withDefaults(
   defineProps<{
     value: number;
-    accentPhraseIndex: number;
     moraIndex: number;
     uiLocked: boolean;
     min?: number;
@@ -72,23 +71,20 @@ const emit =
   defineEmits<{
     (
       e: "changeValue",
-      accentPhraseIndex: number,
       moraIndex: number,
       newValue: number,
       type: MoraDataType
-    ): void;
+    ): Promise<void>;
     (
       e: "mouseOver",
       isOver: boolean,
       type: MoraDataType,
-      accentPhraseIndex: number,
       moraIndex: number
     ): void;
   }>();
 
-const changeValue = (newValue: number, type: MoraDataType = props.type) => {
-  emit("changeValue", props.accentPhraseIndex, props.moraIndex, newValue, type);
-};
+const changeValue = (newValue: number, type: MoraDataType = props.type) =>
+  emit("changeValue", props.moraIndex, newValue, type);
 
 const previewSlider = previewSliderHelper({
   modelValue: () => props.value,
@@ -121,13 +117,7 @@ const clipPathComputed = computed((): string => {
 const handleMouseHover = (isOver: boolean) => {
   valueLabel.visible = isOver;
   if (props.type == "consonant" || props.type == "vowel") {
-    emit(
-      "mouseOver",
-      isOver,
-      props.type,
-      props.accentPhraseIndex,
-      props.moraIndex
-    );
+    emit("mouseOver", isOver, props.type, props.moraIndex);
   }
 };
 
@@ -140,7 +130,9 @@ const precisionComputed = computed(() => {
 });
 
 // クリックでアクセント句が選択されないように@click.stopに渡す
-const stopPropagation = undefined;
+const stopPropagation = () => {
+  // fn is not a function エラーを回避するために何もしない関数を渡す
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 805d758289..e7d048b45c 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -173,9 +173,9 @@
                         </q-avatar>
                       </q-avatar>
                       <q-item-section v-if="style.styleName"
-                        >{{ characterInfo.metas.speakerName }} ({{
+                        >{{ characterInfo.metas.speakerName }}（{{
                           style.styleName
-                        }})</q-item-section
+                        }}）</q-item-section
                       >
                       <q-item-section v-else>{{
                         characterInfo.metas.speakerName
@@ -198,6 +198,7 @@ import { computed, Ref, ref } from "vue";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
+import { formatCharacterStyleName } from "@/store/utility";
 
 const props = withDefaults(
   defineProps<{
@@ -248,11 +249,13 @@ const selectedVoiceInfoText = computed(() => {
     return "キャラクター未選択";
   }
 
+  const speakerName = selectedCharacter.value.metas.speakerName;
   if (!selectedStyleInfo.value) {
-    return selectedCharacter.value.metas.speakerName;
+    return speakerName;
   }
 
-  return `${selectedCharacter.value.metas.speakerName} (${selectedStyleInfo.value.styleName})`;
+  const styleName = selectedStyleInfo.value.styleName;
+  return formatCharacterStyleName(speakerName, styleName);
 });
 
 const isSelectedItem = (characterInfo: CharacterInfo) =>
@@ -340,7 +343,7 @@ const updateMenuHeight = () => {
 
 .character-button {
   border: solid 1px;
-  border-color: colors.$primary-light;
+  border-color: colors.$primary;
   font-size: 0;
   height: fit-content;
 
diff --git a/src/components/CharacterOrderDialog.vue b/src/components/CharacterOrderDialog.vue
index 8c6575a482..dca0560739 100644
--- a/src/components/CharacterOrderDialog.vue
+++ b/src/components/CharacterOrderDialog.vue
@@ -88,7 +88,9 @@
                   @mouseenter="
                     // ドラッグ中はバグるので無視
                     characterOrderDragging ||
-                      selectCharacter(element.metas.speakerUuid)
+                      selectCharacterWithChangePortrait(
+                        element.metas.speakerUuid
+                      )
                   "
                 >
                   {{ element.metas.speakerName }}
@@ -147,6 +149,10 @@ const selectedCharacter = ref(props.characterInfos[0].metas.speakerUuid);
 const selectCharacter = (speakerUuid: SpeakerId) => {
   selectedCharacter.value = speakerUuid;
 };
+const selectCharacterWithChangePortrait = (speakerUuid: SpeakerId) => {
+  selectCharacter(speakerUuid);
+  portrait.value = characterInfosMap.value[speakerUuid].portraitPath;
+};
 
 // キャラクター表示順序
 const characterOrder = ref<CharacterInfo[]>([]);
@@ -331,7 +337,7 @@ const updatePortrait = (portraitPath: string) => {
       text-align: center;
       cursor: grab;
       &.selected-character-order-item {
-        border: 2px solid colors.$primary-light;
+        border: 2px solid colors.$primary;
       }
     }
   }
diff --git a/src/components/CharacterPortrait.vue b/src/components/CharacterPortrait.vue
index b3baf05868..334035ee4c 100644
--- a/src/components/CharacterPortrait.vue
+++ b/src/components/CharacterPortrait.vue
@@ -15,6 +15,7 @@
 import { computed } from "vue";
 import { useStore } from "@/store";
 import { AudioKey } from "@/type/preload";
+import { formatCharacterStyleName } from "@/store/utility";
 
 const store = useStore();
 
@@ -52,9 +53,16 @@ const styleInfo = computed(() => {
 });
 
 const characterName = computed(() => {
-  return styleInfo.value?.styleName
-    ? `${characterInfo.value?.metas.speakerName} (${styleInfo.value?.styleName})`
-    : characterInfo.value?.metas.speakerName;
+  // 初期化前・未選択時
+  if (characterInfo.value == undefined) {
+    return "（表示エラー）";
+  }
+
+  const speakerName = characterInfo.value.metas.speakerName;
+  const styleName = styleInfo.value?.styleName;
+  return styleName
+    ? formatCharacterStyleName(speakerName, styleName)
+    : speakerName;
 });
 
 const engineName = computed(() => {
@@ -74,7 +82,10 @@ const portraitPath = computed(
 
 const isInitializingSpeaker = computed(() => {
   const activeAudioKey = store.getters.ACTIVE_AUDIO_KEY;
-  return store.state.audioKeyInitializingSpeaker === activeAudioKey;
+  return (
+    activeAudioKey &&
+    store.state.audioKeysWithInitializingSpeaker.includes(activeAudioKey)
+  );
 });
 
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue
index 307b2c7b73..985dfbef7d 100644
--- a/src/components/CharacterTryListenCard.vue
+++ b/src/components/CharacterTryListenCard.vue
@@ -40,7 +40,7 @@
           "
         />
         <span aria-live="polite">{{
-          selectedStyle.styleName || "ノーマル"
+          selectedStyle.styleName || DEFAULT_STYLE_NAME
         }}</span>
         <q-btn
           flat
@@ -71,7 +71,7 @@
               ? 'stop'
               : 'play_arrow'
           "
-          color="primary-light"
+          color="primary"
           class="voice-sample-btn"
           :aria-label="`サンプルボイス${voiceSampleIndex + 1}`"
           @mouseenter="isHoverableItem = false"
@@ -95,6 +95,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
+import { DEFAULT_STYLE_NAME } from "@/store/utility";
 
 const props =
   defineProps<{
@@ -165,11 +166,11 @@ const rollStyleIndex = (speakerUuid: SpeakerId, diff: number) => {
 @use '@/styles/colors' as colors;
 
 .character-item {
-  box-shadow: 0 0 0 1px rgba(colors.$primary-light-rgb, 0.5);
+  box-shadow: 0 0 0 1px rgba(colors.$primary-rgb, 0.5);
   border-radius: 10px;
   overflow: hidden;
   &.selected-character-item {
-    box-shadow: 0 0 0 2px colors.$primary-light;
+    box-shadow: 0 0 0 2px colors.$primary;
   }
   &:hover :deep(.q-focus-helper) {
     opacity: 0 !important;
@@ -204,7 +205,7 @@ const rollStyleIndex = (speakerUuid: SpeakerId, diff: number) => {
       justify-content: center;
     }
     .new-character-item {
-      color: colors.$primary-light;
+      color: colors.$primary;
       position: absolute;
       left: 0px;
       top: 0px;
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
new file mode 100644
index 0000000000..49376b0066
--- /dev/null
+++ b/src/components/ContextMenu.vue
@@ -0,0 +1,70 @@
+<template>
+  <q-menu
+    ref="contextMenu"
+    touch-position
+    context-menu
+    :no-focus="noFocus"
+    transition-show="none"
+    transition-hide="none"
+  >
+    <q-list dense>
+      <q-item v-if="header" dense class="bg-background">
+        <q-item-section class="text-weight-bold">{{ header }}</q-item-section>
+      </q-item>
+      <menu-item
+        v-for="(menu, index) of menudata"
+        :key="index + 1"
+        :menudata="menu"
+        :disable="
+          (menu.type !== 'separator' && menu.disabled) ||
+          (uiLocked && menu.type !== 'separator' && menu.disableWhenUiLocked)
+        "
+      >
+      </menu-item>
+    </q-list>
+  </q-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { QMenu } from "quasar";
+import MenuItem from "@/components/MenuItem.vue";
+import { MenuItemButton, MenuItemSeparator } from "@/components/MenuBar.vue";
+import { useStore } from "@/store";
+
+defineProps<{
+  header?: string;
+  menudata: ContextMenuItemData[];
+}>();
+defineExpose({
+  hide: () => {
+    contextMenu.value?.hide();
+  },
+});
+const store = useStore();
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+
+const contextMenu = ref<QMenu>();
+/**
+ * コンテキストメニューがフォーカスを奪うかどうかを制御する。
+ * 通常はアクセシビリティ考慮のためにフォーカスが移るが、input要素の場合は文字の選択範囲が非表示になってしまう。
+ * この挙動が不要だと考えられるユーザーに向けてはフォーカスを奪わないようにする。
+ */
+const noFocus = ref(false);
+
+const buttonCapturer = (event: Event) => {
+  if (event instanceof PointerEvent) {
+    // キーボードから開いた場合はアクセシビリティ(tabキーでの操作)を考慮してフォーカスされる
+    // マウスなどから開いた場合は選択範囲の非表示回避のためにフォーカスされない
+    noFocus.value = event.button !== -1;
+  }
+};
+onMounted(() => {
+  parent.addEventListener("contextmenu", buttonCapturer, { capture: true });
+});
+onUnmounted(() => {
+  parent.removeEventListener("contextmenu", buttonCapturer);
+});
+
+export type ContextMenuItemData = MenuItemSeparator | MenuItemButton;
+</script>
diff --git a/src/components/DefaultStyleListDialog.vue b/src/components/DefaultStyleListDialog.vue
index 84a0f476fd..236531d78b 100644
--- a/src/components/DefaultStyleListDialog.vue
+++ b/src/components/DefaultStyleListDialog.vue
@@ -64,10 +64,13 @@
                     "
                     class="style-icon"
                   />
-                  <span class="text-subtitle1 q-ma-sm">{{
-                    characterInfosMap[speaker.metas.speakerUuid].metas
-                      .speakerName
-                  }}</span>
+                  <span
+                    class="text-subtitle1 q-mt-sm q-mb-xs text-weight-bold"
+                    >{{
+                      characterInfosMap[speaker.metas.speakerUuid].metas
+                        .speakerName
+                    }}</span
+                  >
                   <div
                     v-if="
                       characterInfosMap[speaker.metas.speakerUuid].metas.styles
@@ -75,15 +78,16 @@
                     "
                     class="style-select-container"
                   >
-                    <span
-                      >{{
-                        selectedStyles[speaker.metas.speakerUuid]
-                          ? selectedStyles[speaker.metas.speakerUuid].styleName
-                          : "ノーマル"
-                      }}（{{
+                    <span>{{
+                      selectedStyles[speaker.metas.speakerUuid]
+                        ? selectedStyles[speaker.metas.speakerUuid].styleName
+                        : DEFAULT_STYLE_NAME
+                    }}</span
+                    ><span class="text-caption"
+                      >全{{
                         characterInfosMap[speaker.metas.speakerUuid].metas
                           .styles.length
-                      }}スタイル）</span
+                      }}スタイル</span
                     >
                   </div>
                 </div>
@@ -99,6 +103,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useStore } from "@/store";
+import { DEFAULT_STYLE_NAME } from "@/store/utility";
 import { CharacterInfo, SpeakerId, StyleInfo } from "@/type/preload";
 import DefaultStyleSelectDialog from "@/components/DefaultStyleSelectDialog.vue";
 
@@ -253,11 +258,11 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
     align-content: center;
     justify-content: center;
     .character-item {
-      box-shadow: 0 0 0 1px rgba(colors.$primary-light-rgb, 0.5);
+      box-shadow: 0 0 0 1px rgba(colors.$primary-rgb, 0.5);
       border-radius: 10px;
       overflow: hidden;
       &.selected-character-item {
-        box-shadow: 0 0 0 2px colors.$primary-light;
+        box-shadow: 0 0 0 2px colors.$primary;
       }
       &:hover :deep(.q-focus-helper) {
         opacity: 0 !important;
@@ -280,10 +285,9 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
         }
         .style-select-container {
           display: flex;
-          flex-direction: row;
+          flex-direction: column;
           justify-content: center;
           align-items: center;
-          margin-top: -1rem;
         }
       }
     }
diff --git a/src/components/DefaultStyleSelectDialog.vue b/src/components/DefaultStyleSelectDialog.vue
index 172bc29efa..ed63289c3b 100644
--- a/src/components/DefaultStyleSelectDialog.vue
+++ b/src/components/DefaultStyleSelectDialog.vue
@@ -64,7 +64,7 @@
                 <div class="style-item-inner">
                   <img :src="style.iconPath" class="style-icon" />
                   <span class="text-subtitle1 q-ma-sm">{{
-                    style.styleName || "ノーマル"
+                    style.styleName || DEFAULT_STYLE_NAME
                   }}</span>
                   <div class="voice-samples">
                     <q-btn
@@ -81,7 +81,7 @@
                           ? 'stop'
                           : 'play_arrow'
                       "
-                      color="primary-light"
+                      color="primary"
                       class="voice-sample-btn"
                       @mouseenter="isHoverableStyleItem = false"
                       @mouseleave="isHoverableStyleItem = true"
@@ -100,11 +100,7 @@
                       "
                     />
                     <q-radio
-                      class="
-                        absolute-top-right
-                        no-pointer-events
-                        text-primary-light
-                      "
+                      class="absolute-top-right no-pointer-events text-primary"
                       :model-value="selectedStyleIndexComputed"
                       :val="styleIndex"
                       @update:model-value="selectStyleIndex(styleIndex)"
@@ -123,6 +119,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useStore } from "@/store";
+import { DEFAULT_STYLE_NAME } from "@/store/utility";
 import {
   CharacterInfo,
   DefaultStyleId,
@@ -280,11 +277,11 @@ const closeDialog = () => {
       align-content: center;
       justify-content: center;
       .style-item {
-        box-shadow: 0 0 0 1px rgba(colors.$primary-light-rgb, 0.5);
+        box-shadow: 0 0 0 1px rgba(colors.$primary-rgb, 0.5);
         border-radius: 10px;
         overflow: hidden;
         &.active-style-item {
-          box-shadow: 0 0 0 2px colors.$primary-light;
+          box-shadow: 0 0 0 2px colors.$primary;
         }
         &:hover :deep(.q-focus-helper) {
           opacity: 0 !important;
diff --git a/src/components/Dialog.ts b/src/components/Dialog.ts
index 78e19eced7..77f6cba863 100644
--- a/src/components/Dialog.ts
+++ b/src/components/Dialog.ts
@@ -1,5 +1,5 @@
-import { QVueGlobals } from "quasar";
-import { AudioKey, Encoding as EncodingType } from "@/type/preload";
+import { Dialog, DialogChainObject, Notify, Loading } from "quasar";
+import { AudioKey, ConfirmedTips } from "@/type/preload";
 import {
   AllActions,
   SaveResultObject,
@@ -10,32 +10,152 @@ import SaveAllResultDialog from "@/components/SaveAllResultDialog.vue";
 import { Dispatch } from "@/store/vuex";
 import { withProgress } from "@/store/ui";
 
-type QuasarDialog = QVueGlobals["dialog"];
-type QuasarNotify = QVueGlobals["notify"];
 type MediaType = "audio" | "text";
 
+export type CommonDialogResult = "OK" | "CANCEL";
+export type CommonDialogOptions = {
+  alert: {
+    title: string;
+    message: string;
+    ok?: string;
+  };
+  confirm: {
+    title: string;
+    message: string;
+    html?: boolean;
+    actionName: string;
+    cancel?: string;
+  };
+  warning: {
+    title: string;
+    message: string;
+    actionName: string;
+    cancel?: string;
+  };
+};
+export type CommonDialogType = keyof CommonDialogOptions;
+type CommonDialogCallback = (value: CommonDialogResult) => void;
+
+export type NotifyAndNotShowAgainButtonOption = {
+  message: string;
+  isWarning?: boolean;
+  icon?: string;
+  tipName: keyof ConfirmedTips;
+};
+
+export type LoadingScreenOption = { message: string };
+
+// 汎用ダイアログを表示
+export const showAlertDialog = async (
+  options: CommonDialogOptions["alert"]
+) => {
+  options.ok ??= "閉じる";
+
+  return new Promise((resolve: CommonDialogCallback) => {
+    setCommonDialogCallback(
+      Dialog.create({
+        title: options.title,
+        message: options.message,
+        ok: {
+          label: options.ok,
+          flat: true,
+          textColor: "display",
+        },
+      }),
+      resolve
+    );
+  });
+};
+
+/**
+ * htmlフラグを`true`にする場合、外部からの汚染された文字列を`title`や`message`に含めてはいけません。
+ * see https://quasar.dev/quasar-plugins/dialog#using-html
+ */
+export const showConfirmDialog = async (
+  options: CommonDialogOptions["confirm"]
+) => {
+  options.cancel ??= "キャンセル";
+
+  return new Promise((resolve: CommonDialogCallback) => {
+    setCommonDialogCallback(
+      Dialog.create({
+        title: options.title,
+        message: options.message,
+        persistent: true, // ダイアログ外側押下時・Esc押下時にユーザが設定ができたと思い込むことを防止する
+        focus: "ok",
+        html: options.html,
+        ok: {
+          flat: true,
+          label: options.actionName,
+          textColor: "display",
+        },
+        cancel: {
+          flat: true,
+          label: options.cancel,
+          textColor: "display",
+        },
+      }),
+      resolve
+    );
+  });
+};
+
+export const showWarningDialog = async (
+  options: CommonDialogOptions["warning"]
+) => {
+  options.cancel ??= "キャンセル";
+
+  return new Promise((resolve: CommonDialogCallback) => {
+    setCommonDialogCallback(
+      Dialog.create({
+        title: options.title,
+        message: options.message,
+        persistent: true,
+        focus: "cancel",
+        ok: {
+          label: options.actionName,
+          flat: true,
+          textColor: "warning",
+        },
+        cancel: {
+          label: options.cancel,
+          flat: true,
+          textColor: "display",
+        },
+      }),
+      resolve
+    );
+  });
+};
+
+const setCommonDialogCallback = (
+  dialog: DialogChainObject,
+  resolve: (result: CommonDialogResult) => void
+) => {
+  return dialog
+    .onOk(() => {
+      resolve("OK");
+    })
+    .onCancel(() => {
+      resolve("CANCEL");
+    });
+};
+
 export async function generateAndSaveOneAudioWithDialog({
   audioKey,
-  quasarDialog,
-  quasarNotify,
   dispatch,
   filePath,
-  encoding,
   disableNotifyOnGenerate,
 }: {
   audioKey: AudioKey;
-  quasarDialog: QuasarDialog;
-  quasarNotify: QuasarNotify;
   dispatch: Dispatch<AllActions>;
   filePath?: string;
-  encoding?: EncodingType;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result: SaveResultObject = await withProgress(
     dispatch("GENERATE_AND_SAVE_AUDIO", {
       audioKey,
       filePath,
-      encoding,
     }),
     dispatch
   );
@@ -45,35 +165,27 @@ export async function generateAndSaveOneAudioWithDialog({
   if (result.result === "SUCCESS") {
     if (disableNotifyOnGenerate) return;
     // 書き出し成功時に通知をする
-    showNotify({
+    showWriteSuccessNotify({
       mediaType: "audio",
-      quasarNotify,
       dispatch,
     });
   } else {
-    showDialog({ mediaType: "audio", result, quasarDialog });
+    showWriteErrorDialog({ mediaType: "audio", result, dispatch });
   }
 }
 
 export async function generateAndSaveAllAudioWithDialog({
-  quasarDialog,
-  quasarNotify,
   dispatch,
   dirPath,
-  encoding,
   disableNotifyOnGenerate,
 }: {
-  quasarDialog: QuasarDialog;
-  quasarNotify: QuasarNotify;
   dispatch: Dispatch<AllActions>;
   dirPath?: string;
-  encoding?: EncodingType;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result = await withProgress(
     dispatch("GENERATE_AND_SAVE_ALL_AUDIO", {
       dirPath,
-      encoding,
       callback: (finishedCount, totalCount) =>
         dispatch("SET_PROGRESS_FROM_COUNT", { finishedCount, totalCount }),
     }),
@@ -106,15 +218,14 @@ export async function generateAndSaveAllAudioWithDialog({
   if (successArray.length === result.length) {
     if (disableNotifyOnGenerate) return;
     // 書き出し成功時に通知をする
-    showNotify({
+    showWriteSuccessNotify({
       mediaType: "audio",
-      quasarNotify,
       dispatch,
     });
   }
 
   if (writeErrorArray.length > 0 || engineErrorArray.length > 0) {
-    quasarDialog({
+    Dialog.create({
       component: SaveAllResultDialog,
       componentProps: {
         successArray: successArray,
@@ -126,24 +237,17 @@ export async function generateAndSaveAllAudioWithDialog({
 }
 
 export async function generateAndConnectAndSaveAudioWithDialog({
-  quasarDialog,
-  quasarNotify,
   dispatch,
   filePath,
-  encoding,
   disableNotifyOnGenerate,
 }: {
-  quasarDialog: QuasarDialog;
-  quasarNotify: QuasarNotify;
   dispatch: Dispatch<AllActions>;
   filePath?: string;
-  encoding?: EncodingType;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result = await withProgress(
     dispatch("GENERATE_AND_CONNECT_AND_SAVE_AUDIO", {
       filePath,
-      encoding,
       callback: (finishedCount, totalCount) =>
         dispatch("SET_PROGRESS_FROM_COUNT", { finishedCount, totalCount }),
     }),
@@ -154,108 +258,75 @@ export async function generateAndConnectAndSaveAudioWithDialog({
 
   if (result.result === "SUCCESS") {
     if (disableNotifyOnGenerate) return;
-    showNotify({
+    showWriteSuccessNotify({
       mediaType: "audio",
-      quasarNotify,
       dispatch,
     });
   } else {
-    showDialog({ mediaType: "audio", result, quasarDialog });
+    showWriteErrorDialog({ mediaType: "audio", result, dispatch });
   }
 }
 
 export async function connectAndExportTextWithDialog({
-  quasarDialog,
-  quasarNotify,
   dispatch,
   filePath,
-  encoding,
   disableNotifyOnGenerate,
 }: {
-  quasarDialog: QuasarDialog;
-  quasarNotify: QuasarNotify;
   dispatch: Dispatch<AllActions>;
   filePath?: string;
-  encoding?: EncodingType;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result = await dispatch("CONNECT_AND_EXPORT_TEXT", {
     filePath,
-    encoding,
   });
 
   if (result === undefined || result.result === "CANCELED") return;
 
   if (result.result === "SUCCESS") {
     if (disableNotifyOnGenerate) return;
-    showNotify({
+    showWriteSuccessNotify({
       mediaType: "text",
-      quasarNotify,
       dispatch,
     });
   } else {
-    showDialog({ mediaType: "text", result, quasarDialog });
+    showWriteErrorDialog({ mediaType: "text", result, dispatch });
   }
 }
 
-// 成功時の通知を表示
-const showNotify = ({
+// 書き出し成功時の通知を表示
+const showWriteSuccessNotify = ({
   mediaType,
-  quasarNotify,
   dispatch,
 }: {
   mediaType: MediaType;
-  quasarNotify: QuasarNotify;
   dispatch: Dispatch<AllActions>;
 }): void => {
   const mediaTypeNames: Record<MediaType, string> = {
     audio: "音声",
     text: "テキスト",
   };
-
-  quasarNotify({
+  dispatch("SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON", {
     message: `${mediaTypeNames[mediaType]}を書き出しました`,
-    color: "toast",
-    textColor: "toast-display",
-    icon: "info",
-    timeout: 5000,
-    actions: [
-      {
-        label: "今後この通知をしない",
-        textColor: "toast-button-display",
-        handler: () => {
-          dispatch("SET_CONFIRMED_TIP", {
-            confirmedTip: {
-              notifyOnGenerate: true,
-            },
-          });
-        },
-      },
-    ],
+    tipName: "notifyOnGenerate",
   });
 };
 
 // 書き出し失敗時のダイアログを表示
-const showDialog = ({
+const showWriteErrorDialog = ({
   mediaType,
   result,
-  quasarDialog,
+  dispatch,
 }: {
   mediaType: MediaType;
   result: SaveResultObject;
-  quasarDialog: QuasarDialog;
+  dispatch: Dispatch<AllActions>;
 }) => {
   if (mediaType === "text") {
     // テキスト書き出し時のエラーを出力
-    quasarDialog({
+    dispatch("SHOW_ALERT_DIALOG", {
       title: "テキストの書き出しに失敗しました。",
       message:
         "書き込みエラーによって失敗しました。空き容量があることや、書き込み権限があることをご確認ください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "secondary",
-      },
     });
   } else {
     const defaultErrorMessages: Partial<Record<SaveResult, string>> = {
@@ -268,14 +339,57 @@ const showDialog = ({
     };
 
     // 音声書き出し時のエラーを出力
-    quasarDialog({
+    dispatch("SHOW_ALERT_DIALOG", {
       title: "書き出しに失敗しました。",
-      message: result.errorMessage ?? defaultErrorMessages[result.result],
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "secondary",
-      },
+      message: result.errorMessage ?? defaultErrorMessages[result.result] ?? "",
     });
   }
 };
+
+const NOTIFY_TIMEOUT = 5000;
+
+export const showNotifyAndNotShowAgainButton = (
+  {
+    dispatch,
+  }: {
+    dispatch: Dispatch<AllActions>;
+  },
+  options: NotifyAndNotShowAgainButtonOption
+) => {
+  options.icon ??= options.isWarning ? "warning" : "info";
+
+  const suffix = options.isWarning ? "-warning" : "";
+  Notify.create({
+    message: options.message,
+    color: "toast" + suffix,
+    textColor: "toast-display" + suffix,
+    icon: options.isWarning ? "warning" : "info",
+    timeout: NOTIFY_TIMEOUT,
+    actions: [
+      {
+        label: "今後この通知をしない",
+        textColor: "toast-button-display" + suffix,
+        handler: () => {
+          dispatch("SET_CONFIRMED_TIP", {
+            confirmedTip: {
+              [options.tipName]: true,
+            },
+          });
+        },
+      },
+    ],
+  });
+};
+
+export const showLoadingScreen = (options: LoadingScreenOption) => {
+  Loading.show({
+    spinnerColor: "primary",
+    spinnerSize: 50,
+    boxClass: "bg-background text-display",
+    message: options.message,
+  });
+};
+
+export const hideAllLoadingScreen = () => {
+  Loading.hide();
+};
diff --git a/src/components/DictionaryManageDialog.vue b/src/components/DictionaryManageDialog.vue
index 4659d86ba5..c6d3c7db97 100644
--- a/src/components/DictionaryManageDialog.vue
+++ b/src/components/DictionaryManageDialog.vue
@@ -110,7 +110,7 @@
                 dense
                 :disable="uiLocked"
                 @blur="setSurface(surface)"
-                @keydown="yomiFocusWhenEnter"
+                @keydown.enter="yomiFocus"
               />
             </div>
             <div class="row q-pl-md q-pt-sm">
@@ -123,7 +123,7 @@
                 :error="!isOnlyHiraOrKana"
                 :disable="uiLocked"
                 @blur="setYomi(yomi)"
-                @keydown="setYomiWhenEnter"
+                @keydown.enter="setYomiWhenEnter"
               >
                 <template #error>
                   読みに使える文字はひらがなとカタカナのみです。
@@ -139,7 +139,7 @@
                 <q-btn
                   v-if="!nowPlaying && !nowGenerating"
                   fab
-                  color="primary-light"
+                  color="primary"
                   text-color="display-on-primary"
                   icon="play_arrow"
                   @click="play"
@@ -147,7 +147,7 @@
                 <q-btn
                   v-else
                   fab
-                  color="primary-light"
+                  color="primary"
                   text-color="display-on-primary"
                   icon="stop"
                   :disable="nowGenerating"
@@ -202,7 +202,7 @@
                 v-model="wordPriority"
                 snap
                 dense
-                color="primary-light"
+                color="primary"
                 markers
                 :min="0"
                 :max="10"
@@ -250,7 +250,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { QInput, useQuasar } from "quasar";
+import { QInput } from "quasar";
+import AudioAccent from "./AudioAccent.vue";
 import { useStore } from "@/store";
 import { AccentPhrase, UserDictWord } from "@/openapi";
 import {
@@ -258,7 +259,6 @@ import {
   convertLongVowel,
   createKanaRegex,
 } from "@/store/utility";
-import AudioAccent from "@/components/AudioAccent.vue";
 
 const defaultDictPriority = 5;
 
@@ -272,7 +272,6 @@ const emit =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const dictionaryManageDialogOpenedComputed = computed({
   get: () => props.modelValue,
@@ -302,30 +301,21 @@ const loadingDictProcess = async () => {
       store.dispatch("LOAD_ALL_USER_DICT")
     );
   } catch {
-    $q.dialog({
+    const result = await store.dispatch("SHOW_ALERT_DIALOG", {
       title: "辞書の取得に失敗しました",
       message: "エンジンの再起動をお試しください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "display",
-      },
-    }).onOk(() => {
-      dictionaryManageDialogOpenedComputed.value = false;
     });
+    if (result === "OK") {
+      dictionaryManageDialogOpenedComputed.value = false;
+    }
   }
   loadingDictState.value = "synchronizing";
   try {
     await createUILockAction(store.dispatch("SYNC_ALL_USER_DICT"));
   } catch {
-    $q.dialog({
+    await store.dispatch("SHOW_ALERT_DIALOG", {
       title: "辞書の同期に失敗しました",
       message: "エンジンの再起動をお試しください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "display",
-      },
     });
   }
   loadingDictState.value = null;
@@ -341,19 +331,13 @@ const wordEditing = ref(false);
 
 const surfaceInput = ref<QInput>();
 const yomiInput = ref<QInput>();
-const yomiFocusWhenEnter = (event: KeyboardEvent) => {
-  // keyCodeは非推奨で、keyが推奨だが、
-  // key === "Enter"はIMEのEnterも拾ってしまうので、keyCodeを用いている
-  if (event.keyCode === 13) {
-    yomiInput.value?.focus();
-  }
+const yomiFocus = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  yomiInput.value?.focus();
 };
-const setYomiWhenEnter = (event: KeyboardEvent) => {
-  // keyCodeは非推奨で、keyが推奨だが、
-  // key === "Enter"はIMEのEnterも拾ってしまうので、keyCodeを用いている
-  if (event.keyCode === 13) {
-    setYomi(yomi.value);
-  }
+const setYomiWhenEnter = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  setYomi(yomi.value);
 };
 
 const selectedId = ref("");
@@ -448,9 +432,6 @@ const changeAccent = async (_: number, accent: number) => {
   }
 };
 
-const audioElem = new Audio();
-audioElem.pause();
-
 const play = async () => {
   if (!accentPhrase.value) return;
 
@@ -478,25 +459,20 @@ const play = async () => {
     } catch (e) {
       window.electron.logError(e);
       nowGenerating.value = false;
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "生成に失敗しました",
         message: "エンジンの再起動をお試しください。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
       return;
     }
   }
   nowGenerating.value = false;
   nowPlaying.value = true;
-  await store.dispatch("PLAY_AUDIO_BLOB", { audioElem, audioBlob: blob });
+  await store.dispatch("PLAY_AUDIO_BLOB", { audioBlob: blob });
   nowPlaying.value = false;
 };
 const stop = () => {
-  audioElem.pause();
+  store.dispatch("STOP_AUDIO");
 };
 
 // accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
@@ -555,14 +531,9 @@ const saveWord = async () => {
         priority: wordPriority.value,
       });
     } catch {
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "単語の更新に失敗しました",
         message: "エンジンの再起動をお試しください。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
       return;
     }
@@ -577,14 +548,9 @@ const saveWord = async () => {
         })
       );
     } catch {
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "単語の登録に失敗しました",
         message: "エンジンの再起動をお試しください。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
       return;
     }
@@ -593,23 +559,13 @@ const saveWord = async () => {
   toInitialState();
 };
 const isDeletable = computed(() => !!selectedId.value);
-const deleteWord = () => {
-  $q.dialog({
+const deleteWord = async () => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
     title: "登録された単語を削除しますか？",
     message: "削除された単語は復旧できません。",
-    persistent: true,
-    focus: "cancel",
-    ok: {
-      label: "削除",
-      flat: true,
-      textColor: "warning",
-    },
-    cancel: {
-      label: "キャンセル",
-      flat: true,
-      textColor: "display",
-    },
-  }).onOk(async () => {
+    actionName: "削除",
+  });
+  if (result === "OK") {
     try {
       await createUILockAction(
         store.dispatch("DELETE_WORD", {
@@ -617,60 +573,37 @@ const deleteWord = () => {
         })
       );
     } catch {
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "単語の削除に失敗しました",
         message: "エンジンの再起動をお試しください。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
       return;
     }
     await loadingDictProcess();
     toInitialState();
-  });
+  }
 };
-const resetWord = () => {
-  $q.dialog({
+const resetWord = async () => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
     title: "単語の変更をリセットしますか？",
     message: "単語の変更は破棄されてリセットされます。",
-    persistent: true,
-    focus: "cancel",
-    ok: {
-      label: "リセット",
-      flat: true,
-      textColor: "display",
-    },
-    cancel: {
-      label: "キャンセル",
-      flat: true,
-      textColor: "display",
-    },
-  }).onOk(() => {
-    toWordEditingState();
+    actionName: "リセット",
   });
+  if (result === "OK") {
+    toWordEditingState();
+  }
 };
-const discardOrNotDialog = (okCallback: () => void) => {
+const discardOrNotDialog = async (okCallback: () => void) => {
   if (isWordChanged.value) {
-    $q.dialog({
+    const result = await store.dispatch("SHOW_WARNING_DIALOG", {
       title: "単語の追加・変更を破棄しますか？",
       message:
         "このまま続行すると、単語の追加・変更は破棄されてリセットされます。",
-      persistent: true,
-      focus: "cancel",
-      ok: {
-        label: "続行",
-        flat: true,
-        textColor: "display",
-      },
-      cancel: {
-        label: "キャンセル",
-        flat: true,
-        textColor: "display",
-      },
-    }).onOk(okCallback);
+      actionName: "続行",
+    });
+    if (result === "OK") {
+      okCallback();
+    }
   } else {
     okCallback();
   }
diff --git a/src/components/EngineManageDialog.vue b/src/components/EngineManageDialog.vue
index d9ecd3c5b8..79ddeed928 100644
--- a/src/components/EngineManageDialog.vue
+++ b/src/components/EngineManageDialog.vue
@@ -344,7 +344,6 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useQuasar } from "quasar";
 import { useStore } from "@/store";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { EngineDirValidationResult, EngineId } from "@/type/preload";
@@ -362,7 +361,6 @@ const emit =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const engineManageDialogOpenedComputed = computed({
   get: () => props.modelValue,
@@ -483,22 +481,14 @@ const getEngineDirValidationMessage = (result: EngineDirValidationResult) => {
   return messageMap[result];
 };
 
-const addEngine = () => {
-  $q.dialog({
+const addEngine = async () => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
     title: "エンジン追加の確認",
     message:
       "この操作はコンピュータに損害を与える可能性があります。エンジンの配布元が信頼できない場合は追加しないでください。",
-    cancel: {
-      label: "キャンセル",
-      color: "display",
-      flat: true,
-    },
-    ok: {
-      label: "追加",
-      flat: true,
-      textColor: "warning",
-    },
-  }).onOk(async () => {
+    actionName: "追加",
+  });
+  if (result === "OK") {
     if (engineLoaderType.value === "dir") {
       await lockUi(
         "addingEngine",
@@ -507,8 +497,8 @@ const addEngine = () => {
         })
       );
 
-      requireRestart(
-        "エンジンを追加しました。反映には再起動が必要です。今すぐ再起動しますか？"
+      requireReload(
+        "エンジンを追加しました。反映には再読み込みが必要です。今すぐ再読み込みしますか？"
       );
     } else {
       const success = await lockUi(
@@ -516,28 +506,20 @@ const addEngine = () => {
         store.dispatch("INSTALL_VVPP_ENGINE", vvppFilePath.value)
       );
       if (success) {
-        requireRestart(
-          "エンジンを追加しました。反映には再起動が必要です。今すぐ再起動しますか？"
+        requireReload(
+          "エンジンを追加しました。反映には再読み込みが必要です。今すぐ再読み込みしますか？"
         );
       }
     }
-  });
+  }
 };
-const deleteEngine = () => {
-  $q.dialog({
-    title: "確認",
+const deleteEngine = async () => {
+  const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
+    title: "エンジン削除の確認",
     message: "選択中のエンジンを削除します。よろしいですか？",
-    cancel: {
-      label: "キャンセル",
-      color: "display",
-      flat: true,
-    },
-    ok: {
-      label: "削除",
-      flat: true,
-      textColor: "warning",
-    },
-  }).onOk(async () => {
+    actionName: "削除",
+  });
+  if (result === "OK") {
     if (selectedId.value == undefined)
       throw new Error("engine is not selected");
     switch (engineInfos.value[selectedId.value].type) {
@@ -551,8 +533,8 @@ const deleteEngine = () => {
             engineDir,
           })
         );
-        requireRestart(
-          "エンジンを削除しました。反映には再起動が必要です。今すぐ再起動しますか？"
+        requireReload(
+          "エンジンを削除しました。反映には再読み込みが必要です。今すぐ再読み込みしますか？"
         );
         break;
       }
@@ -562,8 +544,8 @@ const deleteEngine = () => {
           store.dispatch("UNINSTALL_VVPP_ENGINE", selectedId.value)
         );
         if (success) {
-          requireRestart(
-            "エンジンの削除には再起動が必要です。今すぐ再起動しますか？"
+          requireReload(
+            "エンジンの削除には再読み込みが必要です。今すぐ再読み込みしますか？"
           );
         }
         break;
@@ -571,7 +553,7 @@ const deleteEngine = () => {
       default:
         throw new Error("assert engineInfos[selectedId.value].type");
     }
-  });
+  }
 };
 
 const selectEngine = (id: EngineId) => {
@@ -592,29 +574,19 @@ const restartSelectedEngine = () => {
   });
 };
 
-const requireRestart = (message: string) => {
-  $q.dialog({
-    title: "再起動が必要です",
+const requireReload = async (message: string) => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
+    title: "再読み込みが必要です",
     message: message,
-    noBackdropDismiss: true,
-    cancel: {
-      label: "後で",
-      color: "display",
-      flat: true,
-    },
-    ok: {
-      label: "再起動",
-      flat: true,
-      textColor: "warning",
-    },
-  })
-    .onOk(() => {
-      toInitialState();
-      store.dispatch("RESTART_APP", {});
-    })
-    .onCancel(() => {
-      toInitialState();
+    actionName: "再読み込み",
+    cancel: "後で",
+  });
+  toInitialState();
+  if (result === "OK") {
+    store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
+      closeOrReload: "reload",
     });
+  }
 };
 
 const newEngineDir = ref("");
diff --git a/src/components/FileNamePatternDialog.vue b/src/components/FileNamePatternDialog.vue
index ea19d3d0cd..c58ef954dd 100644
--- a/src/components/FileNamePatternDialog.vue
+++ b/src/components/FileNamePatternDialog.vue
@@ -16,7 +16,7 @@
           <div class="col">
             <q-input
               ref="patternInput"
-              v-model="currentFileNamePattern"
+              v-model="currentBaseNamePattern"
               dense
               outlined
               bg-color="background"
@@ -80,8 +80,8 @@ import { computed, ref, nextTick } from "vue";
 import { QInput } from "quasar";
 import { useStore } from "@/store";
 import {
-  buildFileNameFromRawData,
-  DEFAULT_FILE_NAME_TEMPLATE,
+  buildAudioFileNameFromRawData,
+  DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE,
   replaceTagIdToTagString,
   sanitizeFileName,
 } from "@/store/utility";
@@ -105,40 +105,29 @@ const tagStrings = Object.values(replaceTagIdToTagString);
 
 const savingSetting = computed(() => store.state.savingSetting);
 
-const currentFileNamePattern = ref(savingSetting.value.fileNamePattern);
-const sanitizedFileNamePattern = computed(() =>
-  sanitizeFileName(currentFileNamePattern.value)
+const savedBaseNamePattern = computed(() => {
+  return savingSetting.value.fileNamePattern.replace(/\.wav$/, "");
+});
+const currentBaseNamePattern = ref(savedBaseNamePattern.value);
+const currentNamePattern = computed(
+  () => `${currentBaseNamePattern.value}.wav`
 );
 
-const hasInvalidChar = computed(
-  () => currentFileNamePattern.value !== sanitizedFileNamePattern.value
-);
 const hasNotIndexTagString = computed(
-  () => !currentFileNamePattern.value.includes(replaceTagIdToTagString["index"])
+  () => !currentBaseNamePattern.value.includes(replaceTagIdToTagString["index"])
 );
 const invalidChar = computed(() => {
-  if (!hasInvalidChar.value) return "";
-
-  const a = currentFileNamePattern.value;
-  const b = sanitizedFileNamePattern.value;
-
-  let diffAt = "";
-  for (let i = 0; i < a.length; i++) {
-    if (b[i] !== a[i]) {
-      diffAt = a[i];
-      break;
-    }
-  }
-
-  return diffAt;
+  const current = currentBaseNamePattern.value;
+  const sanitized = sanitizeFileName(current);
+  return Array.from(current).find((char, i) => char !== sanitized[i]);
 });
 const errorMessage = computed(() => {
-  if (currentFileNamePattern.value.length === 0) {
+  if (currentBaseNamePattern.value === "") {
     return "何か入力してください";
   }
 
   const result: string[] = [];
-  if (invalidChar.value !== "") {
+  if (invalidChar.value !== undefined) {
     result.push(`使用できない文字が含まれています：「${invalidChar.value}」`);
   }
   if (previewFileName.value.includes("$")) {
@@ -152,23 +141,18 @@ const errorMessage = computed(() => {
 const hasError = computed(() => errorMessage.value !== "");
 
 const previewFileName = computed(() =>
-  buildFileNameFromRawData(currentFileNamePattern.value + ".wav")
+  buildAudioFileNameFromRawData(currentNamePattern.value)
 );
 
-const removeExtension = (str: string) => {
-  return str.replace(/\.wav$/, "");
-};
-
 const initializeInput = () => {
-  const pattern = savingSetting.value.fileNamePattern;
-  currentFileNamePattern.value = removeExtension(pattern);
+  currentBaseNamePattern.value = savedBaseNamePattern.value;
 
-  if (currentFileNamePattern.value.length === 0) {
-    currentFileNamePattern.value = removeExtension(DEFAULT_FILE_NAME_TEMPLATE);
+  if (currentBaseNamePattern.value === "") {
+    currentBaseNamePattern.value = DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE;
   }
 };
 const resetToDefault = () => {
-  currentFileNamePattern.value = removeExtension(DEFAULT_FILE_NAME_TEMPLATE);
+  currentBaseNamePattern.value = DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE;
   patternInput.value?.focus();
 };
 
@@ -184,7 +168,7 @@ const insertTagToCurrentPosition = (tag: string) => {
     const from = elem.selectionStart ?? 0;
     const to = elem.selectionEnd ?? 0;
     const newText = text.substring(0, from) + tag + text.substring(to);
-    currentFileNamePattern.value = newText;
+    currentBaseNamePattern.value = newText;
 
     // キャレットの位置を挿入した後の位置にずらす
     nextTick(() => {
@@ -199,7 +183,7 @@ const submit = async () => {
   await store.dispatch("SET_SAVING_SETTING", {
     data: {
       ...savingSetting.value,
-      fileNamePattern: currentFileNamePattern.value + ".wav",
+      fileNamePattern: currentNamePattern.value,
     },
   });
   updateOpenDialog(false);
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 23d58aea8e..c11e572450 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -20,7 +20,11 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
-import { useQuasar } from "quasar";
+import {
+  generateAndConnectAndSaveAudioWithDialog,
+  generateAndSaveAllAudioWithDialog,
+  generateAndSaveOneAudioWithDialog,
+} from "./Dialog";
 import { useStore } from "@/store";
 import { setHotkeyFunctions } from "@/store/setting";
 import {
@@ -28,11 +32,6 @@ import {
   HotkeyReturnType,
   ToolbarButtonTagType,
 } from "@/type/preload";
-import {
-  generateAndConnectAndSaveAudioWithDialog,
-  generateAndSaveAllAudioWithDialog,
-  generateAndSaveOneAudioWithDialog,
-} from "@/components/Dialog";
 import { getToolbarButtonName } from "@/store/utility";
 
 type ButtonContent = {
@@ -46,7 +45,6 @@ type SpacerContent = {
 };
 
 const store = useStore();
-const $q = useQuasar();
 
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 const canUndo = computed(() => store.getters.CAN_UNDO);
@@ -87,7 +85,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
     () => {
       if (!uiLocked.value) {
         if (nowPlayingContinuously.value) {
-          stopContinuously();
+          stop();
         } else {
           playContinuously();
         }
@@ -115,47 +113,33 @@ const playContinuously = async () => {
     } else {
       window.electron.logError(e);
     }
-    $q.dialog({
+    store.dispatch("SHOW_ALERT_DIALOG", {
       title: "再生に失敗しました",
       message: msg ?? "エンジンの再起動をお試しください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "display",
-      },
     });
   }
 };
-const stopContinuously = () => {
-  store.dispatch("STOP_CONTINUOUSLY_AUDIO");
+const stop = () => {
+  store.dispatch("STOP_AUDIO");
 };
 const generateAndSaveOneAudio = async () => {
   if (activeAudioKey.value == undefined)
     throw new Error("activeAudioKey is undefined");
   await generateAndSaveOneAudioWithDialog({
     audioKey: activeAudioKey.value,
-    quasarDialog: $q.dialog,
-    quasarNotify: $q.notify,
     dispatch: store.dispatch,
-    encoding: store.state.savingSetting.fileEncoding,
     disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
   });
 };
 const generateAndSaveAllAudio = async () => {
   await generateAndSaveAllAudioWithDialog({
-    quasarDialog: $q.dialog,
-    quasarNotify: $q.notify,
     dispatch: store.dispatch,
-    encoding: store.state.savingSetting.fileEncoding,
     disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
   });
 };
 const generateAndConnectAndSaveAudio = async () => {
   await generateAndConnectAndSaveAudioWithDialog({
-    quasarDialog: $q.dialog,
     dispatch: store.dispatch,
-    quasarNotify: $q.notify,
-    encoding: store.state.savingSetting.fileEncoding,
     disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
   });
 };
@@ -175,8 +159,8 @@ const usableButtons: Record<
     disable: uiLocked,
   },
   STOP: {
-    click: stopContinuously,
-    disable: computed(() => !nowPlayingContinuously.value),
+    click: stop,
+    disable: computed(() => !store.getters.NOW_PLAYING),
   },
   EXPORT_AUDIO_ONE: {
     click: generateAndSaveOneAudio,
diff --git a/src/components/HeaderBarCustomDialog.vue b/src/components/HeaderBarCustomDialog.vue
index e9b4195a9b..27534a7ad5 100644
--- a/src/components/HeaderBarCustomDialog.vue
+++ b/src/components/HeaderBarCustomDialog.vue
@@ -113,7 +113,6 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, Ref } from "vue";
-import { useQuasar } from "quasar";
 import draggable from "vuedraggable";
 import { useStore } from "@/store";
 import { ToolbarButtonTagType, ToolbarSetting } from "@/type/preload";
@@ -129,7 +128,6 @@ const emit =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 // computedだと値の編集ができないが、refにすると起動時に読み込まれる設定が反映されないので、watchしている
 const toolbarButtons = ref([...store.state.toolbarSetting]);
@@ -209,25 +207,18 @@ watch(
   }
 );
 
-const applyDefaultSetting = () => {
-  $q.dialog({
+const applyDefaultSetting = async () => {
+  const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
     title: "ツールバーをデフォルトに戻します",
     message: "ツールバーをデフォルトに戻します。<br/>よろしいですか？",
     html: true,
-    ok: {
-      label: "はい",
-      flat: true,
-      textColor: "display",
-    },
-    cancel: {
-      label: "いいえ",
-      flat: true,
-      textColor: "display",
-    },
-  }).onOk(() => {
+    actionName: "はい",
+    cancel: "いいえ",
+  });
+  if (result === "OK") {
     toolbarButtons.value = [...defaultSetting];
     selectedButton.value = toolbarButtons.value[0];
-  });
+  }
 };
 const saveCustomToolbar = () => {
   store.dispatch("SET_TOOLBAR_SETTING", {
@@ -235,28 +226,18 @@ const saveCustomToolbar = () => {
   });
 };
 
-const finishOrNotDialog = () => {
+const finishOrNotDialog = async () => {
   if (isChanged.value) {
-    $q.dialog({
+    const result = await store.dispatch("SHOW_WARNING_DIALOG", {
       title: "カスタマイズを終了しますか？",
       message: "このまま終了すると、カスタマイズは破棄されてリセットされます。",
-      persistent: true,
-      focus: "cancel",
-      ok: {
-        label: "終了",
-        flat: true,
-        textColor: "display",
-      },
-      cancel: {
-        label: "キャンセル",
-        flat: true,
-        textColor: "display",
-      },
-    }).onOk(() => {
+      actionName: "終了",
+    });
+    if (result === "OK") {
       toolbarButtons.value = [...store.state.toolbarSetting];
       selectedButton.value = toolbarButtons.value[0];
       headerBarCustomDialogOpenComputed.value = false;
-    });
+    }
   } else {
     selectedButton.value = toolbarButtons.value[0];
     headerBarCustomDialogOpenComputed.value = false;
diff --git a/src/components/HotkeySettingDialog.vue b/src/components/HotkeySettingDialog.vue
index 48aa6abd2d..9b6452c90a 100644
--- a/src/components/HotkeySettingDialog.vue
+++ b/src/components/HotkeySettingDialog.vue
@@ -214,7 +214,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useQuasar } from "quasar";
 import { useStore } from "@/store";
 import { parseCombo } from "@/store/setting";
 import { HotkeyAction, HotkeySetting } from "@/type/preload";
@@ -229,7 +228,6 @@ const emit =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const hotkeySettingDialogOpenComputed = computed({
   get: () => props.modelValue,
@@ -302,7 +300,7 @@ const deleteHotkey = (action: string) => {
 };
 
 const getHotkeyText = (action: string, combo: string) => {
-  if (checkHotkeyReadonly(action)) combo = "(読み取り専用) " + combo;
+  if (checkHotkeyReadonly(action)) combo = "（読み取り専用）" + combo;
   if (combo == "") return "未設定";
   else return combo;
 };
@@ -344,28 +342,21 @@ const solveDuplicated = () => {
 const confirmBtnEnabled = computed(() => {
   return (
     lastRecord.value == "" ||
-    ["Ctrl", "Shift", "Alt", "Meta"].indexOf(
+    ["Ctrl", "Shift", "Alt", "Meta"].includes(
       lastRecord.value.split(" ")[lastRecord.value.split(" ").length - 1]
-    ) > -1
+    )
   );
 });
 
-const resetHotkey = (action: string) => {
-  $q.dialog({
+const resetHotkey = async (action: string) => {
+  const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
     title: "ショートカットキーを初期値に戻します",
     message: `${action}のショートカットキーを初期値に戻します。<br/>本当に戻しますか？`,
     html: true,
-    ok: {
-      label: "初期値に戻す",
-      flat: true,
-      textColor: "display",
-    },
-    cancel: {
-      label: "初期値に戻さない",
-      flat: true,
-      textColor: "display",
-    },
-  }).onOk(() => {
+    actionName: "初期値に戻す",
+    cancel: "初期値に戻さない",
+  });
+  if (result === "OK") {
     window.electron
       .getDefaultHotkeySettings()
       .then((defaultSettings: HotkeySetting[]) => {
@@ -374,7 +365,7 @@ const resetHotkey = (action: string) => {
           changeHotkeySettings(action, setting.combination);
         }
       });
-  });
+  }
 };
 </script>
 
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index a85adc7511..530141a7e1 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -27,18 +27,17 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import { useStore } from "@/store";
-import MenuButton from "@/components/MenuButton.vue";
-import TitleBarButtons from "@/components/TitleBarButtons.vue";
-import { HotkeyAction, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
 import {
   generateAndConnectAndSaveAudioWithDialog,
   generateAndSaveAllAudioWithDialog,
   generateAndSaveOneAudioWithDialog,
   connectAndExportTextWithDialog,
-} from "@/components/Dialog";
+} from "./Dialog";
+import MenuButton from "./MenuButton.vue";
+import TitleBarButtons from "./TitleBarButtons.vue";
+import { useStore } from "@/store";
+import { HotkeyAction, HotkeyReturnType } from "@/type/preload";
+import { setHotkeyFunctions } from "@/store/setting";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 
 export type MenuItemBase<T extends string> = {
@@ -54,6 +53,7 @@ export type MenuItemRoot = MenuItemBase<"root"> & {
   icon?: string;
   disabled?: boolean;
   disableWhenUiLocked: boolean;
+  disablreloadingLocked?: boolean;
 };
 
 export type MenuItemButton = MenuItemBase<"button"> & {
@@ -61,6 +61,7 @@ export type MenuItemButton = MenuItemBase<"button"> & {
   icon?: string;
   disabled?: boolean;
   disableWhenUiLocked: boolean;
+  disablreloadingLocked?: boolean;
 };
 
 export type MenuItemData = MenuItemSeparator | MenuItemRoot | MenuItemButton;
@@ -68,7 +69,6 @@ export type MenuItemData = MenuItemSeparator | MenuItemRoot | MenuItemButton;
 export type MenuItemType = MenuItemData["type"];
 
 const store = useStore();
-const $q = useQuasar();
 const currentVersion = ref("");
 
 // デフォルトエンジンの代替先ポート
@@ -131,10 +131,7 @@ const createNewProject = async () => {
 const generateAndSaveAllAudio = async () => {
   if (!uiLocked.value) {
     await generateAndSaveAllAudioWithDialog({
-      encoding: store.state.savingSetting.fileEncoding,
       disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
-      quasarDialog: $q.dialog,
-      quasarNotify: $q.notify,
       dispatch: store.dispatch,
     });
   }
@@ -143,10 +140,7 @@ const generateAndSaveAllAudio = async () => {
 const generateAndConnectAndSaveAllAudio = async () => {
   if (!uiLocked.value) {
     await generateAndConnectAndSaveAudioWithDialog({
-      quasarDialog: $q.dialog,
-      quasarNotify: $q.notify,
       dispatch: store.dispatch,
-      encoding: store.state.savingSetting.fileEncoding,
       disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
     });
   }
@@ -157,23 +151,15 @@ const generateAndSaveOneAudio = async () => {
 
   const activeAudioKey = store.getters.ACTIVE_AUDIO_KEY;
   if (activeAudioKey == undefined) {
-    $q.dialog({
+    store.dispatch("SHOW_ALERT_DIALOG", {
       title: "テキスト欄が選択されていません",
       message: "音声を書き出したいテキスト欄を選択してください。",
-      ok: {
-        label: "閉じる",
-        flat: true,
-        textColor: "secondary",
-      },
     });
     return;
   }
 
   await generateAndSaveOneAudioWithDialog({
     audioKey: activeAudioKey,
-    encoding: store.state.savingSetting.fileEncoding,
-    quasarDialog: $q.dialog,
-    quasarNotify: $q.notify,
     disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
     dispatch: store.dispatch,
   });
@@ -182,10 +168,7 @@ const generateAndSaveOneAudio = async () => {
 const connectAndExportText = async () => {
   if (!uiLocked.value) {
     await connectAndExportTextWithDialog({
-      quasarDialog: $q.dialog,
-      quasarNotify: $q.notify,
       dispatch: store.dispatch,
-      encoding: store.state.savingSetting.fileEncoding,
       disableNotifyOnGenerate: store.state.confirmedTips.notifyOnGenerate,
     });
   }
@@ -528,6 +511,20 @@ async function updateEngines() {
       disableWhenUiLocked: false,
     });
   }
+  // マルチエンジンオフモードの解除
+  if (store.state.isMultiEngineOffMode) {
+    engineMenu.subMenu.push({
+      type: "button",
+      label: "マルチエンジンをオンにして再読み込み",
+      onClick() {
+        store.dispatch("RELOAD_APP", {
+          isMultiEngineOffMode: false,
+        });
+      },
+      disableWhenUiLocked: false,
+      disablreloadingLocked: true,
+    });
+  }
 }
 // engineInfos、engineManifests、enableMultiEngineを見て動的に更新できるようにする
 // FIXME: computedにする
@@ -535,22 +532,6 @@ watch([engineInfos, engineManifests, enableMultiEngine], updateEngines, {
   immediate: true,
 });
 
-// マルチエンジンオフモードの解除
-if (store.state.isMultiEngineOffMode) {
-  (
-    menudata.value.find((data) => data.label === "エンジン") as MenuItemRoot
-  ).subMenu.push({
-    type: "button",
-    label: "マルチエンジンをオンにして再起動",
-    onClick() {
-      store.dispatch("RESTART_APP", {
-        isMultiEngineOffMode: false,
-      });
-    },
-    disableWhenUiLocked: false,
-  });
-}
-
 // 「最近開いたプロジェクト」の更新
 async function updateRecentProjects() {
   const projectsMenu = menudata.value.find(
diff --git a/src/components/MenuButton.vue b/src/components/MenuButton.vue
index 82898f7ecb..7e4fcac61e 100644
--- a/src/components/MenuButton.vue
+++ b/src/components/MenuButton.vue
@@ -31,9 +31,7 @@
           :key="index"
           v-model:selected="subMenuOpenFlags[index]"
           :menudata="menu"
-          :disable="
-            uiLocked && menu.type !== 'separator' && menu.disableWhenUiLocked
-          "
+          :disable="isDisabledMenuItem(menu)"
           @mouseenter="reassignSubMenuOpen(index)"
           @mouseleave="reassignSubMenuOpen.cancel()"
         />
@@ -67,6 +65,7 @@ const emit =
 
 const store = useStore();
 const uiLocked = computed(() => store.getters.UI_LOCKED);
+const reloadingLocked = computed(() => store.state.reloadingLock);
 const selectedComputed = computed({
   get: () => props.selected,
   set: (val) => emit("update:selected", val),
@@ -78,6 +77,13 @@ const subMenuOpenFlags = ref(
     : []
 );
 
+const isDisabledMenuItem = computed(() => (menu: MenuItemData) => {
+  if (menu.type === "separator") return false;
+  if (menu.disableWhenUiLocked && uiLocked.value) return true;
+  if (menu.disablreloadingLocked && reloadingLocked.value) return true;
+  return false;
+});
+
 const reassignSubMenuOpen = debounce((idx: number) => {
   if (subMenuOpenFlags.value[idx]) return;
   if (props.menudata.type !== "root") return;
diff --git a/src/components/MinMaxCloseButtons.vue b/src/components/MinMaxCloseButtons.vue
index f9a3c6edb8..116c0994ad 100644
--- a/src/components/MinMaxCloseButtons.vue
+++ b/src/components/MinMaxCloseButtons.vue
@@ -100,7 +100,7 @@ import { useStore } from "@/store";
 const store = useStore();
 
 const closeWindow = async () => {
-  store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
+  store.dispatch("CHECK_EDITED_AND_NOT_SAVE", { closeOrReload: "close" });
 };
 const minimizeWindow = () => window.electron.minimizeWindow();
 const maximizeWindow = () => window.electron.maximizeWindow();
diff --git a/src/components/PresetManageDialog.vue b/src/components/PresetManageDialog.vue
index 30f70ad7d3..d2d733dd7e 100644
--- a/src/components/PresetManageDialog.vue
+++ b/src/components/PresetManageDialog.vue
@@ -43,7 +43,6 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from "quasar";
 import { computed, ref } from "vue";
 import draggable from "vuedraggable";
 import { useStore } from "@/store";
@@ -63,7 +62,6 @@ const emit =
 const updateOpenDialog = (isOpen: boolean) => emit("update:openDialog", isOpen);
 
 const store = useStore();
-const $q = useQuasar();
 const { isDefaultPresetKey } = useDefaultPreset();
 
 const presetItems = computed(() => store.state.presetItems);
@@ -109,16 +107,17 @@ const reorderPreset = (featurePresetList: (Preset & { key: PresetKey })[]) => {
     .finally(() => (isPreview.value = false));
 };
 
-const deletePreset = (key: PresetKey) => {
-  $q.dialog({
+const deletePreset = async (key: PresetKey) => {
+  const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
     title: "プリセット削除の確認",
     message: `プリセット "${presetItems.value[key].name}" を削除してもよろしいですか？`,
-    cancel: true,
-  }).onOk(async () => {
+    actionName: "削除",
+  });
+  if (result === "OK") {
     await store.dispatch("DELETE_PRESET", {
       presetKey: key,
     });
-  });
+  }
 };
 </script>
 
diff --git a/src/components/SaveAllResultDialog.vue b/src/components/SaveAllResultDialog.vue
index ce27c12aeb..74005d4f74 100644
--- a/src/components/SaveAllResultDialog.vue
+++ b/src/components/SaveAllResultDialog.vue
@@ -1,11 +1,20 @@
 <template>
   <q-dialog ref="dialogRef" persistent>
-    <q-layout container class="q-dialog-plugin bg-background">
-      <q-page-container>
-        <q-page class="q-px-md">
-          <h5 class="text-h5 q-my-md">音声書き出し結果</h5>
-          <q-list v-if="props.writeErrorArray.length > 0" separator>
-            <div class="text-warning">失敗（書き込みエラー）:</div>
+    <q-layout
+      container
+      view="hhh lpr fFf"
+      class="q-dialog-plugin bg-background"
+    >
+      <q-page-container class="q-px-md">
+        <h5 class="text-h5 q-my-md">音声書き出し結果</h5>
+        <q-list separator bordered class="rounded-borders">
+          <q-expansion-item
+            v-if="props.writeErrorArray.length > 0"
+            :label="`${props.writeErrorArray.length}件の書き込みエラーによる失敗`"
+            bordered
+            header-class="text-warning text-bold"
+            icon="warning"
+          >
             <q-item
               v-for="(value, index) in props.writeErrorArray"
               :key="index"
@@ -15,9 +24,14 @@
                 <q-item-label>詳細：{{ value.message }}</q-item-label>
               </q-item-section>
             </q-item>
-          </q-list>
-          <q-list v-if="props.engineErrorArray.length > 0" separator>
-            <div class="text-warning">失敗（エンジンエラー）:</div>
+          </q-expansion-item>
+          <q-expansion-item
+            v-if="props.engineErrorArray.length > 0"
+            :label="`${props.engineErrorArray.length}件のエンジンエラーによる失敗`"
+            bordered
+            header-class="text-warning text-bold"
+            icon="warning"
+          >
             <q-item
               v-for="(value, index) in props.engineErrorArray"
               :key="index"
@@ -29,21 +43,35 @@
                 >
               </q-item-section>
             </q-item>
-          </q-list>
-          <q-list v-if="props.successArray.length > 0" separator>
-            <div class="text-primary">成功:</div>
-            <q-item v-for="(value, index) in props.successArray" :key="index">
-              <q-item-section>
-                <q-item-label>{{ value }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-page>
+          </q-expansion-item>
+          <q-expansion-item
+            :label="`${props.successArray.length}件の成功`"
+            bordered
+            icon="check"
+            header-class="text-bold"
+          >
+            <q-list v-if="props.successArray.length > 0" separator>
+              <q-item v-for="(value, index) in props.successArray" :key="index">
+                <q-item-section>
+                  <q-item-label>{{ value }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-expansion-item>
+        </q-list>
       </q-page-container>
       <q-footer>
         <q-toolbar>
           <q-space />
-          <q-btn flat dense align="right" label="閉じる" @click="close" />
+          <q-btn
+            unelevated
+            align="right"
+            label="閉じる"
+            color="toolbar-button"
+            text-color="toolbar-button-display"
+            class="text-no-wrap text-bold q-mr-sm"
+            @click="close"
+          />
         </q-toolbar>
       </q-footer>
     </q-layout>
@@ -64,20 +92,3 @@ const props =
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const close = () => onDialogOK();
 </script>
-
-<style scoped lang="scss">
-@use '@/styles/colors' as colors;
-
-.q-page-container {
-  margin-top: 0;
-  padding-bottom: 34px !important;
-}
-.q-item:not(.q-item:last-child) {
-  border-bottom: solid 0.1rem rgba(colors.$display-rgb, 0.15);
-}
-.q-list:not(.q-list:last-child) {
-  border-bottom: solid 0.1rem rgba(colors.$primary-rgb, 0.5);
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-</style>
diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue
index ac5271e8f7..c421b38c3f 100644
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@@ -299,7 +299,7 @@
                   v-if="isDefaultConfirmedTips && hasResetConfirmedTips"
                   name="check"
                   size="sm"
-                  color="primary-light"
+                  color="primary"
                   style="margin-right: 8px"
                 >
                 </q-icon>
@@ -857,6 +857,63 @@
                 >
                 </q-toggle>
               </q-card-actions>
+              <q-card-actions
+                v-if="!isProduction"
+                class="q-px-md q-py-none bg-surface"
+              >
+                <div>複数選択</div>
+                <div aria-label="複数のテキスト欄を選択できるようにします。">
+                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
+                    <q-tooltip
+                      :delay="500"
+                      anchor="center right"
+                      self="center left"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                    >
+                      複数のテキスト欄を選択できるようにします。
+                    </q-tooltip>
+                  </q-icon>
+                </div>
+                <q-space />
+                <q-toggle
+                  :model-value="experimentalSetting.enableMultiSelect"
+                  @update:model-value="
+                    changeExperimentalSetting('enableMultiSelect', $event)
+                  "
+                >
+                </q-toggle>
+              </q-card-actions>
+              <q-card-actions class="q-px-md q-py-none bg-surface">
+                <div>調整結果の保持</div>
+                <div
+                  aria-label="テキスト変更時、同じ読みのアクセント区間内の調整結果を保持します。"
+                >
+                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
+                    <q-tooltip
+                      :delay="500"
+                      anchor="center right"
+                      self="center left"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                      >ONの場合、テキスト変更時、同じ読みのアクセント区間内の調整結果を保持します。</q-tooltip
+                    >
+                  </q-icon>
+                </div>
+                <q-space />
+                <q-toggle
+                  :model-value="
+                    experimentalSetting.shouldKeepTuningOnTextChange
+                  "
+                  @update:model-value="
+                    changeExperimentalSetting(
+                      'shouldKeepTuningOnTextChange',
+                      $event
+                    )
+                  "
+                >
+                </q-toggle>
+              </q-card-actions>
             </q-card>
             <q-card flat class="setting-card">
               <q-card-actions>
@@ -892,10 +949,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useQuasar } from "quasar";
 import FileNamePatternDialog from "./FileNamePatternDialog.vue";
 import { useStore } from "@/store";
 import {
+  isProduction,
   SavingSetting,
   EngineSetting,
   ExperimentalSetting,
@@ -917,7 +974,6 @@ const emit =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const settingDialogOpenedComputed = computed({
   get: () => props.modelValue,
@@ -1005,33 +1061,26 @@ const changeShowTextLineNumber = (showTextLineNumber: boolean) => {
 const showAddAudioItemButton = computed(
   () => store.state.showAddAudioItemButton
 );
-const changeShowAddAudioItemButton = (showAddAudioItemButton: boolean) => {
+const changeShowAddAudioItemButton = async (
+  showAddAudioItemButton: boolean
+) => {
   store.dispatch("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
     showAddAudioItemButton,
   });
 
   // 設定をオフにする場合はヒントを表示
   if (!showAddAudioItemButton) {
-    $q.dialog({
+    const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
       title: "エディタの＋ボタンを非表示にする",
       message: "テキスト欄は Shift + Enter で追加できます",
-      persistent: true, // ダイアログ外側押下時にユーザが設定ができたと思い込むことを防止する
-      ok: {
-        flat: true,
-        label: "OK",
-        textColor: "display",
-      },
-      cancel: {
-        flat: true,
-        label: "キャンセル",
-        textColor: "display",
-      },
-    }).onCancel(() => {
+      actionName: "非表示",
+    });
+    if (result === "CANCEL") {
       // キャンセルしたら設定を元に戻す
       store.dispatch("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
         showAddAudioItemButton: true,
       });
-    });
+    }
   }
 };
 
@@ -1073,11 +1122,15 @@ const updateAudioOutputDevices = async () => {
       return { label: device.label, key: device.deviceId };
     });
 };
-navigator.mediaDevices.addEventListener(
-  "devicechange",
-  updateAudioOutputDevices
-);
-updateAudioOutputDevices();
+if (navigator.mediaDevices) {
+  navigator.mediaDevices.addEventListener(
+    "devicechange",
+    updateAudioOutputDevices
+  );
+  updateAudioOutputDevices();
+} else {
+  store.dispatch("LOG_WARN", "navigator.mediaDevices is not available.");
+}
 
 const acceptRetrieveTelemetryComputed = computed({
   get: () => store.state.acceptRetrieveTelemetry == "Accepted",
@@ -1090,23 +1143,17 @@ const acceptRetrieveTelemetryComputed = computed({
       return;
     }
 
-    $q.dialog({
+    store.dispatch("SHOW_ALERT_DIALOG", {
       title: "ソフトウェア利用状況のデータ収集の無効化",
       message:
         "ソフトウェア利用状況のデータ収集を完全に無効にするには、VOICEVOXを再起動する必要があります",
-      ok: {
-        flat: true,
-        textColor: "display",
-      },
+      ok: "OK",
     });
   },
 });
 
 const changeUseGpu = async (useGpu: boolean) => {
-  $q.loading.show({
-    spinnerColor: "primary",
-    spinnerSize: 50,
-    boxClass: "bg-background text-display",
+  store.dispatch("SHOW_LOADING_SCREEN", {
     message: "起動モードを変更中です",
   });
 
@@ -1115,7 +1162,7 @@ const changeUseGpu = async (useGpu: boolean) => {
     engineId: selectedEngineId.value,
   });
 
-  $q.loading.hide();
+  store.dispatch("HIDE_ALL_LOADING_SCREEN");
 };
 
 const changeinheritAudioInfo = async (inheritAudioInfo: boolean) => {
@@ -1187,32 +1234,15 @@ const outputSamplingRate = computed({
   },
   set: async (outputSamplingRate: SamplingRateOption) => {
     if (outputSamplingRate !== "engineDefault") {
-      const confirmChange = await new Promise((resolve) => {
-        $q.dialog({
-          title: "出力サンプリングレートを変更します",
-          message:
-            "出力サンプリングレートを変更しても、音質は変化しません。また、音声の生成処理に若干時間がかかる場合があります。<br />変更しますか？",
-          html: true,
-          persistent: true,
-          ok: {
-            label: "変更する",
-            flat: true,
-            textColor: "display",
-          },
-          cancel: {
-            label: "変更しない",
-            flat: true,
-            textColor: "display",
-          },
-        })
-          .onOk(() => {
-            resolve(true);
-          })
-          .onCancel(() => {
-            resolve(false);
-          });
+      const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
+        title: "出力サンプリングレートを変更します",
+        message:
+          "出力サンプリングレートを変更しても、音質は変化しません。また、音声の生成処理に若干時間がかかる場合があります。<br />変更しますか？",
+        html: true,
+        actionName: "変更する",
+        cancel: "変更しない",
       });
-      if (!confirmChange) {
+      if (result !== "OK") {
         return;
       }
     }
diff --git a/src/components/ContactInfo.vue b/src/components/help/ContactInfo.vue
similarity index 100%
rename from src/components/ContactInfo.vue
rename to src/components/help/ContactInfo.vue
diff --git a/src/components/HelpDialog.vue b/src/components/help/HelpDialog.vue
similarity index 89%
rename from src/components/HelpDialog.vue
rename to src/components/help/HelpDialog.vue
index b1b5460182..153d963384 100644
--- a/src/components/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -53,12 +53,23 @@
                       ヘルプ / {{ page.parent ? page.parent + " / " : ""
                       }}{{ page.name }}
                     </q-toolbar-title>
+                    <q-btn
+                      v-if="page.component === ContactInfo"
+                      unelevated
+                      color="toolbar-button"
+                      text-color="toolbar-button-display"
+                      class="text-no-wrap text-bold q-mr-sm"
+                      @click="openLogDirectory"
+                    >
+                      ログフォルダを開く
+                    </q-btn>
                     <!-- close button -->
                     <q-btn
                       round
                       flat
                       icon="close"
                       color="display"
+                      aria-label="ヘルプを閉じる"
                       @click="modelValueComputed = false"
                     />
                   </q-toolbar>
@@ -76,15 +87,15 @@
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
 import semver from "semver";
-import { UpdateInfo as UpdateInfoObject } from "../type/preload";
-import HelpPolicy from "@/components/HelpPolicy.vue";
-import LibraryPolicy from "@/components/LibraryPolicy.vue";
-import HowToUse from "@/components/HowToUse.vue";
-import OssLicense from "@/components/OssLicense.vue";
-import UpdateInfo from "@/components/UpdateInfo.vue";
-import OssCommunityInfo from "@/components/OssCommunityInfo.vue";
-import QAndA from "@/components/QAndA.vue";
-import ContactInfo from "@/components/ContactInfo.vue";
+import HelpPolicy from "./HelpPolicy.vue";
+import LibraryPolicy from "./LibraryPolicy.vue";
+import HowToUse from "./HowToUse.vue";
+import OssLicense from "./OssLicense.vue";
+import UpdateInfo from "./UpdateInfo.vue";
+import OssCommunityInfo from "./OssCommunityInfo.vue";
+import QAndA from "./QAndA.vue";
+import ContactInfo from "./ContactInfo.vue";
+import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
 import { useStore } from "@/store";
 
 type PageItem = {
@@ -280,6 +291,8 @@ const pagedata = computed(() => {
 });
 
 const selectedPageIndex = ref(0);
+
+const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/HelpPolicy.vue b/src/components/help/HelpPolicy.vue
similarity index 100%
rename from src/components/HelpPolicy.vue
rename to src/components/help/HelpPolicy.vue
diff --git a/src/components/HowToUse.vue b/src/components/help/HowToUse.vue
similarity index 100%
rename from src/components/HowToUse.vue
rename to src/components/help/HowToUse.vue
diff --git a/src/components/LibraryPolicy.vue b/src/components/help/LibraryPolicy.vue
similarity index 99%
rename from src/components/LibraryPolicy.vue
rename to src/components/help/LibraryPolicy.vue
index 12acc7b216..ca8a4c4b51 100644
--- a/src/components/LibraryPolicy.vue
+++ b/src/components/help/LibraryPolicy.vue
@@ -45,7 +45,7 @@
         <div class="q-mb-md">
           <q-btn
             outline
-            color="primary-light"
+            color="primary"
             icon="keyboard_arrow_left"
             label="戻る"
             @click="selectCharacterInfo(undefined)"
diff --git a/src/components/OssCommunityInfo.vue b/src/components/help/OssCommunityInfo.vue
similarity index 100%
rename from src/components/OssCommunityInfo.vue
rename to src/components/help/OssCommunityInfo.vue
diff --git a/src/components/OssLicense.vue b/src/components/help/OssLicense.vue
similarity index 97%
rename from src/components/OssLicense.vue
rename to src/components/help/OssLicense.vue
index d3322d1123..1b0ccd4354 100644
--- a/src/components/OssLicense.vue
+++ b/src/components/help/OssLicense.vue
@@ -21,7 +21,7 @@
         <div class="q-mb-md">
           <q-btn
             outline
-            color="primary-light"
+            color="primary"
             icon="keyboard_arrow_left"
             label="戻る"
             @click="selectLicenseIndex(undefined)"
diff --git a/src/components/QAndA.vue b/src/components/help/QAndA.vue
similarity index 100%
rename from src/components/QAndA.vue
rename to src/components/help/QAndA.vue
diff --git a/src/components/UpdateInfo.vue b/src/components/help/UpdateInfo.vue
similarity index 97%
rename from src/components/UpdateInfo.vue
rename to src/components/help/UpdateInfo.vue
index 2e5496dbbc..5f31451d13 100644
--- a/src/components/UpdateInfo.vue
+++ b/src/components/help/UpdateInfo.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { UpdateInfo } from "../type/preload";
+import { UpdateInfo } from "@/type/preload";
 
 const props =
   defineProps<{
diff --git a/src/electron/contextMenu.ts b/src/electron/contextMenu.ts
deleted file mode 100644
index cedfca64a5..0000000000
--- a/src/electron/contextMenu.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Menu } from "electron";
-
-export const textEditContextMenu = Menu.buildFromTemplate([
-  { label: "切り取り", role: "cut" },
-  { label: "コピー", role: "copy" },
-  { label: "貼り付け", role: "paste" },
-  { type: "separator" },
-  { label: "全選択", role: "selectAll" },
-]);
diff --git a/src/electron/device.ts b/src/electron/device.ts
index c412a55026..0df0ab51b0 100644
--- a/src/electron/device.ts
+++ b/src/electron/device.ts
@@ -13,7 +13,7 @@ export function hasSupportedGpu(platform: string): Promise<boolean> {
         (datum) =>
           platform === "win32" ||
           (platform === "linux" &&
-            datum.vendor.toUpperCase().indexOf("NVIDIA") !== -1)
+            datum.vendor.toUpperCase().includes("NVIDIA"))
       )
     )
     .catch(() => false);
diff --git a/src/electron/mock.ts b/src/electron/mock.ts
deleted file mode 100644
index 8aa0c1ab68..0000000000
--- a/src/electron/mock.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  defaultHotkeySettings,
-  defaultToolbarButtonSetting,
-  electronStoreSchema,
-  EngineId,
-  EngineInfo,
-  engineSettingSchema,
-  Sandbox,
-  ThemeConf,
-} from "@/type/preload";
-
-declare const __availableThemes: ThemeConf[];
-
-const storeName = "voicevox";
-
-const engineInfos: EngineInfo[] = [
-  {
-    executionArgs: [],
-    executionEnabled: false,
-    executionFilePath: "",
-    host: "http://127.0.0.1:50021",
-    name: "VOICEVOX Engine",
-    type: "default",
-    uuid: EngineId("074fc39e-678b-4c13-8916-ffca8d505d1d"),
-  },
-];
-
-const loadMock = () => {
-  const electronMock: Sandbox = {
-    async getAppInfos() {
-      return {
-        name: "VOICEVOX Web",
-        version: "0.0.0",
-      };
-    },
-    async getHowToUseText() {
-      return "# How to use\ndummy";
-    },
-    async getPolicyText() {
-      return "# Policy\ndummy";
-    },
-    async getOssLicenses() {
-      return [];
-    },
-    async getUpdateInfos() {
-      return [];
-    },
-    async getOssCommunityInfos() {
-      return "";
-    },
-    async getQAndAText() {
-      return "# Q&A\ndummy";
-    },
-    async getContactText() {
-      return "# Contact\ndummy";
-    },
-    async getPrivacyPolicyText() {
-      return "# Privacy Policy\ndummy";
-    },
-    async showAudioSaveDialog(obj) {
-      throw new Error(`Not implemented: showAudioSaveDialog ${obj}`);
-    },
-    async showTextSaveDialog(obj) {
-      throw new Error(`Not implemented: showTextSaveDialog ${obj}`);
-    },
-    async showVvppOpenDialog(obj) {
-      throw new Error(`Not implemented: showVvppOpenDialog ${obj}`);
-    },
-    async showOpenDirectoryDialog(obj) {
-      throw new Error(`Not implemented: showOpenDirectoryDialog ${obj}`);
-    },
-    async showProjectSaveDialog(obj) {
-      throw new Error(`Not implemented: showProjectSaveDialog ${obj}`);
-    },
-    async showProjectLoadDialog(obj) {
-      throw new Error(`Not implemented: showProjectLoadDialog ${obj}`);
-    },
-    async showMessageDialog(obj) {
-      throw new Error(`Not implemented: showMessageDialog ${obj}`);
-    },
-    async showQuestionDialog(obj) {
-      throw new Error(`Not implemented: showQuestionDialog ${obj}`);
-    },
-    async showImportFileDialog(obj) {
-      throw new Error(`Not implemented: showImportFileDialog ${obj}`);
-    },
-    async writeFile(obj) {
-      throw new Error(`Not implemented: writeFile ${obj}`);
-    },
-    async readFile(obj) {
-      throw new Error(`Not implemented: readFile ${obj}`);
-    },
-    async openTextEditContextMenu() {
-      throw new Error("Not implemented: openTextEditContextMenu");
-    },
-    async isAvailableGPUMode() {
-      return false;
-    },
-    async isMaximizedWindow() {
-      return false;
-    },
-    async onReceivedIPCMsg(channel, listener) {
-      window.addEventListener("message", (event) => {
-        if (event.data.channel === channel) {
-          listener(event.data.args);
-        }
-      });
-    },
-    async closeWindow() {
-      throw new Error("Not implemented: closeWindow");
-    },
-    async minimizeWindow() {
-      throw new Error("Not implemented: minimizeWindow");
-    },
-    async maximizeWindow() {
-      throw new Error("Not implemented: maximizeWindow");
-    },
-    async logError(...params) {
-      console.error(...params);
-    },
-    async logWarn(...params) {
-      console.warn(...params);
-    },
-    async logInfo(...params) {
-      console.info(...params);
-    },
-    async engineInfos() {
-      return engineInfos;
-    },
-    async restartEngine(engineId) {
-      throw new Error(`Not implemented: restartEngine ${engineId}`);
-    },
-    async openEngineDirectory(engineId) {
-      throw new Error(`Not implemented: openEngineDirectory ${engineId}`);
-    },
-    async hotkeySettings(newData) {
-      if (newData !== undefined) {
-        const hotkeySettings = await this.getSetting("hotkeySettings");
-        const hotkeySetting = hotkeySettings.find(
-          (hotkey) => hotkey.action == newData.action
-        );
-        if (hotkeySetting !== undefined) {
-          hotkeySetting.combination = newData.combination;
-        }
-        await this.setSetting("hotkeySettings", hotkeySettings);
-      }
-      return this.getSetting("hotkeySettings");
-    },
-    async checkFileExists(file) {
-      return false;
-    },
-    async changePinWindow() {
-      throw new Error("Not implemented: changePinWindow");
-    },
-    async getDefaultHotkeySettings() {
-      return defaultHotkeySettings;
-    },
-    async getDefaultToolbarSetting() {
-      return defaultToolbarButtonSetting;
-    },
-    setNativeTheme(source) {
-      // 何もしない
-    },
-    async theme(newData) {
-      if (newData) {
-        this.setSetting("currentTheme", newData);
-        return;
-      }
-      return {
-        currentTheme: await this.getSetting("currentTheme"),
-        availableThemes: __availableThemes,
-      };
-    },
-    vuexReady() {
-      console.log("vuexReady");
-    },
-    getSetting(key) {
-      const setting = electronStoreSchema.parse(
-        JSON.parse(localStorage.getItem(storeName) || "{}")
-      );
-      // 同期でも使いたいので、async functionではなく手動でPromise.resolveを返す
-      return Promise.resolve(setting[key]);
-    },
-    setSetting(key, newValue) {
-      const setting = electronStoreSchema.parse(
-        JSON.parse(localStorage.getItem(storeName) || "{}")
-      );
-      setting[key] = newValue;
-      localStorage.setItem(storeName, JSON.stringify(setting));
-      // 同期でも使いたいので、async functionではなく手動でPromise.resolveを返す
-      return Promise.resolve(setting[key]);
-    },
-    async setEngineSetting(engineId, engineSetting) {
-      await this.setSetting("engineSettings", {
-        ...this.getSetting("engineSettings"),
-        [engineId]: engineSetting,
-      });
-      return;
-    },
-    async installVvppEngine(path) {
-      throw new Error(`Not implemented: installVvppEngine ${path}`);
-    },
-    async uninstallVvppEngine(engineId) {
-      throw new Error(`Not implemented: uninstallVvppEngine ${engineId}`);
-    },
-    async validateEngineDir(engineDir) {
-      throw new Error(`Not implemented: validateEngineDir ${engineDir}`);
-    },
-    async restartApp(obj) {
-      window.location.reload();
-    },
-    async getAltPortInfos() {
-      return {};
-    },
-  };
-
-  try {
-    localStorage.setItem(
-      storeName,
-      JSON.stringify(
-        electronStoreSchema.parse(
-          JSON.parse(localStorage.getItem(storeName) || "{}")
-        )
-      )
-    );
-  } catch (e) {
-    console.warn("Failed to load store, reset store");
-    localStorage.setItem(
-      storeName,
-      JSON.stringify(electronStoreSchema.parse({}))
-    );
-  }
-
-  const engineSettings = JSON.parse(
-    localStorage.getItem("voicevox_engineSettings") || "{}"
-  );
-  for (const engineInfo of engineInfos) {
-    if (!engineSettings[engineInfo.uuid]) {
-      // 空オブジェクトをパースさせることで、デフォルト値を取得する
-      engineSettings[engineInfo.uuid] = engineSettingSchema.parse({});
-    }
-  }
-  electronMock.setSetting("engineSettings", engineSettings);
-
-  // @ts-expect-error readonlyなので代入できないが、モックのため問題ない
-  window.electron = electronMock;
-};
-
-export default loadMock;
diff --git a/src/electron/preload.ts b/src/electron/preload.ts
index b4214c1b41..07bdeac686 100644
--- a/src/electron/preload.ts
+++ b/src/electron/preload.ts
@@ -134,10 +134,6 @@ const api: Sandbox = {
     return await ipcRendererInvoke("READ_FILE", { filePath });
   },
 
-  openTextEditContextMenu: () => {
-    return ipcRendererInvoke("OPEN_TEXT_EDIT_CONTEXT_MENU");
-  },
-
   isAvailableGPUMode: () => {
     return ipcRendererInvoke("IS_AVAILABLE_GPU_MODE");
   },
@@ -177,6 +173,10 @@ const api: Sandbox = {
     return ipcRenderer.invoke("LOG_INFO", ...params);
   },
 
+  openLogDirectory: () => {
+    ipcRenderer.invoke("OPEN_LOG_DIRECTORY");
+  },
+
   engineInfos: () => {
     return ipcRendererInvoke("ENGINE_INFOS");
   },
@@ -262,8 +262,12 @@ const api: Sandbox = {
     return await ipcRendererInvoke("VALIDATE_ENGINE_DIR", { engineDir });
   },
 
-  restartApp: ({ isMultiEngineOffMode }: { isMultiEngineOffMode: boolean }) => {
-    ipcRendererInvoke("RESTART_APP", { isMultiEngineOffMode });
+  /**
+   * アプリを再読み込みする。
+   * 画面以外の情報を刷新する。
+   */
+  reloadApp: async ({ isMultiEngineOffMode }) => {
+    return await ipcRendererInvoke("RELOAD_APP", { isMultiEngineOffMode });
   },
 };
 
diff --git a/src/helpers/SelectionHelperForQInput.ts b/src/helpers/SelectionHelperForQInput.ts
new file mode 100644
index 0000000000..18fb20dee6
--- /dev/null
+++ b/src/helpers/SelectionHelperForQInput.ts
@@ -0,0 +1,68 @@
+import { QInput } from "quasar";
+import { Ref } from "vue";
+
+/**
+ * QInput の選択範囲への操作を簡単にできるようにするクラス
+ */
+export class SelectionHelperForQInput {
+  private _nativeEl: HTMLInputElement | undefined = undefined;
+
+  constructor(private textfield: Ref<QInput | undefined>) {}
+
+  // this.start が number | null なので null も受け付ける
+  setCursorPosition(index: number | null) {
+    if (index === null) return;
+
+    this.nativeEl.selectionStart = this.nativeEl.selectionEnd = index;
+  }
+
+  getReplacedStringTo(str: string) {
+    return `${this.substringBefore}${str}${this.substringAfter}`;
+  }
+
+  getAsString() {
+    return this.nativeEl.value.substring(
+      this.nativeEl.selectionStart ?? 0,
+      this.nativeEl.selectionEnd ?? 0
+    );
+  }
+
+  toEmpty() {
+    this.nativeEl.selectionEnd = this.nativeEl.selectionStart;
+  }
+
+  get selectionStart() {
+    return this.nativeEl.selectionStart;
+  }
+
+  get selectionEnd() {
+    return this.nativeEl.selectionEnd;
+  }
+
+  get substringBefore() {
+    return this.nativeEl.value.substring(0, this.nativeEl.selectionStart ?? 0);
+  }
+
+  get substringAfter() {
+    return this.nativeEl.value.substring(this.nativeEl.selectionEnd ?? 0);
+  }
+
+  get isEmpty() {
+    const start = this.nativeEl.selectionStart;
+    const end = this.nativeEl.selectionEnd;
+    return start === null || end === null || start === end;
+  }
+
+  private get nativeEl() {
+    return this._nativeEl ?? this.getNativeEl();
+  }
+
+  private getNativeEl() {
+    const nativeEl = this.textfield.value?.nativeEl;
+    if (!(nativeEl instanceof HTMLInputElement)) {
+      throw new Error("nativeElの取得に失敗しました。");
+    }
+    this._nativeEl = nativeEl;
+    return nativeEl;
+  }
+}
diff --git a/src/helpers/previewSliderHelper.ts b/src/helpers/previewSliderHelper.ts
index 0c7fe1135a..fff7ae0106 100644
--- a/src/helpers/previewSliderHelper.ts
+++ b/src/helpers/previewSliderHelper.ts
@@ -4,13 +4,28 @@ import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 
 export type Props = {
   onPan?: QSliderProps["onPan"];
-  onChange?: QSliderProps["onChange"];
+  /**
+   * スライダーの値が確定した時に呼び出される。
+   */
+  onChange: (value: number) => Promise<void>;
   modelValue: () => number | null;
+  /**
+   * デフォルトは`0`。
+   */
   min?: () => number;
-  max?: () => number;
-  disable?: () => boolean;
+  max: () => number;
+  /**
+   * デフォルトは`1`。
+   */
   step?: () => number;
+  disable?: () => boolean;
+  /**
+   * デフォルトは`this.step`。
+   */
   scrollStep?: () => number;
+  /**
+   * デフォルトは`this.scrollStep`。
+   */
   scrollMinStep?: () => number;
   disableScroll?: () => boolean;
 };
@@ -65,7 +80,7 @@ export const previewSliderHelper = (props: Props): PreviewSliderHelper => {
   // Reactive references of each props
   const modelValue = computed(props.modelValue);
   const min = computed(() => (props.min && props.min()) ?? 0);
-  const max = computed(() => (props.max && props.max()) ?? 100);
+  const max = computed(() => props.max());
   const disable = computed(() => (props.disable && props.disable()) ?? false);
   const step = computed(() => (props.step && props.step()) ?? 1);
   const scrollStep = computed(
@@ -100,8 +115,7 @@ export const previewSliderHelper = (props: Props): PreviewSliderHelper => {
     if (previewValue.value === null)
       throw new Error("previewValue.value === null");
     if (modelValue.value !== previewValue.value && props.onChange) {
-      const ret: unknown = props.onChange(previewValue.value);
-      if (ret instanceof Promise) await ret;
+      await props.onChange(previewValue.value);
     }
   };
 
diff --git a/src/main.ts b/src/main.ts
index 2d1e9c8df5..d7dc1be7a2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,8 +7,6 @@ import App from "./App.vue";
 import router from "./router";
 import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
-// eslint-disable-next-line no-restricted-imports
-import loadElectronMock from "./electron/mock";
 import * as mobile from "./mobile";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
@@ -26,10 +24,6 @@ if (Capacitor.isNativePlatform()) {
   mobile.loadMock();
   mobile.loadPlugin();
   mobile.loadCoreBasedApi();
-} else if (!window.electron) {
-  // eslint-disable-next-line no-console
-  console.log("Running in browser");
-  loadElectronMock();
 } else {
   // eslint-disable-next-line no-console
   console.log("Running in Electron");
diff --git a/src/mobile/electronMock.ts b/src/mobile/electronMock.ts
index 6c5c89357d..8c08cacd01 100644
--- a/src/mobile/electronMock.ts
+++ b/src/mobile/electronMock.ts
@@ -93,9 +93,6 @@ const loadMock = () => {
     async readFile(obj) {
       throw new Error(`Not implemented: readFile ${obj}`);
     },
-    async openTextEditContextMenu() {
-      throw new Error("Not implemented: openTextEditContextMenu");
-    },
     async isAvailableGPUMode() {
       return false;
     },
@@ -137,12 +134,12 @@ const loadMock = () => {
       throw new Error(`Not implemented: openEngineDirectory ${engineId}`);
     },
     async hotkeySettings(newData) {
-      if (newData !== undefined) {
+      if (newData != undefined) {
         const hotkeySettings = await this.getSetting("hotkeySettings");
         const hotkeySetting = hotkeySettings.find(
           (hotkey) => hotkey.action == newData.action
         );
-        if (hotkeySetting !== undefined) {
+        if (hotkeySetting != undefined) {
           hotkeySetting.combination = newData.combination;
         }
         await this.setSetting("hotkeySettings", hotkeySettings);
@@ -214,12 +211,15 @@ const loadMock = () => {
     async validateEngineDir(engineDir) {
       throw new Error(`Not implemented: validateEngineDir ${engineDir}`);
     },
-    async restartApp(obj) {
+    async reloadApp() {
       window.location.reload();
     },
     async getAltPortInfos() {
       return {};
     },
+    async openLogDirectory() {
+      throw new Error("Not implemented: openLogDirectory");
+    },
   };
 
   try {
diff --git a/src/openapi/.openapi-generator/VERSION b/src/openapi/.openapi-generator/VERSION
index 757e674004..4122521804 100644
--- a/src/openapi/.openapi-generator/VERSION
+++ b/src/openapi/.openapi-generator/VERSION
@@ -1 +1 @@
-7.0.0-SNAPSHOT
\ No newline at end of file
+7.0.0
\ No newline at end of file
diff --git a/src/plugins/ipcMessageReceiverPlugin.ts b/src/plugins/ipcMessageReceiverPlugin.ts
index c21788d017..27224113cd 100644
--- a/src/plugins/ipcMessageReceiverPlugin.ts
+++ b/src/plugins/ipcMessageReceiverPlugin.ts
@@ -44,8 +44,8 @@ export const ipcMessageReceiver: Plugin = {
       options.store.dispatch("DETECT_LEAVE_FULLSCREEN")
     );
 
-    window.electron.onReceivedIPCMsg("CHECK_EDITED_AND_NOT_SAVE", () => {
-      options.store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
+    window.electron.onReceivedIPCMsg("CHECK_EDITED_AND_NOT_SAVE", (_, obj) => {
+      options.store.dispatch("CHECK_EDITED_AND_NOT_SAVE", obj);
     });
 
     window.electron.onReceivedIPCMsg(
diff --git a/src/store/audio.ts b/src/store/audio.ts
index f485d8615f..9f8fe2a2a2 100644
--- a/src/store/audio.ts
+++ b/src/store/audio.ts
@@ -2,6 +2,8 @@ import path from "path";
 import { v4 as uuidv4 } from "uuid";
 import Encoding from "encoding-japanese";
 import sha256 from "crypto-js/sha256";
+import { diffArrays } from "diff";
+import { toRaw } from "vue";
 import { createUILockAction, withProgress } from "./ui";
 import {
   AudioItem,
@@ -15,15 +17,18 @@ import {
   transformCommandStore,
 } from "./type";
 import {
-  buildFileNameFromRawData,
-  buildProjectFileName,
+  buildAudioFileNameFromRawData,
+  isAccentPhrasesTextDifferent,
   convertHiraToKana,
   convertLongVowel,
   createKanaRegex,
   currentDateString,
-  skipMemoText,
-  skipReadingPart,
-  skipWritingPart,
+  extractExportText,
+  extractYomiText,
+  sanitizeFileName,
+  DEFAULT_STYLE_NAME,
+  formatCharacterStyleName,
+  joinTextsInAccentPhrases,
 } from "./utility";
 import { convertAudioQueryFromEditorToEngine } from "./proxy";
 import { createPartialStore } from "./vuex";
@@ -47,6 +52,10 @@ import { AudioQuery, AccentPhrase, Speaker, SpeakerInfo } from "@/openapi";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { getValueOrThrow, ResultError } from "@/type/result";
 
+function generateAudioKey() {
+  return AudioKey(uuidv4());
+}
+
 async function generateUniqueIdAndQuery(
   state: State,
   audioItem: AudioItem
@@ -97,14 +106,19 @@ function parseTextFile(
   }
   // setup characters with style name
   for (const characterInfo of userOrderedCharacterInfos) {
+    const characterName = characterInfo.metas.speakerName;
     for (const style of characterInfo.metas.styles) {
+      const styleName = style.styleName;
+      const voice = {
+        engineId: style.engineId,
+        speakerId: characterInfo.metas.speakerUuid,
+        styleId: style.styleId,
+      };
+      name2Voice.set(formatCharacterStyleName(characterName, styleName), voice);
+      // 古いフォーマットにも対応するため
       name2Voice.set(
-        `${characterInfo.metas.speakerName}(${style.styleName || "ノーマル"})`,
-        {
-          engineId: style.engineId,
-          speakerId: characterInfo.metas.speakerUuid,
-          styleId: style.styleId,
-        }
+        `${characterName}(${styleName || DEFAULT_STYLE_NAME})`,
+        voice
       );
     }
   }
@@ -127,33 +141,47 @@ function parseTextFile(
   return audioItems;
 }
 
-// TODO: GETTERに移動する
-function buildFileName(state: State, audioKey: AudioKey) {
-  const fileNamePattern = state.savingSetting.fileNamePattern;
-
-  const index = state.audioKeys.indexOf(audioKey);
-  const audioItem = state.audioItems[audioKey];
+async function changeFileTailToNonExistent(
+  filePath: string,
+  extension: string
+) {
+  let tail = 1;
+  const name = filePath.slice(0, filePath.length - 1 - extension.length);
+  while (await window.electron.checkFileExists(filePath)) {
+    filePath = `${name}[${tail}].${extension}`;
+    tail += 1;
+  }
+  return filePath;
+}
 
-  const character = getCharacterInfo(
-    state,
-    audioItem.voice.engineId,
-    audioItem.voice.styleId
-  );
-  if (character === undefined)
-    throw new Error("assert character !== undefined");
+export async function writeTextFile(obj: {
+  filePath: string;
+  text: string;
+  encoding?: EncodingType;
+}) {
+  obj.encoding ??= "UTF-8";
+
+  const textBlob = {
+    "UTF-8": (text: string) => {
+      const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
+      return new Blob([bom, text], {
+        type: "text/plain;charset=UTF-8",
+      });
+    },
+    Shift_JIS: (text: string) => {
+      const sjisArray = Encoding.convert(Encoding.stringToCode(text), {
+        to: "SJIS",
+        type: "arraybuffer",
+      });
+      return new Blob([new Uint8Array(sjisArray)], {
+        type: "text/plain;charset=Shift_JIS",
+      });
+    },
+  }[obj.encoding](obj.text);
 
-  const style = character.metas.styles.find(
-    (style) => style.styleId === audioItem.voice.styleId
-  );
-  if (style === undefined) throw new Error("assert style !== undefined");
-
-  const styleName = style.styleName || "ノーマル";
-  return buildFileNameFromRawData(fileNamePattern, {
-    characterName: character.metas.speakerName,
-    index,
-    styleName,
-    text: audioItem.text,
-    date: currentDateString(),
+  return window.electron.writeFile({
+    filePath: obj.filePath,
+    buffer: await textBlob.arrayBuffer(),
   });
 }
 
@@ -168,12 +196,16 @@ function generateWriteErrorMessage(writeFileResult: ResultError) {
     if (code.startsWith("EACCES")) {
       return "ファイルにアクセスする許可がありません。";
     }
+
+    if (code.startsWith("EBUSY")) {
+      return "ファイルが開かれています。";
+    }
   }
 
   return `何らかの理由で失敗しました。${writeFileResult.message}`;
 }
 
-// TODO: GETTERに移動する。buildFileNameから参照されているので、そちらも一緒に移動する。
+// TODO: GETTERに移動する。
 export function getCharacterInfo(
   state: State,
   engineId: EngineId,
@@ -217,16 +249,14 @@ export function applyAudioPresetToAudioItem(
 }
 
 const audioBlobCache: Record<string, Blob> = {};
-const audioElements: Record<AudioKey, HTMLAudioElement> = {};
 
 export const audioStoreState: AudioStoreState = {
   characterInfos: {},
+  audioKeysWithInitializingSpeaker: [],
   morphableTargetsInfo: {},
   audioItems: {},
   audioKeys: [],
   audioStates: {},
-  // audio elementの再生オフセット
-  audioPlayStartPoint: undefined,
   nowPlayingContinuously: false,
 };
 
@@ -240,23 +270,37 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
-  HAVE_AUDIO_QUERY: {
-    getter: (state) => (audioKey: AudioKey) => {
-      return state.audioItems[audioKey]?.query != undefined;
-    },
-  },
-
-  IS_ACTIVE: {
-    getter: (state) => (audioKey: AudioKey) => {
-      return state._activeAudioKey === audioKey;
+  SELECTED_AUDIO_KEYS: {
+    getter(state) {
+      return (
+        //  undo/redoで消えていることがあるためフィルタする
+        state._selectedAudioKeys?.filter((audioKey) =>
+          state.audioKeys.includes(audioKey)
+        ) || []
+      );
     },
   },
 
-  ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
-    getter: (state) => {
-      return state._activeAudioKey !== undefined
-        ? audioElements[state._activeAudioKey]?.currentTime
-        : undefined;
+  /**
+   * audio elementの再生オフセット。
+   * 選択+削除 や 挿入+選択+元に戻す などを行った場合でも範囲外にならないようにクランプする。
+   * ACTIVE_AUDIO_KEYがundefinedのときはundefinedを返す。
+   */
+  AUDIO_PLAY_START_POINT: {
+    getter(state, getters) {
+      const audioPlayStartPoint = state._audioPlayStartPoint;
+      if (
+        audioPlayStartPoint == undefined ||
+        getters.ACTIVE_AUDIO_KEY == undefined
+      ) {
+        return undefined;
+      }
+      const length =
+        state.audioItems[getters.ACTIVE_AUDIO_KEY].query?.accentPhrases.length;
+      if (length == undefined) {
+        return undefined;
+      }
+      return Math.max(0, Math.min(length - 1, audioPlayStartPoint));
     },
   },
 
@@ -419,8 +463,9 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       );
       if (style === undefined) throw new Error("assert style !== undefined");
 
-      const styleName = style.styleName || "ノーマル";
-      return `${characterInfo.metas.speakerName}(${styleName})`;
+      const speakerName = characterInfo.metas.speakerName;
+      const styleName = style.styleName;
+      return formatCharacterStyleName(speakerName, styleName);
     },
   },
 
@@ -437,42 +482,34 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
-  GENERATE_AUDIO_KEY: {
-    action() {
-      const audioKey = AudioKey(uuidv4());
-      audioElements[audioKey] = new Audio();
-      return audioKey;
-    },
-  },
-
   SETUP_SPEAKER: {
     /**
      * AudioItemに設定される話者（スタイルID）に対してエンジン側の初期化を行い、即座に音声合成ができるようにする。
      */
-    async action({ commit, dispatch }, { engineId, audioKey, styleId }) {
+    async action({ commit, dispatch }, { engineId, audioKeys, styleId }) {
       const isInitialized = await dispatch("IS_INITIALIZED_ENGINE_SPEAKER", {
         engineId,
         styleId,
       });
       if (isInitialized) return;
 
-      commit("SET_AUDIO_KEY_INITIALIZING_SPEAKER", {
-        audioKey,
+      commit("SET_AUDIO_KEYS_WITH_INITIALIZING_SPEAKER", {
+        audioKeys,
       });
       await dispatch("INITIALIZE_ENGINE_SPEAKER", {
         engineId,
         styleId,
       }).finally(() => {
-        commit("SET_AUDIO_KEY_INITIALIZING_SPEAKER", {
-          audioKey: undefined,
+        commit("SET_AUDIO_KEYS_WITH_INITIALIZING_SPEAKER", {
+          audioKeys: [],
         });
       });
     },
   },
 
-  SET_AUDIO_KEY_INITIALIZING_SPEAKER: {
-    mutation(state, { audioKey }: { audioKey?: AudioKey }) {
-      state.audioKeyInitializingSpeaker = audioKey;
+  SET_AUDIO_KEYS_WITH_INITIALIZING_SPEAKER: {
+    mutation(state, { audioKeys }: { audioKeys: AudioKey[] }) {
+      state.audioKeysWithInitializingSpeaker = audioKeys;
     },
   },
 
@@ -487,24 +524,37 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation(state, { audioKeys }: { audioKeys?: AudioKey[] }) {
+      state._selectedAudioKeys = audioKeys;
+    },
+    action(
+      { state, commit, getters },
+      { audioKeys }: { audioKeys?: AudioKey[] }
+    ) {
+      const uniqueAudioKeys = new Set(audioKeys);
+      if (
+        getters.ACTIVE_AUDIO_KEY &&
+        !uniqueAudioKeys.has(getters.ACTIVE_AUDIO_KEY)
+      ) {
+        throw new Error("selectedAudioKeys must include activeAudioKey");
+      }
+      const sortedAudioKeys = state.audioKeys.filter((audioKey) =>
+        uniqueAudioKeys.has(audioKey)
+      );
+      commit("SET_SELECTED_AUDIO_KEYS", { audioKeys: sortedAudioKeys });
+    },
+  },
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation(state, { startPoint }: { startPoint?: number }) {
-      state.audioPlayStartPoint = startPoint;
+      state._audioPlayStartPoint = startPoint;
     },
     action({ commit }, { startPoint }: { startPoint?: number }) {
       commit("SET_AUDIO_PLAY_START_POINT", { startPoint });
     },
   },
 
-  SET_AUDIO_NOW_PLAYING: {
-    mutation(
-      state,
-      { audioKey, nowPlaying }: { audioKey: AudioKey; nowPlaying: boolean }
-    ) {
-      state.audioStates[audioKey].nowPlaying = nowPlaying;
-    },
-  },
-
   SET_AUDIO_NOW_GENERATING: {
     mutation(
       state,
@@ -621,13 +671,13 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
 
   REGISTER_AUDIO_ITEM: {
     async action(
-      { dispatch, commit },
+      { commit },
       {
         audioItem,
         prevAudioKey,
       }: { audioItem: AudioItem; prevAudioKey?: AudioKey }
     ) {
-      const audioKey = await dispatch("GENERATE_AUDIO_KEY");
+      const audioKey = generateAudioKey();
       commit("INSERT_AUDIO_ITEM", { audioItem, audioKey, prevAudioKey });
       return audioKey;
     },
@@ -653,7 +703,6 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       state.audioKeys.splice(index, 0, audioKey);
       state.audioItems[audioKey] = audioItem;
       state.audioStates[audioKey] = {
-        nowPlaying: false,
         nowGenerating: false,
       };
     },
@@ -679,7 +728,6 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       for (const { audioKey, audioItem } of audioKeyItemPairs) {
         state.audioItems[audioKey] = audioItem;
         state.audioStates[audioKey] = {
-          nowPlaying: false,
           nowGenerating: false,
         };
       }
@@ -1089,6 +1137,55 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  DEFAULT_PROJECT_FILE_BASE_NAME: {
+    getter: (state) => {
+      const headItemText = state.audioItems[state.audioKeys[0]].text;
+
+      const tailItemText =
+        state.audioItems[state.audioKeys[state.audioKeys.length - 1]].text;
+
+      const headTailItemText =
+        state.audioKeys.length === 1
+          ? headItemText
+          : headItemText + "..." + tailItemText;
+
+      const defaultFileBaseName = sanitizeFileName(headTailItemText);
+
+      return defaultFileBaseName === "" ? "Untitled" : defaultFileBaseName;
+    },
+  },
+
+  DEFAULT_AUDIO_FILE_NAME: {
+    getter: (state) => (audioKey) => {
+      const fileNamePattern = state.savingSetting.fileNamePattern;
+
+      const index = state.audioKeys.indexOf(audioKey);
+      const audioItem = state.audioItems[audioKey];
+
+      const character = getCharacterInfo(
+        state,
+        audioItem.voice.engineId,
+        audioItem.voice.styleId
+      );
+      if (character === undefined)
+        throw new Error("assert character !== undefined");
+
+      const style = character.metas.styles.find(
+        (style) => style.styleId === audioItem.voice.styleId
+      );
+      if (style === undefined) throw new Error("assert style !== undefined");
+
+      const styleName = style.styleName || DEFAULT_STYLE_NAME;
+      return buildAudioFileNameFromRawData(fileNamePattern, {
+        characterName: character.metas.speakerName,
+        index,
+        styleName,
+        text: audioItem.text,
+        date: currentDateString(),
+      });
+    },
+  },
+
   GENERATE_LAB: {
     action: createUILockAction(
       async (
@@ -1273,26 +1370,25 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   GENERATE_AND_SAVE_AUDIO: {
     action: createUILockAction(
       async (
-        { state, dispatch },
+        { state, getters, dispatch },
         {
           audioKey,
           filePath,
-          encoding,
         }: {
           audioKey: AudioKey;
           filePath?: string;
-          encoding?: EncodingType;
         }
       ): Promise<SaveResultObject> => {
+        const defaultAudioFileName = getters.DEFAULT_AUDIO_FILE_NAME(audioKey);
         if (state.savingSetting.fixedExportEnabled) {
           filePath = path.join(
             state.savingSetting.fixedExportDir,
-            buildFileName(state, audioKey)
+            defaultAudioFileName
           );
         } else {
           filePath ??= await window.electron.showAudioSaveDialog({
             title: "音声を保存",
-            defaultPath: buildFileName(state, audioKey),
+            defaultPath: defaultAudioFileName,
           });
         }
 
@@ -1301,12 +1397,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
         }
 
         if (state.savingSetting.avoidOverwrite) {
-          let tail = 1;
-          const name = filePath.slice(0, filePath.length - 4);
-          while (await dispatch("CHECK_FILE_EXISTS", { file: filePath })) {
-            filePath = name + "[" + tail.toString() + "]" + ".wav";
-            tail += 1;
-          }
+          filePath = await changeFileTailToNonExistent(filePath, "wav");
         }
 
         let blob = await dispatch("GET_AUDIO_CACHE", { audioKey });
@@ -1346,42 +1437,18 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
                 errorMessage: "labの生成に失敗しました。",
               };
 
-            const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-            const labBlob = new Blob([bom, labString], {
-              type: "text/plain;charset=UTF-8",
-            });
-
-            await window.electron
-              .writeFile({
-                filePath: filePath.replace(/\.wav$/, ".lab"),
-                buffer: await labBlob.arrayBuffer(),
-              })
-              .then(getValueOrThrow);
+            await writeTextFile({
+              text: labString,
+              filePath: filePath.replace(/\.wav$/, ".lab"),
+            }).then(getValueOrThrow);
           }
 
           if (state.savingSetting.exportText) {
-            const textBlob = ((): Blob => {
-              if (!encoding || encoding === "UTF-8") {
-                const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-                return new Blob([bom, state.audioItems[audioKey].text], {
-                  type: "text/plain;charset=UTF-8",
-                });
-              }
-              const sjisArray = Encoding.convert(
-                Encoding.stringToCode(state.audioItems[audioKey].text),
-                { to: "SJIS", type: "arraybuffer" }
-              );
-              return new Blob([new Uint8Array(sjisArray)], {
-                type: "text/plain;charset=Shift_JIS",
-              });
-            })();
-
-            await window.electron
-              .writeFile({
-                filePath: filePath.replace(/\.wav$/, ".txt"),
-                buffer: await textBlob.arrayBuffer(),
-              })
-              .then(getValueOrThrow);
+            await writeTextFile({
+              text: extractExportText(state.audioItems[audioKey].text),
+              filePath: filePath.replace(/\.wav$/, ".txt"),
+              encoding: state.savingSetting.fileEncoding,
+            }).then(getValueOrThrow);
           }
 
           return { result: "SUCCESS", path: filePath };
@@ -1409,14 +1476,12 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   GENERATE_AND_SAVE_ALL_AUDIO: {
     action: createUILockAction(
       async (
-        { state, dispatch },
+        { state, getters, dispatch },
         {
           dirPath,
-          encoding,
           callback,
         }: {
           dirPath?: string;
-          encoding?: EncodingType;
           callback?: (finishedCount: number, totalCount: number) => void;
         }
       ) => {
@@ -1434,11 +1499,10 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
           let finishedCount = 0;
 
           const promises = state.audioKeys.map((audioKey) => {
-            const name = buildFileName(state, audioKey);
+            const name = getters.DEFAULT_AUDIO_FILE_NAME(audioKey);
             return dispatch("GENERATE_AND_SAVE_AUDIO", {
               audioKey,
               filePath: path.join(_dirPath, name),
-              encoding,
             }).then((value) => {
               callback?.(++finishedCount, totalCount);
               return value;
@@ -1453,18 +1517,16 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   GENERATE_AND_CONNECT_AND_SAVE_AUDIO: {
     action: createUILockAction(
       async (
-        { state, dispatch },
+        { state, getters, dispatch },
         {
           filePath,
-          encoding,
           callback,
         }: {
           filePath?: string;
-          encoding?: EncodingType;
           callback?: (finishedCount: number, totalCount: number) => void;
         }
       ): Promise<SaveResultObject> => {
-        const defaultFileName = buildProjectFileName(state, "wav");
+        const defaultFileName = `${getters.DEFAULT_PROJECT_FILE_BASE_NAME}.wav`;
 
         if (state.savingSetting.fixedExportEnabled) {
           filePath = path.join(
@@ -1483,12 +1545,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
         }
 
         if (state.savingSetting.avoidOverwrite) {
-          let tail = 1;
-          const name = filePath.slice(0, filePath.length - 4);
-          while (await dispatch("CHECK_FILE_EXISTS", { file: filePath })) {
-            filePath = name + "[" + tail.toString() + "]" + ".wav";
-            tail += 1;
-          }
+          filePath = await changeFileTailToNonExistent(filePath, "wav");
         }
 
         const encodedBlobs: string[] = [];
@@ -1553,7 +1610,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
             return { result: "WRITE_ERROR", path: filePath };
           }
           labs.push(lab);
-          texts.push(state.audioItems[audioKey].text);
+          texts.push(extractExportText(state.audioItems[audioKey].text));
           // 最終音素の終了時刻を取得する
           const splitLab = lab.split(" ");
           labOffset = Number(splitLab[splitLab.length - 2]);
@@ -1576,55 +1633,27 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
         }
 
         if (state.savingSetting.exportLab) {
-          // GENERATE_LABで生成される文字列はすべて改行で終わるので、改行なしに結合する
-          const labString = labs.join("");
-
-          const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-          const labBlob = new Blob([bom, labString], {
-            type: "text/plain;charset=UTF-8",
+          const labResult = await writeTextFile({
+            // GENERATE_LABで生成される文字列はすべて改行で終わるので、追加で改行を挟む必要はない
+            text: labs.join(""),
+            filePath: filePath.replace(/\.wav$/, ".lab"),
           });
-
-          await window.electron
-            .writeFile({
-              filePath: filePath.replace(/\.wav$/, ".lab"),
-              buffer: await labBlob.arrayBuffer(),
-            })
-            .then((result) => {
-              if (result.ok) return;
-              window.electron.logError(result.error);
-              return { result: "WRITE_ERROR", path: filePath };
-            });
+          if (!labResult.ok) {
+            window.electron.logError(labResult.error);
+            return { result: "WRITE_ERROR", path: filePath };
+          }
         }
 
         if (state.savingSetting.exportText) {
-          const textBlob = ((): Blob => {
-            const text = texts.join("\n");
-            const skippedText = skipReadingPart(skipMemoText(text));
-            if (!encoding || encoding === "UTF-8") {
-              const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-              return new Blob([bom, skippedText], {
-                type: "text/plain;charset=UTF-8",
-              });
-            }
-            const sjisArray = Encoding.convert(Encoding.stringToCode(text), {
-              to: "SJIS",
-              type: "arraybuffer",
-            });
-            return new Blob([new Uint8Array(sjisArray)], {
-              type: "text/plain;charset=Shift_JIS",
-            });
-          })();
-
-          await window.electron
-            .writeFile({
-              filePath: filePath.replace(/\.wav$/, ".txt"),
-              buffer: await textBlob.arrayBuffer(),
-            })
-            .then((result) => {
-              if (result.ok) return;
-              window.electron.logError(result.error);
-              return { result: "WRITE_ERROR", path: filePath };
-            });
+          const textResult = await writeTextFile({
+            text: texts.join("\n"),
+            filePath: filePath.replace(/\.wav$/, ".txt"),
+            encoding: state.savingSetting.fileEncoding,
+          });
+          if (!textResult.ok) {
+            window.electron.logError(textResult.error);
+            return { result: "WRITE_ERROR", path: filePath };
+          }
         }
 
         return { result: "SUCCESS", path: filePath };
@@ -1635,10 +1664,10 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   CONNECT_AND_EXPORT_TEXT: {
     action: createUILockAction(
       async (
-        { state, dispatch, getters },
-        { filePath, encoding }: { filePath?: string; encoding?: EncodingType }
+        { state, getters },
+        { filePath }: { filePath?: string }
       ): Promise<SaveResultObject> => {
-        const defaultFileName = buildProjectFileName(state, "txt");
+        const defaultFileName = `${getters.DEFAULT_PROJECT_FILE_BASE_NAME}.txt`;
         if (state.savingSetting.fixedExportEnabled) {
           filePath = path.join(
             state.savingSetting.fixedExportDir,
@@ -1656,12 +1685,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
         }
 
         if (state.savingSetting.avoidOverwrite) {
-          let tail = 1;
-          const name = filePath.slice(0, filePath.length - 4);
-          while (await dispatch("CHECK_FILE_EXISTS", { file: filePath })) {
-            filePath = name + "[" + tail.toString() + "]" + ".wav";
-            tail += 1;
-          }
+          filePath = await changeFileTailToNonExistent(filePath, "txt");
         }
 
         const characters = new Map<string, string>();
@@ -1670,12 +1694,11 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
           throw new Error("USER_ORDERED_CHARACTER_INFOS == undefined");
 
         for (const characterInfo of getters.USER_ORDERED_CHARACTER_INFOS) {
+          const speakerName = characterInfo.metas.speakerName;
           for (const style of characterInfo.metas.styles) {
             characters.set(
               `${style.engineId}:${style.styleId}`, // FIXME: 入れ子のMapにする
-              `${characterInfo.metas.speakerName}(${
-                style.styleName || "ノーマル"
-              })`
+              formatCharacterStyleName(speakerName, style.styleName)
             );
           }
         }
@@ -1692,39 +1715,21 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
               ? characters.get(`${engineId}:${styleId}`) + ","
               : "";
 
-          const skippedText = skipReadingPart(
-            skipMemoText(state.audioItems[audioKey].text)
+          const skippedText = extractExportText(
+            state.audioItems[audioKey].text
           );
           texts.push(speakerName + skippedText);
         }
 
-        const textBlob = ((): Blob => {
-          const text = texts.join("\n");
-          if (!encoding || encoding === "UTF-8") {
-            const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-            return new Blob([bom, text], {
-              type: "text/plain;charset=UTF-8",
-            });
-          }
-          const sjisArray = Encoding.convert(Encoding.stringToCode(text), {
-            to: "SJIS",
-            type: "arraybuffer",
-          });
-          return new Blob([new Uint8Array(sjisArray)], {
-            type: "text/plain;charset=Shift_JIS",
-          });
-        })();
-
-        await window.electron
-          .writeFile({
-            filePath,
-            buffer: await textBlob.arrayBuffer(),
-          })
-          .then((result) => {
-            if (result.ok) return;
-            window.electron.logError(result.error);
-            return { result: "WRITE_ERROR", path: filePath };
-          });
+        const result = await writeTextFile({
+          text: texts.join("\n"),
+          encoding: state.savingSetting.fileEncoding,
+          filePath,
+        });
+        if (!result.ok) {
+          window.electron.logError(result.error);
+          return { result: "WRITE_ERROR", path: filePath };
+        }
 
         return { result: "SUCCESS", path: filePath };
       }
@@ -1734,8 +1739,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   PLAY_AUDIO: {
     action: createUILockAction(
       async ({ commit, dispatch }, { audioKey }: { audioKey: AudioKey }) => {
-        const audioElem = audioElements[audioKey];
-        audioElem.pause();
+        await dispatch("STOP_AUDIO");
 
         // 音声用意
         let blob = await dispatch("GET_AUDIO_CACHE", { audioKey });
@@ -1759,7 +1763,6 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
 
         return dispatch("PLAY_AUDIO_BLOB", {
           audioBlob: blob,
-          audioElem,
           audioKey,
         });
       }
@@ -1769,86 +1772,31 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   PLAY_AUDIO_BLOB: {
     action: createUILockAction(
       async (
-        { state, commit, dispatch },
-        {
-          audioBlob,
-          audioElem,
-          audioKey,
-        }: { audioBlob: Blob; audioElem: HTMLAudioElement; audioKey?: AudioKey }
+        { getters, commit, dispatch },
+        { audioBlob, audioKey }: { audioBlob: Blob; audioKey?: AudioKey }
       ) => {
-        audioElem.src = URL.createObjectURL(audioBlob);
+        commit("SET_AUDIO_SOURCE", { audioBlob });
+        let offset: number | undefined;
         // 途中再生用の処理
         if (audioKey) {
           const accentPhraseOffsets = await dispatch("GET_AUDIO_PLAY_OFFSETS", {
             audioKey,
           });
-          if (accentPhraseOffsets.length === 0) {
-            audioElem.currentTime = 0;
-          } else {
-            const startTime =
-              accentPhraseOffsets[state.audioPlayStartPoint ?? 0];
-            if (startTime === undefined) throw Error("startTime === undefined");
-            // 小さい値が切り捨てられることでフォーカスされるアクセントフレーズが一瞬元に戻るので、
-            // 再生に影響のない程度かつ切り捨てられない値を加算する
-            audioElem.currentTime = startTime + 10e-6;
-          }
-        }
-
-        // 一部ブラウザではsetSinkIdが実装されていないので、その環境では無視する
-        if (audioElem.setSinkId) {
-          audioElem
-            .setSinkId(state.savingSetting.audioOutputDevice)
-            .catch((err) => {
-              const stop = () => {
-                audioElem.pause();
-                audioElem.removeEventListener("canplay", stop);
-              };
-              audioElem.addEventListener("canplay", stop);
-              window.electron.showMessageDialog({
-                type: "error",
-                title: "エラー",
-                message: "再生デバイスが見つかりません",
-              });
-              throw new Error(err);
-            });
+          if (accentPhraseOffsets.length === 0)
+            throw new Error("accentPhraseOffsets.length === 0");
+          const startTime =
+            accentPhraseOffsets[getters.AUDIO_PLAY_START_POINT ?? 0];
+          if (startTime === undefined) throw Error("startTime === undefined");
+          // 小さい値が切り捨てられることでフォーカスされるアクセントフレーズが一瞬元に戻るので、
+          // 再生に影響のない程度かつ切り捨てられない値を加算する
+          offset = startTime + 10e-6;
         }
 
-        // 再生終了時にresolveされるPromiseを返す
-        const played = async () => {
-          if (audioKey) {
-            commit("SET_AUDIO_NOW_PLAYING", { audioKey, nowPlaying: true });
-          }
-        };
-        audioElem.addEventListener("play", played);
-
-        let paused: () => void;
-        const audioPlayPromise = new Promise<boolean>((resolve) => {
-          paused = () => {
-            resolve(audioElem.ended);
-          };
-          audioElem.addEventListener("pause", paused);
-        }).finally(async () => {
-          audioElem.removeEventListener("play", played);
-          audioElem.removeEventListener("pause", paused);
-          if (audioKey) {
-            commit("SET_AUDIO_NOW_PLAYING", { audioKey, nowPlaying: false });
-          }
-        });
-
-        audioElem.play();
-
-        return audioPlayPromise;
+        return dispatch("PLAY_AUDIO_PLAYER", { offset, audioKey });
       }
     ),
   },
 
-  STOP_AUDIO: {
-    action(_, { audioKey }: { audioKey: AudioKey }) {
-      const audioElem = audioElements[audioKey];
-      audioElem.pause();
-    },
-  },
-
   SET_AUDIO_PRESET_KEY: {
     mutation(
       state,
@@ -1866,9 +1814,9 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
   },
 
   PLAY_CONTINUOUSLY_AUDIO: {
-    action: createUILockAction(async ({ state, commit, dispatch }) => {
+    action: createUILockAction(async ({ state, getters, commit, dispatch }) => {
       const currentAudioKey = state._activeAudioKey;
-      const currentAudioPlayStartPoint = state.audioPlayStartPoint;
+      const currentAudioPlayStartPoint = getters.AUDIO_PLAY_START_POINT;
 
       let index = 0;
       if (currentAudioKey !== undefined) {
@@ -1894,28 +1842,6 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
       }
     }),
   },
-
-  STOP_CONTINUOUSLY_AUDIO: {
-    action({ state, dispatch }) {
-      for (const audioKey of state.audioKeys) {
-        if (state.audioStates[audioKey].nowPlaying) {
-          dispatch("STOP_AUDIO", { audioKey });
-        }
-      }
-    },
-  },
-
-  OPEN_TEXT_EDIT_CONTEXT_MENU: {
-    action() {
-      window.electron.openTextEditContextMenu();
-    },
-  },
-
-  CHECK_FILE_EXISTS: {
-    action(_, { file }: { file: string }) {
-      return window.electron.checkFileExists(file);
-    },
-  },
 });
 
 export const audioCommandStoreState: AudioCommandStoreState = {};
@@ -1934,7 +1860,7 @@ export const audioCommandStore = transformCommandStore(
         audioStore.mutations.INSERT_AUDIO_ITEM(draft, payload);
       },
       async action(
-        { dispatch, commit },
+        { commit },
         {
           audioItem,
           prevAudioKey,
@@ -1943,7 +1869,7 @@ export const audioCommandStore = transformCommandStore(
           prevAudioKey: AudioKey | undefined;
         }
       ) {
-        const audioKey = await dispatch("GENERATE_AUDIO_KEY");
+        const audioKey = generateAudioKey();
         commit("COMMAND_REGISTER_AUDIO_ITEM", {
           audioItem,
           audioKey,
@@ -1971,6 +1897,19 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
+    COMMAND_CHANGE_DISPLAY_TEXT: {
+      /**
+       * 読みを変えずにテキストだけを変える
+       */
+      action({ commit }, payload: { audioKey: AudioKey; text: string }) {
+        commit("COMMAND_CHANGE_AUDIO_TEXT", {
+          audioKey: payload.audioKey,
+          text: payload.text,
+          update: "Text",
+        });
+      },
+    },
+
     COMMAND_CHANGE_AUDIO_TEXT: {
       mutation(
         draft,
@@ -2006,7 +1945,7 @@ export const audioCommandStore = transformCommandStore(
         const engineId = state.audioItems[audioKey].voice.engineId;
         const styleId = state.audioItems[audioKey].voice.styleId;
         const query = state.audioItems[audioKey].query;
-        const skippedText = skipWritingPart(skipMemoText(text));
+        const skippedText = extractYomiText(text);
 
         try {
           if (query !== undefined) {
@@ -2018,11 +1957,86 @@ export const audioCommandStore = transformCommandStore(
                 styleId,
               }
             );
+
+            // 読みの内容が変わっていなければテキストだけ変更
+            const isSameText = !isAccentPhrasesTextDifferent(
+              query.accentPhrases,
+              accentPhrases
+            );
+            let newAccentPhrases: AccentPhrase[] = [];
+            if (isSameText) {
+              newAccentPhrases = query.accentPhrases;
+            } else {
+              if (!state.experimentalSetting.shouldKeepTuningOnTextChange) {
+                newAccentPhrases = accentPhrases;
+              } else {
+                /*
+                 * # 調整結果の保持の仕組み
+                 * 1. 新しいAccentPhraseと古いAccentPhraseのテキスト（モーラのカタカナを結合したもの）を比較する。読点は無視する。（diffからflatDiff）
+                 * 例えば、
+                 * 旧：[ズ ン ダ モ ン ノ] [チョ ウ ショ ク]
+                 * 新：[ズ ン ダ モ ン ノ] [ユ ウ ショ ク]
+                 * という場合、
+                 *   [ズ ン ダ モ ン ノ]
+                 * + [ユ ウ ショ ク]
+                 * - [チョ ウ ショ ク]
+                 * のような変更なしのdiff・追加のdiff・削除のdiffが得られる。
+                 *
+                 * 2. それぞれのdiffにインデックスを振る。（indexedDiff）
+                 * 3. diffのインデックスと古いAccentPhraseの対応表を作る。（indexToOldAccentPhrase）
+                 * 追加のdiffを抜くと古いAccentPhraseになるので、残ったAccentPhraseのIDを対応させる。
+                 *   [ズ ン ダ モ ン ノ] #0 -> query.accentPhrases[0]
+                 * + [ユ ウ ショ ク]     #1 -> （無視）
+                 * - [チョ ウ ショ ク]   #2 -> query.accentPhrases[1]
+                 *
+                 * 4. 新しいAccentPhraseの配列を作る。（newAccentPhrases）
+                 * 変更なしのdiffは上の対応表を使って古いAccentPhrase、追加のdiffは新しいAccentPhraseを使い、削除のdiffは無視する。
+                 *   [ズ ン ダ モ ン ノ] #0 -> query.accentPhrases[0]
+                 * + [ユ ウ ショ ク]     #1 -> accentPhrases[1]
+                 * - [チョ ウ ショ ク]   #2 -> （無視）
+                 */
+                const diff = diffArrays(
+                  query.accentPhrases.map(joinTextsInAccentPhrases),
+                  accentPhrases.map(joinTextsInAccentPhrases)
+                );
+                const flatDiff = diff.flatMap((d) =>
+                  d.value.map((v) => ({ ...d, value: v }))
+                );
+                const indexedDiff = flatDiff.map((d, i) => ({
+                  ...d,
+                  index: i,
+                }));
+                const indexToOldAccentPhrase = indexedDiff
+                  .filter((d) => !d.added)
+                  .reduce(
+                    (acc, d, i) => ({
+                      ...acc,
+                      [d.index]: toRaw(query.accentPhrases[i]),
+                    }),
+                    {} as { [index: number]: AccentPhrase }
+                  );
+                newAccentPhrases = indexedDiff
+                  .filter((d) => !d.removed)
+                  .map((d, i) => {
+                    const ap = structuredClone(
+                      indexToOldAccentPhrase[d.index] ?? accentPhrases[i]
+                    );
+                    if (accentPhrases[i].pauseMora !== undefined) {
+                      ap.pauseMora = accentPhrases[i].pauseMora;
+                    } else {
+                      delete ap.pauseMora;
+                    }
+                    ap.isInterrogative = accentPhrases[i].isInterrogative;
+
+                    return ap;
+                  });
+              }
+            }
             commit("COMMAND_CHANGE_AUDIO_TEXT", {
               audioKey,
               text,
               update: "AccentPhrases",
-              accentPhrases,
+              accentPhrases: newAccentPhrases,
             });
           } else {
             const newAudioQuery = await dispatch("FETCH_AUDIO_QUERY", {
@@ -2048,10 +2062,10 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
-    COMMAND_CHANGE_VOICE: {
+    COMMAND_MULTI_CHANGE_VOICE: {
       mutation(
         draft,
-        payload: { audioKey: AudioKey; voice: Voice } & (
+        payload: { audioKeys: AudioKey[]; voice: Voice } & (
           | { update: "RollbackStyleId" }
           | {
               update: "AccentPhrases";
@@ -2063,93 +2077,100 @@ export const audioCommandStore = transformCommandStore(
             }
         )
       ) {
-        audioStore.mutations.SET_AUDIO_VOICE(draft, {
-          audioKey: payload.audioKey,
-          voice: payload.voice,
-        });
+        for (const audioKey of payload.audioKeys) {
+          audioStore.mutations.SET_AUDIO_VOICE(draft, {
+            audioKey,
+            voice: payload.voice,
+          });
+        }
 
         if (payload.update === "RollbackStyleId") return;
 
-        const presetKey = draft.audioItems[payload.audioKey].presetKey;
+        for (const audioKey of payload.audioKeys) {
+          const presetKey = draft.audioItems[audioKey].presetKey;
 
-        const { nextPresetKey, shouldApplyPreset } = determineNextPresetKey(
-          draft,
-          payload.voice,
-          presetKey,
-          "changeVoice"
-        );
-
-        audioStore.mutations.SET_AUDIO_PRESET_KEY(draft, {
-          audioKey: payload.audioKey,
-          presetKey: nextPresetKey,
-        });
+          const { nextPresetKey, shouldApplyPreset } = determineNextPresetKey(
+            draft,
+            payload.voice,
+            presetKey,
+            "changeVoice"
+          );
 
-        if (payload.update == "AccentPhrases") {
-          audioStore.mutations.SET_ACCENT_PHRASES(draft, {
-            audioKey: payload.audioKey,
-            accentPhrases: payload.accentPhrases,
-          });
-        } else if (payload.update == "AudioQuery") {
-          audioStore.mutations.SET_AUDIO_QUERY(draft, {
-            audioKey: payload.audioKey,
-            audioQuery: payload.query,
+          audioStore.mutations.SET_AUDIO_PRESET_KEY(draft, {
+            audioKey,
+            presetKey: nextPresetKey,
           });
-        }
 
-        if (shouldApplyPreset) {
-          audioStore.mutations.APPLY_AUDIO_PRESET(draft, {
-            audioKey: payload.audioKey,
-          });
+          if (payload.update == "AccentPhrases") {
+            audioStore.mutations.SET_ACCENT_PHRASES(draft, {
+              audioKey,
+              accentPhrases: payload.accentPhrases,
+            });
+          } else if (payload.update == "AudioQuery") {
+            audioStore.mutations.SET_AUDIO_QUERY(draft, {
+              audioKey,
+              audioQuery: payload.query,
+            });
+          }
+
+          if (shouldApplyPreset) {
+            audioStore.mutations.APPLY_AUDIO_PRESET(draft, {
+              audioKey,
+            });
+          }
         }
       },
       async action(
         { state, dispatch, commit },
-        { audioKey, voice }: { audioKey: AudioKey; voice: Voice }
+        { audioKeys, voice }: { audioKeys: AudioKey[]; voice: Voice }
       ) {
-        const query = state.audioItems[audioKey].query;
         const engineId = voice.engineId;
         const styleId = voice.styleId;
-        try {
-          await dispatch("SETUP_SPEAKER", { audioKey, engineId, styleId });
-
-          if (query !== undefined) {
-            const accentPhrases = query.accentPhrases;
-            const newAccentPhrases: AccentPhrase[] = await dispatch(
-              "FETCH_MORA_DATA",
-              {
-                accentPhrases,
-                engineId,
-                styleId,
+        await dispatch("SETUP_SPEAKER", { audioKeys, engineId, styleId });
+        await Promise.all(
+          audioKeys.map(async (audioKey) => {
+            try {
+              const query = state.audioItems[audioKey].query;
+              if (query !== undefined) {
+                const accentPhrases = query.accentPhrases;
+                const newAccentPhrases: AccentPhrase[] = await dispatch(
+                  "FETCH_MORA_DATA",
+                  {
+                    accentPhrases,
+                    engineId,
+                    styleId,
+                  }
+                );
+                commit("COMMAND_MULTI_CHANGE_VOICE", {
+                  audioKeys,
+                  voice,
+                  update: "AccentPhrases",
+                  accentPhrases: newAccentPhrases,
+                });
+              } else {
+                const text = state.audioItems[audioKey].text;
+                const query: AudioQuery = await dispatch("FETCH_AUDIO_QUERY", {
+                  text: text,
+                  engineId,
+                  styleId,
+                });
+                commit("COMMAND_MULTI_CHANGE_VOICE", {
+                  audioKeys,
+                  voice,
+                  update: "AudioQuery",
+                  query,
+                });
               }
-            );
-            commit("COMMAND_CHANGE_VOICE", {
-              audioKey,
-              voice,
-              update: "AccentPhrases",
-              accentPhrases: newAccentPhrases,
-            });
-          } else {
-            const text = state.audioItems[audioKey].text;
-            const query: AudioQuery = await dispatch("FETCH_AUDIO_QUERY", {
-              text: text,
-              engineId,
-              styleId,
-            });
-            commit("COMMAND_CHANGE_VOICE", {
-              audioKey,
-              voice,
-              update: "AudioQuery",
-              query,
-            });
-          }
-        } catch (error) {
-          commit("COMMAND_CHANGE_VOICE", {
-            audioKey,
-            voice,
-            update: "RollbackStyleId",
-          });
-          throw error;
-        }
+            } catch (error) {
+              commit("COMMAND_MULTI_CHANGE_VOICE", {
+                audioKeys,
+                voice,
+                update: "RollbackStyleId",
+              });
+              throw error;
+            }
+          })
+        );
       },
     },
 
@@ -2332,6 +2353,35 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
+    COMMAND_DELETE_ACCENT_PHRASE: {
+      async action(
+        { state, commit },
+        {
+          audioKey,
+          accentPhraseIndex,
+        }: {
+          audioKey: AudioKey;
+          accentPhraseIndex: number;
+        }
+      ) {
+        const query = state.audioItems[audioKey].query;
+        if (query == undefined) throw new Error("query == undefined");
+
+        const originAccentPhrases = query.accentPhrases;
+
+        const newAccentPhrases = [
+          ...originAccentPhrases.slice(0, accentPhraseIndex),
+          ...originAccentPhrases.slice(accentPhraseIndex + 1),
+        ];
+
+        // 自動再調整は行わない
+        commit("COMMAND_CHANGE_SINGLE_ACCENT_PHRASE", {
+          audioKey,
+          accentPhrases: newAccentPhrases,
+        });
+      },
+    },
+
     COMMAND_CHANGE_SINGLE_ACCENT_PHRASE: {
       mutation(
         draft,
@@ -2457,7 +2507,7 @@ export const audioCommandStore = transformCommandStore(
         const query = state.audioItems[audioKey].query;
         if (query === undefined) throw new Error("assert query !== undefined");
 
-        const newAccentPhases = await dispatch("FETCH_MORA_DATA", {
+        const newAccentPhrases = await dispatch("FETCH_MORA_DATA", {
           accentPhrases: query.accentPhrases,
           engineId,
           styleId,
@@ -2465,7 +2515,7 @@ export const audioCommandStore = transformCommandStore(
 
         commit("COMMAND_CHANGE_ACCENT", {
           audioKey,
-          accentPhrases: newAccentPhases,
+          accentPhrases: newAccentPhrases,
         });
       },
     },
@@ -2481,7 +2531,7 @@ export const audioCommandStore = transformCommandStore(
         const query = state.audioItems[audioKey].query;
         if (query == undefined) throw new Error("query == undefined");
 
-        const newAccentPhases = await dispatch("FETCH_AND_COPY_MORA_DATA", {
+        const newAccentPhrases = await dispatch("FETCH_AND_COPY_MORA_DATA", {
           accentPhrases: [...query.accentPhrases],
           engineId,
           styleId,
@@ -2490,7 +2540,7 @@ export const audioCommandStore = transformCommandStore(
 
         commit("COMMAND_CHANGE_ACCENT", {
           audioKey,
-          accentPhrases: newAccentPhases,
+          accentPhrases: newAccentPhrases,
         });
       },
     },
@@ -2786,7 +2836,7 @@ export const audioCommandStore = transformCommandStore(
           let body = new TextDecoder("utf-8").decode(
             await window.electron.readFile({ filePath }).then(getValueOrThrow)
           );
-          if (body.indexOf("\ufffd") > -1) {
+          if (body.includes("\ufffd")) {
             body = new TextDecoder("shift-jis").decode(
               await window.electron.readFile({ filePath }).then(getValueOrThrow)
             );
@@ -2813,17 +2863,13 @@ export const audioCommandStore = transformCommandStore(
               })
             );
           }
-          const audioKeys: AudioKey[] = await Promise.all(
-            audioItems.map(() => dispatch("GENERATE_AUDIO_KEY"))
-          );
-          const audioKeyItemPairs = audioItems.map((audioItem, index) => ({
+          const audioKeyItemPairs = audioItems.map((audioItem) => ({
             audioItem,
-            audioKey: audioKeys[index],
+            audioKey: generateAudioKey(),
           }));
           commit("COMMAND_IMPORT_FROM_FILE", {
             audioKeyItemPairs,
           });
-          return audioKeys;
         }
       ),
     },
@@ -2867,7 +2913,7 @@ export const audioCommandStore = transformCommandStore(
           }
 
           for (const text of texts.filter((value) => value != "")) {
-            const audioKey: AudioKey = await dispatch("GENERATE_AUDIO_KEY");
+            const audioKey = generateAudioKey();
             const audioItem = await dispatch("GENERATE_AUDIO_ITEM", {
               text,
               voice,
diff --git a/src/store/audioPlayer.ts b/src/store/audioPlayer.ts
new file mode 100644
index 0000000000..966a6f1429
--- /dev/null
+++ b/src/store/audioPlayer.ts
@@ -0,0 +1,122 @@
+/**
+ * HTMLAudioElement周りの音声再生・停止などを担当する。
+ */
+import { createPartialStore } from "./vuex";
+import { AudioPlayerStoreState, AudioPlayerStoreTypes } from "./type";
+import { AudioKey } from "@/type/preload";
+
+// ユニットテストが落ちるのを回避するための遅延読み込み
+const getAudioElement = (() => {
+  let audioElement: HTMLAudioElement | undefined = undefined;
+  return () => {
+    if (audioElement == undefined) {
+      audioElement = new Audio();
+    }
+    return audioElement;
+  };
+})();
+
+export const audioPlayerStoreState: AudioPlayerStoreState = {
+  nowPlayingAudioKey: undefined,
+};
+
+export const audioPlayerStore = createPartialStore<AudioPlayerStoreTypes>({
+  ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
+    getter: (state) => {
+      return state._activeAudioKey !== undefined
+        ? getAudioElement().currentTime
+        : undefined;
+    },
+  },
+
+  NOW_PLAYING: {
+    getter(state, getters) {
+      const activeAudioKey = getters.ACTIVE_AUDIO_KEY;
+      return (
+        activeAudioKey != undefined &&
+        activeAudioKey === state.nowPlayingAudioKey
+      );
+    },
+  },
+
+  SET_AUDIO_NOW_PLAYING: {
+    mutation(
+      state,
+      { audioKey, nowPlaying }: { audioKey: AudioKey; nowPlaying: boolean }
+    ) {
+      state.nowPlayingAudioKey = nowPlaying ? audioKey : undefined;
+    },
+  },
+
+  SET_AUDIO_SOURCE: {
+    mutation(_, { audioBlob }: { audioBlob: Blob }) {
+      getAudioElement().src = URL.createObjectURL(audioBlob);
+    },
+  },
+
+  PLAY_AUDIO_PLAYER: {
+    async action(
+      { state, commit },
+      { offset, audioKey }: { offset?: number; audioKey?: AudioKey }
+    ) {
+      const audioElement = getAudioElement();
+
+      if (offset !== undefined) {
+        audioElement.currentTime = offset;
+      }
+
+      // 一部ブラウザではsetSinkIdが実装されていないので、その環境では無視する
+      if (audioElement.setSinkId) {
+        audioElement
+          .setSinkId(state.savingSetting.audioOutputDevice)
+          .catch((err) => {
+            const stop = () => {
+              audioElement.pause();
+              audioElement.removeEventListener("canplay", stop);
+            };
+            audioElement.addEventListener("canplay", stop);
+            window.electron.showMessageDialog({
+              type: "error",
+              title: "エラー",
+              message: "再生デバイスが見つかりません",
+            });
+            throw new Error(err);
+          });
+      }
+
+      // 再生終了時にresolveされるPromiseを返す
+      const played = async () => {
+        if (audioKey) {
+          commit("SET_AUDIO_NOW_PLAYING", { audioKey, nowPlaying: true });
+        }
+      };
+      audioElement.addEventListener("play", played);
+
+      let paused: () => void;
+      const audioPlayPromise = new Promise<boolean>((resolve) => {
+        paused = () => {
+          resolve(audioElement.ended);
+        };
+        audioElement.addEventListener("pause", paused);
+      }).finally(async () => {
+        audioElement.removeEventListener("play", played);
+        audioElement.removeEventListener("pause", paused);
+        if (audioKey) {
+          commit("SET_AUDIO_NOW_PLAYING", { audioKey, nowPlaying: false });
+        }
+      });
+
+      audioElement.play();
+
+      return audioPlayPromise;
+    },
+  },
+
+  STOP_AUDIO: {
+    // 停止中でも呼び出して問題ない
+    action() {
+      // PLAY_ でonpause時の処理が設定されているため、pauseするだけで良い
+      getAudioElement().pause();
+    },
+  },
+});
diff --git a/src/store/index.ts b/src/store/index.ts
index fb99766866..eca0e6dbba 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -17,6 +17,7 @@ import {
   audioCommandStoreState,
   getCharacterInfo,
 } from "./audio";
+import { audioPlayerStoreState, audioPlayerStore } from "./audioPlayer";
 import { projectStoreState, projectStore } from "./project";
 import { uiStoreState, uiStore } from "./ui";
 import { settingStoreState, settingStore } from "./setting";
@@ -349,6 +350,7 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   state: {
     ...uiStoreState,
     ...audioStoreState,
+    ...audioPlayerStoreState,
     ...commandStoreState,
     ...engineStoreState,
     ...projectStoreState,
@@ -363,6 +365,7 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   getters: {
     ...uiStore.getters,
     ...audioStore.getters,
+    ...audioPlayerStore.getters,
     ...commandStore.getters,
     ...engineStore.getters,
     ...projectStore.getters,
@@ -377,6 +380,7 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   mutations: {
     ...uiStore.mutations,
     ...audioStore.mutations,
+    ...audioPlayerStore.mutations,
     ...commandStore.mutations,
     ...engineStore.mutations,
     ...projectStore.mutations,
@@ -391,6 +395,7 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   actions: {
     ...uiStore.actions,
     ...audioStore.actions,
+    ...audioPlayerStore.actions,
     ...engineStore.actions,
     ...commandStore.actions,
     ...projectStore.actions,
diff --git a/src/store/project.ts b/src/store/project.ts
index 6209ea4337..3c3053ee13 100755
--- a/src/store/project.ts
+++ b/src/store/project.ts
@@ -1,6 +1,6 @@
 import semver from "semver";
 import { z } from "zod";
-import { buildProjectFileName, getBaseName } from "./utility";
+import { getBaseName } from "./utility";
 import { createPartialStore } from "./vuex";
 import { createUILockAction } from "@/store/ui";
 import { AudioItem, ProjectStoreState, ProjectStoreTypes } from "@/store/type";
@@ -210,11 +210,11 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
               const audioItem = projectData.audioItems[audioItemsKey];
               if (audioItem.characterIndex != null) {
                 if (audioItem.characterIndex == 0) {
-                  // 四国めたん 0 -> 四国めたん(あまあま) 0
+                  // 四国めたん 0 -> 四国めたん（あまあま） 0
                   audioItem.speaker = 0;
                 }
                 if (audioItem.characterIndex == 1) {
-                  // ずんだもん 1 -> ずんだもん(あまあま) 1
+                  // ずんだもん 1 -> ずんだもん（あまあま） 1
                   audioItem.speaker = 1;
                 }
                 delete audioItem.characterIndex;
@@ -393,7 +393,7 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
 
             if (!filePath) {
               // if new project: use generated name
-              defaultPath = buildProjectFileName(context.state, "vvproj");
+              defaultPath = `${context.getters.DEFAULT_PROJECT_FILE_BASE_NAME}.vvproj`;
             } else {
               // if saveAs for existing project: use current project path
               defaultPath = filePath;
diff --git a/src/store/setting.ts b/src/store/setting.ts
index 273c5fa1bc..47e9481927 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -50,6 +50,8 @@ export const settingStoreState: SettingStoreState = {
     enableInterrogativeUpspeak: false,
     enableMorphing: false,
     enableMultiEngine: false,
+    enableMultiSelect: false,
+    shouldKeepTuningOnTextChange: false,
   },
   splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
   splitterPosition: {
@@ -246,6 +248,20 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
           `${r}, ${g}, ${b}`
         );
       }
+      const mixColors: ThemeColorType[][] = [
+        ["primary", "background"],
+        ["warning", "background"],
+      ];
+      for (const [color1, color2] of mixColors) {
+        const color1Rgb = colors.hexToRgb(theme.colors[color1]);
+        const color2Rgb = colors.hexToRgb(theme.colors[color2]);
+        const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
+        const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
+        const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
+        const propertyName = `--color-mix-${color1}-${color2}-rgb`;
+        const cssColor = `${r}, ${g}, ${b}`;
+        document.documentElement.style.setProperty(propertyName, cssColor);
+      }
       Dark.set(theme.isDark);
       setCssVar("primary", theme.colors["primary"]);
       setCssVar("warning", theme.colors["warning"]);
@@ -526,11 +542,11 @@ export const parseCombo = (event: KeyboardEvent): string => {
   if (event.key === " ") {
     recordedCombo += "Space";
   } else {
-    if (["Control", "Shift", "Alt", "Meta"].indexOf(event.key) == -1) {
+    if (["Control", "Shift", "Alt", "Meta"].includes(event.key)) {
+      recordedCombo = recordedCombo.slice(0, -1);
+    } else {
       recordedCombo +=
         event.key.length > 1 ? event.key : event.key.toUpperCase();
-    } else {
-      recordedCombo = recordedCombo.slice(0, -1);
     }
   }
   return recordedCombo;
diff --git a/src/store/type.ts b/src/store/type.ts
index 9360c3a5c7..bc29153f71 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -1,5 +1,4 @@
 import { Patch } from "immer";
-import { QVueGlobals } from "quasar";
 import {
   MutationTree,
   MutationsBase,
@@ -20,7 +19,6 @@ import {
 import {
   CharacterInfo,
   DefaultStyleId,
-  Encoding as EncodingType,
   AcceptRetrieveTelemetryStatus,
   AcceptTermsStatus,
   HotkeySetting,
@@ -52,6 +50,12 @@ import {
   PresetKey,
 } from "@/type/preload";
 import { IEngineConnectorFactory } from "@/infrastructures/EngineConnector";
+import {
+  CommonDialogOptions,
+  CommonDialogResult,
+  NotifyAndNotShowAgainButtonOption,
+  LoadingScreenOption,
+} from "@/components/Dialog";
 
 /**
  * エディタ用のAudioQuery
@@ -69,7 +73,6 @@ export type AudioItem = {
 };
 
 export type AudioState = {
-  nowPlaying: boolean;
   nowGenerating: boolean;
 };
 
@@ -114,8 +117,6 @@ export type StoreType<T, U extends "getter" | "mutation" | "action"> = {
     : never;
 };
 
-export type QuasarDialog = QVueGlobals["dialog"];
-
 /*
  * Audio Store Types
  */
@@ -123,12 +124,13 @@ export type QuasarDialog = QVueGlobals["dialog"];
 export type AudioStoreState = {
   characterInfos: Record<EngineId, CharacterInfo[]>;
   morphableTargetsInfo: Record<EngineId, MorphableTargetInfoTable>;
-  audioKeyInitializingSpeaker?: string;
+  audioKeysWithInitializingSpeaker: AudioKey[];
   audioItems: Record<AudioKey, AudioItem>;
   audioKeys: AudioKey[];
   audioStates: Record<AudioKey, AudioState>;
   _activeAudioKey?: AudioKey;
-  audioPlayStartPoint?: number;
+  _selectedAudioKeys?: AudioKey[];
+  _audioPlayStartPoint?: number;
   nowPlayingContinuously: boolean;
 };
 
@@ -137,15 +139,11 @@ export type AudioStoreTypes = {
     getter: AudioKey | undefined;
   };
 
-  HAVE_AUDIO_QUERY: {
-    getter(audioKey: AudioKey): boolean;
-  };
-
-  IS_ACTIVE: {
-    getter(audioKey: AudioKey): boolean;
+  SELECTED_AUDIO_KEYS: {
+    getter: AudioKey[];
   };
 
-  ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
+  AUDIO_PLAY_START_POINT: {
     getter: number | undefined;
   };
 
@@ -169,20 +167,16 @@ export type AudioStoreTypes = {
     getter: CharacterInfo[] | undefined;
   };
 
-  GENERATE_AUDIO_KEY: {
-    action(): AudioKey;
-  };
-
   SETUP_SPEAKER: {
     action(payload: {
-      audioKey: AudioKey;
+      audioKeys: AudioKey[];
       engineId: EngineId;
       styleId: StyleId;
     }): void;
   };
 
-  SET_AUDIO_KEY_INITIALIZING_SPEAKER: {
-    mutation: { audioKey?: AudioKey };
+  SET_AUDIO_KEYS_WITH_INITIALIZING_SPEAKER: {
+    mutation: { audioKeys: AudioKey[] };
   };
 
   SET_ACTIVE_AUDIO_KEY: {
@@ -190,15 +184,16 @@ export type AudioStoreTypes = {
     action(payload: { audioKey?: AudioKey }): void;
   };
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation: { audioKeys?: AudioKey[] };
+    action(payload: { audioKeys?: AudioKey[] }): void;
+  };
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation: { startPoint?: number };
     action(payload: { startPoint?: number }): void;
   };
 
-  SET_AUDIO_NOW_PLAYING: {
-    mutation: { audioKey: AudioKey; nowPlaying: boolean };
-  };
-
   SET_AUDIO_NOW_GENERATING: {
     mutation: { audioKey: AudioKey; nowGenerating: boolean };
   };
@@ -385,6 +380,14 @@ export type AudioStoreTypes = {
     }): Promise<AccentPhrase[]>;
   };
 
+  DEFAULT_PROJECT_FILE_BASE_NAME: {
+    getter: string;
+  };
+
+  DEFAULT_AUDIO_FILE_NAME: {
+    getter(audioKey: AudioKey): string;
+  };
+
   GENERATE_LAB: {
     action(payload: {
       audioKey: AudioKey;
@@ -412,14 +415,12 @@ export type AudioStoreTypes = {
     action(payload: {
       audioKey: AudioKey;
       filePath?: string;
-      encoding?: EncodingType;
     }): SaveResultObject;
   };
 
   GENERATE_AND_SAVE_ALL_AUDIO: {
     action(payload: {
       dirPath?: string;
-      encoding?: EncodingType;
       callback?: (finishedCount: number, totalCount: number) => void;
     }): SaveResultObject[] | undefined;
   };
@@ -427,16 +428,12 @@ export type AudioStoreTypes = {
   GENERATE_AND_CONNECT_AND_SAVE_AUDIO: {
     action(payload: {
       filePath?: string;
-      encoding?: EncodingType;
       callback?: (finishedCount: number, totalCount: number) => void;
     }): SaveResultObject | undefined;
   };
 
   CONNECT_AND_EXPORT_TEXT: {
-    action(payload: {
-      filePath?: string;
-      encoding?: EncodingType;
-    }): SaveResultObject | undefined;
+    action(payload: { filePath?: string }): SaveResultObject | undefined;
   };
 
   PLAY_AUDIO: {
@@ -444,15 +441,7 @@ export type AudioStoreTypes = {
   };
 
   PLAY_AUDIO_BLOB: {
-    action(payload: {
-      audioBlob: Blob;
-      audioElem: HTMLAudioElement;
-      audioKey?: AudioKey;
-    }): boolean;
-  };
-
-  STOP_AUDIO: {
-    action(payload: { audioKey: AudioKey }): void;
+    action(payload: { audioBlob: Blob; audioKey?: AudioKey }): boolean;
   };
 
   SET_AUDIO_PRESET_KEY: {
@@ -465,18 +454,6 @@ export type AudioStoreTypes = {
   PLAY_CONTINUOUSLY_AUDIO: {
     action(): void;
   };
-
-  STOP_CONTINUOUSLY_AUDIO: {
-    action(): void;
-  };
-
-  OPEN_TEXT_EDIT_CONTEXT_MENU: {
-    action(): void;
-  };
-
-  CHECK_FILE_EXISTS: {
-    action(payload: { file: string }): Promise<boolean>;
-  };
 };
 
 /*
@@ -510,6 +487,10 @@ export type AudioCommandStoreTypes = {
     action(payload: { audioKeys: AudioKey[] }): void;
   };
 
+  COMMAND_CHANGE_DISPLAY_TEXT: {
+    action(payload: { audioKey: AudioKey; text: string }): void;
+  };
+
   COMMAND_CHANGE_AUDIO_TEXT: {
     mutation: { audioKey: AudioKey; text: string } & (
       | { update: "Text" }
@@ -519,8 +500,8 @@ export type AudioCommandStoreTypes = {
     action(payload: { audioKey: AudioKey; text: string }): void;
   };
 
-  COMMAND_CHANGE_VOICE: {
-    mutation: { audioKey: AudioKey; voice: Voice } & (
+  COMMAND_MULTI_CHANGE_VOICE: {
+    mutation: { audioKeys: AudioKey[]; voice: Voice } & (
       | { update: "RollbackStyleId" }
       | {
           update: "AccentPhrases";
@@ -531,7 +512,7 @@ export type AudioCommandStoreTypes = {
           query: AudioQuery;
         }
     );
-    action(payload: { audioKey: AudioKey; voice: Voice }): void;
+    action(payload: { audioKeys: AudioKey[]; voice: Voice }): void;
   };
 
   COMMAND_CHANGE_ACCENT: {
@@ -553,6 +534,10 @@ export type AudioCommandStoreTypes = {
     ): void;
   };
 
+  COMMAND_DELETE_ACCENT_PHRASE: {
+    action(payload: { audioKey: AudioKey; accentPhraseIndex: number }): void;
+  };
+
   COMMAND_CHANGE_SINGLE_ACCENT_PHRASE: {
     mutation: { audioKey: AudioKey; accentPhrases: AccentPhrase[] };
     action(payload: {
@@ -671,7 +656,7 @@ export type AudioCommandStoreTypes = {
     mutation: {
       audioKeyItemPairs: { audioItem: AudioItem; audioKey: AudioKey }[];
     };
-    action(payload: { filePath?: string }): string[] | void;
+    action(payload: { filePath?: string }): void;
   };
 
   COMMAND_PUT_TEXTS: {
@@ -687,6 +672,40 @@ export type AudioCommandStoreTypes = {
   };
 };
 
+/*
+ * Audio Player Store Types
+ */
+
+export type AudioPlayerStoreState = {
+  nowPlayingAudioKey?: AudioKey;
+};
+
+export type AudioPlayerStoreTypes = {
+  ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
+    getter: number | undefined;
+  };
+
+  NOW_PLAYING: {
+    getter: boolean;
+  };
+
+  SET_AUDIO_NOW_PLAYING: {
+    mutation: { audioKey: AudioKey; nowPlaying: boolean };
+  };
+
+  SET_AUDIO_SOURCE: {
+    mutation: { audioBlob: Blob };
+  };
+
+  PLAY_AUDIO_PLAYER: {
+    action(payload: { offset?: number; audioKey?: AudioKey }): Promise<boolean>;
+  };
+
+  STOP_AUDIO: {
+    action(): void;
+  };
+};
+
 /*
  * Command Store Types
  */
@@ -1133,6 +1152,7 @@ export type SettingStoreTypes = {
 export type UiStoreState = {
   uiLockCount: number;
   dialogLockCount: number;
+  reloadingLock: boolean;
   inheritAudioInfo: boolean;
   activePointScrollMode: ActivePointScrollMode;
   isHelpDialogOpen: boolean;
@@ -1189,6 +1209,11 @@ export type UiStoreTypes = {
     action(): void;
   };
 
+  LOCK_RELOADING: {
+    mutation: undefined;
+    action(): void;
+  };
+
   SHOULD_SHOW_PANES: {
     getter: boolean;
   };
@@ -1220,6 +1245,30 @@ export type UiStoreTypes = {
     }): void;
   };
 
+  SHOW_ALERT_DIALOG: {
+    action(payload: CommonDialogOptions["alert"]): CommonDialogResult;
+  };
+
+  SHOW_CONFIRM_DIALOG: {
+    action(payload: CommonDialogOptions["confirm"]): CommonDialogResult;
+  };
+
+  SHOW_WARNING_DIALOG: {
+    action(payload: CommonDialogOptions["warning"]): CommonDialogResult;
+  };
+
+  SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON: {
+    action(payload: NotifyAndNotShowAgainButtonOption): void;
+  };
+
+  SHOW_LOADING_SCREEN: {
+    action(payload: LoadingScreenOption): void;
+  };
+
+  HIDE_ALL_LOADING_SCREEN: {
+    action(): void;
+  };
+
   ON_VUEX_READY: {
     mutation: void;
     action(): void;
@@ -1274,10 +1323,17 @@ export type UiStoreTypes = {
   };
 
   CHECK_EDITED_AND_NOT_SAVE: {
-    action(): Promise<void>;
+    action(
+      obj:
+        | { closeOrReload: "close" }
+        | {
+            closeOrReload: "reload";
+            isMultiEngineOffMode?: boolean;
+          }
+    ): Promise<void>;
   };
 
-  RESTART_APP: {
+  RELOAD_APP: {
     action(obj: { isMultiEngineOffMode?: boolean }): void;
   };
 
@@ -1426,6 +1482,7 @@ export type ProxyStoreTypes = {
  */
 
 export type State = AudioStoreState &
+  AudioPlayerStoreState &
   AudioCommandStoreState &
   CommandStoreState &
   EngineStoreState &
@@ -1438,6 +1495,7 @@ export type State = AudioStoreState &
   ProxyStoreState;
 
 type AllStoreTypes = AudioStoreTypes &
+  AudioPlayerStoreTypes &
   AudioCommandStoreTypes &
   CommandStoreTypes &
   EngineStoreTypes &
diff --git a/src/store/ui.ts b/src/store/ui.ts
index 9ee1c03d07..e469131433 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -8,6 +8,17 @@ import {
 } from "./type";
 import { createPartialStore } from "./vuex";
 import { ActivePointScrollMode } from "@/type/preload";
+import {
+  CommonDialogOptions,
+  LoadingScreenOption,
+  NotifyAndNotShowAgainButtonOption,
+  hideAllLoadingScreen,
+  showAlertDialog,
+  showConfirmDialog,
+  showLoadingScreen,
+  showNotifyAndNotShowAgainButton,
+  showWarningDialog,
+} from "@/components/Dialog";
 
 export function createUILockAction<S, A extends ActionsBase, K extends keyof A>(
   action: (
@@ -36,6 +47,7 @@ export function withProgress<T>(
 export const uiStoreState: UiStoreState = {
   uiLockCount: 0,
   dialogLockCount: 0,
+  reloadingLock: false,
   inheritAudioInfo: true,
   activePointScrollMode: "OFF",
   isHelpDialogOpen: false,
@@ -125,6 +137,18 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  /**
+   * 再読み込み中。UNLOCKされることはない。
+   */
+  LOCK_RELOADING: {
+    mutation(state) {
+      state.reloadingLock = true;
+    },
+    action({ commit }) {
+      commit("LOCK_RELOADING");
+    },
+  },
+
   SHOULD_SHOW_PANES: {
     getter(_, getters) {
       return getters.ACTIVE_AUDIO_KEY != undefined;
@@ -171,6 +195,48 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  SHOW_ALERT_DIALOG: {
+    action: createUILockAction(
+      async (_, payload: { title: string; message: string; ok?: string }) => {
+        return await showAlertDialog(payload);
+      }
+    ),
+  },
+
+  SHOW_CONFIRM_DIALOG: {
+    action: createUILockAction(
+      async (_, payload: CommonDialogOptions["confirm"]) => {
+        return await showConfirmDialog(payload);
+      }
+    ),
+  },
+
+  SHOW_WARNING_DIALOG: {
+    action: createUILockAction(
+      async (_, payload: CommonDialogOptions["warning"]) => {
+        return await showWarningDialog(payload);
+      }
+    ),
+  },
+
+  SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON: {
+    action({ dispatch }, payload: NotifyAndNotShowAgainButtonOption) {
+      showNotifyAndNotShowAgainButton({ dispatch }, payload);
+    },
+  },
+
+  SHOW_LOADING_SCREEN: {
+    action(_, payload: LoadingScreenOption) {
+      showLoadingScreen(payload);
+    },
+  },
+
+  HIDE_ALL_LOADING_SCREEN: {
+    action() {
+      hideAllLoadingScreen();
+    },
+  },
+
   HYDRATE_UI_STORE: {
     async action({ commit }) {
       commit("SET_INHERIT_AUDIOINFO", {
@@ -303,7 +369,12 @@ export const uiStore = createPartialStore<UiStoreTypes>({
   },
 
   CHECK_EDITED_AND_NOT_SAVE: {
-    async action({ dispatch, getters }) {
+    /**
+     * プロジェクトファイル未保存の場合、保存するかどうかを確認する。
+     * 保存後にウィンドウを閉じるか、アプリを再読み込みする。
+     * 保存がキャンセルされた場合は何もしない。
+     */
+    async action({ dispatch, getters }, obj) {
       if (getters.IS_EDITED) {
         const result = await dispatch("SAVE_OR_DISCARD_PROJECT_FILE", {});
         if (result == "canceled") {
@@ -311,16 +382,28 @@ export const uiStore = createPartialStore<UiStoreTypes>({
         }
       }
 
-      window.electron.closeWindow();
+      if (obj.closeOrReload == "close") {
+        window.electron.closeWindow();
+      } else if (obj.closeOrReload == "reload") {
+        await dispatch("RELOAD_APP", {
+          isMultiEngineOffMode: obj.isMultiEngineOffMode,
+        });
+      }
     },
   },
 
-  RESTART_APP: {
-    action(_, { isMultiEngineOffMode }: { isMultiEngineOffMode?: boolean }) {
-      window.electron.restartApp({
-        isMultiEngineOffMode: !!isMultiEngineOffMode,
-      });
-    },
+  RELOAD_APP: {
+    action: createUILockAction(
+      async (
+        { dispatch },
+        { isMultiEngineOffMode }: { isMultiEngineOffMode?: boolean }
+      ) => {
+        await dispatch("LOCK_RELOADING");
+        await window.electron.reloadApp({
+          isMultiEngineOffMode: !!isMultiEngineOffMode,
+        });
+      }
+    ),
   },
 
   START_PROGRESS: {
diff --git a/src/store/utility.ts b/src/store/utility.ts
index 6a84bf057e..307b9d247c 100644
--- a/src/store/utility.ts
+++ b/src/store/utility.ts
@@ -1,7 +1,14 @@
 import path from "path";
 import { Platform } from "quasar";
-import { State } from "@/store/type";
 import { ToolbarButtonTagType, isMac } from "@/type/preload";
+import { AccentPhrase } from "@/openapi";
+
+export const DEFAULT_STYLE_NAME = "ノーマル";
+
+export const formatCharacterStyleName = (
+  characterName: string,
+  styleName = DEFAULT_STYLE_NAME
+) => `${characterName}（${styleName}）`;
 
 export function sanitizeFileName(fileName: string): string {
   // \x00 - \x1f: ASCII 制御文字
@@ -25,28 +32,6 @@ export function sanitizeFileName(fileName: string): string {
   return fileName.replace(sanitizer, "");
 }
 
-export function buildProjectFileName(state: State, extension?: string): string {
-  const headItemText = state.audioItems[state.audioKeys[0]].text;
-
-  const tailItemText =
-    state.audioItems[state.audioKeys[state.audioKeys.length - 1]].text;
-
-  const headTailItemText =
-    headItemText !== tailItemText
-      ? headItemText + "..." + tailItemText
-      : headItemText;
-
-  let defaultFileNameStem = sanitizeFileName(headTailItemText);
-
-  if (defaultFileNameStem === "") {
-    defaultFileNameStem = "Untitled";
-  }
-
-  return extension
-    ? `${defaultFileNameStem}.${extension}`
-    : defaultFileNameStem;
-}
-
 export const replaceTagIdToTagString = {
   index: "連番",
   characterName: "キャラ",
@@ -58,13 +43,14 @@ const replaceTagStringToTagId: { [tagString: string]: string } = Object.entries(
   replaceTagIdToTagString
 ).reduce((prev, [k, v]) => ({ ...prev, [v]: k }), {});
 
-export const DEFAULT_FILE_NAME_TEMPLATE =
-  "$連番$_$キャラ$（$スタイル$）_$テキスト$.wav";
-const DEFAULT_FILE_NAME_VARIABLES = {
+export const DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE =
+  "$連番$_$キャラ$（$スタイル$）_$テキスト$";
+export const DEFAULT_AUDIO_FILE_NAME_TEMPLATE = `${DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE}.wav`;
+const DEFAULT_AUDIO_FILE_NAME_VARIABLES = {
   index: 0,
   characterName: "四国めたん",
   text: "テキストテキストテキスト",
-  styleName: "ノーマル",
+  styleName: DEFAULT_STYLE_NAME,
   date: currentDateString(),
 };
 
@@ -92,29 +78,68 @@ function replaceTag(
   return result;
 }
 
-export function skipReadingPart(text: string): string {
+export function extractExportText(text: string): string {
+  return skipReadingPart(skipMemoText(text));
+}
+export function extractYomiText(text: string): string {
+  return skipWritingPart(skipMemoText(text));
+}
+function skipReadingPart(text: string): string {
   // テキスト内の全ての{漢字|かんじ}パターンを探し、漢字部分だけを残す
   return text.replace(/\{([^|]*)\|([^}]*)\}/g, "$1");
 }
-
-export function skipWritingPart(text: string): string {
+function skipWritingPart(text: string): string {
   // テキスト内の全ての{漢字|かんじ}パターンを探し、かんじ部分だけを残す
   return text.replace(/\{([^|]*)\|([^}]*)\}/g, "$2");
 }
-export function skipMemoText(targettext: string): string {
+function skipMemoText(targettext: string): string {
   // []をスキップ
   const resolvedText = targettext.replace(/\[.*?\]/g, "");
   return resolvedText;
 }
 
-export function buildFileNameFromRawData(
-  fileNamePattern = DEFAULT_FILE_NAME_TEMPLATE,
-  vars = DEFAULT_FILE_NAME_VARIABLES
+/**
+ * ２つのAccentPhrasesのテキスト内容が異なるかどうかを判定
+ */
+export function isAccentPhrasesTextDifferent(
+  beforeAccent: AccentPhrase[],
+  afterAccent: AccentPhrase[]
+): boolean {
+  if (beforeAccent.length !== afterAccent.length) return true;
+
+  for (let accentIndex = 0; accentIndex < beforeAccent.length; accentIndex++) {
+    if (
+      beforeAccent[accentIndex].moras.length !==
+        afterAccent[accentIndex].moras.length ||
+      beforeAccent[accentIndex].pauseMora?.text !==
+        afterAccent[accentIndex].pauseMora?.text
+    )
+      return true;
+
+    for (
+      let moraIndex = 0;
+      moraIndex < beforeAccent[accentIndex].moras.length;
+      moraIndex++
+    ) {
+      if (
+        beforeAccent[accentIndex].moras[moraIndex].text !==
+        afterAccent[accentIndex].moras[moraIndex].text
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+export function buildAudioFileNameFromRawData(
+  fileNamePattern = DEFAULT_AUDIO_FILE_NAME_TEMPLATE,
+  vars = DEFAULT_AUDIO_FILE_NAME_VARIABLES
 ): string {
   let pattern = fileNamePattern;
   if (pattern === "") {
     // ファイル名指定のオプションが初期値("")ならデフォルトテンプレートを使う
-    pattern = DEFAULT_FILE_NAME_TEMPLATE;
+    pattern = DEFAULT_AUDIO_FILE_NAME_TEMPLATE;
   }
 
   let text = sanitizeFileName(vars.text);
@@ -131,10 +156,10 @@ export function buildFileNameFromRawData(
   const date = currentDateString();
 
   return replaceTag(pattern, {
-    index,
-    characterName,
-    styleName: styleName,
     text,
+    characterName,
+    index,
+    styleName,
     date,
   });
 }
@@ -219,3 +244,12 @@ export const isOnCommandOrCtrlKeyDown = (event: {
   metaKey: boolean;
   ctrlKey: boolean;
 }) => (isMac && event.metaKey) || (!isMac && event.ctrlKey);
+
+/**
+ * AccentPhraseのtextを結合して返します。
+ */
+export const joinTextsInAccentPhrases = (
+  accentPhrase: AccentPhrase
+): string => {
+  return accentPhrase.moras.map((mora) => mora.text).join("");
+};
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index cdae833cb6..02912d5603 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,6 @@
 @use './variables' as vars;
 @use './colors' as colors;
-@import './fonts';
+@import "./fonts";
 
 // 優先度を強引に上げる
 body:not(#dummy) {
@@ -24,17 +24,17 @@ img {
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
-  background-color: rgba(colors.$primary-light-rgb, 0.2);
+  background-color: rgba(colors.$primary-rgb, 0.2);
   border-radius: 5px;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(colors.$primary-light-rgb, 0.6);
+  background-color: rgba(colors.$primary-rgb, 0.6);
   border-radius: 5px;
   &:hover {
-    background-color: rgba(colors.$primary-light-rgb, 0.7);
+    background-color: rgba(colors.$primary-rgb, 0.7);
   }
   &:active {
-    background-color: rgba(colors.$primary-light-rgb, 0.8);
+    background-color: rgba(colors.$primary-rgb, 0.8);
   }
 }
 ::-webkit-scrollbar-corner {
@@ -102,7 +102,9 @@ img {
   background: transparent; // デフォルトの設定だと全画面ダイアログが出る際に黒背景がちらつく
 }
 
-// トースト通知内にあるボタン
+// トースト通知と通知内にあるボタン
+.text-toast-display,
+.text-toast-display-warning,
 .q-notification__actions .q-btn {
   font-weight: bold;
 }
@@ -168,11 +170,11 @@ img {
 }
 
 // Quasar用のカラー設定
-.text-primary-light {
-  color: colors.$primary-light;
+.text-primary {
+  color: colors.$primary;
 }
-.bg-primary-light {
-  background: colors.$primary-light;
+.bg-primary {
+  background: colors.$primary;
 }
 
 .text-display {
@@ -247,3 +249,13 @@ img {
 .text-toast-button-display {
   color: colors.$toast-button-display;
 }
+
+.bg-toast-warning {
+  background: colors.$toast-warning;
+}
+.text-toast-display-warning {
+  color: colors.$toast-display-warning;
+}
+.text-toast-button-display-warning {
+  color: colors.$toast-button-display-warning;
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index e0c6d372c7..6e67988c54 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,9 +1,6 @@
 $primary: var(--color-primary);
 $primary-rgb: var(--color-primary-rgb);
 
-$primary-light: var(--color-primary-light);
-$primary-light-rgb: var(--color-primary-light-rgb);
-
 $display: var(--color-display);
 $display-rgb: var(--color-display-rgb);
 
@@ -45,9 +42,13 @@ $active-point-hover-rgb: var(--color-active-point-hover-rgb);
   --color-splitter: var(--color-primary);
   --color-splitter-rgb: var(--color-primary-rgb);
 
-  --color-toast: rgba(var(--color-primary-light-rgb), 0.4);
+  --color-toast: rgba(var(--color-mix-primary-background-rgb), 0.85);
   --color-toast-display: var(--color-display);
   --color-toast-button-display: rgba(var(--color-display-rgb), 0.6);
+
+  --color-toast-warning: rgba(var(--color-mix-warning-background-rgb), 0.85);
+  --color-toast-display-warning: var(--color-display);
+  --color-toast-button-display-warning: rgba(var(--color-display-rgb), 0.6);
 }
 
 :root[is-dark-theme="true"] {
@@ -63,9 +64,13 @@ $active-point-hover-rgb: var(--color-active-point-hover-rgb);
   --color-splitter: var(--color-surface);
   --color-splitter-rgb: var(--color-surface-rgb);
 
-  --color-toast: rgba(var(--color-primary-light-rgb), 0.4);
+  --color-toast: rgba(var(--color-mix-primary-background-rgb), 0.8);
   --color-toast-display: var(--color-display);
   --color-toast-button-display: var(--color-primary);
+
+  --color-toast-warning: rgba(var(--color-mix-warning-background-rgb), 0.85);
+  --color-toast-display-warning: var(--color-display);
+  --color-toast-button-display-warning: var(--color-warning);
 }
 
 $toolbar: var(--color-toolbar);
@@ -86,3 +91,7 @@ $warning-rgb: var(--color-warning-rgb);
 $toast: var(--color-toast);
 $toast-display: var(--color-toast-display);
 $toast-button-display: var(--color-toast-button-display);
+
+$toast-warning: var(--color-toast-warning);
+$toast-display-warning: var(--color-toast-display-warning);
+$toast-button-display-warning: var(--color-toast-button-display-warning);
diff --git a/src/type/globals.d.ts b/src/type/globals.d.ts
index 3e7c812205..4d8e61fcaf 100644
--- a/src/type/globals.d.ts
+++ b/src/type/globals.d.ts
@@ -16,4 +16,11 @@ declare global {
       voicevoxCore: VoicevoxCorePlugin;
     };
   }
+
+  interface Navigator {
+    // navigator.userAgentDataを認識してくれないため
+    userAgentData: {
+      readonly platform: string;
+    };
+  }
 }
diff --git a/src/type/ipc.ts b/src/type/ipc.ts
index 348a6cf3a2..24e76f342b 100644
--- a/src/type/ipc.ts
+++ b/src/type/ipc.ts
@@ -149,11 +149,6 @@ export type IpcIHData = {
     return: MessageBoxReturnValue;
   };
 
-  OPEN_TEXT_EDIT_CONTEXT_MENU: {
-    args: [];
-    return: void;
-  };
-
   IS_AVAILABLE_GPU_MODE: {
     args: [];
     return: boolean;
@@ -194,6 +189,11 @@ export type IpcIHData = {
     return: void;
   };
 
+  OPEN_LOG_DIRECTORY: {
+    args: [];
+    return: void;
+  };
+
   ENGINE_INFOS: {
     args: [];
     return: EngineInfo[];
@@ -287,8 +287,8 @@ export type IpcIHData = {
     return: EngineDirValidationResult;
   };
 
-  RESTART_APP: {
-    args: [obj: { isMultiEngineOffMode: boolean }];
+  RELOAD_APP: {
+    args: [obj: { isMultiEngineOffMode?: boolean }];
     return: void;
   };
 
@@ -348,7 +348,12 @@ export type IpcSOData = {
   };
 
   CHECK_EDITED_AND_NOT_SAVE: {
-    args: [];
+    args: [
+      obj: {
+        closeOrReload: "close" | "reload";
+        isMultiEngineOffMode?: boolean;
+      }
+    ];
     return: void;
   };
 
diff --git a/src/type/preload.ts b/src/type/preload.ts
index f70a5489a3..acaea77508 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -3,12 +3,29 @@ import { IpcSOData } from "./ipc";
 import { AltPortInfos } from "@/store/type";
 import { Result } from "@/type/result";
 
+export const isProduction = import.meta.env.MODE === "production";
 export const isElectron = import.meta.env.VITE_TARGET === "electron";
 export const isBrowser = import.meta.env.VITE_TARGET === "browser";
-export const isMac =
-  typeof process === "undefined"
-    ? navigator.userAgent.includes("Mac")
-    : process.platform === "darwin";
+
+// electronのメイン・レンダラープロセス内、ブラウザ内どこでも使用可能なmacOS判定
+function checkIsMac(): boolean {
+  let isMac: boolean | undefined = undefined;
+  if (process?.platform) {
+    // electronのメインプロセス用
+    isMac = process.platform === "darwin";
+  } else if (navigator?.userAgentData) {
+    // electronのレンダラープロセス用、Chrome系統が実装する実験的機能
+    isMac = navigator.userAgentData.platform.toLowerCase().includes("mac");
+  } else if (navigator?.platform) {
+    // ブラウザ用、非推奨機能
+    isMac = navigator.platform.toLowerCase().includes("mac");
+  } else {
+    // ブラウザ用、不正確
+    isMac = navigator.userAgent.toLowerCase().includes("mac");
+  }
+  return isMac;
+}
+export const isMac = checkIsMac();
 
 export const engineIdSchema = z.string().brand<"EngineId">();
 export type EngineId = z.infer<typeof engineIdSchema>;
@@ -184,7 +201,6 @@ export interface Sandbox {
     buffer: ArrayBuffer;
   }): Promise<Result<undefined>>;
   readFile(obj: { filePath: string }): Promise<Result<ArrayBuffer>>;
-  openTextEditContextMenu(): Promise<void>;
   isAvailableGPUMode(): Promise<boolean>;
   isMaximizedWindow(): Promise<boolean>;
   onReceivedIPCMsg<T extends keyof IpcSOData>(
@@ -197,6 +213,7 @@ export interface Sandbox {
   logError(...params: unknown[]): void;
   logWarn(...params: unknown[]): void;
   logInfo(...params: unknown[]): void;
+  openLogDirectory(): void;
   engineInfos(): Promise<EngineInfo[]>;
   restartEngine(engineId: EngineId): Promise<void>;
   openEngineDirectory(engineId: EngineId): void;
@@ -222,7 +239,7 @@ export interface Sandbox {
   installVvppEngine(path: string): Promise<boolean>;
   uninstallVvppEngine(engineId: EngineId): Promise<boolean>;
   validateEngineDir(engineDir: string): Promise<EngineDirValidationResult>;
-  restartApp(obj: { isMultiEngineOffMode: boolean }): void;
+  reloadApp(obj: { isMultiEngineOffMode?: boolean }): Promise<void>;
 }
 
 export type AppInfos = {
@@ -450,7 +467,6 @@ export type MoraDataType =
 
 export type ThemeColorType =
   | "primary"
-  | "primary-light"
   | "display"
   | "display-on-primary"
   | "display-hyperlink"
@@ -482,6 +498,8 @@ export const experimentalSettingSchema = z.object({
   enableInterrogativeUpspeak: z.boolean().default(false),
   enableMorphing: z.boolean().default(false),
   enableMultiEngine: z.boolean().default(false),
+  enableMultiSelect: z.boolean().default(false),
+  shouldKeepTuningOnTextChange: z.boolean().default(false),
 });
 
 export type ExperimentalSetting = z.infer<typeof experimentalSettingSchema>;
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 4cd26628c4..3e39cabcec 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -9,8 +9,16 @@
         <progress-dialog />
 
         <!-- TODO: 複数エンジン対応 -->
+        <!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
+        <div v-if="allEngineState === 'FAILED_STARTING'" class="waiting-engine">
+          <div>
+            エンジンの起動に失敗しました。エンジンの再起動をお試しください。
+          </div>
+        </div>
         <div
-          v-if="!isCompletedInitialStartup || allEngineState === 'STARTING'"
+          v-else-if="
+            !isCompletedInitialStartup || allEngineState === 'STARTING'
+          "
           class="waiting-engine"
         >
           <div>
@@ -29,9 +37,10 @@
               <q-btn
                 v-if="isMultipleEngine"
                 outline
-                @click="restartAppWithMultiEngineOffMode"
+                :disable="reloadingLocked"
+                @click="reloadAppWithMultiEngineOffMode"
               >
-                マルチエンジンをオフにして再起動する</q-btn
+                マルチエンジンをオフにして再読み込みする</q-btn
               >
               <q-btn v-else outline @click="openQa">Q&Aを見る</q-btn>
             </template>
@@ -113,7 +122,7 @@
                         <q-btn
                           fab
                           icon="add"
-                          color="primary-light"
+                          color="primary"
                           text-color="display-on-primary"
                           :disable="uiLocked"
                           aria-label="テキストを追加"
@@ -173,15 +182,16 @@
 import path from "path";
 import { computed, onBeforeUpdate, onMounted, ref, VNodeRef, watch } from "vue";
 import draggable from "vuedraggable";
-import { QResizeObserver, useQuasar } from "quasar";
+import { QResizeObserver } from "quasar";
 import cloneDeep from "clone-deep";
+import Mousetrap from "mousetrap";
 import { useStore } from "@/store";
 import HeaderBar from "@/components/HeaderBar.vue";
 import AudioCell from "@/components/AudioCell.vue";
 import AudioDetail from "@/components/AudioDetail.vue";
 import AudioInfo from "@/components/AudioInfo.vue";
 import MenuBar from "@/components/MenuBar.vue";
-import HelpDialog from "@/components/HelpDialog.vue";
+import HelpDialog from "@/components/help/HelpDialog.vue";
 import SettingDialog from "@/components/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
 import HeaderBarCustomDialog from "@/components/HeaderBarCustomDialog.vue";
@@ -212,10 +222,10 @@ const props =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const audioKeys = computed(() => store.state.audioKeys);
 const uiLocked = computed(() => store.getters.UI_LOCKED);
+const reloadingLocked = computed(() => store.state.reloadingLock);
 
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
@@ -225,7 +235,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
     "テキスト欄にフォーカスを戻す",
     () => {
       if (activeAudioKey.value !== undefined) {
-        focusCell({ audioKey: activeAudioKey.value });
+        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
       }
       return false; // this is the same with event.preventDefault()
     },
@@ -404,7 +414,7 @@ const addAudioItem = async () => {
     audioItem,
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 const duplicateAudioItem = async () => {
   const prevAudioKey = activeAudioKey.value;
@@ -418,7 +428,7 @@ const duplicateAudioItem = async () => {
     audioItem: cloneDeep(prevAudioItem),
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 
 // Pane
@@ -470,8 +480,16 @@ watch(shouldShowPanes, (val, old) => {
 });
 
 // セルをフォーカス
-const focusCell = ({ audioKey }: { audioKey: AudioKey }) => {
-  audioCellRefs[audioKey].focusTextField();
+const focusCell = ({
+  audioKey,
+  focusTarget,
+}: {
+  audioKey: AudioKey;
+  focusTarget?: "root" | "textField";
+}) => {
+  audioCellRefs[audioKey].focusCell({
+    focusTarget: focusTarget ?? "textField",
+  });
 };
 
 // Electronのデフォルトのundo/redoを無効化
@@ -516,7 +534,10 @@ watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
     };
 
     // FIXME: UNDOができてしまうのでできれば直したい
-    store.dispatch("COMMAND_CHANGE_VOICE", { audioKey: first, voice: voice });
+    store.dispatch("COMMAND_MULTI_CHANGE_VOICE", {
+      audioKeys: [first],
+      voice: voice,
+    });
   }
 });
 
@@ -560,16 +581,34 @@ onMounted(async () => {
     const newAudioKey = await store.dispatch("REGISTER_AUDIO_ITEM", {
       audioItem,
     });
-    focusCell({ audioKey: newAudioKey });
+    focusCell({ audioKey: newAudioKey, focusTarget: "textField" });
 
     // 最初の話者を初期化
     store.dispatch("SETUP_SPEAKER", {
-      audioKey: newAudioKey,
+      audioKeys: [newAudioKey],
       engineId: audioItem.voice.engineId,
       styleId: audioItem.voice.styleId,
     });
   }
 
+  // ショートカットキー操作を止める条件の設定
+  // 止めるなら`true`を返す
+  Mousetrap.prototype.stopCallback = (
+    e: Mousetrap.ExtendedKeyboardEvent, // 未使用
+    element: Element,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    combo: string // 未使用
+  ) => {
+    return (
+      element.tagName === "INPUT" ||
+      element.tagName === "SELECT" ||
+      element.tagName === "TEXTAREA" ||
+      (element instanceof HTMLElement && element.contentEditable === "true") ||
+      // メニュー項目ではショートカットキーを無効化
+      element.classList.contains("q-item")
+    );
+  };
+
   // ショートカットキーの設定
   document.addEventListener("keydown", disableDefaultUndoRedo);
 
@@ -644,32 +683,20 @@ watch(
       const altPort = store.state.altPortInfos[engineId];
       if (!altPort) return;
 
-      $q.notify({
+      store.dispatch("SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON", {
         message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
-        color: "toast",
-        textColor: "toast-display",
         icon: "compare_arrows",
-        timeout: 5000,
-        actions: [
-          {
-            label: "今後この通知をしない",
-            textColor: "toast-button-display",
-            handler: () =>
-              store.dispatch("SET_CONFIRMED_TIPS", {
-                confirmedTips: {
-                  ...store.state.confirmedTips,
-                  engineStartedOnAltPort: true,
-                },
-              }),
-          },
-        ],
+        tipName: "engineStartedOnAltPort",
       });
     }
   }
 );
 
-const restartAppWithMultiEngineOffMode = () => {
-  store.dispatch("RESTART_APP", { isMultiEngineOffMode: true });
+const reloadAppWithMultiEngineOffMode = () => {
+  store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
+    closeOrReload: "reload",
+    isMultiEngineOffMode: true,
+  });
 };
 
 const openQa = () => {
@@ -784,15 +811,10 @@ const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {
       store.dispatch("LOAD_PROJECT_FILE", { filePath: file.path });
       break;
     default:
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "対応していないファイルです",
         message:
           "テキストファイル (.txt) とVOICEVOXプロジェクトファイル (.vvproj) に対応しています。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
   }
 };
diff --git a/src/views/MobileEditorHome.vue b/src/views/MobileEditorHome.vue
index 7dc8d42608..13ac04f667 100644
--- a/src/views/MobileEditorHome.vue
+++ b/src/views/MobileEditorHome.vue
@@ -1,4 +1,3 @@
-<!-- FIXME: ロジックがEditorHome.vueからコピーされているので、良い感じに共通化する -->
 <template>
   <q-layout reveal elevated container class="layout-container">
     <mobile-header-bar />
@@ -7,8 +6,17 @@
       <q-page class="main-row-panes">
         <progress-dialog />
 
+        <!-- TODO: 複数エンジン対応 -->
+        <!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
+        <div v-if="allEngineState === 'FAILED_STARTING'" class="waiting-engine">
+          <div>
+            エンジンの起動に失敗しました。エンジンの再起動をお試しください。
+          </div>
+        </div>
         <div
-          v-if="!isCompletedInitialStartup || allEngineState === 'STARTING'"
+          v-else-if="
+            !isCompletedInitialStartup || allEngineState === 'STARTING'
+          "
           class="waiting-engine"
         >
           <div>
@@ -27,11 +35,12 @@
               <q-btn
                 v-if="isMultipleEngine"
                 outline
-                @click="restartAppWithMultiEngineOffMode"
+                :disable="reloadingLocked"
+                @click="reloadAppWithMultiEngineOffMode"
               >
-                マルチエンジンをオフにして再起動する</q-btn
+                マルチエンジンをオフにして再読み込みする</q-btn
               >
-              <q-btn v-else outline @click="openFaq">FAQを見る</q-btn>
+              <q-btn v-else outline @click="openQa">Q&Aを見る</q-btn>
             </template>
           </div>
         </div>
@@ -52,9 +61,9 @@
             <q-splitter
               :limits="[MIN_PORTRAIT_PANE_WIDTH, MAX_PORTRAIT_PANE_WIDTH]"
               separator-class="home-splitter"
-              :separator-style="{ width: shouldShowSidePanes ? '3px' : '0' }"
+              :separator-style="{ width: shouldShowPanes ? '3px' : '0' }"
               before-class="overflow-hidden"
-              :disable="!shouldShowSidePanes"
+              :disable="!shouldShowPanes"
               :model-value="portraitPaneWidth"
               @update:model-value="updatePortraitPane"
             >
@@ -67,11 +76,9 @@
                   unit="px"
                   :limits="[audioInfoPaneMinWidth, audioInfoPaneMaxWidth]"
                   separator-class="home-splitter"
-                  :separator-style="{
-                    width: shouldShowSidePanes ? '3px' : '0',
-                  }"
+                  :separator-style="{ width: shouldShowPanes ? '3px' : '0' }"
                   class="full-width overflow-hidden"
-                  :disable="!shouldShowSidePanes"
+                  :disable="!shouldShowPanes"
                   :model-value="audioInfoPaneWidth"
                   @update:model-value="updateAudioInfoPane"
                 >
@@ -88,6 +95,7 @@
                       "
                     >
                       <draggable
+                        ref="cellsRef"
                         class="audio-cells"
                         :model-value="audioKeys"
                         :item-key="itemKey"
@@ -105,13 +113,17 @@
                           />
                         </template>
                       </draggable>
-                      <div class="add-button-wrapper">
+                      <div
+                        v-if="showAddAudioItemButton"
+                        class="add-button-wrapper"
+                      >
                         <q-btn
                           fab
                           icon="add"
-                          color="primary-light"
+                          color="primary"
                           text-color="display-on-primary"
                           :disable="uiLocked"
+                          aria-label="テキストを追加"
                           @click="addAudioItem"
                         ></q-btn>
                       </div>
@@ -168,14 +180,15 @@
 import path from "path";
 import { computed, onBeforeUpdate, onMounted, ref, VNodeRef, watch } from "vue";
 import draggable from "vuedraggable";
-import { QResizeObserver, useQuasar } from "quasar";
+import { QResizeObserver } from "quasar";
 import cloneDeep from "clone-deep";
+import Mousetrap from "mousetrap";
 import { useStore } from "@/store";
 import MobileHeaderBar from "@/components/MobileHeaderBar.vue";
 import AudioCell from "@/components/AudioCell.vue";
 import AudioDetail from "@/components/AudioDetail.vue";
 import AudioInfo from "@/components/AudioInfo.vue";
-import HelpDialog from "@/components/HelpDialog.vue";
+import HelpDialog from "@/components/help/HelpDialog.vue";
 import SettingDialog from "@/components/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
 import HeaderBarCustomDialog from "@/components/HeaderBarCustomDialog.vue";
@@ -197,6 +210,7 @@ import {
   SplitterPosition,
   Voice,
 } from "@/type/preload";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { parseCombo, setHotkeyFunctions } from "@/store/setting";
 
 const props =
@@ -205,10 +219,10 @@ const props =
   }>();
 
 const store = useStore();
-const $q = useQuasar();
 
 const audioKeys = computed(() => store.state.audioKeys);
 const uiLocked = computed(() => store.getters.UI_LOCKED);
+const reloadingLocked = computed(() => store.state.reloadingLock);
 
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
@@ -217,8 +231,8 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
   [
     "テキスト欄にフォーカスを戻す",
     () => {
-      if (activeAudioKey.value !== undefined) {
-        focusCell({ audioKey: activeAudioKey.value });
+      if (activeAudioKey.value != undefined) {
+        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
       }
       return false; // this is the same with event.preventDefault()
     },
@@ -295,7 +309,7 @@ const MIN_PORTRAIT_PANE_WIDTH = 0;
 const MAX_PORTRAIT_PANE_WIDTH = 40;
 const MIN_AUDIO_INFO_PANE_WIDTH = 160; // px
 const MAX_AUDIO_INFO_PANE_WIDTH = 250;
-const MIN_AUDIO_DETAIL_PANE_HEIGHT = 220; // px
+const MIN_AUDIO_DETAIL_PANE_HEIGHT = 185; // px
 const MAX_AUDIO_DETAIL_PANE_HEIGHT = 500;
 
 const portraitPaneWidth = ref(0);
@@ -381,7 +395,7 @@ const addAudioItem = async () => {
   let presetKey: PresetKey | undefined = undefined;
   let baseAudioItem: AudioItem | undefined = undefined;
 
-  if (prevAudioKey !== undefined) {
+  if (prevAudioKey != undefined) {
     voice = store.state.audioItems[prevAudioKey].voice;
     presetKey = store.state.audioItems[prevAudioKey].presetKey;
     baseAudioItem = store.state.audioItems[prevAudioKey];
@@ -397,7 +411,7 @@ const addAudioItem = async () => {
     audioItem,
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 const duplicateAudioItem = async () => {
   const prevAudioKey = activeAudioKey.value;
@@ -411,45 +425,20 @@ const duplicateAudioItem = async () => {
     audioItem: cloneDeep(prevAudioItem),
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 
 // Pane
 const shouldShowPanes = computed<boolean>(
   () => store.getters.SHOULD_SHOW_PANES
 );
-const shouldShowSidePanes = computed<boolean>(
-  () => shouldShowPanes.value && $q.screen.gt.xs // 横幅がある程度大きいかどうか
-);
-const clamp = (value: number, min: number, max: number) =>
-  Math.max(Math.min(value, max), min);
-
 watch(shouldShowPanes, (val, old) => {
   if (val === old) return;
 
   if (val) {
-    audioDetailPaneMinHeight.value = MIN_AUDIO_DETAIL_PANE_HEIGHT;
-    changeAudioDetailPaneMaxHeight(
-      resizeObserverRef.value?.$el.parentElement.clientHeight
-    );
-
-    audioDetailPaneHeight.value = clamp(
-      splitterPosition.value.audioDetailPaneHeight ??
-        MIN_AUDIO_DETAIL_PANE_HEIGHT,
-      audioDetailPaneMinHeight.value,
-      audioDetailPaneMaxHeight.value
-    );
-  } else {
-    audioDetailPaneHeight.value = 0;
-    audioDetailPaneMinHeight.value = 0;
-    audioDetailPaneMaxHeight.value = 0;
-  }
-});
-
-watch(shouldShowSidePanes, (val, old) => {
-  if (val === old) return;
+    const clamp = (value: number, min: number, max: number) =>
+      Math.max(Math.min(value, max), min);
 
-  if (val) {
     // 設定ファイルを書き換えれば異常な値が入り得るのですべてclampしておく
     portraitPaneWidth.value = clamp(
       splitterPosition.value.portraitPaneWidth ?? DEFAULT_PORTRAIT_PANE_WIDTH,
@@ -464,24 +453,47 @@ watch(shouldShowSidePanes, (val, old) => {
     );
     audioInfoPaneMinWidth.value = MIN_AUDIO_INFO_PANE_WIDTH;
     audioInfoPaneMaxWidth.value = MAX_AUDIO_INFO_PANE_WIDTH;
+
+    audioDetailPaneMinHeight.value = MIN_AUDIO_DETAIL_PANE_HEIGHT;
+    changeAudioDetailPaneMaxHeight(
+      resizeObserverRef.value?.$el.parentElement.clientHeight
+    );
+
+    audioDetailPaneHeight.value = clamp(
+      splitterPosition.value.audioDetailPaneHeight ??
+        MIN_AUDIO_DETAIL_PANE_HEIGHT,
+      audioDetailPaneMinHeight.value,
+      audioDetailPaneMaxHeight.value
+    );
   } else {
     portraitPaneWidth.value = 0;
     audioInfoPaneWidth.value = 0;
     audioInfoPaneMinWidth.value = 0;
     audioInfoPaneMaxWidth.value = 0;
+    audioDetailPaneHeight.value = 0;
+    audioDetailPaneMinHeight.value = 0;
+    audioDetailPaneMaxHeight.value = 0;
   }
 });
 
 // セルをフォーカス
-const focusCell = ({ audioKey }: { audioKey: AudioKey }) => {
-  audioCellRefs[audioKey].focusTextField();
+const focusCell = ({
+  audioKey,
+  focusTarget,
+}: {
+  audioKey: AudioKey;
+  focusTarget?: "root" | "textField";
+}) => {
+  audioCellRefs[audioKey].focusCell({
+    focusTarget: focusTarget ?? "textField",
+  });
 };
 
 // Electronのデフォルトのundo/redoを無効化
 const disableDefaultUndoRedo = (event: KeyboardEvent) => {
   // ctrl+z, ctrl+shift+z, ctrl+y
   if (
-    event.ctrlKey &&
+    isOnCommandOrCtrlKeyDown(event) &&
     (event.key == "z" || (!event.shiftKey && event.key == "y"))
   ) {
     event.preventDefault();
@@ -494,8 +506,10 @@ const userOrderedCharacterInfos = computed(
 const audioItems = computed(() => store.state.audioItems);
 // 並び替え後、テキスト欄が１つで空欄なら話者を更新
 // 経緯 https://github.com/VOICEVOX/voicevox/issues/1229
-watch(userOrderedCharacterInfos, (newValue, oldValue) => {
-  if (newValue === oldValue || newValue.length < 1) return;
+watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
+  if (userOrderedCharacterInfos.length < 1) {
+    return;
+  }
 
   if (audioKeys.value.length === 1) {
     const first = audioKeys.value[0] as AudioKey;
@@ -504,11 +518,11 @@ watch(userOrderedCharacterInfos, (newValue, oldValue) => {
       return;
     }
 
-    const speakerId = newValue[0];
+    const speakerId = userOrderedCharacterInfos[0];
     const defaultStyleId = store.state.defaultStyleIds.find(
       (styleId) => styleId.speakerUuid === speakerId
     );
-    if (!defaultStyleId) return;
+    if (!defaultStyleId || audioItem.voice.speakerId === speakerId) return;
 
     const voice: Voice = {
       engineId: defaultStyleId.engineId,
@@ -516,7 +530,11 @@ watch(userOrderedCharacterInfos, (newValue, oldValue) => {
       styleId: defaultStyleId.defaultStyleId,
     };
 
-    store.dispatch("COMMAND_CHANGE_VOICE", { audioKey: first, voice: voice });
+    // FIXME: UNDOができてしまうのでできれば直したい
+    store.dispatch("COMMAND_MULTI_CHANGE_VOICE", {
+      audioKeys: [first],
+      voice: voice,
+    });
   }
 });
 
@@ -560,16 +578,34 @@ onMounted(async () => {
     const newAudioKey = await store.dispatch("REGISTER_AUDIO_ITEM", {
       audioItem,
     });
-    focusCell({ audioKey: newAudioKey });
+    focusCell({ audioKey: newAudioKey, focusTarget: "textField" });
 
     // 最初の話者を初期化
     store.dispatch("SETUP_SPEAKER", {
-      audioKey: newAudioKey,
+      audioKeys: [newAudioKey],
       engineId: audioItem.voice.engineId,
       styleId: audioItem.voice.styleId,
     });
   }
 
+  // ショートカットキー操作を止める条件の設定
+  // 止めるなら`true`を返す
+  Mousetrap.prototype.stopCallback = (
+    e: Mousetrap.ExtendedKeyboardEvent, // 未使用
+    element: Element,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    combo: string // 未使用
+  ) => {
+    return (
+      element.tagName === "INPUT" ||
+      element.tagName === "SELECT" ||
+      element.tagName === "TEXTAREA" ||
+      (element instanceof HTMLElement && element.contentEditable === "true") ||
+      // メニュー項目ではショートカットキーを無効化
+      element.classList.contains("q-item")
+    );
+  };
+
   // ショートカットキーの設定
   document.addEventListener("keydown", disableDefaultUndoRedo);
 
@@ -585,38 +621,6 @@ onMounted(async () => {
     store.state.acceptTerms !== "Accepted";
 
   isCompletedInitialStartup.value = true;
-
-  // 代替ポートをトースト通知する
-  // FIXME: トーストが何度も出るようにする（altPortInfoをstateに持たせてwatchする）
-  if (!store.state.confirmedTips.engineStartedOnAltPort) {
-    const altPortInfo = await store.dispatch("GET_ALT_PORT_INFOS");
-    for (const engineId of store.state.engineIds) {
-      const engineName = store.state.engineInfos[engineId].name;
-      const altPort = altPortInfo[engineId];
-
-      if (!altPort) return;
-      $q.notify({
-        message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
-        color: "toast",
-        textColor: "toast-display",
-        icon: "compare_arrows",
-        timeout: 5000,
-        actions: [
-          {
-            label: "今後この通知をしない",
-            textColor: "toast-button-display",
-            handler: () =>
-              store.dispatch("SET_CONFIRMED_TIPS", {
-                confirmedTips: {
-                  ...store.state.confirmedTips,
-                  engineStartedOnAltPort: true,
-                },
-              }),
-          },
-        ],
-      });
-    }
-  }
 });
 
 // エンジン待機
@@ -629,7 +633,7 @@ const allEngineState = computed(() => {
   // 登録されているすべてのエンジンについて状態を確認する
   for (const engineId of store.state.engineIds) {
     const engineState: EngineState | undefined = engineStates[engineId];
-    if (engineState === undefined)
+    if (engineState == undefined)
       throw new Error(`No such engineState set: engineId == ${engineId}`);
 
     // FIXME: 1つでも接続テストに成功していないエンジンがあれば、暫定的に起動中とする
@@ -646,7 +650,7 @@ const allEngineState = computed(() => {
 const isEngineWaitingLong = ref<boolean>(false);
 let engineTimer: number | undefined = undefined;
 watch(allEngineState, (newEngineState) => {
-  if (engineTimer !== undefined) {
+  if (engineTimer != undefined) {
     clearTimeout(engineTimer);
     engineTimer = undefined;
   }
@@ -659,11 +663,40 @@ watch(allEngineState, (newEngineState) => {
     isEngineWaitingLong.value = false;
   }
 });
-const restartAppWithMultiEngineOffMode = () => {
-  store.dispatch("RESTART_APP", { isMultiEngineOffMode: true });
+
+// 代替ポート情報の変更を監視
+watch(
+  () => [store.state.altPortInfos, store.state.isVuexReady],
+  async () => {
+    // この watch がエンジンが起動した時 (=> 設定ファイルを読み込む前) に発火して, "今後この通知をしない" を無視するのを防ぐ
+    if (!store.state.isVuexReady) return;
+
+    // "今後この通知をしない" を考慮
+    if (store.state.confirmedTips.engineStartedOnAltPort) return;
+
+    // 代替ポートをトースト通知する
+    for (const engineId of store.state.engineIds) {
+      const engineName = store.state.engineInfos[engineId].name;
+      const altPort = store.state.altPortInfos[engineId];
+      if (!altPort) return;
+
+      store.dispatch("SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON", {
+        message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
+        icon: "compare_arrows",
+        tipName: "engineStartedOnAltPort",
+      });
+    }
+  }
+);
+
+const reloadAppWithMultiEngineOffMode = () => {
+  store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
+    closeOrReload: "reload",
+    isMultiEngineOffMode: true,
+  });
 };
 
-const openFaq = () => {
+const openQa = () => {
   window.open("https://voicevox.hiroshiba.jp/qa/", "_blank");
 };
 
@@ -775,18 +808,39 @@ const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {
       store.dispatch("LOAD_PROJECT_FILE", { filePath: file.path });
       break;
     default:
-      $q.dialog({
+      store.dispatch("SHOW_ALERT_DIALOG", {
         title: "対応していないファイルです",
         message:
           "テキストファイル (.txt) とVOICEVOXプロジェクトファイル (.vvproj) に対応しています。",
-        ok: {
-          label: "閉じる",
-          flat: true,
-          textColor: "display",
-        },
       });
   }
 };
+
+// AudioCellの自動スクロール
+const cellsRef = ref<InstanceType<typeof draggable> | undefined>();
+watch(activeAudioKey, (audioKey) => {
+  if (audioKey == undefined) return;
+  const activeCellElement = audioCellRefs[audioKey].$el;
+  const cellsElement = cellsRef.value?.$el;
+  if (
+    !(activeCellElement instanceof Element) ||
+    !(cellsElement instanceof Element)
+  )
+    throw new Error(
+      `invalid element: activeCellElement=${activeCellElement}, cellsElement=${cellsElement}`
+    );
+  const activeCellRect = activeCellElement.getBoundingClientRect();
+  const cellsRect = cellsElement.getBoundingClientRect();
+  const overflowTop = activeCellRect.top <= cellsRect.top;
+  const overflowBottom = activeCellRect.bottom >= cellsRect.bottom;
+  if (overflowTop || overflowBottom) {
+    activeCellElement.scrollIntoView(overflowTop || !overflowBottom);
+  }
+});
+
+const showAddAudioItemButton = computed(() => {
+  return store.state.showAddAudioItemButton;
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe2a0..7a290e5188 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,13 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_7Z_BIN_NAME: string;
+  readonly VITE_APP_NAME: string;
+  readonly VITE_DEFAULT_ENGINE_INFOS: string;
+  readonly VITE_GTM_CONTAINER_ID: string;
+  readonly VITE_TARGET: "electron" | "browser" | "mobile";
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js
deleted file mode 100644
index 3f31397527..0000000000
--- a/tests/e2e/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  rules: {
-    strict: "off",
-  },
-};
diff --git "a/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts" "b/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts"
new file mode 100644
index 0000000000..6891f3f5ed
--- /dev/null
+++ "b/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts"
@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("アクセント分割したらアクセント区間が増える", async ({ page }) => {
+  await navigateToMain(page);
+  await expect(page.locator(".audio-cell").first()).toBeVisible();
+  await page.locator(".audio-cell input").first().fill("こんにちは");
+  await page.locator(".audio-cell input").first().press("Enter");
+  await page.waitForTimeout(100);
+  expect(await page.locator(".mora-table").count()).toBe(1);
+  await (await page.locator(".splitter-cell").all())[1].click();
+  await page.waitForTimeout(100);
+  expect(await page.locator(".mora-table").count()).toBe(2);
+});
diff --git "a/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts" "b/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts"
new file mode 100644
index 0000000000..88e2e44063
--- /dev/null
+++ "b/tests/e2e/browser/\343\202\252\343\203\227\343\202\267\343\203\247\343\203\263/\346\233\270\343\201\215\345\207\272\343\201\227\343\203\225\343\202\241\343\202\244\343\203\253\345\220\215\343\203\221\343\202\277\343\203\274\343\203\263.spec.ts"
@@ -0,0 +1,88 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+
+import { navigateToOptionDialog } from "../../navigators";
+import { getNewestQuasarDialog } from "../../locators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+/**
+ * 書き出しファイル名パターンダイアログまで移動
+ */
+const moveToFilenameDialog = async (page: Page, optionDialog: Locator) => {
+  await optionDialog.getByRole("button", { name: "編集する" }).click();
+  await page.waitForTimeout(500);
+
+  const filenameDialog = getNewestQuasarDialog(page);
+  await expect(
+    filenameDialog.getByText("書き出しファイル名パターン")
+  ).toBeVisible();
+
+  const doneButton = filenameDialog.getByRole("button", { name: "確定" });
+  const textbox = filenameDialog.getByRole("textbox", {
+    name: "ファイル名パターン",
+  });
+
+  return { filenameDialog, doneButton, textbox };
+};
+
+test("「オプション」から「書き出しファイル名パターン」を変更したり保存したりできる", async ({
+  page,
+}) => {
+  const optionDialog = await navigateToOptionDialog(page);
+
+  let { doneButton, textbox } = await moveToFilenameDialog(page, optionDialog);
+
+  // デフォルト状態は確定ボタンが押せる
+  await expect(textbox).toHaveValue("$連番$_$キャラ$（$スタイル$）_$テキスト$");
+  await expect(doneButton).toBeEnabled();
+
+  // 何も入力されていないときは確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("");
+  await textbox.press("Enter");
+  await expect(optionDialog.getByText("何か入力してください")).toBeVisible();
+  await expect(doneButton).toBeDisabled();
+
+  // $連番$ が含まれていない場合は確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("test");
+  await textbox.press("Enter");
+  await expect(textbox).toHaveValue("test");
+  await expect(optionDialog.getByText("$連番$は必須です")).toBeVisible();
+  await expect(doneButton).toBeDisabled();
+
+  // 無効な文字が含まれている場合は確定ボタンが押せない
+  await textbox.click();
+  await textbox.fill("$連番$\\");
+  await textbox.press("Enter");
+  await expect(doneButton).toBeDisabled();
+  await expect(
+    optionDialog.getByText("使用できない文字が含まれています：「\\」")
+  ).toBeVisible();
+
+  // $連番$ を含めると確定ボタンが押せる
+  await textbox.click();
+  await textbox.fill("test");
+  await textbox.press("Enter");
+  await page.getByRole("button", { name: "$連番$" }).click();
+  await expect(textbox).toHaveValue("test$連番$");
+  await expect(doneButton).toBeEnabled();
+  await page.waitForTimeout(100);
+
+  // 確定するとダイアログが閉じて設定した内容が反映されている
+  await doneButton.click();
+  await page.waitForTimeout(700);
+  await expect(optionDialog.getByText("test$連番$.wav")).toBeVisible();
+
+  // 再度開くと設定した内容が反映されている
+  ({ doneButton, textbox } = await moveToFilenameDialog(page, optionDialog));
+  await expect(textbox).toHaveValue("test$連番$");
+
+  // デフォルト値にリセットできる
+  await page.getByRole("button", { name: "デフォルトにリセット" }).click();
+  await expect(textbox).toHaveValue("$連番$_$キャラ$（$スタイル$）_$テキスト$");
+});
diff --git "a/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
new file mode 100644
index 0000000000..15d53f6079
--- /dev/null
+++ "b/tests/e2e/browser/\343\202\255\343\203\243\343\203\251\343\202\257\343\202\277\343\203\274\344\270\246\343\201\263\346\233\277\343\201\210\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("「設定」→「キャラクター並び替え・視聴」で「設定 / キャラクター並び替え・視聴」ページが表示される", async ({
+  page,
+}) => {
+  await navigateToMain(page);
+  await page.getByText("設定").click();
+  await page.waitForTimeout(100);
+  await page.getByText("キャラクター並び替え・試聴").click();
+  await page.waitForTimeout(100);
+  await expect(
+    page.getByText("設定 / キャラクター並び替え・試聴")
+  ).toBeVisible();
+});
diff --git "a/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
new file mode 100644
index 0000000000..f5e04741a0
--- /dev/null
+++ "b/tests/e2e/browser/\343\203\204\343\203\274\343\203\253\343\203\220\343\203\274\343\202\253\343\202\271\343\202\277\343\203\236\343\202\244\343\202\272\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -0,0 +1,94 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+import { getNewestQuasarDialog, getQuasarMenu } from "../locators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("ツールバーのカスタマイズでボタンを追加でき、デフォルトに戻すこともできる", async ({
+  page,
+}) => {
+  await navigateToMain(page);
+  // 全部書き出しボタンはデフォルトでないことを確認
+  expect(
+    await page
+      .locator("header")
+      .getByRole("toolbar")
+      .getByText("全部書き出し")
+      .count()
+  ).toBe(0);
+
+  // ツールバーのカスタマイズページに移動
+  await page.getByText("設定").click();
+  await page.waitForTimeout(100);
+  await getQuasarMenu(page, "ツールバーのカスタマイズ").click();
+  await page.waitForTimeout(100);
+  await expect(page.getByText("ツールバーのカスタマイズ")).toBeVisible();
+
+  // 全部書き出しボタンを追加する
+  expect(
+    await page.getByRole("button").filter({ hasText: "全部書き出し" }).count()
+  ).toBe(0);
+  await page.getByRole("listitem").filter({ hasText: "全部書き出し" }).click();
+  expect(
+    await page.getByRole("button").filter({ hasText: "全部書き出し" }).count()
+  ).toBe(1);
+  await page.getByText("保存", { exact: true }).click();
+  await getNewestQuasarDialog(page)
+    .getByRole("button")
+    .filter({ hasText: "close" })
+    .click();
+
+  // 閉じたあとに全部書き出しボタンが追加されてることを確認
+  await page.waitForTimeout(100);
+  expect(
+    await page
+      .locator("header")
+      .getByRole("toolbar")
+      .getByText("全部書き出し")
+      .count()
+  ).toBe(1);
+
+  // 再度ツールバーのカスタマイズページに移動し、デフォルトに戻すボタンを押す
+  await page.getByText("設定").click();
+  await page.waitForTimeout(100);
+  await getQuasarMenu(page, "ツールバーのカスタマイズ").click();
+  await page.waitForTimeout(100);
+  expect(
+    await page
+      .locator("main")
+      .getByRole("button")
+      .filter({ hasText: "全部書き出し" })
+      .count()
+  ).toBe(1);
+  await page.getByText("デフォルトに戻す").click();
+  await page.locator(".q-card").getByText("はい").click();
+  await page.getByText("保存", { exact: true }).click();
+  expect(
+    await page
+      .locator("main")
+      .getByRole("button")
+      .filter({ hasText: "全部書き出し" })
+      .count()
+  ).toBe(0);
+
+  // 閉じるボタンを再度押し、全部書き出しボタンが消えてることを確認
+  await page
+    .locator("header")
+    .getByRole("button")
+    .filter({ hasText: "close" })
+    .click();
+
+  await page.waitForTimeout(100);
+  expect(
+    await page
+      .locator("header")
+      .getByRole("toolbar")
+      .getByText("全部書き出し")
+      .count()
+  ).toBe(0);
+});
diff --git "a/tests/e2e/browser/\343\203\206\343\202\255\343\202\271\343\203\210\350\277\275\345\212\240\343\203\273\345\211\212\351\231\244\343\203\273\345\205\245\343\202\214\346\233\277\343\201\210.spec.ts" "b/tests/e2e/browser/\343\203\206\343\202\255\343\202\271\343\203\210\350\277\275\345\212\240\343\203\273\345\211\212\351\231\244\343\203\273\345\205\245\343\202\214\346\233\277\343\201\210.spec.ts"
new file mode 100644
index 0000000000..d5664b9377
--- /dev/null
+++ "b/tests/e2e/browser/\343\203\206\343\202\255\343\202\271\343\203\210\350\277\275\345\212\240\343\203\273\345\211\212\351\231\244\343\203\273\345\205\245\343\202\214\346\233\277\343\201\210.spec.ts"
@@ -0,0 +1,74 @@
+import { test, expect, Locator, Page } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+async function fillInput(page: Page, locator: Locator, text: string) {
+  await locator.fill(text);
+  await locator.press("Enter");
+  await page.waitForTimeout(100);
+  await validateInput(locator, text);
+}
+
+async function validateInput(locator: Locator, expectedText: string) {
+  expect(await locator.inputValue()).toBe(expectedText);
+}
+
+async function getCenter(locator: Locator) {
+  const box = (await locator.boundingBox()) || {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  };
+  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+}
+
+test("テキストの追加・入れ替え・削除", async ({ page }) => {
+  // デフォルトでaudioCellは一つなのを確認
+  await navigateToMain(page);
+  await expect(
+    page.getByRole("button").filter({ hasText: "add" })
+  ).toBeVisible();
+  expect(await page.locator(".audio-cell").count()).toBe(1);
+  // ３つAudioCellを追加したらAudioCellが４つになるのを確認
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await page.waitForTimeout(100);
+  await fillInput(page, page.locator(".audio-cell input").first(), "foo");
+  await fillInput(page, page.locator(".audio-cell input").nth(1), "bar");
+  await fillInput(page, page.locator(".audio-cell input").nth(2), "baz");
+  expect(await page.locator(".audio-cell").count()).toBe(4);
+  // 一番上のAudioCellを削除しもともと２番めだったものが一番上に来てAudioCellが３つになることを確認
+  await page.locator(".audio-cell").first().hover();
+  await page
+    .getByRole("button")
+    .filter({ hasText: "delete_outline" })
+    .first()
+    .click();
+  await page.waitForTimeout(100);
+  expect(await page.locator(".audio-cell").count()).toBe(3);
+  await validateInput(page.locator(".audio-cell input").first(), "bar");
+  // ドラッグして一番上と２番めに上のものを入れ替えて、入れ替わってることを確認
+  const dragFrom = await getCenter(
+    page.locator(".audio-cell .icon-container").first()
+  );
+  const dragTo = await getCenter(
+    page.locator(".audio-cell .icon-container").nth(1)
+  );
+  await page.mouse.move(dragFrom.x, dragFrom.y);
+  await page.mouse.down();
+  await page.mouse.move(dragTo.x, dragTo.y);
+  await page.mouse.up();
+
+  await page.waitForTimeout(100);
+  await validateInput(page.locator(".audio-cell input").first(), "baz");
+  await page.waitForTimeout(100);
+  await validateInput(page.locator(".audio-cell input").nth(1), "bar");
+});
diff --git "a/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
new file mode 100644
index 0000000000..be5c667a1f
--- /dev/null
+++ "b/tests/e2e/browser/\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\202\271\343\202\277\343\202\244\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("「設定」→「デフォルトスタイル」で「設定 / デフォルトスタイル・試聴」ダイアログが表示される", async ({
+  page,
+}) => {
+  await navigateToMain(page);
+  await page.getByRole("button", { name: "設定" }).click();
+  await page.getByText("デフォルトスタイル").click();
+  await expect(page.getByText("設定 / デフォルトスタイル・試聴")).toBeVisible();
+});
diff --git "a/tests/e2e/browser/\343\203\230\343\203\253\343\203\227.spec.ts" "b/tests/e2e/browser/\343\203\230\343\203\253\343\203\227.spec.ts"
new file mode 100644
index 0000000000..67164b4f18
--- /dev/null
+++ "b/tests/e2e/browser/\343\203\230\343\203\253\343\203\227.spec.ts"
@@ -0,0 +1,48 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToHelpDialog } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("「ヘルプ」メニューから各項目をクリックすると、その項目の内容が表示される", async ({
+  page,
+}) => {
+  await navigateToHelpDialog(page);
+  // お問い合わせ
+  await page.getByText("お問い合わせ").click();
+  await expect(page.getByText("ヘルプ / お問い合わせ")).toBeVisible();
+
+  // ソフトウェアの利用規約
+  await page.getByText("ソフトウェアの利用規約", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / ソフトウェアの利用規約")).toBeVisible();
+
+  // 音声ライブラリの利用規約
+  await page.getByText("音声ライブラリの利用規約", { exact: true }).click();
+  await expect(
+    page.getByText("ヘルプ / 音声ライブラリの利用規約")
+  ).toBeVisible();
+
+  // 使い方
+  await page.getByText("使い方", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / 使い方")).toBeVisible();
+
+  // 開発コミュニティ
+  await page.getByText("開発コミュニティ", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / 開発コミュニティ")).toBeVisible();
+
+  // ライセンス情報
+  await page.getByText("ライセンス情報", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / ライセンス情報")).toBeVisible();
+
+  // アップデート情報
+  await page.getByText("アップデート情報", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / アップデート情報")).toBeVisible();
+
+  // よくあるご質問
+  await page.getByText("よくあるご質問", { exact: true }).click();
+  await expect(page.getByText("ヘルプ / よくあるご質問")).toBeVisible();
+});
diff --git "a/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts" "b/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts"
new file mode 100644
index 0000000000..6013747391
--- /dev/null
+++ "b/tests/e2e/browser/\345\210\235\345\233\236\350\265\267\345\213\225\346\231\202.spec.ts"
@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("起動したら「利用規約に関するお知らせ」が表示される", async ({ page }) => {
+  await expect(page.getByText("利用規約に関するお知らせ")).toBeVisible();
+});
diff --git "a/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/utils.ts" "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/utils.ts"
new file mode 100644
index 0000000000..f3d3783019
--- /dev/null
+++ "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/utils.ts"
@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+
+export async function addAudioCells(page: Page, count: number) {
+  for (let i = 0; i < count; i++) {
+    await page.getByRole("button", { name: "テキストを追加" }).click();
+    await page.waitForTimeout(100);
+  }
+}
+
+export const ctrlLike = process.platform === "darwin" ? "Meta" : "Control";
diff --git "a/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\345\200\244\345\244\211\346\233\264.spec.ts" "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\345\200\244\345\244\211\346\233\264.spec.ts"
new file mode 100644
index 0000000000..5fe3ad1050
--- /dev/null
+++ "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\345\200\244\345\244\211\346\233\264.spec.ts"
@@ -0,0 +1,62 @@
+import { test, expect, Page } from "@playwright/test";
+import { toggleSetting, navigateToMain } from "../../navigators";
+import { addAudioCells } from "./utils";
+
+/*
+ * 全てのAudioCellのキャラクター+スタイル名を取得する。
+ * キャラクター+スタイル名はalt属性から取得する。
+ *
+ * @returns キャラクター名の配列
+ */
+async function getSelectedCharacters(page: Page): Promise<string[]> {
+  const characterNames = await page.evaluate(() => {
+    const audioCells = [...document.querySelectorAll(".audio-cell")];
+    const characterNames: string[] = [];
+    for (const audioCell of audioCells) {
+      const character = audioCell.querySelector(".icon-container > img");
+      if (character) {
+        const alt = character.getAttribute("alt");
+        if (!alt) {
+          throw new Error("alt属性がありません");
+        }
+
+        characterNames.push(alt);
+      }
+    }
+    return characterNames;
+  });
+  return characterNames;
+}
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await toggleSetting(page, "複数選択");
+
+  await addAudioCells(page, 3);
+});
+
+test("複数選択：キャラクター選択", async ({ page }) => {
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  await page.locator(".audio-cell:nth-child(2) .character-button").click();
+  await page.waitForTimeout(100);
+
+  await page.locator(".character-item-container .q-item:nth-child(2)").click();
+  await page.waitForTimeout(100);
+
+  const characterNames = await getSelectedCharacters(page);
+
+  expect(characterNames[0]).not.toEqual(characterNames[1]);
+  expect(characterNames[1]).toEqual(characterNames[2]);
+  expect(characterNames[1]).toEqual(characterNames[3]);
+});
diff --git "a/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\351\201\270\346\212\236.spec.ts" "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\351\201\270\346\212\236.spec.ts"
new file mode 100644
index 0000000000..a47c5c07e1
--- /dev/null
+++ "b/tests/e2e/browser/\350\244\207\346\225\260\351\201\270\346\212\236/\351\201\270\346\212\236.spec.ts"
@@ -0,0 +1,186 @@
+import { test, expect, Page } from "@playwright/test";
+import { toggleSetting, navigateToMain } from "../../navigators";
+import { ctrlLike, addAudioCells } from "./utils";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await toggleSetting(page, "複数選択");
+
+  await addAudioCells(page, 3);
+});
+
+type SelectedStatus = {
+  active: number;
+  selected: number[];
+};
+/**
+ * アクティブなAudioCellと選択されているAudioCellを取得する。
+ * 戻り値のインデックスは1から始まる。（nth-childのインデックスと揃えるため）
+ */
+async function getSelectedStatus(page: Page): Promise<SelectedStatus> {
+  const selectedAudioKeys = await page.evaluate(() => {
+    const audioCells = [...document.querySelectorAll(".audio-cell")];
+    let active: number | undefined;
+    const selected: number[] = [];
+    for (let i = 0; i < audioCells.length; i++) {
+      const audioCell = audioCells[i];
+      if (audioCell.classList.contains("active")) {
+        active = i + 1;
+      }
+      if (audioCell.classList.contains("selected")) {
+        selected.push(i + 1);
+      }
+    }
+    if (active === undefined) {
+      throw new Error("No active audio cell");
+    }
+
+    return { active, selected };
+  });
+  return selectedAudioKeys;
+}
+
+test("複数選択：マウス周り", async ({ page }) => {
+  let selectedStatus: SelectedStatus;
+
+  // 複数選択していない状態でactiveのAudioCellをクリックしても何も起こらない
+  await page.locator(".audio-cell:nth-child(1)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(1);
+  expect(selectedStatus.selected).toEqual([1]);
+
+  // Shift+クリックは前回選択していたAudioCellから今回クリックしたAudioCellまでを選択する
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up("Shift");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 3, 4]);
+
+  // ただのクリックはactiveAudioKeyとselectedAudioKeysをクリックしたAudioCellだけにする
+  await page.locator(".audio-cell:nth-child(2)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(2);
+  expect(selectedStatus.selected).toEqual([2]);
+
+  if (process.platform === "darwin" && !!process.env.CI) {
+    // なぜかCmd(Meta)+クリックが動かないのでスキップする
+    // FIXME: 動くようにする
+    return;
+  }
+
+  // Ctrl+クリックは選択範囲を追加する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 4]);
+
+  // Ctrl+クリックは選択範囲から削除する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // activeのAudioCellをCtrl+クリックすると選択範囲から削除して次のselectedのAudioCellをactiveにする
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // selected内のCharacterButtonをクリックしても選択範囲は変わらない
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up("Shift");
+
+  await page.locator(".audio-cell:nth-child(2) .character-button").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 3, 4]);
+
+  // selected外のCharacterButtonをクリックすると選択範囲をそのAudioCellだけにする
+  await page.locator(".audio-cell:nth-child(1)").click();
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(1);
+  expect(selectedStatus.selected).toEqual([1]);
+});
+
+test("複数選択：キーボード", async ({ page }) => {
+  let selectedStatus: SelectedStatus;
+  // Shift+下で下方向を選択範囲にする
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([2, 3]);
+
+  // ただの下で下方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowDown");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+
+  // Shift+上で上方向を選択範囲にする
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowUp");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([3, 4]);
+
+  // ただの上で上方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowUp");
+  await page.waitForTimeout(100);
+
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(2);
+  expect(selectedStatus.selected).toEqual([2]);
+
+  // EnterでactiveのAudioCellのテキストフィールドにフォーカスし、複数選択を解除する
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.keyboard.press("Enter");
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(3);
+  expect(selectedStatus.selected).toEqual([3]);
+});
diff --git "a/tests/e2e/browser/\350\252\277\346\225\264\347\265\220\346\236\234.spec.ts" "b/tests/e2e/browser/\350\252\277\346\225\264\347\265\220\346\236\234.spec.ts"
new file mode 100644
index 0000000000..d39f77d9c6
--- /dev/null
+++ "b/tests/e2e/browser/\350\252\277\346\225\264\347\265\220\346\236\234.spec.ts"
@@ -0,0 +1,106 @@
+import { test, expect, Page } from "@playwright/test";
+import { toggleSetting, navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+/**
+ * イントネーションのスライダーの値をnumber[][]として取得する
+ * @param page
+ */
+async function getSliderValues(page: Page) {
+  const moraTables = await page.locator(".mora-table").all();
+  return await Promise.all(
+    moraTables.map(async (moraTable) => {
+      const sliders = await moraTable.locator(".q-slider").all();
+      return await Promise.all(
+        sliders.map(async (slider) => {
+          const value = await slider.getAttribute("aria-valuenow");
+          if (value == null) {
+            throw new Error("aria-valuenowが取得できません");
+          }
+          return parseFloat(value);
+        })
+      );
+    })
+  );
+}
+
+test("実験的機能：調整結果の保持", async ({ page }) => {
+  await navigateToMain(page);
+
+  await toggleSetting(page, "調整結果の保持");
+  await page.waitForTimeout(100);
+
+  const audioCell = page.locator(".audio-cell:nth-child(1)");
+  await audioCell.locator("input").fill("ずんだもんの朝食");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(100);
+
+  await page.locator(".detail-selector").getByText("ｲﾝﾄﾈｰｼｮﾝ").click();
+  await page.waitForTimeout(100);
+
+  const sliders = await page
+    .locator(".pitch-cell .q-slider .q-slider__track")
+    .all();
+  for (const slider of sliders) {
+    await slider.click({ position: { x: 0, y: 0 }, force: true });
+  }
+  await page.waitForTimeout(100);
+
+  // 確認
+  let sliderValues;
+  sliderValues = await getSliderValues(page);
+  expect(sliderValues).toEqual([
+    // ズ ン ダ モ ン ノ
+    [6.5, 6.5, 6.5, 6.5, 6.5, 6.5],
+    // チョ ウ ショ ク
+    [6.5, 6.5, 6.5, 6.5],
+  ]);
+
+  // 句読点（pauseMora）だけの変更/追加：句読点部分以外は変わらない
+  await audioCell.locator("input").clear();
+  await audioCell.locator("input").fill("ずんだもんの、朝食");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(100);
+  sliderValues = await getSliderValues(page);
+  expect(sliderValues).toEqual([
+    // ズ ン ダ モ ン ノ （、）
+    [6.5, 6.5, 6.5, 6.5, 6.5, 6.5],
+    // チョ ウ ショ ク
+    [6.5, 6.5, 6.5, 6.5],
+  ]);
+  // 読点が追加されていることを確認
+  const firstAccentPhrase = page.locator(".mora-table").first();
+  expect(await firstAccentPhrase.getByText("、").isVisible()).toBeTruthy();
+
+  // 句読点（pauseMora）だけの変更/削除：句読点部分以外は変わらない
+  await audioCell.locator("input").clear();
+  await audioCell.locator("input").fill("ずんだもんの朝食");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(100);
+  sliderValues = await getSliderValues(page);
+  expect(sliderValues).toEqual([
+    // ズ ン ダ モ ン ノ （、）
+    [6.5, 6.5, 6.5, 6.5, 6.5, 6.5],
+    // チョ ウ ショ ク
+    [6.5, 6.5, 6.5, 6.5],
+  ]);
+  // 読点が削除されていることを確認
+  expect(await firstAccentPhrase.getByText("、").isVisible()).toBeFalsy();
+
+  // 一部のアクセント句のみ変更：他のアクセント句は変わらない
+  await audioCell.locator("input").clear();
+  await audioCell.locator("input").fill("ずんだもんの夕食");
+  await page.keyboard.press("Enter");
+  await page.waitForTimeout(100);
+  sliderValues = await getSliderValues(page);
+  expect(sliderValues[0]).toEqual([
+    // ズ ン ダ モ ン ノ （、）
+    6.5, 6.5, 6.5, 6.5, 6.5, 6.5,
+  ]);
+  // 変化することを確認
+  expect(sliderValues[1]).not.toEqual([6.5, 6.5, 6.5, 6.5]);
+});
diff --git "a/tests/e2e/browser/\350\276\236\346\233\270\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts" "b/tests/e2e/browser/\350\276\236\346\233\270\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
new file mode 100644
index 0000000000..031b509599
--- /dev/null
+++ "b/tests/e2e/browser/\350\276\236\346\233\270\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260.spec.ts"
@@ -0,0 +1,119 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+import { navigateToMain } from "../navigators";
+import { getNewestQuasarDialog } from "../locators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+// 「abs」を入力して読み方を確認する
+async function validateAbsYomi(
+  page: Page,
+  expectedText: string
+): Promise<void> {
+  await page.locator(".audio-cell input").last().fill("abs");
+  await page.waitForTimeout(100);
+  await page.locator(".audio-cell input").last().press("Enter");
+  await page.waitForTimeout(100);
+  const text = (await page.locator(".text-cell").allInnerTexts()).join("");
+  expect(text).toBe(expectedText);
+}
+
+async function openDictDialog(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "設定" }).click();
+  await page.waitForTimeout(100);
+  await page.getByText("読み方＆アクセント辞書").click();
+  await page.waitForTimeout(100);
+  await expect(page.getByText("読み方＆アクセント辞書")).toBeVisible();
+  await expect(page.getByText("単語一覧")).toBeVisible();
+}
+
+async function validateInputTag(
+  page: Page,
+  inputTag: Locator,
+  expectedWord: string
+) {
+  await inputTag.press("Enter");
+  await page.waitForTimeout(100);
+  const text = await inputTag.evaluate((e: HTMLInputElement) => e.value);
+  expect(text).toBe(expectedWord);
+}
+
+test("「設定」→「読み方＆アクセント辞書」で「読み方＆アクセント辞書」ページが表示される", async ({
+  page,
+}) => {
+  test.skip(!process.env.CI, "環境変数CIが未設定のためスキップします");
+  await navigateToMain(page);
+  // アルファベットを入力し、読み方を確認
+  await validateAbsYomi(page, "エエビイエス");
+
+  // 読み方の設定画面を開く
+  await openDictDialog(page);
+
+  // 単語追加
+  await page.getByRole("button").filter({ hasText: "追加" }).click();
+  const wordInputTag = page
+    .locator(".word-editor .row")
+    .filter({ hasText: "単語" })
+    .locator(".q-field__native");
+  wordInputTag.evaluate((e: HTMLInputElement) => {
+    e.value = "abs";
+    e.dispatchEvent(new Event("input"));
+  });
+  await page.waitForTimeout(100);
+  await validateInputTag(page, wordInputTag, "ａｂｓ");
+
+  const yomiInputTag = page
+    .locator(".word-editor .row")
+    .filter({ hasText: "読み" })
+    .locator(".q-field__native");
+
+  await yomiInputTag.evaluate((e: HTMLInputElement) => {
+    e.value = "アブス";
+    e.dispatchEvent(new Event("input"));
+  });
+  await page.waitForTimeout(100);
+  await validateInputTag(page, yomiInputTag, "アブス");
+
+  // 保存して設定画面を閉じる
+  await page.getByText("保存", { exact: true }).click();
+  await page.waitForTimeout(100);
+  await getNewestQuasarDialog(page)
+    .getByRole("button")
+    .filter({ hasText: "close" })
+    .click();
+  await page.waitForTimeout(100);
+  // 辞書が登録されているかどうかを確認
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await page.waitForTimeout(100);
+  await validateAbsYomi(page, "アブス");
+
+  // もう一度設定を開き辞書からabsを削除
+  await openDictDialog(page);
+  await page.getByRole("listitem").filter({ hasText: "ａｂｓ" }).click();
+  await page.waitForTimeout(100);
+  await page
+    .locator(".word-list-header")
+    .getByRole("button")
+    .filter({ hasText: "削除" })
+    .click();
+  await page.waitForTimeout(100);
+  await getNewestQuasarDialog(page)
+    .getByRole("button")
+    .filter({ hasText: "削除" })
+    .click();
+  await page.waitForTimeout(100);
+
+  await getNewestQuasarDialog(page)
+    .getByRole("button")
+    .filter({ hasText: "close" })
+    .click();
+  await page.waitForTimeout(100);
+
+  // 辞書から削除されていることを確認
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await page.waitForTimeout(100);
+  await validateAbsYomi(page, "エエビイエス");
+});
diff --git "a/tests/e2e/browser/\351\237\263\345\243\260.spec.ts" "b/tests/e2e/browser/\351\237\263\345\243\260.spec.ts"
new file mode 100644
index 0000000000..243ead9ecf
--- /dev/null
+++ "b/tests/e2e/browser/\351\237\263\345\243\260.spec.ts"
@@ -0,0 +1,32 @@
+import { test } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("テキストを入力→アクセントを変更→音声合成→再生ができる", async ({
+  page,
+}) => {
+  await navigateToMain(page);
+
+  await page.getByRole("textbox", { name: "1行目" }).click();
+  await page.getByRole("textbox", { name: "1行目" }).fill("テストです");
+  await page.getByRole("textbox", { name: "1行目" }).press("Enter");
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator(
+      ".accent-slider-cell > div > div > .q-slider > .q-slider__track-container"
+    ) //FIXME: 良くないセレクタを直す
+    .click();
+  await page.waitForTimeout(1000);
+
+  await page.getByRole("button").filter({ hasText: "play_arrow" }).click();
+  await page.waitForTimeout(5000);
+
+  //FIXME: 本当に音声が再生できているか確かめる
+});
diff --git "a/tests/e2e/browser/\351\237\263\345\243\260\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.spec.ts" "b/tests/e2e/browser/\351\237\263\345\243\260\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.spec.ts"
new file mode 100644
index 0000000000..6a6546f9e3
--- /dev/null
+++ "b/tests/e2e/browser/\351\237\263\345\243\260\343\203\221\343\203\251\343\203\241\343\203\274\343\202\277.spec.ts"
@@ -0,0 +1,62 @@
+import { test, expect, Locator } from "@playwright/test";
+
+import { navigateToMain, toggleSetting } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+async function validateValue(locator: Locator, expectedValue: string) {
+  const value = await locator.evaluate((e: HTMLInputElement) => e.value);
+  expect(value).toBe(expectedValue);
+}
+
+test("音声パラメータ引き継ぎの設定", async ({ page }) => {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await page.locator(".audio-cell input").first().press("Enter");
+  await page.waitForTimeout(100);
+  const inputTag = page.locator(".parameters .q-field__native").first();
+  await expect(inputTag).toBeVisible();
+
+  // 数値を変更し、変わるかどうかを確認
+  validateValue(inputTag, "1.00");
+  await inputTag.evaluate((e: HTMLInputElement) => {
+    e.value = "0.50";
+    e.dispatchEvent(new Event("change"));
+  });
+  validateValue(inputTag, "0.50");
+
+  // パラメータ引き継ぎは自動的にオンなので、パラメータ引き継ぎがされるかどうかを確認
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  validateValue(inputTag, "0.50");
+
+  await toggleSetting(page, "パラメータの引き継ぎ");
+
+  // パラメータを引き継がないことの確認
+  await page.locator(".audio-cell input").first().click();
+  await page.getByRole("button").filter({ hasText: "add" }).click();
+  await validateValue(inputTag, "1.00");
+
+  // スライダーからパラメータの変更ができるかどうかを確認
+  const sliderThumbBox = await page
+    .locator(".q-slider__thumb")
+    .first()
+    .boundingBox();
+  if (!sliderThumbBox) throw new Error("sliderThumbBox is null");
+  const sliderBox = await page.locator(".q-slider").first().boundingBox();
+  if (!sliderBox) throw new Error("sliderBox is null");
+  await page.mouse.move(
+    sliderThumbBox.x + sliderThumbBox.width / 2,
+    sliderThumbBox.y + sliderThumbBox.height / 2
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    sliderBox.x + sliderBox.width,
+    sliderBox.y + sliderBox.height / 2
+  );
+  await page.waitForTimeout(100);
+  await validateValue(inputTag, "2.00");
+});
diff --git "a/tests/e2e/browser/\351\237\263\345\243\260\350\251\263\347\264\260.spec.ts" "b/tests/e2e/browser/\351\237\263\345\243\260\350\251\263\347\264\260.spec.ts"
new file mode 100644
index 0000000000..8c2b9a8ec5
--- /dev/null
+++ "b/tests/e2e/browser/\351\237\263\345\243\260\350\251\263\347\264\260.spec.ts"
@@ -0,0 +1,76 @@
+import { test, expect, Page } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+function getNthAccentPhraseInput({ page, n }: { page: Page; n: number }) {
+  return page.getByLabel(`${n + 1}番目のアクセント区間の読み`);
+}
+
+test("単体アクセント句の読み変更", async ({ page }) => {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+
+  const textField = page.getByRole("textbox", { name: "1行目" });
+  await textField.click();
+  await textField.fill("1234");
+  await textField.press("Enter");
+
+  const inputs = Array.from({ length: 4 }, (_, i) =>
+    getNthAccentPhraseInput({ page, n: i })
+  );
+
+  // 読点を追加
+  await page.getByText("セ", { exact: true }).click();
+  await inputs[0].fill("セン、");
+  await inputs[0].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("セン、")).toBeVisible();
+
+  // 「,」が読点に変換される
+  await page.getByText("ヒャ", { exact: true }).click();
+  await inputs[1].fill("ニヒャク,");
+  await inputs[1].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("ニヒャク、")).toBeVisible();
+
+  // 連続する読点を追加すると１つに集約される
+  await page.getByText("ジュ", { exact: true }).click();
+  await inputs[2].fill("サンジュウ,、,、");
+  await inputs[2].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("サンジュウ、")).toBeVisible();
+
+  // 最後のアクセント区間に読点をつけても無視される
+  await page.getByText("ヨ", { exact: true }).click();
+  await inputs[3].fill("ヨン,、,、");
+  await inputs[3].press("Enter");
+  await page.waitForTimeout(100);
+  await expect(page.getByText("ヨン、")).not.toBeVisible();
+});
+
+test("詳細調整欄のコンテキストメニュー", async ({ page }) => {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+
+  // 削除
+  await page.getByRole("textbox", { name: "1行目" }).click();
+  await page.getByRole("textbox", { name: "1行目" }).fill("1234");
+  await page.getByRole("textbox", { name: "1行目" }).press("Enter");
+  await page.getByText("サンジュウ").click({
+    button: "right",
+  });
+  await page
+    .getByRole("listitem")
+    .filter({ has: page.getByText("削除") })
+    .click();
+  await page.waitForTimeout(100);
+  await expect(page.getByText("サンジュウ")).not.toBeVisible();
+  await expect(page.getByText("ニヒャク")).toBeVisible();
+  await expect(page.getByText("ヨン")).toBeVisible();
+});
diff --git a/tests/e2e/example.spec.ts b/tests/e2e/electron/example.spec.ts
similarity index 96%
rename from tests/e2e/example.spec.ts
rename to tests/e2e/electron/example.spec.ts
index 5a6d74ee52..699528c0e2 100644
--- a/tests/e2e/example.spec.ts
+++ b/tests/e2e/electron/example.spec.ts
@@ -30,7 +30,7 @@ test.beforeAll(async () => {
   if (!appData) {
     throw new Error("Unsupported platform");
   }
-  await fs.rm(path.resolve(appData, "voicevox-test"), {
+  await fs.rm(path.resolve(appData, `${process.env.VITE_APP_NAME}-test`), {
     recursive: true,
     force: true,
   });
diff --git a/tests/e2e/locators.ts b/tests/e2e/locators.ts
new file mode 100644
index 0000000000..84e954fd3e
--- /dev/null
+++ b/tests/e2e/locators.ts
@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+
+/**
+ * 最新のquasarダイアログのlocatorを取得する
+ */
+export function getNewestQuasarDialog(page: Page) {
+  const locator = page.locator('[id^="q-portal--dialog"]');
+  return locator.last();
+}
+
+/**
+ * quasarのメニューのlocatorを取得する
+ */
+export function getQuasarMenu(page: Page, menuName: string) {
+  return page.getByRole("listitem").filter({ hasText: menuName });
+}
diff --git a/tests/e2e/navigators.ts b/tests/e2e/navigators.ts
new file mode 100644
index 0000000000..915cb88280
--- /dev/null
+++ b/tests/e2e/navigators.ts
@@ -0,0 +1,57 @@
+import { expect, Page } from "@playwright/test";
+import { getNewestQuasarDialog, getQuasarMenu } from "./locators";
+
+/**
+ * 初回起動時の確認を完了してメイン画面に移動
+ */
+export async function navigateToMain(page: Page) {
+  await expect(page.getByText("利用規約に関するお知らせ")).toBeVisible();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "同意して使用開始" }).click();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "完了" }).click();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "許可" }).click();
+}
+
+/**
+ * 特定の設定をトグルする
+ */
+export async function toggleSetting(page: Page, settingName: string) {
+  await page.getByRole("button", { name: "設定" }).click();
+  await page.waitForTimeout(100);
+  // FIXME: なぜかariaで取得できない
+  // await page.getByRole("listitem", { name: "オプション" }).click();
+  await page.getByText("オプション").click();
+  await page.waitForTimeout(100);
+  await page
+    .locator(".q-card__actions", {
+      has: page.getByText(settingName),
+    })
+    .locator(".q-toggle")
+    .click();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "設定を閉じる" }).click();
+  await page.waitForTimeout(100);
+}
+
+/**
+ * ヘルプダイアログの表示まで移動
+ */
+export async function navigateToHelpDialog(page: Page) {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "ヘルプ" }).click();
+  return getNewestQuasarDialog(page);
+}
+
+/**
+ * オプションダイアログの表示まで移動
+ */
+export async function navigateToOptionDialog(page: Page) {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "設定" }).click();
+  await getQuasarMenu(page, "オプション").click();
+  return getNewestQuasarDialog(page);
+}
diff --git a/tests/unit/background/VvppManager.spec.ts b/tests/unit/background/VvppManager.spec.ts
new file mode 100644
index 0000000000..9a0da8117a
--- /dev/null
+++ b/tests/unit/background/VvppManager.spec.ts
@@ -0,0 +1,37 @@
+import { mkdtemp, rm } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import { beforeEach, expect, test } from "vitest";
+import { EngineId, MinimumEngineManifest } from "@/type/preload";
+import VvppManager from "@/background/vvppManager";
+
+const dummyMinimumManifest: MinimumEngineManifest = {
+  name: "Test Engine",
+  uuid: EngineId("295c656b-b800-449f-aee6-b03e493816d7"),
+  command: "",
+  port: 5021,
+  supported_features: {},
+};
+
+interface VvppManagerTestContext {
+  manager: VvppManager;
+}
+
+beforeEach<VvppManagerTestContext>(async (context) => {
+  const vvppEngineDir = await mkdtemp(join(tmpdir(), "vvppTest"));
+  context.manager = new VvppManager({ vvppEngineDir });
+
+  return async () => {
+    await rm(vvppEngineDir, { recursive: true });
+  };
+});
+
+test<VvppManagerTestContext>("追加エンジンのディレクトリ名は想定通りか", ({
+  manager,
+}) => {
+  const dirName = manager.toValidDirName(dummyMinimumManifest);
+  // NOTE: パターンを変更する場合アンインストーラーのコードを変更する必要がある
+  const pattern = /^.+\+.{8}-.{4}-.{4}-.{4}-.{12}$/;
+
+  expect(dirName).toMatch(pattern);
+});
diff --git a/tests/unit/components/HowToUse.spec.ts b/tests/unit/components/help/HowToUse.spec.ts
similarity index 90%
rename from tests/unit/components/HowToUse.spec.ts
rename to tests/unit/components/help/HowToUse.spec.ts
index 05bb06be9a..f631f846c2 100644
--- a/tests/unit/components/HowToUse.spec.ts
+++ b/tests/unit/components/help/HowToUse.spec.ts
@@ -2,8 +2,8 @@ import { mount, flushPromises } from "@vue/test-utils";
 import { createStore } from "vuex";
 import { describe, it } from "vitest";
 import { Quasar } from "quasar";
-import { wrapQPage } from "../utils";
-import HowToUse from "@/components/HowToUse.vue";
+import { wrapQPage } from "../../utils";
+import HowToUse from "@/components/help/HowToUse.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 import { storeKey } from "@/store";
 
diff --git a/tests/unit/store/Vuex.spec.ts b/tests/unit/store/Vuex.spec.ts
index a812f25167..eade98f922 100644
--- a/tests/unit/store/Vuex.spec.ts
+++ b/tests/unit/store/Vuex.spec.ts
@@ -5,6 +5,7 @@ import { createStore } from "@/store/vuex";
 import { AllActions, AllGetters, AllMutations, State } from "@/store/type";
 import { commandStore } from "@/store/command";
 import { audioStore, audioCommandStore } from "@/store/audio";
+import { audioPlayerStore } from "@/store/audioPlayer";
 import { projectStore } from "@/store/project";
 import { uiStore } from "@/store/ui";
 import { settingStore } from "@/store/setting";
@@ -27,15 +28,16 @@ describe("store/vuex.js test", () => {
         engineSupportedDevices: {},
         altPortInfos: {},
         characterInfos: {},
+        audioKeysWithInitializingSpeaker: [],
         morphableTargetsInfo: {},
         defaultStyleIds: [],
         userCharacterOrder: [],
         audioItems: {},
         audioKeys: [],
         audioStates: {},
-        audioPlayStartPoint: 0,
         uiLockCount: 0,
         dialogLockCount: 0,
+        reloadingLock: false,
         nowPlayingContinuously: false,
         undoCommands: [],
         redoCommands: [],
@@ -128,6 +130,8 @@ describe("store/vuex.js test", () => {
           enableInterrogativeUpspeak: false,
           enableMorphing: false,
           enableMultiEngine: false,
+          enableMultiSelect: false,
+          shouldKeepTuningOnTextChange: false,
         },
         splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
         splitterPosition: {
@@ -147,6 +151,7 @@ describe("store/vuex.js test", () => {
       getters: {
         ...uiStore.getters,
         ...audioStore.getters,
+        ...audioPlayerStore.getters,
         ...commandStore.getters,
         ...engineStore.getters,
         ...projectStore.getters,
@@ -160,6 +165,7 @@ describe("store/vuex.js test", () => {
       mutations: {
         ...uiStore.mutations,
         ...audioStore.mutations,
+        ...audioPlayerStore.mutations,
         ...commandStore.mutations,
         ...engineStore.mutations,
         ...projectStore.mutations,
@@ -173,6 +179,7 @@ describe("store/vuex.js test", () => {
       actions: {
         ...uiStore.actions,
         ...audioStore.actions,
+        ...audioPlayerStore.actions,
         ...commandStore.actions,
         ...engineStore.actions,
         ...projectStore.actions,
@@ -202,7 +209,6 @@ describe("store/vuex.js test", () => {
     assert.isEmpty(store.state.audioKeys);
     assert.isObject(store.state.audioStates);
     assert.isEmpty(store.state.audioStates);
-    assert.equal(store.state.audioPlayStartPoint, 0);
     assert.equal(store.state.uiLockCount, 0);
     assert.equal(store.state.nowPlayingContinuously, false);
     assert.isArray(store.state.undoCommands);
diff --git a/vite.config.ts b/vite.config.ts
index 83b2e518e0..35c5378cd6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import vue from "@vitejs/plugin-vue";
 import checker from "vite-plugin-checker";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { BuildOptions, defineConfig, Plugin } from "vite";
+import { BuildOptions, defineConfig, loadEnv, Plugin } from "vite";
 import { quasar } from "@quasar/vite-plugin";
 
 rmSync(path.resolve(__dirname, "dist"), { recursive: true, force: true });
@@ -17,6 +17,13 @@ const isElectron = process.env.VITE_TARGET === "electron";
 const isBrowser = process.env.VITE_TARGET === "browser";
 
 export default defineConfig((options) => {
+  const package_name = process.env.npm_package_name;
+  const env = loadEnv(options.mode, __dirname);
+  if (!package_name.startsWith(env.VITE_APP_NAME)) {
+    throw new Error(
+      `"package.json"の"name":"${package_name}"は"VITE_APP_NAME":"${env.VITE_APP_NAME}"から始まっている必要があります`
+    );
+  }
   const shouldEmitSourcemap = ["development", "test"].includes(options.mode);
   process.env.VITE_7Z_BIN_NAME =
     (options.mode === "development"
@@ -65,6 +72,14 @@ export default defineConfig((options) => {
         path.resolve(__dirname, "tests/unit/**/*.spec.ts").replace(/\\/g, "/"),
       ],
       environment: "happy-dom",
+      environmentMatchGlobs: [
+        [
+          path
+            .resolve(__dirname, "tests/unit/background/**/*.spec.ts")
+            .replace(/\\/g, "/"),
+          "node",
+        ],
+      ],
       globals: true,
     },
     define: {
@@ -86,8 +101,7 @@ export default defineConfig((options) => {
             lintCommand: "eslint --ext .ts,.vue .",
           },
           typescript: true,
-          // FIXME: vue-tscの型エラーを解決したら有効化する
-          // vueTsc: true,
+          vueTsc: true,
         }),
       isElectron &&
         electron({