Ui Design Guide

## Design Philosophy クリーン × ミニマル × プロフェッショナル。 余白を活かした読みやすさ重視。スナックバーの接客現場で、暗い照明の中でもスマホで素早く操作できるUIを目指す。 **デザインベース: melta UI** (melta.tsubotax.com) - フラット + シャドウのクリーンデザイン（グラスモーフィズム・グラデーション不使用） - 控えめなトランジション（200-300ms） - 意味のある余白とタイポグラフィ階層 参考テイスト: - HP: awwwards.com / httpster.net（タイポグラフィ重視、ミニマル、意図的な余白） - LP: onepagelove.com（明確なCTA、ストーリー性のあるレイアウト） > 具体的なコンポーネントのクラス指定は **melta-ui スキル** を参照すること。 --- ## 1. カラーシステム ### プライマリ（ブルー） メインカラーはブルー。信頼性とプロフェッショナルさを表現する。 ``` primary-500: #2b70ef ← CTA、アクティブ状態、メインアクション primary-700: #1a40b5 ← hover時 primary-50: #f0f5ff ← 選択状態背景、hover背景 ``` ### ニュートラル（Slate） ``` bg-page: gray-50 (#f3f4f6) ← ページ背景 bg-card: white ← カード背景 border: slate-200 (#cbd5e1) ← 標準ボーダー border-input: slate-300 ← 入力フィールド text-heading: slate-900 (#0f172a) ← 見出し text-body: #3d4b5f ← 本文（カスタム、落ち着いたトーン） text-secondary: slate-500 (#64748b) ← 補足テキスト text-muted: slate-400 (#94a3b8) ← プレースホルダー ``` ### セマンティック ``` success: emerald-600 / emerald-50 ← 新規、成功、接続済み warning: amber-600 / amber-50 ← VIP、プレミアム danger: red-600 / red-50 ← 離反リスク、エラー info: sky-600 / sky-50 ← レギュラー、情報 ``` パターン: テキスト = `-600`〜`-700`、背景 = `-50` --- ## 2. タイポグラフィ ### フォント ``` font-sans: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif font-mono: 'JetBrains Mono', 'SF Mono', monospace ``` ### サイズ階層（5段階） ``` page-title: text-3xl font-bold ← ページタイトル heading: text-lg font-semibold ← セクション見出し body: text-sm or text-base ← 本文 label: text-xs font-medium text-slate-500 uppercase tracking-wider ← テーブルヘッダー、KPIラベル

インストール

購入後にターミナルで実行してください。

正規購入者にはインストールコマンド再実行で最新版が配信されます。

評価とレビュー