diff --git a/packages/spindle-hooks/.storybook/main.js b/packages/spindle-hooks/.storybook/main.js
index 99bea08a3..b93483485 100644
--- a/packages/spindle-hooks/.storybook/main.js
+++ b/packages/spindle-hooks/.storybook/main.js
@@ -17,6 +17,6 @@ module.exports = {
   },
 
   typescript: {
-    reactDocgen: false,
+    reactDocgen: 'react-docgen-typescript',
   },
 };
diff --git a/packages/spindle-hooks/src/useCarousel/useCarousel.mdx b/packages/spindle-hooks/src/useCarousel/useCarousel.mdx
index 964b849c6..8a49725fb 100644
--- a/packages/spindle-hooks/src/useCarousel/useCarousel.mdx
+++ b/packages/spindle-hooks/src/useCarousel/useCarousel.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useCarouselStories from './useCarousel.stories';
 
-<Meta of={useCarouselStories} />
+<Meta of={useCarouselStories} summary="カルーセル機能を提供するHooks。自動再生の停止/再開、前後スライド移動、キーボード/マウス操作時の自動停止、reduced motion対応。" />
 
 # useCarousel
 
diff --git a/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx b/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx
index f42d08561..3a45b2feb 100644
--- a/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx
+++ b/packages/spindle-hooks/src/useTimeDistance/useTimeDistance.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as useTimeDistanceStories from './useTimeDistance.stories';
 
-<Meta of={useTimeDistanceStories} />
+<Meta of={useTimeDistanceStories} summary="相対時間表示を提供するHooks。「たった今」「○秒前」「○分前」などの自動フォーマットとカスタムフォーマットに対応。" />
 
 # useTimeDistance
 
diff --git a/packages/spindle-ui/.storybook/main.js b/packages/spindle-ui/.storybook/main.js
index 5c5b1676c..43f9abe5f 100644
--- a/packages/spindle-ui/.storybook/main.js
+++ b/packages/spindle-ui/.storybook/main.js
@@ -21,6 +21,6 @@ module.exports = {
     name: '@storybook/react-webpack5',
   },
   typescript: {
-    reactDocgen: false,
+    reactDocgen: 'react-docgen-typescript',
   },
 };
diff --git a/packages/spindle-ui/src/BottomButton/BottomButton.mdx b/packages/spindle-ui/src/BottomButton/BottomButton.mdx
index ca4e72b1b..2f4e520ba 100644
--- a/packages/spindle-ui/src/BottomButton/BottomButton.mdx
+++ b/packages/spindle-ui/src/BottomButton/BottomButton.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BottomButtonStories from './BottomButton.stories';
 
-<Meta of={BottomButtonStories} />
+<Meta of={BottomButtonStories} summary="画面下部に固定表示するボタンコンポーネント。主要アクションへの常時アクセスを提供。" />
 
 # BottomButton
 
