Mobile UI
モバイルUIまとめ
モバイルUIは、狭い画面、片手操作、下部導線、短い入力を前提にコンポーネントを選ぶ必要があります。
最終更新日: 2026-07-20 / レビュー状態: 未レビュー
30秒でわかる要点
モバイルUIは、狭い画面、片手操作、下部導線、短い入力を前提にコンポーネントを選ぶ必要があります。
拾いたい検索意図
- ・モバイル向けUIコンポーネントを探したい
- ・Bottom Sheet や Tab Bar を使い分けたい
- ・スマホ画面の入力を改善したい
設計ポイント
- ・主要操作は親指が届く位置に置く
- ・長いフォームはステップ化する
- ・下から出るUIと中央モーダルを使い分ける
関連コンポーネント
ボトムシート（Bottom Sheet）ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。
タブナビゲーション（Tab Navigation）タブナビゲーション（Tab Navigation）は、ページレベルのコンテンツ切り替えを担うナビゲーション型タブ。URLルーティングと連動し、現在アクティブなセクションを示す。
ドロワー（Drawer）ドロワー（Drawer）は、画面端からスライドインするパネル型コンポーネント。モバイルメニュー・フィルターパネル・詳細ビューに使用される。
トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
日付選択（Date Picker）日付選択（Date Picker）は、カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。
OTP入力（OTP Input）OTP入力（OTP Input）は、SMS認証やメール認証で使用する数桁のワンタイムパスワードを入力するコンポーネント。1桁ずつのセルに分かれ、入力時に自動フォーカス移動する。
関連画面パターン
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-20
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-20
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-20
- MDN Web Docs - Accessibility参照確認日: 2026-07-20
FAQ
モバイルUIでは何から設計しますか？
まず検索意図や利用シーンを決め、bottom-sheet、tab-navigation、drawerなどの主要コンポーネントを画面目的に合わせて選びます。
モバイルUIで避けるべきことは何ですか？
見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。
モバイルUIの関連ページはどう辿るべきですか？
まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。