よく使うUIデザインパターンを全部まとめてみた（ユースケース別に分類・グループ化）

はじめに

UIを設計・実装していると、「このインタラクション、なんて名前だっけ？」「似たようなパターンが多くてどれを使えばいいか迷う」という場面によく出くわします。

そこで今回は、UIデザインパターンと説得的デザインパターンを、ユースケースごとに分類・ツリー形式でまとめました。

対象読者

• フロントエンドエンジニア・UIエンジニア
• UIデザイナー・UXデザイナー
• 「パターン名は知ってるけど整理できていない」という方

この記事の使い方

• 実装時の辞書として：「こういう動きを実装したい」→ 対応するパターン名を確認
• 設計時のチェックリストとして：見落としているパターンがないか確認
• レビュー・議論時の共通言語として：チームで「これは〇〇パターンだね」と話せるように

パターンの2種類について

カテゴリ	説明
UIデザインパターン	インタラクションや画面構成など、UXを向上させるための定番パターン
説得的デザインパターン	人間の認知・心理を活用し、ユーザーの行動を促すためのパターン

補足：各パターンの具体的な実装は MUI・Ant Design・Shadcn/ui などのコンポーネントライブラリで対応するものが見つかることが多いです。ライブラリはあくまで実装手段の一例です。

---

📋 目次

• UIデザインパターン
  • 入力の取得 (Getting Input)
  • ナビゲーション (Navigation)
  • データ操作 (Dealing with Data)
  • ソーシャル (Social)
  • その他 (Miscellaneous)
  • オンボーディング (Onboarding)
• 説得的デザインパターン
  • 認知 (Cognition)
  • ゲームメカニクス (Game Mechanics)
  • 知覚と記憶 (Perception and Memory)
  • フィードバック (Feedback)
  • ソーシャルバイアス (Social Biases)

---

UIデザインパターン

入力の取得 (Getting Input)

• Forms（フォーム）

  • Drag and Drop（ドラッグ＆ドロップ）
  • Structured Format（構造化フォーマット）
  • Keyboard Shortcuts（キーボードショートカット）
  • Rule Builder（ルールビルダー）
  • Captcha（キャプチャ）
  • Inplace Editor（インプレースエディタ）
  • Morphing Controls（モーフィングコントロール）
  • Password Strength Meter（パスワード強度メーター）
  • Fill in the Blanks（空欄記入）
  • Input Feedback（入力フィードバック）
  • WYSIWYG（ウィジウィグエディタ）
  • Calendar Picker（カレンダーピッカー）
  • Autosave（自動保存）
  • Preview（プレビュー）
  • Expandable Input（拡張可能な入力）
  • Forgiving Format（寛容なフォーマット）
  • Settings（設定）
  • Input Prompt（入力プロンプト）
  • Undo（元に戻す）
  • Good Defaults（良いデフォルト値）

• Explaining the Process（プロセスの説明）

  • Wizard（ウィザード）
  • Inline Help Box（インラインヘルプボックス）
  • Completeness Meter（完成度メーター）
  • Steps Left（残りステップ）

• Community Driven（コミュニティ主導）

  • Rate Content（コンテンツ評価）
  • Pay To Promote（有料プロモーション）
  • Vote To Promote（投票プロモーション）
  • Wiki（ウィキ）
  • Flagging & Reporting（フラグ＆報告）

---

ナビゲーション (Navigation)

• Tabs（タブ）

  • Navigation Tabs（ナビゲーションタブ）
  • Module Tabs（モジュールタブ）

• Jumping in Hierarchy（階層ジャンプ）

  • Breadcrumbs（パンくずリスト）
  • Fat Footer（ファットフッター）
  • Modal（モーダル）
  • Notifications（通知）
  • Shortcut Dropdown（ショートカットドロップダウン）
  • Home Link（ホームリンク）

• Menus（メニュー）

  • Vertical Dropdown Menu（縦型ドロップダウンメニュー）
  • Accordion Menu（アコーディオンメニュー）
  • Horizontal Dropdown Menu（横型ドロップダウンメニュー）

• Content（コンテンツ）

  • Adaptable View（適応可能なビュー）
  • Article List（記事リスト）
  • Tagging（タグ付け）
  • Pagination（ページネーション）
  • Categorization（カテゴリ分け）
  • Cards（カード）
  • Carousel（カルーセル）
  • Progressive Disclosure（段階的開示）
  • Continuous Scrolling（無限スクロール）
  • Tag Cloud（タグクラウド）
  • Event Calendar（イベントカレンダー）
  • Archive（アーカイブ）
  • Thumbnail（サムネイル）
  • Favorites（お気に入り）
  • Pull to Refresh（引っ張って更新）

---

データ操作 (Dealing with Data)

• Tables（テーブル）

  • Alternating Row Colors（交互行カラー）
  • Table Filter（テーブルフィルタ）
  • Sort By Column（列ソート）

• Formatting Data（データフォーマット）

  • FAQ（よくある質問）
  • Dashboard（ダッシュボード）
  • Copy Box（コピーボックス）

• Images（画像）

  • Gallery（ギャラリー）
  • Slideshow（スライドショー）
  • Image Zoom（画像ズーム）

• Search（検索）

  • Autocomplete（オートコンプリート）
  • Search Filters（検索フィルタ）

---

ソーシャル (Social)

• Reputation（レピュテーション）

  • Leaderboard（リーダーボード）
  • Testimonials（テスティモニアル）
  • Collectible Achievements（コレクタブル実績）

