デザイン・オープンブック

似ているけれど違うコンポーネントのペア

トグルとチェックボックス、モーダルとボトムシートなど、似たUI部品の違いは何ですか? ドロップダウンとセレクト、ボタンとリンク、トグルとチェックボックス、モーダルとボトムシートなど11組を、役割の違いでペアにして覚えます。

見た目は似ていても、役割が違う要素があります。ペアで覚えておくと、企画書もプロンプトも正確になります。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. ドロップダウン ↔ セレクト

    Dropdown menu ↔ Select

    選ぶとすぐ実行されるメニュー ↔ 選んだ値が欄に残る入力

  2. ボタン ↔ リンク

    Button ↔ Link

    何かを実行する ↔ 別の場所へ移動する

  3. ラベル ↔ プレースホルダー

    Label ↔ Placeholder

    入力しても残る欄の名前 ↔ 入力すると消える例示

  4. トグル ↔ チェックボックス

    Toggle switch ↔ Checkbox

    押した時点で即反映 ↔ 保存して初めて反映

  5. モーダル ↔ ボトムシート

    Modal ↔ Bottom sheet

    画面中央に出るウィンドウ ↔ 下からせり上がるパネル

  6. トースト ↔ スナックバー

    Toast ↔ Snackbar

    少しの間だけ表示される通知 ↔ 「元に戻す」などのボタン付き通知

  7. アプリバー ↔ タブバー

    Top app bar ↔ Tab bar

    上部のタイトル行 ↔ 下部のメニュー行

  8. カード ↔ リスト

    Card ↔ List

    区画ごとに分けて見せる ↔ 行ごとにつなげて見せる

  9. アバター ↔ サムネイル

    Avatar ↔ Thumbnail

    人を表す小さな画像 ↔ コンテンツのプレビュー画像

  10. バナー ↔ ポップアップ

    Banner ↔ Popup

    画面の端に付く帯 ↔ 画面を覆って出るウィンドウ

  11. FAB ↔ アイコンボタン

    Floating action button ↔ Icon button

    画面上に浮かぶ最重要ボタン ↔ 小さな補助ボタン

使い方

  • トグルは、すぐ反映される設定にだけ使います。保存ボタンのあるフォームの中に置くと、ユーザーは既に反映済みだと思い込みます。
  • プレースホルダーだけを置いてラベルを省かないでください。入力を始めた瞬間に、何を書く欄だったかが消えます。
  • 元に戻せる削除は、確認モーダルではなく「元に戻す」付きのスナックバーで処理します。操作が1回減ります。

コピーして使うプロンプト

設定画面

設定画面を作ってください。
- 通知のオン/オフはトグル(Toggle switch)。押した時点で即反映。
- 関心分野はチェックボックス(Checkbox)の一覧。一番下の[保存]ボタンを押して初めて反映。
- 入力欄の上には必ずラベル(Label)を置き、プレースホルダー(Placeholder)は例示だけに使う。
- 保存したら「保存しました」のトースト(Toast)を2秒間表示してください。

参考にした投稿: @uxwoodytips, @uxwoodytips

すべてのカード (27)