ヘルプサイドバー改善: 頂点削除の説明追加 + 使い方タブの視認性向上

src/components/HelpSidebar.css

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 14px;
+  padding: 10px 16px;
   border-radius: 0 10px 10px 0;
   background:
     linear-gradient(
@@ -22,9 +22,9 @@
   box-shadow:
     0 4px 16px rgba(0, 0, 0, 0.08),
     0 2px 6px rgba(26, 115, 232, 0.06);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
-  color: #374151;
+  color: var(--color-blue);
   cursor: pointer;
   transition:
     background var(--transition-normal),
@@ -49,8 +49,31 @@
 }
 
 .help-tab__icon {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+}
+
+.help-tab--pulse {
+  animation: help-tab-pulse 2s ease-in-out 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .help-tab--pulse {
+    animation: none;
+  }
+}
+
+@keyframes help-tab-pulse {
+  0%, 100% {
+    box-shadow:
+      0 4px 16px rgba(0, 0, 0, 0.08),
+      0 2px 6px rgba(26, 115, 232, 0.06);
+  }
+  50% {
+    box-shadow:
+      0 4px 20px rgba(26, 115, 232, 0.25),
+      0 2px 10px rgba(26, 115, 232, 0.15);
+  }
 }
 
 /* --- Help Sidebar --- */

src/components/HelpSidebar.tsx

@@ -8,10 +8,19 @@ type HelpSidebarProps = {
   onClose: () => void
 }
 
+const HELP_TAB_SEEN_KEY = 'geojson-maker:help-tab-seen'
+
 export function HelpSidebar({ isOpen, onOpen, onClose }: HelpSidebarProps) {
   const closeButtonRef = useRef<HTMLButtonElement>(null)
   const isMac = /mac/i.test(navigator.userAgent)
   const shortcutItems = getShortcutItems(isMac)
+  const showPulse = useRef(!localStorage.getItem(HELP_TAB_SEEN_KEY)).current
+
+  useEffect(() => {
+    if (showPulse) {
+      localStorage.setItem(HELP_TAB_SEEN_KEY, '1')
+    }
+  }, [showPulse])
 
   useEffect(() => {
     if (isOpen) closeButtonRef.current?.focus()
@@ -44,7 +53,7 @@ export function HelpSidebar({ isOpen, onOpen, onClose }: HelpSidebarProps) {
       {!isOpen && (
         <button
           type='button'
-          className='help-tab'
+          className={`help-tab${showPulse ? ' help-tab--pulse' : ''}`}
           onClick={onOpen}
           aria-label='使い方を見る'
         >

src/lib/__tests__/help-content.test.ts

@@ -22,6 +22,23 @@ describe('HELP_SECTIONS', () => {
     }
   })
 
+  it('「選択・編集」セクションに頂点削除の説明が含まれる', () => {
+    const section = HELP_SECTIONS.find((s) => s.title === '選択・編集')
+    expect(section).toBeDefined()
+    expect(section!.items).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          label: '頂点の削除',
+          description: expect.stringContaining('Delete キー'),
+        }),
+        expect.objectContaining({
+          label: '描画中ポイントの削除',
+          description: expect.stringContaining('右クリック'),
+        }),
+      ]),
+    )
+  })
+
   it('「操作・ショートカット」セクションのアイテムに shortcut が含まれる', () => {
     const section = HELP_SECTIONS.find((s) => s.title === '操作・ショートカット')
     expect(section).toBeDefined()

src/lib/help-content.ts

@@ -29,6 +29,8 @@ export const HELP_SECTIONS: HelpSection[] = [
       { label: 'マルチ選択', description: 'Shift+クリックで複数のフィーチャを追加選択できます' },
       { label: 'ラバーバンド選択', description: '描画モードなしの状態で地図上をドラッグすると、範囲内のフィーチャを一括選択できます' },
       { label: '頂点編集', description: 'ライン/ポリゴンを選択すると頂点が点で表示され、ドラッグして位置を変更できます' },
+      { label: '頂点の削除', description: '選択中のライン/ポリゴンの頂点を右クリック →「この頂点を削除」で個別に削除できます。頂点をクリック選択後に Delete キーでも削除可能です' },
+      { label: '描画中ポイントの削除', description: 'ライン/ポリゴンの描画途中に打ったポイントを右クリック →「この頂点を削除」で取り消せます' },
       { label: '削除', description: 'フィーチャを選択して削除ボタン（🗑）をクリックすると削除されます。複数選択時は一括削除です' },
     ],
   },