UI Style
セミフラット（Semi-flat UI）
フラットな情報設計に、最小限の影や薄いグラデーションを足して操作対象を分かりやすくする実用系スタイルです。
薄い影とサイドナビで、実務UIらしい階層を表します。
30秒でわかる要点
フラットな情報設計に、最小限の影や薄いグラデーションを足して操作対象を分かりやすくする実用系スタイルです。
視覚的特徴
- ・薄い影
- ・控えめな境界線
- ・フラットより少し立体的
メリット
- ・軽さと操作性を両立しやすい
- ・業務UIに馴染みやすい
- ・差別化しすぎず整う
デメリット
- ・無難に見えやすい
- ・細部の余白設計が甘いと平凡になる
向いている用途
- ・SaaSダッシュボード
- ・管理画面
- ・社内ツール
避けた方がよい用途
- ・強い世界観が必要なゲームUI
- ・一瞬で印象づけたいキャンペーンLP
関連コンポーネント
サイドバー（Sidebar）サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。
テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
プログレスバー（Progress Bar）プログレスバー（Progress Bar）は、処理の進捗状況を視覚的に示すコンポーネント。確定値（0〜100%）を示す確定型と、進行中を示す不確定型がある。
関連画面
関連デザインシステム
AI実装プロンプト
React + Tailwind CSS
React + Tailwind CSSでセミフラットなSaaSダッシュボードを作成してください。薄い影、控えめなborder、読みやすい余白、明確なアクティブ状態を使ってください。
運営・更新・参照元
- 著者 / 運営
- 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
フラットデザインとの違いは何ですか？
セミフラットは、フラットな構成を保ちながら、影や薄いグラデーションでカードやボタンの階層を少しだけ補います。