Component Gallery

SaaS UI

SaaS UIまとめ

SaaS UIは、繰り返し使う業務画面として、情報密度、検索、テーブル、設定、権限操作の安定性が重要です。

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

30秒でわかる要点

SaaS UIは、繰り返し使う業務画面として、情報密度、検索、テーブル、設定、権限操作の安定性が重要です。

拾いたい検索意図

  • ・SaaS UI の構成を知りたい
  • ・ダッシュボードや管理画面を設計したい
  • ・業務ツール向けコンポーネントを選びたい

設計ポイント

  • ・毎日使う操作を短い導線にする
  • ・表とフィルタの状態を保持する
  • ・危険操作は確認と権限を明確にする

関連コンポーネント

サイドバー（Sidebar）サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。ページネーション（Pagination）ページネーション（Pagination）は、複数ページに渡るコンテンツを区切り、ページ間を移動するためのナビゲーション。ページ数・現在位置・前後移動ボタンで構成される。モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。

関連画面パターン

ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。管理テーブル画面（Admin Table Screen）管理テーブル画面は、業務データを検索・絞り込み・一括操作し、詳細確認や編集へ進むための画面です。アカウントセキュリティ画面（Account Security Screen）アカウントセキュリティ画面は、パスワード、二要素認証、ログイン履歴、接続済み端末を安全に管理する画面です。

運営・更新・参照元

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

参照元

FAQ

SaaS UIでは何から設計しますか？

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

SaaS UIで避けるべきことは何ですか？

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

SaaS UIの関連ページはどう辿るべきですか？

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