Component Gallery

Feedback UI

フィードバックUIまとめ

フィードバックUIは、処理結果、エラー、読み込み、警告をユーザーに伝え、次の行動を判断できるようにするUIです。

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

30秒でわかる要点

フィードバックUIは、処理結果、エラー、読み込み、警告をユーザーに伝え、次の行動を判断できるようにするUIです。

拾いたい検索意図

  • ・通知 UI の使い分けを知りたい
  • ・エラー表示やローディングを設計したい
  • ・Toast と Alert の違いを知りたい

設計ポイント

  • ・重要度に応じて表示場所を変える
  • ・エラーは原因と復旧方法をセットで示す
  • ・読み込み状態は画面の形を保って見せる

関連コンポーネント

トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。スピナー（Spinner）スピナー（Spinner）は、非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。スケルトン（Skeleton）スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。

関連画面パターン

通知画面（Notification Screen）通知画面は、ユーザーに必要な更新、警告、アクション要求を時系列または重要度順に整理する画面です。検索結果画面（Search Results Screen）検索結果画面は、検索条件に合う情報を一覧し、絞り込みや並び替えで目的の項目へ到達する画面です。ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。管理テーブル画面（Admin Table Screen）管理テーブル画面は、業務データを検索・絞り込み・一括操作し、詳細確認や編集へ進むための画面です。

運営・更新・参照元

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

参照元

FAQ

フィードバックUIでは何から設計しますか？

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

フィードバックUIで避けるべきことは何ですか？

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

フィードバックUIの関連ページはどう辿るべきですか？

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