geolonia · sugama-satsuki · Mar 2, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 2, 2026
diff --git a/e2e/features/csv-import.feature b/e2e/features/csv-import.feature
@@ -15,7 +15,8 @@
     かつ 1 番目のフィーチャのジオメトリタイプが "Point" である
     かつ 1 番目のフィーチャのプロパティ "name" が "東京駅" である
 
-  シナリオ: インポートボタンにホバーするとポップアップが表示される
-    もし インポートボタンにホバーする
-    ならば "CSVインポート" インポートボタンが表示されている
-    かつ "GeoJSONインポート" インポートボタンが表示されている
+  シナリオ: インポートアイコンにホバーするとインポートメニューが表示される
+    ならば GeoJSONパネルにインポートアイコンが表示されている
+    もし インポートアイコンにホバーする
+    ならば インポートポップアップに "CSVインポート" が表示されている
+    かつ インポートポップアップに "GeoJSONインポート" が表示されている
diff --git a/e2e/features/help-modal.feature b/e2e/features/help-modal.feature
@@ -1,21 +1,21 @@
 # language: ja
 機能: 使い方ガイド
 
-  シナリオ: ヘルプボタンをクリックするとモーダルが表示される
+  シナリオ: 使い方タブをクリックするとサイドバーが表示される
     前提 アプリケーションが表示されている
     もし ヘルプボタンをクリックする
-    ならば 使い方モーダルが表示されている
+    ならば 使い方サイドバーが表示されている
 
-  シナリオ: 閉じるボタンをクリックするとモーダルが閉じる
+  シナリオ: 閉じるボタンをクリックするとサイドバーが閉じる
     前提 アプリケーションが表示されている
     かつ ヘルプボタンをクリックする
-    かつ 使い方モーダルが表示されている
+    かつ 使い方サイドバーが表示されている
     もし 閉じるボタンをクリックする
-    ならば 使い方モーダルが表示されていない
+    ならば 使い方サイドバーが表示されていない
 
-  シナリオ: オーバーレイをクリックするとモーダルが閉じる
+  シナリオ: Escキーでサイドバーが閉じる
     前提 アプリケーションが表示されている
     かつ ヘルプボタンをクリックする
-    かつ 使い方モーダルが表示されている
-    もし オーバーレイをクリックする
-    ならば 使い方モーダルが表示されていない
+    かつ 使い方サイドバーが表示されている
+    もし Escキーを押す
+    ならば 使い方サイドバーが表示されていない
diff --git a/e2e/step-definitions/csv-import-steps.ts b/e2e/step-definitions/csv-import-steps.ts
@@ -1,7 +1,7 @@
 import { When, Then, DataTable } from '@cucumber/cucumber'
 import { expect } from '@playwright/test'
 import { CustomWorld } from '../support/world.js'
-import { IMPORT_ACTION_BUTTON, IMPORT_POPUP_BTN } from '../support/helpers/selectors.js'
+import { GEOJSON_PANEL } from '../support/helpers/selectors.js'
 import * as path from 'path'
 import * as fs from 'fs'
 import * as os from 'os'
@@ -25,13 +25,17 @@ When('CSVファイルをインポートする:', async function (this: CustomWor
   fs.unlinkSync(tmpFile)
 })
 
