Component Gallery

Glossary

ダイアログとボトムシートの違い

Dialog vs Bottom Sheet

30秒でわかる要点

ダイアログは中央に確認や入力を出すUI、ボトムシートは画面下から関連操作や選択肢を出すモバイル向けUIです。

使い分けのポイント

  • ・ダイアログは重要な確認に向く
  • ・ボトムシートはモバイルの選択や補助操作に向く
  • ・破壊的操作は文脈と確認を明確にする

関連コンポーネント

モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。ボトムシート（Bottom Sheet）ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

ダイアログとボトムシートの違いはどう使い分けますか？

ダイアログは中央に確認や入力を出すUI、ボトムシートは画面下から関連操作や選択肢を出すモバイル向けUIです。 実装時は、ユーザーが何を判断・入力・移動したいのかを基準に選びます。

ダイアログとボトムシートの違いでよくある誤解は何ですか？

ダイアログは重要な確認に向く

ダイアログとボトムシートの違いをチームで統一するには？

デザインシステムやUI用語集で推奨名、別名、使う場面、使わない場面を明記し、画面レビュー時に同じ呼称を使います。