diff --git a/packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx b/packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx
index 2608951ef..3c9903926 100644
--- a/packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx
+++ b/packages/spindle-ui/src/BottomButton/BottomButton.stories.tsx
@@ -5,6 +5,7 @@ import { BottomButton } from './BottomButton';
 
 const meta: Meta<typeof BottomButton> = {
   title: 'BottomButton',
+  component: BottomButton,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx b/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx
index 01b07c2cf..48e4fc5d8 100644
--- a/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx
+++ b/packages/spindle-ui/src/Breadcrumb/Breadcrumb.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as BreadcrumbStories from './Breadcrumb.stories';
 
-<Meta of={BreadcrumbStories} />
+<Meta of={BreadcrumbStories} summary="パンくずリストナビゲーションコンポーネント。現在のページ階層を表示し、上位ページへの遷移を提供。" />
 
 # Breadcrumb
 
diff --git a/packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx b/packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx
index 827e003db..c7c0e6ddd 100644
--- a/packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx
+++ b/packages/spindle-ui/src/Breadcrumb/Breadcrumb.stories.tsx
@@ -5,6 +5,7 @@ import { BreadcrumbList as BreadcrumbListComponent } from './BreadcrumbList';
 
 const meta: Meta<typeof BreadcrumbListComponent> = {
   title: 'Breadcrumb',
+  component: BreadcrumbListComponent,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Button/Button.mdx b/packages/spindle-ui/src/Button/Button.mdx
index 8b9537fbc..11ddb7396 100644
--- a/packages/spindle-ui/src/Button/Button.mdx
+++ b/packages/spindle-ui/src/Button/Button.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
 
-<Meta of={ButtonStories} />
+<Meta of={ButtonStories} summary="ユーザーインタラクション用のボタン。サイズ（large/medium/small）、バリアント（contained/outlined/neutral/danger/lighted）、アイコン付き、全幅レイアウトに対応。ナビゲーションにはLinkを使用。" />
 
 # Button
 
diff --git a/packages/spindle-ui/src/Button/Button.stories.tsx b/packages/spindle-ui/src/Button/Button.stories.tsx
index 1bf3da833..6503aadca 100644
--- a/packages/spindle-ui/src/Button/Button.stories.tsx
+++ b/packages/spindle-ui/src/Button/Button.stories.tsx
@@ -6,6 +6,7 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   title: 'Button',
+  component: Button,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),
diff --git a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
index 2e64331cf..b9375c821 100644
--- a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
+++ b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonGroupStories from './ButtonGroup.stories';
 
-<Meta of={ButtonGroupStories} />
+<Meta of={ButtonGroupStories} summary="複数ボタンを横並び・縦並びにグループ化するレイアウトコンポーネント。Dialog内のボタン配置にも使用。" />
 
 # ButtonGroup
 
diff --git a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
index 5b1f2a07c..0c9ae2d39 100644
--- a/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/spindle-ui/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -6,6 +6,7 @@ import { ButtonGroup } from './ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
   title: 'ButtonGroup',
+  component: ButtonGroup,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Dialog/Dialog.mdx b/packages/spindle-ui/src/Dialog/Dialog.mdx
index 8133e6859..4d3d68946 100644
--- a/packages/spindle-ui/src/Dialog/Dialog.mdx
+++ b/packages/spindle-ui/src/Dialog/Dialog.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DialogStories from './Dialog.stories';
 
-<Meta of={DialogStories} />
+<Meta of={DialogStories} summary="重要な意思決定を促すモーダルダイアログ。HTMLDialogElementベースで、open/onClose/onCancelによる開閉制御、ButtonGroupによるボタン配置（横並び・縦並び）をサポート。StyleOnlyバリアントで独自の動作定義も可能。" />
 
 # Dialog
 
diff --git a/packages/spindle-ui/src/Dialog/Dialog.stories.tsx b/packages/spindle-ui/src/Dialog/Dialog.stories.tsx
index 68a35f9a6..3c9b80b2e 100644
--- a/packages/spindle-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/spindle-ui/src/Dialog/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { Dialog } from './Dialog';
+import { Dialog } from './Dialog';
 import {
   ButtonColumn as ButtonColumnComponent,
   ButtonColumnWithSubtleButton as ButtonColumnWithSubtleButtonComponent,
@@ -12,6 +12,7 @@ import {
 
 const meta: Meta<typeof Dialog.Frame> = {
   title: 'Dialog',
+  component: Dialog.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx
index 20d21ccfa..b18b0e945 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropdownMenuStories from './DropdownMenu.stories';
 
-<Meta of={DropdownMenuStories} />
+<Meta of={DropdownMenuStories} summary="コンテキストメニューやアクションリストを表示するドロップダウンメニューコンポーネント。" />
 
 # DropdownMenu
 
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx
index 57bc43f8a..ecdb0e942 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { DropdownMenu } from './DropdownMenu';
+import { DropdownMenu } from './DropdownMenu';
 import {
   HeadWithIconAndCaption as HeadWithIconAndCaptionExample,
   HeadWithIcon as HeadWithIconExample,
@@ -11,6 +11,7 @@ import {
 
 const meta: Meta<typeof DropdownMenu.Frame> = {
   title: 'DropdownMenu',
+  component: DropdownMenu.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx b/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx
index 81b4643c8..b0c31ca01 100644
--- a/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx
+++ b/packages/spindle-ui/src/Form/ButtonSwitch/ButtonSwitch.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ButtonSwitchStories from './ButtonSwitch.stories';
 
-<Meta of={ButtonSwitchStories} />
+<Meta of={ButtonSwitchStories} summary="2つの選択肢から1つを選ぶスイッチ型コンポーネント。どちらも選択していないニュートラル状態も持てることがRadioやToggleSwitchとの違い。" />
 
 # ButtonSwitch
 
diff --git a/packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx b/packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx
index d8c8eb0f6..08e8ce234 100644
--- a/packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx
+++ b/packages/spindle-ui/src/Form/Checkbox/Checkbox.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as CheckboxStories from './Checkbox.stories';
 
-<Meta of={CheckboxStories} />
+<Meta of={CheckboxStories} summary="チェックボックス入力コンポーネント。テキスト付き、inverse表示、disabled状態に対応。" />
 
 # Form/Checkbox
 
diff --git a/packages/spindle-ui/src/Form/DropDown/DropDown.mdx b/packages/spindle-ui/src/Form/DropDown/DropDown.mdx
index c7080c592..4a3a30cb0 100644
--- a/packages/spindle-ui/src/Form/DropDown/DropDown.mdx
+++ b/packages/spindle-ui/src/Form/DropDown/DropDown.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as DropDownStories from './DropDown.stories';
 
-<Meta of={DropDownStories} />
+<Meta of={DropDownStories} summary="フォーム用ドロップダウン選択コンポーネント。一般的なフォーム画面でのオプション選択に使用。" />
 
 # Form/DropDown
 
diff --git a/packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx b/packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx
index 6d52fa113..2196122b3 100644
--- a/packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx
+++ b/packages/spindle-ui/src/Form/DropDown/DropDown.stories.tsx
@@ -5,6 +5,7 @@ import { DropDown as DropDownComponent } from './DropDown';
 
 const meta: Meta<typeof DropDownComponent> = {
   title: 'Form/DropDown',
+  component: DropDownComponent,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),
diff --git a/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx b/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx
index 5a964afd9..f4fe96916 100644
--- a/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx
+++ b/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineDropDownStories from './InlineDropDown.stories';
 
-<Meta of={InlineDropDownStories} />
+<Meta of={InlineDropDownStories} summary="並び替え等で利用するインラインドロップダウン。一般的なフォーム画面の選択UIではなくアイテム一覧の並び替え用途を想定。試験的コンポーネント。" />
 
 # Form/InlineDropDown
 
diff --git a/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx b/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx
index ef80a6a0e..b06bf0797 100644
--- a/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx
+++ b/packages/spindle-ui/src/Form/InlineDropDown/InlineDropDown.stories.tsx
@@ -5,6 +5,7 @@ import { InlineDropDown } from './InlineDropDown';
 
 const meta: Meta<typeof InlineDropDown> = {
   title: 'Form/InlineDropDown',
+  component: InlineDropDown,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),
diff --git a/packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx b/packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx
index 609f42180..4a7c3f146 100644
--- a/packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx
+++ b/packages/spindle-ui/src/Form/InputLabel/InputLabel.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InputLabelStories from './InputLabel.stories';
 
-<Meta of={InputLabelStories} />
+<Meta of={InputLabelStories} summary="フォーム入力要素に対応するラベルコンポーネント。必須/任意の表示に対応。" />
 
 # Form/InputLabel
 
diff --git a/packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx b/packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx
index 9fb3c1800..ec0c9b3ec 100644
--- a/packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx
+++ b/packages/spindle-ui/src/Form/InvalidMessage/InvalidMessage.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InvalidMessageStories from './InvalidMessage.stories';
 
-<Meta of={InvalidMessageStories} />
+<Meta of={InvalidMessageStories} summary="フォームバリデーションエラーメッセージ表示コンポーネント。フォーム入力に紐づくエラー表示に使用。" />
 
 # Form/InvalidMessage
 
diff --git a/packages/spindle-ui/src/Form/Radio/Radio.mdx b/packages/spindle-ui/src/Form/Radio/Radio.mdx
index 8eba36ea3..3f9c2a2b9 100644
--- a/packages/spindle-ui/src/Form/Radio/Radio.mdx
+++ b/packages/spindle-ui/src/Form/Radio/Radio.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as RadioStories from './Radio.stories';
 
-<Meta of={RadioStories} />
+<Meta of={RadioStories} summary="ラジオボタン入力コンポーネント。単一選択用。checked、unchecked、disabled状態に対応。" />
 
 # Form/Radio
 
diff --git a/packages/spindle-ui/src/Form/TextArea/TextArea.mdx b/packages/spindle-ui/src/Form/TextArea/TextArea.mdx
index a4fd8f261..a5b209f91 100644
--- a/packages/spindle-ui/src/Form/TextArea/TextArea.mdx
+++ b/packages/spindle-ui/src/Form/TextArea/TextArea.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextAreaStories from './TextArea.stories';
 
-<Meta of={TextAreaStories} />
+<Meta of={TextAreaStories} summary="複数行テキスト入力コンポーネント。サイズバリエーションとエラー状態表示に対応。" />
 
 # Form/TextArea
 
diff --git a/packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx b/packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx
index d1d1f3ab3..9e34b3877 100644
--- a/packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx
+++ b/packages/spindle-ui/src/Form/TextArea/TextArea.stories.tsx
@@ -5,6 +5,7 @@ import { TextArea as TextAreaComponent } from './TextArea';
 
 const meta: Meta<typeof TextAreaComponent> = {
   title: 'Form/TextArea',
+  component: TextAreaComponent,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),
diff --git a/packages/spindle-ui/src/Form/TextField/TextField.mdx b/packages/spindle-ui/src/Form/TextField/TextField.mdx
index f4a07172a..11ab689f6 100644
--- a/packages/spindle-ui/src/Form/TextField/TextField.mdx
+++ b/packages/spindle-ui/src/Form/TextField/TextField.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
 
-<Meta of={TextFieldStories} />
+<Meta of={TextFieldStories} summary="テキスト入力フィールド。large/mediumサイズ、hasErrorによるエラー状態表示に対応。:user-invalid擬似クラスによる自動エラー表示もサポート。" />
 
 # Form/TextField
 
diff --git a/packages/spindle-ui/src/Form/TextField/TextField.stories.tsx b/packages/spindle-ui/src/Form/TextField/TextField.stories.tsx
index cf3133df8..0a819092b 100644
--- a/packages/spindle-ui/src/Form/TextField/TextField.stories.tsx
+++ b/packages/spindle-ui/src/Form/TextField/TextField.stories.tsx
@@ -5,6 +5,7 @@ import { TextField } from './TextField';
 
 const meta: Meta<typeof TextField> = {
   title: 'Form/TextField',
+  component: TextField,
   args: {
     onClick: action('clicked'),
     onChange: action('changed'),
diff --git a/packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx b/packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx
index 47ee2f7f2..a7ec13cf0 100644
--- a/packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx
+++ b/packages/spindle-ui/src/Form/ToggleSwitch/ToggleSwitch.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ToggleSwitchStories from './ToggleSwitch.stories';
 
-<Meta of={ToggleSwitchStories} />
+<Meta of={ToggleSwitchStories} summary="ON/OFFを切り替えるトグルスイッチコンポーネント。即座に設定を反映する用途に使用。" />
 
 # Form/ToggleSwitch
 
diff --git a/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx b/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx
index 2f6502cdc..40f1bb84d 100644
--- a/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx
+++ b/packages/spindle-ui/src/HeroCarousel/HeroCarousel.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as HeroCarouselStories from './HeroCarousel.stories';
 
-<Meta of={HeroCarouselStories} />
+<Meta of={HeroCarouselStories} summary="ヒーローエリア向けカルーセルコンポーネント。useCarousel Hooksと組み合わせて使用。" />
 
 # HeroCarousel
 
diff --git a/packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx b/packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx
index 10ab35787..df5e5caae 100644
--- a/packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx
+++ b/packages/spindle-ui/src/HeroCarousel/HeroCarousel.stories.tsx
@@ -5,6 +5,7 @@ import type { CarouselItem } from './HeroCarouselItem';
 
 const meta: Meta<typeof HeroCarousel> = {
   title: 'HeroCarousel',
+  component: HeroCarousel,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Icon/index.mdx b/packages/spindle-ui/src/Icon/index.mdx
index 1b097eccb..eeb4e11c7 100644
--- a/packages/spindle-ui/src/Icon/index.mdx
+++ b/packages/spindle-ui/src/Icon/index.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as indexStories from './index.stories';
 
-<Meta of={indexStories} />
+<Meta of={indexStories} summary="SVGアイコンコンポーネント。色はCSS colorの継承、サイズはwidth/height属性で変更可能。単体利用時はaria-label、装飾時はaria-hidden='true'を指定。" />
 
 # Icon
 
diff --git a/packages/spindle-ui/src/Icon/index.stories.tsx b/packages/spindle-ui/src/Icon/index.stories.tsx
index 9711439e9..8855612f5 100644
--- a/packages/spindle-ui/src/Icon/index.stories.tsx
+++ b/packages/spindle-ui/src/Icon/index.stories.tsx
@@ -4,6 +4,7 @@ import { Clock } from './index';
 
 const meta: Meta<typeof Clock> = {
   title: 'Icon',
+  component: Clock,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/IconButton/IconButton.mdx b/packages/spindle-ui/src/IconButton/IconButton.mdx
index a42668c87..4e1423e51 100644
--- a/packages/spindle-ui/src/IconButton/IconButton.mdx
+++ b/packages/spindle-ui/src/IconButton/IconButton.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as IconButtonStories from './IconButton.stories';
 
-<Meta of={IconButtonStories} />
+<Meta of={IconButtonStories} summary="アイコン単体でボタンとするコンポーネント。ひと目でアクションが想起される理解しやすいアイコンを選択して使用。" />
 
 # IconButton
 
diff --git a/packages/spindle-ui/src/IconButton/IconButton.stories.tsx b/packages/spindle-ui/src/IconButton/IconButton.stories.tsx
index aba8b0f1b..2a8c69f3c 100644
--- a/packages/spindle-ui/src/IconButton/IconButton.stories.tsx
+++ b/packages/spindle-ui/src/IconButton/IconButton.stories.tsx
@@ -6,6 +6,7 @@ import { IconButton } from './IconButton';
 
 const meta: Meta<typeof IconButton> = {
   title: 'IconButton',
+  component: IconButton,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),
diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx b/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx
index b9a28913c..8de051c46 100644
--- a/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx
+++ b/packages/spindle-ui/src/InlineNotification/InlineNotification.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as InlineNotificationStories from './InlineNotification.stories';
 
-<Meta of={InlineNotificationStories} />
+<Meta of={InlineNotificationStories} summary="ページ内に埋め込むインライン通知コンポーネント。操作を中断せずシステム/UI状態をユーザーに伝達。自動消滅せず、追加アクション付きの通知に適する。Toast/SnackBarとは異なりレイアウトに影響する。" />
 
 # InlineNotification
 
diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx
index 245014326..e95d38187 100644
--- a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx
+++ b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.tsx
@@ -6,6 +6,7 @@ import { VisiblePropsSample } from './InlineNotification.stories.example';
 
 const meta: Meta<typeof InlineNotification.Frame> = {
   title: 'InlineNotification',
+  component: InlineNotification.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.mdx b/packages/spindle-ui/src/LinkButton/LinkButton.mdx
index b8014760d..f50fe4b7a 100644
--- a/packages/spindle-ui/src/LinkButton/LinkButton.mdx
+++ b/packages/spindle-ui/src/LinkButton/LinkButton.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as LinkButtonStories from './LinkButton.stories';
 
-<Meta of={LinkButtonStories} />
+<Meta of={LinkButtonStories} summary="リンクとして機能するボタンスタイルのコンポーネント。ナビゲーションを伴うアクションに使用。" />
 
 # LinkButton
 
diff --git a/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx b/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx
index 70d546a90..fbd91ae55 100644
--- a/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx
+++ b/packages/spindle-ui/src/LinkButton/LinkButton.stories.tsx
@@ -6,6 +6,7 @@ import { LinkButton } from './LinkButton';
 
 const meta: Meta<typeof LinkButton> = {
   title: 'LinkButton',
+  component: LinkButton,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('mouse-over'),
diff --git a/packages/spindle-ui/src/List/MoreLink.mdx b/packages/spindle-ui/src/List/MoreLink.mdx
index 08df51af2..5d42e657d 100644
--- a/packages/spindle-ui/src/List/MoreLink.mdx
+++ b/packages/spindle-ui/src/List/MoreLink.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as MoreLinkStories from './MoreLink.stories';
 
-<Meta of={MoreLinkStories} />
+<Meta of={MoreLinkStories} summary="リスト末尾に配置する「もっと見る」リンクコンポーネント。追加コンテンツへの誘導に使用。" />
 
 # List/MoreLink
 
diff --git a/packages/spindle-ui/src/List/MoreLink.stories.tsx b/packages/spindle-ui/src/List/MoreLink.stories.tsx
index 7b59efed5..33ee97ce7 100644
--- a/packages/spindle-ui/src/List/MoreLink.stories.tsx
+++ b/packages/spindle-ui/src/List/MoreLink.stories.tsx
@@ -5,6 +5,7 @@ import { MoreLink } from './MoreLink';
 
 const meta: Meta<typeof MoreLink> = {
   title: 'List/MoreLink',
+  component: MoreLink,
   args: {
     onClick: action('clicked'),
     onMouseOver: action('action'),
diff --git a/packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx b/packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx
index 0bd799563..9caf94981 100644
--- a/packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx
+++ b/packages/spindle-ui/src/Modal/AppealModal/AppealModal.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as AppealModalStories from './AppealModal.stories';
 
-<Meta of={AppealModalStories} />
+<Meta of={AppealModalStories} summary="アピール用モーダルコンポーネント。プロモーションや特別なお知らせの訴求に使用。" />
 
 # Modal/AppealModal
 
diff --git a/packages/spindle-ui/src/Modal/AppealModal/AppealModal.stories.tsx b/packages/spindle-ui/src/Modal/AppealModal/AppealModal.stories.tsx
index eff2be159..2735569d1 100644
--- a/packages/spindle-ui/src/Modal/AppealModal/AppealModal.stories.tsx
+++ b/packages/spindle-ui/src/Modal/AppealModal/AppealModal.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { AppealModal } from './AppealModal';
+import { AppealModal } from './AppealModal';
 import {
   AppealModalExample,
   StyleOnly,
@@ -11,6 +11,7 @@ import {
 
 const meta: Meta<typeof AppealModal.Frame> = {
   title: 'Modal/AppealModal',
+  component: AppealModal.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/Modal/SemiModal/SemiModal.mdx b/packages/spindle-ui/src/Modal/SemiModal/SemiModal.mdx
index d5f492bbd..48e3800ba 100644
--- a/packages/spindle-ui/src/Modal/SemiModal/SemiModal.mdx
+++ b/packages/spindle-ui/src/Modal/SemiModal/SemiModal.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SemiModalStories from './SemiModal.stories';
 
-<Meta of={SemiModalStories} />
+<Meta of={SemiModalStories} summary="ボトムシート型のセミモーダルコンポーネント。画面下部からスライドして表示され、補足的な操作や情報提示に使用。" />
 
 # Modal/SemiModal
 
diff --git a/packages/spindle-ui/src/Modal/SemiModal/SemiModal.stories.tsx b/packages/spindle-ui/src/Modal/SemiModal/SemiModal.stories.tsx
index b4a494760..2c440aafa 100644
--- a/packages/spindle-ui/src/Modal/SemiModal/SemiModal.stories.tsx
+++ b/packages/spindle-ui/src/Modal/SemiModal/SemiModal.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import type { SemiModal } from './SemiModal';
+import { SemiModal } from './SemiModal';
 import {
   PopupModalExample,
   SheetModalExample,
@@ -14,6 +14,7 @@ import {
 
 const meta: Meta<typeof SemiModal.Frame> = {
   title: 'Modal/SemiModal',
+  component: SemiModal.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx
index 740e2bfa9..2e04e97f1 100644
--- a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx
+++ b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as UnderlineTabStories from './UnderlineTab.stories';
 
-<Meta of={UnderlineTabStories} />
+<Meta of={UnderlineTabStories} summary="下線付きナビゲーションタブ。ページ上部でコンテンツ切り替えのナビゲーション的役割を担うコンポーネント。" />
 
 # NavigationTab/UnderlineTab
 
diff --git a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx
index 730e707c9..ba415985a 100644
--- a/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx
+++ b/packages/spindle-ui/src/NavigationTab/UnderlineTab/UnderlineTab.stories.tsx
@@ -5,6 +5,7 @@ import { UnderlineTab } from './UnderlineTab';
 
 const meta: Meta<typeof UnderlineTab> = {
   title: 'NavigationTab/UnderlineTab',
+  component: UnderlineTab,
   args: {
     onClick: action('clicked'),
   },
diff --git a/packages/spindle-ui/src/Pagination/Pagination.mdx b/packages/spindle-ui/src/Pagination/Pagination.mdx
index 9beed3084..d57b2cfbe 100644
--- a/packages/spindle-ui/src/Pagination/Pagination.mdx
+++ b/packages/spindle-ui/src/Pagination/Pagination.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as PaginationStories from './Pagination.stories';
 
-<Meta of={PaginationStories} />
+<Meta of={PaginationStories} summary="ページネーションコンポーネント。コンテンツの分割表示とページ間ナビゲーションを提供。" />
 
 # Pagination
 
diff --git a/packages/spindle-ui/src/Pagination/Pagination.stories.tsx b/packages/spindle-ui/src/Pagination/Pagination.stories.tsx
index 3a3ddc588..8fee7393c 100644
--- a/packages/spindle-ui/src/Pagination/Pagination.stories.tsx
+++ b/packages/spindle-ui/src/Pagination/Pagination.stories.tsx
@@ -5,6 +5,7 @@ import { Pagination } from './Pagination';
 
 const meta: Meta<typeof Pagination> = {
   title: 'Pagination',
+  component: Pagination,
   args: {
     onClick: action('clicked'),
   },
diff --git a/packages/spindle-ui/src/Rating/Rating.mdx b/packages/spindle-ui/src/Rating/Rating.mdx
index 91bf0a013..8d8110f4e 100644
--- a/packages/spindle-ui/src/Rating/Rating.mdx
+++ b/packages/spindle-ui/src/Rating/Rating.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as RatingStories from './Rating.stories';
 
-<Meta of={RatingStories} />
+<Meta of={RatingStories} summary="星評価コンポーネント。評価の表示・入力に使用。" />
 
 # Rating
 
diff --git a/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx b/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx
index de2bf8b41..078170371 100644
--- a/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx
+++ b/packages/spindle-ui/src/SegmentedControl/SegmentedControl.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SegmentedControlStories from './SegmentedControl.stories';
 
-<Meta of={SegmentedControlStories} />
+<Meta of={SegmentedControlStories} summary="ページ内で機能やモードを切り替えるセグメントコントロール。ラジオボタンと同様の単一選択だが、フォーム用途ではなく機能/モード切替に特化。" />
 
 # SegmentedControl
 
diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.mdx b/packages/spindle-ui/src/SnackBar/SnackBar.mdx
index adbbafedf..0003138c5 100644
--- a/packages/spindle-ui/src/SnackBar/SnackBar.mdx
+++ b/packages/spindle-ui/src/SnackBar/SnackBar.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SnackBarStories from './SnackBar.stories';
 
-<Meta of={SnackBarStories} />
+<Meta of={SnackBarStories} summary="非同期フィードバック通知コンポーネント。10秒で自動消滅。3行まで、追加アクション付き。ユーザー操作を中断せず通知。代替確認手段がある場合にのみ使用。" />
 
 # SnackBar
 
diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx b/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx
index 0dc126549..6a96557a2 100644
--- a/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx
+++ b/packages/spindle-ui/src/SnackBar/SnackBar.stories.tsx
@@ -158,6 +158,7 @@ const MultiActivateButton: React.FC<MultiActivateButtonProps> = ({
 
 const meta: Meta<typeof SnackBar.Frame> = {
   title: 'SnackBar',
+  component: SnackBar.Frame,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx b/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx
index cfc2efb30..90b9ba2f2 100644
--- a/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx
+++ b/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as StackNotificationManagerStories from './StackNotificationManager.stories';
 
-<Meta of={StackNotificationManagerStories} />
+<Meta of={StackNotificationManagerStories} summary="複数の一時通知を画面上にスタック表示するマネージャーコンポーネント。Notification系コンポーネントと併用必須。重要ではないお知らせの複数表示に使用。" />
 
 # StackNotificationManager
 
diff --git a/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.tsx b/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.tsx
index 54f8da0d4..0de7878e3 100644
--- a/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.tsx
+++ b/packages/spindle-ui/src/StackNotificationManager/StackNotificationManager.stories.tsx
@@ -4,6 +4,7 @@ import { StackNotificationManagerExample } from './StackNotificationManager.stor
 
 const meta: Meta<typeof StackNotificationManagerExample> = {
   title: 'StackNotificationManager',
+  component: StackNotificationManagerExample,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx b/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx
index 5861e8d6a..41f78d5ca 100644
--- a/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx
+++ b/packages/spindle-ui/src/SubtleButton/SubtleButton.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as SubtleButtonStories from './SubtleButton.stories';
 
-<Meta of={SubtleButtonStories} />
+<Meta of={SubtleButtonStories} summary="控えめなスタイルのボタン。Dialog内の「とじる」など、補助的なアクションに使用。" />
 
 # SubtleButton
 
diff --git a/packages/spindle-ui/src/Table/Table.mdx b/packages/spindle-ui/src/Table/Table.mdx
index 1590a6224..e80874dac 100644
--- a/packages/spindle-ui/src/Table/Table.mdx
+++ b/packages/spindle-ui/src/Table/Table.mdx
@@ -2,7 +2,7 @@ import { Meta, Primary, Controls, Story, Source } from '@storybook/addon-docs/bl
 import { Table } from './Table';
 import * as TableStories from './Table.stories';
 
-<Meta of={TableStories} />
+<Meta of={TableStories} summary="構造化データを表形式で表示するコンポーネント。borderTypes、layout（auto/fixed/scrollable）、striped、rounded、セル結合、CSS Variablesによるカスタマイズをサポート。" />
 
 # Table
 
diff --git a/packages/spindle-ui/src/Table/Table.stories.tsx b/packages/spindle-ui/src/Table/Table.stories.tsx
index e2e4f6a40..c31fa2eb6 100644
--- a/packages/spindle-ui/src/Table/Table.stories.tsx
+++ b/packages/spindle-ui/src/Table/Table.stories.tsx
@@ -4,6 +4,7 @@ import { Table } from './Table';
 
 const meta: Meta<typeof Table> = {
   title: 'Table',
+  component: Table,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/src/TextButton/TextButton.mdx b/packages/spindle-ui/src/TextButton/TextButton.mdx
index ca640f65b..c3da92d51 100644
--- a/packages/spindle-ui/src/TextButton/TextButton.mdx
+++ b/packages/spindle-ui/src/TextButton/TextButton.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextButtonStories from './TextButton.stories';
 
-<Meta of={TextButtonStories} />
+<Meta of={TextButtonStories} summary="テキストスタイルのボタンコンポーネント。背景やボーダーのない軽量なアクションに使用。" />
 
 # TextButton
 
diff --git a/packages/spindle-ui/src/TextLink/TextLink.mdx b/packages/spindle-ui/src/TextLink/TextLink.mdx
index d3669c3bd..054eeb5e2 100644
--- a/packages/spindle-ui/src/TextLink/TextLink.mdx
+++ b/packages/spindle-ui/src/TextLink/TextLink.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as TextLinkStories from './TextLink.stories';
 
-<Meta of={TextLinkStories} />
+<Meta of={TextLinkStories} summary="テキスト内に配置するリンクコンポーネント。インラインリンクとして文章中で使用。" />
 
 # TextLink
 
diff --git a/packages/spindle-ui/src/Toast/Toast.mdx b/packages/spindle-ui/src/Toast/Toast.mdx
index 90a5e1930..af99c3409 100644
--- a/packages/spindle-ui/src/Toast/Toast.mdx
+++ b/packages/spindle-ui/src/Toast/Toast.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import * as ToastStories from './Toast.stories';
 
-<Meta of={ToastStories} />
+<Meta of={ToastStories} summary="最小限のフィードバック通知コンポーネント。4秒で自動消滅。1行テキストのみ、追加アクションなし。代替確認手段がある場合にのみ使用。" />
 
 # Toast
 
diff --git a/packages/spindle-ui/src/Toast/Toast.stories.tsx b/packages/spindle-ui/src/Toast/Toast.stories.tsx
index 8b9fb2e9c..965071628 100644
--- a/packages/spindle-ui/src/Toast/Toast.stories.tsx
+++ b/packages/spindle-ui/src/Toast/Toast.stories.tsx
@@ -119,6 +119,7 @@ const MultiActivateButton: React.FC<MultiActivateButtonProps> = ({
 
 const meta: Meta<typeof Toast> = {
   title: 'Toast',
+  component: Toast,
 };
 
 export default meta;
diff --git a/packages/spindle-ui/storybook/UserNotificationTypes.mdx b/packages/spindle-ui/storybook/UserNotificationTypes.mdx
index 2987b3c0d..358c89d50 100644
--- a/packages/spindle-ui/storybook/UserNotificationTypes.mdx
+++ b/packages/spindle-ui/storybook/UserNotificationTypes.mdx
@@ -1,3 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="ユーザーへの通知の種別" summary="Toast、SnackBar、InlineNotification、Dialogの使い分けガイドライン。用途、テキスト長、自動消滅、表示位置による選択基準。" />
+
 ## ユーザーへの通知の種別
 
 ユーザーに画面内で通知する手段としてToast、SnackBar、InlineNotification、Dialogコンポーネントがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。