-When('インポートボタンにホバーする', async function (this: CustomWorld) {
-  await this.page.hover(IMPORT_ACTION_BUTTON)
-  // ポップアップが表示されるのを待つ
-  await this.page.waitForSelector(IMPORT_POPUP_BTN, { timeout: 3000 })
+Then('GeoJSONパネルにインポートアイコンが表示されている', async function (this: CustomWorld) {
+  const button = this.page.locator(`${GEOJSON_PANEL} .geojson-panel__header-button[aria-label="インポート"]`)
+  await expect(button).toBeVisible()
 })
 
-Then('{string} インポートボタンが表示されている', async function (this: CustomWorld, buttonText: string) {
-  const button = this.page.locator(IMPORT_POPUP_BTN, { hasText: buttonText })
-  await expect(button).toBeVisible()
+When('インポートアイコンにホバーする', async function (this: CustomWorld) {
+  const button = this.page.locator(`${GEOJSON_PANEL} .geojson-panel__header-button[aria-label="インポート"]`)
+  await button.hover()
+})
+
+Then('インポートポップアップに {string} が表示されている', async function (this: CustomWorld, buttonText: string) {
+  const popup = this.page.locator(`${GEOJSON_PANEL} .geojson-panel__import-popup-btn`, { hasText: buttonText })
+  await expect(popup).toBeVisible()
 })
diff --git a/e2e/step-definitions/help-modal-steps.ts b/e2e/step-definitions/help-modal-steps.ts
@@ -1,28 +1,27 @@
 import { When, Then } from '@cucumber/cucumber'
 import { expect } from '@playwright/test'
 import { CustomWorld } from '../support/world.js'
-import { HELP_BUTTON, HELP_MODAL, HELP_MODAL_OVERLAY, HELP_MODAL_CLOSE } from '../support/helpers/selectors.js'
+import { HELP_TAB, HELP_SIDEBAR, HELP_SIDEBAR_CLOSE } from '../support/helpers/selectors.js'
 
 When('ヘルプボタンをクリックする', async function (this: CustomWorld) {
-  await this.page.locator(HELP_BUTTON).click()
+  await this.page.locator(HELP_TAB).click()
   await this.page.waitForTimeout(300)
 })
 
-Then('使い方モーダルが表示されている', async function (this: CustomWorld) {
-  await expect(this.page.locator(HELP_MODAL)).toBeVisible()
+Then('使い方サイドバーが表示されている', async function (this: CustomWorld) {
+  await expect(this.page.locator(HELP_SIDEBAR)).toBeVisible()
 })
 
-Then('使い方モーダルが表示されていない', async function (this: CustomWorld) {
-  await expect(this.page.locator(HELP_MODAL)).not.toBeVisible()
+Then('使い方サイドバーが表示されていない', async function (this: CustomWorld) {
+  await expect(this.page.locator(HELP_SIDEBAR)).not.toBeVisible()
 })
 
 When('閉じるボタンをクリックする', async function (this: CustomWorld) {
-  await this.page.locator(HELP_MODAL_CLOSE).click()
+  await this.page.locator(HELP_SIDEBAR_CLOSE).click()
   await this.page.waitForTimeout(300)
 })
 
-When('オーバーレイをクリックする', async function (this: CustomWorld) {
-  // モーダルの外（オーバーレイ）をクリック
-  await this.page.locator(HELP_MODAL_OVERLAY).click({ position: { x: 10, y: 10 } })
+When('Escキーを押す', async function (this: CustomWorld) {
+  await this.page.keyboard.press('Escape')
   await this.page.waitForTimeout(300)
 })
diff --git a/e2e/support/helpers/selectors.ts b/e2e/support/helpers/selectors.ts
@@ -30,9 +30,7 @@ export const FEATURE_CONTEXT_MENU_ITEM = '.feature-context-menu__item'
 /** トースト通知 */
 export const MAP_TOAST = '.map-toast'
 
-/** インポート */
-export const IMPORT_ACTION_BUTTON = '.draw-control-panel__action-button--import'
-export const IMPORT_POPUP_BTN = '.draw-control-panel__import-popup-btn'
+/** インポート（GeoJSONパネル内） */
 
 /** 住所検索バー */
 export const ADDRESS_SEARCH_BAR = '.address-search-bar'
@@ -41,11 +39,10 @@ export const ADDRESS_SEARCH_BUTTON = '.address-search-bar__button'
 export const ADDRESS_SEARCH_ERROR = '.address-search-bar__message--error'
 export const ADDRESS_SEARCH_WARNING = '.address-search-bar__message--warning'
 
-/** ヘルプモーダル */
-export const HELP_BUTTON = '[aria-label="使い方を見る"]'
-export const HELP_MODAL = '.help-modal'
-export const HELP_MODAL_OVERLAY = '.help-modal-overlay'
-export const HELP_MODAL_CLOSE = '.help-modal__close'
+/** ヘルプサイドバー */
+export const HELP_TAB = '.help-tab'
+export const HELP_SIDEBAR = '.help-sidebar'
+export const HELP_SIDEBAR_CLOSE = '.help-sidebar__close'
 
 /** プロパティエディタ */
 export const FEATURE_PROPS_EDITOR = '[data-testid="feature-props-editor"]'

diff --git a/src/components/DrawControlPanel.css b/src/components/DrawControlPanel.css
@@ -129,6 +129,12 @@
   transform: scale(1.05);
 }
 
+.draw-control-panel__separator {
+  height: 1px;
+  margin: 2px 0;
+  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
+}
+
 .draw-control-panel__action-button--reset {
   border-color: rgba(239, 68, 68, 0.4);
   background: linear-gradient(160deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
@@ -143,114 +149,10 @@
   transform: scale(1.05);
 }
 
-.draw-control-panel__separator {
-  height: 1px;
-  margin: 2px 0;
-  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-}
-
 .draw-control-panel__action-button--disabled {
   opacity: 0.35;
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
 
-/* --- Share URL button --- */
-
-.draw-control-panel__action-button--share {
-  border-color: rgba(0, 0, 0, 0.08);
-  background: rgba(255, 255, 255, 0.6);
-  color: #475569;
-}
-
-.draw-control-panel__action-button--share:hover {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(20, 184, 166, 0.06));
-  border-color: rgba(16, 185, 129, 0.3);
-  color: #10b981;
-  box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
-  transform: scale(1.05);
-}
-
-/* --- Help button --- */
-
-.draw-control-panel__action-button--help {
-  border-color: rgba(0, 0, 0, 0.08);
-  background: rgba(255, 255, 255, 0.6);
-  color: #475569;
-}
-
-.draw-control-panel__action-button--help:hover {
-  background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(124, 58, 237, 0.06));
-  border-color: rgba(26, 115, 232, 0.25);
-  color: var(--color-blue);
-  box-shadow: 0 0 12px rgba(26, 115, 232, 0.12);
-  transform: scale(1.05);
-}
-
-/* --- Import button & popup --- */
-
-.draw-control-panel__import-wrapper {
-  position: relative;
-}
-
-.draw-control-panel__action-button--import {
-  border-color: rgba(0, 0, 0, 0.08);
-  background: rgba(255, 255, 255, 0.6);
-  color: #475569;
-}
-
-.draw-control-panel__action-button--import:hover {
-  background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(124, 58, 237, 0.06));
-  border-color: rgba(26, 115, 232, 0.2);
-  color: var(--color-blue);
-  box-shadow: 0 0 12px rgba(26, 115, 232, 0.1);
-  transform: scale(1.05);
-}
-
-.draw-control-panel__import-popup {
-  position: absolute;
-  left: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px;
-  border-radius: 10px;
-
-  background:
-    linear-gradient(160deg,
-      rgba(255, 255, 255, 0.92) 0%,
-      rgba(237, 233, 254, 0.8) 100%);
-  backdrop-filter: blur(var(--glass-blur-strong));
-  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
-  border: 1px solid var(--glass-border);
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.08),
-    0 2px 8px rgba(26, 115, 232, 0.06);
-
-  white-space: nowrap;
-  z-index: 10;
-}
-
-.draw-control-panel__import-popup-btn {
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: rgba(255, 255, 255, 0.7);
-  font-size: 12px;
-  font-weight: 600;
-  color: #374151;
-  cursor: pointer;
-  transition:
-    background var(--transition-fast),
-    border-color var(--transition-fast),
-    color var(--transition-fast);
-}
-
-.draw-control-panel__import-popup-btn:hover {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(20, 184, 166, 0.08));
-  border-color: rgba(16, 185, 129, 0.4);
-  color: #10b981;
-}