Component Gallery

Mobile UI

モバイルUIまとめ

モバイルUIは、狭い画面、片手操作、下部導線、短い入力を前提にコンポーネントを選ぶ必要があります。

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

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桁ずつのセルに分かれ、入力時に自動フォーカス移動する。

関連画面パターン

オンボーディング画面（Onboarding Screen）オンボーディング画面は、初回利用者に価値、操作、初期設定を短く伝える導入画面です。決済画面（Checkout Screen）決済画面は、商品、金額、配送、支払い方法、確認操作を誤解なく完了させるための画面です。チャット画面（Chat Screen）チャット画面は、会話履歴、入力欄、送信状態、添付や既読などのコミュニケーション情報を扱う画面です。カレンダー画面（Calendar Screen）カレンダー画面は、日付・予定・空き時間を視覚的に確認し、選択や予約へ進むための画面です。

運営・更新・参照元

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

参照元

FAQ

モバイルUIでは何から設計しますか？

まず検索意図や利用シーンを決め、bottom-sheet、tab-navigation、drawerなどの主要コンポーネントを画面目的に合わせて選びます。

モバイルUIで避けるべきことは何ですか？

見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。

モバイルUIの関連ページはどう辿るべきですか？

まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。