実装の順序
ドメイン固有部品を先に作らず、下位レイヤーから組み立てます。
- Tokens
- globals.scss のSemantic Tokenを単一の基準にする
- Primitives
- src/components/ui の汎用UIを組み合わせる
- Patterns
- 業務ロジックを持たないComposition例を参照する
- Pages
- 各機能のデータと振る舞いだけを足す
デザインシステム
MagicFlow Design System
Design Tokenから実装済みComponent、Compositionまでを一つの場所で確認できます。 ここに表示している部品は、そのままアプリケーションの画面で利用できます。
- バージョン
- 2.0
- デザイン方針
- Warm Flat
- 更新日
- 2026.08.16
01
Overview
新規画面を同じUI Languageで実装するための入口です。
Living
開発者向けリファレンス
共通APIは variant / size / disabled / className を基準にします。
このページは実物コンポーネントを表示しています
表示と操作の不具合は、アプリで利用する実装にも反映されます。
import { Button, FormField, Input } from "@/components/ui";02
Foundations
色、文字、余白、形、動きのSemantic Tokenです。
Colors
無彩色を基礎に、アクセントと状態色を意味で参照します。
semantic tokensBackground
--color-canvas#F4F6F9Surface
--color-surface#F4F6F9Surface muted
--color-surface-subtle#E5E8ECForeground
--color-ink#171717Foreground muted
--color-text-muted#646C77Border
--color-border#E5E8ECPrimary
--color-accentthemeInfo
--color-info#4B89DASuccess
--color-success#8AC054Warning
--color-warning#F5BA45Danger
--color-danger#FB6D51Disabled
--color-disabled-foreground#A9B1BCアクセントカラー
選択すると、このガイド内の操作・選択状態・ブランドマークへ反映されます。
Typography
サイズ、太さ、行間で階層を作ります。
Display / 54 / 780サービスを選択
Heading / 23 / 760システム健康診断
Subheading / 18 / 750プロジェクト概要
Body / 15 / 400最新状況をご確認いただけます。
Label / 13 / 700会社名
Caption / 12 / 500次回更新 8月18日
Code / 12 / 400--color-accent
Radius & Elevation
影は重なりを持つOverlayにのみ使用します。
10px
Controls
14px
Cards
16px
Shell
NoneOverlay
- Control
- 36 / 44 / 52px
- Icon
- 16 / 20 / 24px
- Motion
- 120 / 180ms
- Focus
- 3px ring
Spacing
4px刻みを基礎に、8pxの倍数を主に使います。
4–64px--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px03
Buttons
操作の重要度をvariantで表し、ラベルには具体的な動詞を使います。
Variants
Primaryは1画面の主要操作に絞ります。
Button<Button variant="primary" size="md">この内容で進める</Button>04
Forms
ラベル、Control、補足またはエラーを一つのFormFieldとして扱います。
Text controls
Inputのtypeで検索、Password、数値を扱います。
Input / Textarea正式名称で入力してください。
Select & states
状態は色だけでなく説明文と属性で伝えます。
Select / FormField有効なメールアドレスを入力してください。
確認できました。
Choice controls
Checkbox、Radio、SwitchはNative inputを保持します。
keyboard readySlider
連続した範囲から数値を一つ選択します。
Slider / FormField05
Data Display
情報の関係を保ったまま、一覧・定義・開閉の形式で表示します。
Table
横幅が不足する場合はContainer内だけを横スクロールします。
semantic table| 案件 | 担当 | 状態 | 更新日 |
|---|---|---|---|
| ブランドサイト | 田中 | 進行中 | 8月15日 |
| 採用サイト | 佐藤 | 確認待ち | 8月14日 |
| 商品LP | 鈴木 | 下書き | 8月12日 |
List
人物、補足、状態、操作を1行にまとめます。
- 田美田中 美咲プロジェクトオーナー参加中
- 佐健佐藤 健デザイナー招待済み
Description List
用語と値の対応を示します。
- プロジェクト
- コーポレートサイト制作
- ステータス
- 確認中
- 更新日
- 2026年8月15日
Accordion
補足情報を必要なときだけ開きます。
変更内容は自動保存されますか？
自動保存が有効な場合、入力を終えたタイミングで保存されます。
メンバーを追加するには？
プロジェクト設定のメンバー欄から招待できます。
07
Feedback
色、アイコン、見出し、説明を組み合わせて結果と必要な行動を伝えます。
Alert
Dangerのみrole=alert、その他はstatusとして通知します。
5 variants最新の情報です
プロジェクトの概要が更新されました。
お知らせ
次回更新は8月18日を予定しています。
保存しました
変更内容が反映されました。
確認が必要です
公開前に担当者を指定してください。
保存できませんでした
入力内容を確認してもう一度お試しください。
Badge & Status
Badgeは短い分類、Statusは進行状態に使います。
下書き新着確認中完了保留失敗
デザインWeb制作
未着手進行中完了確認待ち
Inline & Progress
周辺の作業を妨げずに短い情報を伝えます。
自動保存が有効です
プロジェクト進捗68%
ファイルアップロード60%
08
Overlay
重なりが必要な短い操作に限定し、閉じ方とフォーカス復帰を保証します。
Interactive examples
DialogはNative dialogでEscape、背景抑制、フォーカス管理を行います。
client components09
Loading & Empty
待ち時間とデータがない状態を、次に取れる行動とともに示します。
Spinner & Skeleton
Spinnerは短い処理、Skeletonは構造が分かる読込に使います。
Empty State
空である理由と主要な次の行動を表示します。
プロジェクトはまだありません
最初のプロジェクトを作成すると、ここに一覧が表示されます。
10
Patterns
Primitiveに業務ロジックを持たせず、画面側でCompositionします。
Card anatomy
Header、Content、Footerを必要な分だけ組み合わせます。
composable APIDefault Card
関連する情報を一つにまとめます。
境界線と余白を基本にし、常設の影は使いません。
Interactive
選択可能なカード
Hover時に境界と背景が変化します。
Selected
選択済み
状態を背景色とBadgeの両方で示します。
色だけに依存せず、状態名も表示します。
Form pattern
入力の目的とActionを近くに置きます。
List item pattern
Avatar、主文、副文、Badgeを一行に構成します。
- 田美田中さんが見積もりを更新10分前更新
- 佐健佐藤さんがコメントを追加1時間前コメント
Responsive contract
Componentは親幅に追従し、固定幅を前提にしません。
Desktop / Tablet / MobileWide ≥ 1181px
4列ボード、固定レール、十分な余白
Medium 701–1180px
2列ボード、幅を圧縮したレイアウト
Narrow ≤ 700px
1列ボード、下部ナビゲーション