• Social Interactions（ソーシャルインタラクション）

  • Activity Stream（アクティビティストリーム）
  • Auto-sharing（自動共有）
  • Friend List（フレンドリスト）
  • Chat（チャット）
  • Invite Friends（友達招待）
  • Friend（フレンド）
  • Follow（フォロー）
  • Reaction（リアクション）

---

その他 (Miscellaneous)

• Shopping（ショッピング）

  • Coupon（クーポン）
  • Pricing Table（価格テーブル）
  • Product Page（商品ページ）
  • Shopping Cart（ショッピングカート）

• Increasing Frequency（頻度の増加）

  • Tip A Friend（友達に紹介）

---

オンボーディング (Onboarding)

• Guidance（ガイダンス）

  • Coachmarks（コーチマーク）
  • Playthrough（プレイスルー）
  • Inline Hints（インラインヒント）
  • Guided Tour（ガイドツアー）
  • Walkthrough（ウォークスルー）
  • Blank Slate（ブランクスレート）

• Registration（登録）

  • Lazy Registration（遅延登録）
  • Paywall（ペイウォール）
  • Account Registration（アカウント登録）

---

説得的デザインパターン

認知 (Cognition)

• Loss Aversion（損失回避）

  • Status-Quo Bias（現状維持バイアス）
  • Optimism Bias（楽観バイアス）
  • Framing（フレーミング）
  • Decoy Effect（おとり効果）
  • IKEA Effect（イケア効果）
  • Loss Aversion（損失回避）
  • Sunk Cost Effect（サンクコスト効果）
  • Endowment Effect（保有効果）
  • Negativity Bias（ネガティビティバイアス）

• Other Cognitive Biases（その他の認知バイアス）

  • Illusion of Control（コントロールの錯覚）
  • Set Completion（セット完成）
  • Present Bias（現在バイアス）
  • Delay Discounting（遅延割引）
  • Need for Closure（クロージャーの必要性）
  • Curiosity（好奇心）
  • Priming Effect（プライミング効果）
  • Value Attribution（価値帰属）
  • Peak-end Rule（ピーク・エンドの法則）
  • Temptation Bundling（誘惑バンドリング）
  • Cashless Effect（キャッシュレス効果）
  • Inaction Inertia Effect（不作為慣性効果）
  • Choice Closure（選択クロージャ）

• Scarcity（希少性）

  • Limited Choice（限定選択肢）
  • Scarcity（希少性）
  • Limited Duration（限定期間）

---

ゲームメカニクス (Game Mechanics)

• Gameplay Design（ゲームプレイデザイン）

  • Appropriate Challenge（適切な難易度）
  • Storytelling（ストーリーテリング）
  • Intentional Gaps（意図的なギャップ）
  • Investment Loops（投資ループ）
  • Periodic Events（定期イベント）
  • Hedonic Adaptation（快楽適応）
  • Levels（レベル）
  • Self-Monitoring（自己モニタリング）

• Fundamentals of Rewards（報酬の基本）

  • Variable Rewards（変動報酬）
  • Fixed Rewards（固定報酬）
  • Shaping（シェイピング）

• Gameplay Rewards（ゲームプレイ報酬）

  • Goal-Gradient Effect（ゴール勾配効果）
  • Privileges（特権）
  • Unlock Features（機能解放）
  • Delighters（ディライター）
  • Achievements（実績）
  • Praise（称賛）
  • Appointment Dynamic（アポイントメントダイナミクス）
  • Prolonged Play（長時間プレイ）

---

知覚と記憶 (Perception and Memory)

• Attention（注意）

  • Tunnelling（トンネリング）
  • Reduction（削減）
  • Isolation Effect（アイソレーション効果）
  • Picture Superiority Effect（画像優越効果）
  • Zeigarnik Effect（ツァイガルニク効果）

• Comprehension（理解）

  • Chunking（チャンキング）
  • Anchoring（アンカリング）
  • Serial Positioning Effect（系列位置効果）
  • Recognition over Recall（想起より認識）
  • Pattern Recognition（パターン認識）
  • Sequencing（シーケンシング）
  • Conceptual Metaphor（概念的メタファー）

---

フィードバック (Feedback)

• Timing（タイミング）
  • Kairos（カイロス）
  • Feedback Loops（フィードバックループ）
  • Tailoring（テーラリング）
  • Trigger（トリガー）
  • Simulation（シミュレーション）
  • Fresh Start Effect（新鮮スタート効果）

---

ソーシャルバイアス (Social Biases)

• Authority Bias（権威バイアス）
• Liking（好意）
• Retaliation（報復）
• Role Playing（ロールプレイ）
• Self-Expression（自己表現）
• Reciprocation（互恵性）
• Social Proof（社会的証明）
• Positive Mimicry（ポジティブ模倣）
• Cognitive Dissonance（認知的不協和）
• Commitment & Consistency（コミットメントと一貫性）
• Reputation（レピュテーション）
• Halo Effect（ハロー効果）
• Nostalgia Effect（ノスタルジア効果）
• Competition（競争）
• Autonomy（自律性）
• Status（ステータス）
• Noble Edge Effect（ノーブルエッジ効果）

---

📚 参考リンク

リソース	URL
UI Patterns	https://ui-patterns.com
MUI (Material UI)	https://mui.com/material-ui/
Ant Design	https://ant.design/components/overview/
TanStack Table	https://tanstack.com/table/latest
React Hook Form	https://react-hook-form.com
dnd kit	https://dndkit.com
Floating UI	https://floating-ui.com
Tiptap Editor	https://tiptap.dev
Driver.js (Tour)	https://driverjs.com
Swiper	https://swiperjs.com

---

Have a nice day!