Component Gallery

UI Style

フラットデザイン（Flat Design）

影や質感を抑え、色面、アイコン、タイポグラフィで情報を整理する軽量なUIスタイルです。

影を抑えた6分割のタイルで、フラットな情報整理を表します。

30秒でわかる要点

影や質感を抑え、色面、アイコン、タイポグラフィで情報を整理する軽量なUIスタイルです。

視覚的特徴

  • ・影をほとんど使わない
  • ・単純な図形と色面
  • ・アイコンとラベルで意味を伝える

メリット

  • ・軽く表示しやすい
  • ・情報を主役にしやすい
  • ・レスポンシブ対応しやすい

デメリット

  • ・押せる要素が分かりにくい場合がある
  • ・個性が弱く見えることがある

向いている用途

  • ・業務SaaS
  • ・管理画面
  • ・情報量の多い一覧画面

避けた方がよい用途

  • ・強いブランド体験を演出したいLP
  • ・質感や没入感が重要なプロダクト

関連コンポーネント

ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
グリッド（Grid）グリッド（Grid）は、コンテンツを列ベースのグリッドで整列させるレイアウトコンポーネント。レスポンシブ対応のカラム数指定が可能。

関連画面

ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。
管理テーブル画面（Admin Table Screen）管理テーブル画面は、業務データを検索・絞り込み・一括操作し、詳細確認や編集へ進むための画面です。
商品一覧画面（Product List Screen）商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。

関連デザインシステム

shadcn/uiRadix UIとTailwind CSSを活用したReact向けコンポーネント集。コードを所有しながらUIを組み立てやすい。
Fluent UIMicrosoft製品群で使われるデザインシステム。業務アプリ、管理画面、情報密度の高いUIの参考になる。

AI実装プロンプト

React + Tailwind CSS

React + Tailwind CSSでフラットデザインのダッシュボードカードを作成してください。影は最小限にし、明確な色面、読みやすいラベル、十分なフォーカスリングで操作可能なUIにしてください。

運営・更新・参照元

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

参照元

FAQ

フラットデザインは古いですか？

古いというより、情報整理の基本として今も有効です。押せる状態や階層が曖昧にならないよう、色、余白、フォーカス表示で補う必要があります。