diff --git a/src/components/Base/BaseNavigationView.vue b/src/components/Base/BaseNavigationView.vue
index c92dc53b4b..74cc2c0919 100644
--- a/src/components/Base/BaseNavigationView.vue
+++ b/src/components/Base/BaseNavigationView.vue
@@ -30,6 +30,7 @@ import BaseScrollArea from "./BaseScrollArea.vue";
   grid-template-rows: 100%;
   backdrop-filter: blur(32px);
   background-color: colors.$background-drawer;
+  color: colors.$display;
 }
 
 .sidebar-inner {
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index a1224813c8..db7b0851b1 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -7,70 +7,66 @@
     class="help-dialog transparent-backdrop"
   >
     <QLayout container view="hHh Lpr lff">
-      <div class="grid">
-        <div class="list-wrapper">
-          <BaseScrollArea>
-            <div class="list-inner">
-              <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-                <BaseListItem
-                  v-if="page.type === 'item'"
-                  :selected="selectedPageIndex === pageIndex"
-                  @click="selectedPageIndex = pageIndex"
-                >
-                  {{ page.name }}
-                </BaseListItem>
-                <div v-else-if="page.type === 'separator'" class="list-label">
-                  {{ page.name }}
-                </div>
-              </template>
-            </div>
-          </BaseScrollArea>
-        </div>
-
-        <QPageContainer>
-          <QPage>
-            <QTabPanels v-model="selectedPageIndex">
-              <QTabPanel
-                v-for="(page, pageIndex) of pagedata"
-                :key="pageIndex"
-                :name="pageIndex"
-                class="q-pa-none"
+      <QPageContainer>
+        <QHeader class="q-pa-sm">
+          <QToolbar>
+            <QToolbarTitle class="text-display">
+              ヘルプ /
+              {{ selectedPage.parent ? selectedPage.parent + " / " : ""
+              }}{{ selectedPage.name }}
+            </QToolbarTitle>
+            <QBtn
+              v-if="selectedPage.shouldShowOpenLogDirectoryButton"
+              unelevated
+              color="toolbar-button"
+              textColor="toolbar-button-display"
+              class="text-no-wrap text-bold q-mr-sm"
+              @click="openLogDirectory"
+            >
+              ログフォルダを開く
+            </QBtn>
+            <!-- close button -->
+            <QBtn
+              round
+              flat
+              icon="close"
+              color="display"
+              aria-label="ヘルプを閉じる"
+              @click="modelValueComputed = false"
+            />
+          </QToolbar>
+        </QHeader>
+        <BaseNavigationView>
+          <template #sidebar>
+            <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
+              <BaseListItem
+                v-if="page.type === 'item'"
+                :selected="selectedPageIndex === pageIndex"
+                @click="selectedPageIndex = pageIndex"
               >
-                <div v-if="page.type === 'item'" class="root">
-                  <QHeader class="q-pa-sm">
-                    <QToolbar>
-                      <QToolbarTitle class="text-display">
-                        ヘルプ / {{ page.parent ? page.parent + " / " : ""
-                        }}{{ page.name }}
-                      </QToolbarTitle>
-                      <QBtn
-                        v-if="page.shouldShowOpenLogDirectoryButton"
-                        unelevated
-                        color="toolbar-button"
-                        textColor="toolbar-button-display"
-                        class="text-no-wrap text-bold q-mr-sm"
-                        @click="openLogDirectory"
-                      >
-                        ログフォルダを開く
-                      </QBtn>
-                      <!-- close button -->
-                      <QBtn
-                        round
-                        flat
-                        icon="close"
-                        color="display"
-                        aria-label="ヘルプを閉じる"
-                        @click="modelValueComputed = false"
-                      />
-                    </QToolbar>
-                  </QHeader>
-                  <Component :is="page.component" v-bind="page.props" />
-                </div>
-              </QTabPanel>
-            </QTabPanels>
-          </QPage>
-        </QPageContainer>
-      </div>
+                {{ page.name }}
+              </BaseListItem>
+              <div v-else-if="page.type === 'separator'" class="list-label">
+                {{ page.name }}
+              </div>
+            </template>
+          </template>
+          <QTabPanels v-model="selectedPageIndex">
+            <QTabPanel
+              v-for="(page, pageIndex) of pagedata"
+              :key="pageIndex"
+              :name="pageIndex"
+              class="q-pa-none"
+            >
+              <Component
+                :is="page.component"
+                v-if="page.type === 'item'"
+                v-bind="page.props"
+              />
+            </QTabPanel>
+          </QTabPanels>
+        </BaseNavigationView>
+      </QPageContainer>
     </QLayout>
   </QDialog>
 </template>
@@ -83,7 +79,7 @@ import OssLicense from "./HelpOssLicenseSection.vue";
 import UpdateInfo from "./HelpUpdateInfoSection.vue";
 import LibraryPolicy from "./HelpLibraryPolicySection.vue";
 import BaseListItem from "@/components/Base/BaseListItem.vue";
-import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import BaseNavigationView from "@/components/Base/BaseNavigationView.vue";
 import { UpdateInfo as UpdateInfoObject, UrlString } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
@@ -284,6 +280,14 @@ const pagedata = computed(() => {
 
 const selectedPageIndex = ref(0);
 
+const selectedPage = computed(() => {
+  if (pagedata.value[selectedPageIndex.value].type == "item") {
+    return pagedata.value[selectedPageIndex.value] as PageItem;
+  } else {
+    throw new Error("selectedPageにはPageItem型の値を指定してください。");
+  }
+});
+
 const openLogDirectory = () => window.backend.openLogDirectory();
 </script>
 
@@ -291,26 +295,6 @@ const openLogDirectory = () => window.backend.openLogDirectory();
 @use "@/styles/v2/colors" as colors;
 @use "@/styles/v2/variables" as vars;
 
-.grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  backdrop-filter: blur(32px);
-  background-color: colors.$background-drawer;
-}
-
-// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
-.list-wrapper {
-  margin-top: 66px;
-  height: calc(100vh - 90px);
-  width: max-content;
-}
-
-.list-inner {
-  display: flex;
-  flex-direction: column;
-  padding: vars.$padding-2;
-}
-
 .list-label {
   padding: vars.$padding-2;
   padding-bottom: vars.$padding-1;
@@ -328,6 +312,6 @@ const openLogDirectory = () => window.backend.openLogDirectory();
 }
 
 .q-tab-panels {
-  background: none;
+  display: contents;
 }
 </style>
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 4007eaa0dc..87675f6f9f 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -131,11 +131,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 @use "@/styles/v2/colors" as colors;
 
 .container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$background;
-  border-left: 1px solid colors.$border;
+  height: 100%;
 }
 
 .inner {
@@ -153,6 +149,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 
 .subtitle {
   @include mixin.headline-2;
+  margin-top: vars.$gap-2;
 }
 
 .list {
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index 44648f80c6..812a8d7d6e 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -35,11 +35,7 @@ onMounted(async () => {
 @use "@/styles/v2/colors" as colors;
 
 .container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$background;
-  border-left: 1px solid colors.$border;
+  height: 100%;
 }
 
 .inner {
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index cd575c5980..5b40d44e95 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -60,11 +60,7 @@ const selectLicenseIndex = (index: number | undefined) => {
 @use "@/styles/v2/colors" as colors;
 
 .container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$background;
-  border-left: 1px solid colors.$border;
+  height: 100%;
 }
 
 .inner {
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index d7639fac87..bf238a836a 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -61,11 +61,7 @@ const props = defineProps<{
 @use "@/styles/v2/colors" as colors;
 
 .container {
-  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
-  // height: 100%;
-  height: calc(100vh - 90px);
-  background-color: colors.$background;
-  border-left: 1px solid colors.$border;
+  height: 100%;
 }
 
 .inner {