diff --git a/src/components/CharacterOrderDialog.vue b/src/components/CharacterOrderDialog.vue
index 643eecbb4c..4d4c056a85 100644
--- a/src/components/CharacterOrderDialog.vue
+++ b/src/components/CharacterOrderDialog.vue
@@ -402,10 +402,7 @@ const closeDialog = () => {
 }
 
 .main {
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  );
+  height: calc(100vh - #{vars.$top-bar-height});
 
   display: flex;
   flex-direction: row;
diff --git a/src/components/DefaultStyleListDialog.vue b/src/components/DefaultStyleListDialog.vue
index 610b3185c3..88d9ccfe06 100644
--- a/src/components/DefaultStyleListDialog.vue
+++ b/src/components/DefaultStyleListDialog.vue
@@ -227,10 +227,7 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
 }
 
 .main {
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  );
+  height: calc(100vh - #{vars.$top-bar-height});
 
   display: flex;
   flex-direction: row;
diff --git a/src/components/DefaultStyleSelectDialog.vue b/src/components/DefaultStyleSelectDialog.vue
index ebef605e20..4a4cceeccb 100644
--- a/src/components/DefaultStyleSelectDialog.vue
+++ b/src/components/DefaultStyleSelectDialog.vue
@@ -256,10 +256,7 @@ const closeDialog = () => {
   }
 }
 .q-page {
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  );
+  height: calc(100vh - #{vars.$top-bar-height});
   overflow-y: scroll;
 
   > :deep(.scroll) {
diff --git a/src/components/DictionaryManageDialog.vue b/src/components/DictionaryManageDialog.vue
index 8a17c6d0fc..b6ff68d996 100644
--- a/src/components/DictionaryManageDialog.vue
+++ b/src/components/DictionaryManageDialog.vue
@@ -747,10 +747,7 @@ const toDialogClosedState = () => {
 .word-list {
   // menubar-height + header-height + window-border-width +
   // 82(title & buttons) + 30(margin 15x2)
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width + 82px + 30px}
-  );
+  height: calc(100vh - #{vars.$top-bar-height + 82px + 30px});
   width: 100%;
   overflow-y: auto;
 }
@@ -788,10 +785,7 @@ const toDialogClosedState = () => {
 .word-editor {
   display: flex;
   flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  ) !important;
+  height: calc(100vh - #{vars.$top-bar-height}) !important;
   overflow: auto;
 }
 
diff --git a/src/components/EngineManageDialog.vue b/src/components/EngineManageDialog.vue
index 74fc74dfc1..fda544ee88 100644
--- a/src/components/EngineManageDialog.vue
+++ b/src/components/EngineManageDialog.vue
@@ -700,10 +700,7 @@ const toDialogClosedState = () => {
 .engine-list {
   // menubar-height + header-height + window-border-width +
   // 82(title & buttons) + 30(margin 15x2)
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width + 82px + 30px}
-  );
+  height: calc(100vh - #{vars.$top-bar-height + 82px + 30px});
   width: 100%;
   overflow-y: auto;
 }
@@ -727,10 +724,7 @@ const toDialogClosedState = () => {
 .engine-detail {
   display: flex;
   flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  ) !important;
+  height: calc(100vh - #{vars.$top-bar-height}) !important;
   overflow: auto;
 }
 
diff --git a/src/components/HotkeySettingDialog.vue b/src/components/HotkeySettingDialog.vue
index cc010bdf9f..8bb4a6c032 100644
--- a/src/components/HotkeySettingDialog.vue
+++ b/src/components/HotkeySettingDialog.vue
@@ -373,10 +373,7 @@ const resetHotkey = (action: string) => {
 
 .hotkey-table {
   width: calc(100vw - #{vars.$window-border-width * 2});
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
-      vars.$window-border-width}
-  );
+  height: calc(100vh - #{vars.$top-bar-height});
 
   > :deep(.scroll) {
     overflow-y: scroll;
diff --git a/src/components/MobileHeaderBar.vue b/src/components/MobileHeaderBar.vue
new file mode 100644
index 0000000000..5b35e15d43
--- /dev/null
+++ b/src/components/MobileHeaderBar.vue
@@ -0,0 +1,126 @@
+<!-- TODO: PC版ヘッダーと統合する -->
+<template>
+  <q-toolbar class="bg-primary text-white">
+    <q-btn flat round dense>
+      <q-icon name="menu" />
+      <q-menu transition-show="none" transition-hide="none">
+        <q-list dense>
+          <menu-item
+            v-for="(item, index) in menudata"
+            :key="item.label"
+            :menudata="item"
+            v-model:selected="subMenuOpenFlags[index]"
+          />
+        </q-list>
+      </q-menu>
+    </q-btn>
+    <q-space />
+    <q-btn
+      v-for="button in headerButtons"
+      :key="button.icon"
+      :disable="button.disable"
+      flat
+      round
+      dense
+      @click="button.onClick"
+      :icon="button.icon"
+    />
+  </q-toolbar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { MenuItemData } from "./MenuBar.vue";
+import MenuItem from "./MenuItem.vue";
+import { useStore } from "@/store";
+const store = useStore();
+
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+const canUndo = computed(() => store.getters.CAN_UNDO);
+const canRedo = computed(() => store.getters.CAN_REDO);
+
+const headerButtons = computed(() => [
+  {
+    icon: "file_upload",
+    onClick: () => {
+      alert("TODO: 一つ保存する");
+    },
+    disable: uiLocked.value,
+  },
+  {
+    icon: "undo",
+    onClick: () => {
+      store.dispatch("UNDO");
+    },
+    disable: !canUndo.value,
+  },
+  {
+    icon: "redo",
+    onClick: () => {
+      store.dispatch("REDO");
+    },
+    disable: !canRedo.value,
+  },
+]);
+
+const menudata = ref<MenuItemData[]>([
+  {
+    type: "button",
+    label: "選択している音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "テキストを繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "テキスト読み込み",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "メニューに戻る",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+
+const subMenuOpenFlags = ref<boolean[]>(
+  [...Array(menudata.value.length)].map(() => false)
+);
+</script>
diff --git a/src/main.ts b/src/main.ts
index c5fdf8c58f..2d1e9c8df5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -35,6 +35,8 @@ if (Capacitor.isNativePlatform()) {
   console.log("Running in Electron");
 }
 
+document.body.setAttribute("data-target", import.meta.env.VITE_TARGET);
+
 createApp(App)
   .use(store, storeKey)
   .use(router)
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 512686ebc5..786ae0ffe6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,17 @@
 $window-border-width: 2px;
 
-$header-height: 66px;
-$menubar-height: 24px;
+$header-height: var(--header-height);
+$menubar-height: var(--menubar-height);
+body {
+  &:not([data-target="mobile"]) {
+    --header-height: 66px;
+    --menubar-height: 24px;
+  }
+  &[data-target="mobile"] {
+    --header-height: 50px;
+    --menubar-height: 0px;
+  }
+}
+$top-bar-height: "(#{$header-height} + #{$menubar-height} + #{$window-border-width})";
 
 $detail-view-splitter-cell-z-index: 2;
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index f0619ef524..b46c3a35b7 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -858,10 +858,7 @@ watch(activeAudioKey, (audioKey) => {
   display: flex;
 
   .q-splitter--horizontal {
-    height: calc(
-      100vh - #{vars.$menubar-height + vars.$header-height +
-        vars.$window-border-width}
-    );
+    height: calc(100vh - #{vars.$top-bar-height});
   }
 }
 
diff --git a/src/views/MobileEditorHome.vue b/src/views/MobileEditorHome.vue
index 8c48890f81..667c1e86c9 100644
--- a/src/views/MobileEditorHome.vue
+++ b/src/views/MobileEditorHome.vue
@@ -1,15 +1,12 @@
 <!-- FIXME: ロジックがEditorHome.vueからコピーされているので、良い感じに共通化する -->
 <template>
-  <menu-bar />
-
   <q-layout reveal elevated container class="layout-container">
-    <header-bar />
+    <mobile-header-bar />
 
     <q-page-container>
       <q-page class="main-row-panes">
         <progress-dialog />
 
-        <!-- TODO: 複数エンジン対応 -->
         <div
           v-if="!isCompletedInitialStartup || allEngineState === 'STARTING'"
           class="waiting-engine"
@@ -174,11 +171,10 @@ import draggable from "vuedraggable";
 import { QResizeObserver, useQuasar } from "quasar";
 import cloneDeep from "clone-deep";
 import { useStore } from "@/store";
-import HeaderBar from "@/components/HeaderBar.vue";
+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 MenuBar from "@/components/MenuBar.vue";
 import HelpDialog from "@/components/HelpDialog.vue";
 import SettingDialog from "@/components/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
@@ -839,10 +835,7 @@ const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {
   display: flex;
 
   .q-splitter--horizontal {
-    height: calc(
-      100vh - #{vars.$menubar-height + vars.$header-height +
-        vars.$window-border-width}
-    );
+    height: calc(100vh - #{vars.$top-bar-height});
   }
 }