saas-ui-master

UI/UX Pro Max - SaaS デザインインテリジェンス

Web アプリケーションやモバイルアプリケーション向けの包括的なデザインガイドで、特に本番環境で使える SaaS 製品に最適化されています。50 種類以上のスタイル、97 種類のカラーパレット、57 種類のフォントの組み合わせ、99 件の UX ガイドライン、9 種類の技術スタックにわたる 25 種類のチャートを収録しています。優先度に基づく推奨事項を備えた検索可能なデータベースで、専門的なデザイン基準を厳格に適用し、未熟な「ノリでコーディングした」インターフェースを防ぎます。

適用する場面

以下の場合に、これらのガイドラインを参照してください。

• 新しい UI コンポーネント、ページ、複雑な SaaS ダッシュボードをデザインする場合
• カラーパレット（特に 4 層システムやダークモードの定義）やタイポグラフィを選ぶ場合
• UX、レイアウト、アクセシビリティに関する問題についてコードをレビューする場合
• 高いコンバージョンと信頼性が求められるランディングページを構築する場合
• 最新の色空間（OKLCH）を使用したテーマエンジンを実装する場合

優先度別のルールカテゴリ

優先度	カテゴリ	影響	ドメイン
1	アクセシビリティ	重大	ux
2	タッチ操作とインタラクション	重大	ux
3	レイアウトとアーキテクチャ	高	ux、product
4	パフォーマンス	高	ux
5	タイポグラフィと 4 層カラー	中	typography、color
6	アニメーション	中	ux
7	スタイルの選択	中	style、product
8	チャートとデータ	低	chart

クイックリファレンス：SaaS の基本理念

1. コンポーネントアーキテクチャ（高）

• ナビゲーションを整理する： 管理用リンク（Settings、Billing、Profile、API Keys、Logout）をメインのサイドバーに詰め込まず、統一されたアカウントのポップオーバーメニューにまとめます。
• リスト／テーブルをすっきりさせる： 行の補助アクション（Edit、Delete、Duplicate）は、すっきりした省略記号（三点）メニューの中に隠します。
• 集中できるモーダル： シンプルなフォームには、詳細オプションを折りたたんだ中央配置のモーダルを使用します。空の全高フライアウトメニューは決して使用しないでください。

2. 4 層カラーシステム（中）

• レイヤー 1（ニュートラルな基盤）： アプリの背景に純白（#FFFFFF）を使用しないでください。オフホワイト／ライトグレー（bg-slate-50）を使用します。インタラクティブなカードのサーフェスには純白を使い、際立たせます。非常に薄い境界線（白 85%）か、控えめなドロップシャドウを使用します。
• レイヤー 2（機能的なアクセント）： 50 から 950 までのスケールを生成します。メインボタン＝500／600、ホバー＝700、テキストリンク＝400／500 とします。
• レイヤー 3（意味を伝える色）： 成功＝緑、警告＝黄／オレンジ、破壊的操作＝赤とします。チャートでは明度／彩度を一定に保つため、OKLCH 色空間を使用します。
• レイヤー 4（テーマエンジン）： OKLCH の計算を使ってプログラムでテーマを生成します。ニュートラルカラーの hex を OKLCH に変換し、明度を -0.03 下げ、彩度を +0.02 上げて、色相の値を調整します。

3. ダークモードのルール（重大）

• 差を 2 倍にする： ダークカラーは互いに溶け合って見えます。ライトモードの背景の明度差を 2% にする場合、ダークモードでは必ず 4% から 6% の差をつけます。
• アクセントを明るくする： ボタンやアクティブ状態で読みやすさを確保するため、主要なブランドカラーを 300 または 400 の範囲に移します。

---

使用方法

以下の CLI ツールを使って、特定のドメインを検索します。

前提条件

Python がインストールされているか確認します。

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールします。

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

ワークフローの手順

ユーザーから UI/UX に関する作業（デザイン、構築、作成、実装、レビュー、修正、改善）を依頼された場合は、このワークフローに従います。

ステップ 1：ユーザー要件を分析する

ユーザーの依頼から重要な情報を抽出します。

• 製品タイプ：SaaS、e コマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード：ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界：ヘルスケア、フィンテック、ゲーム、教育など
• スタック：React、Vue、Next.js、またはデフォルトの html-tailwind

ステップ 2：デザインシステムを生成する（必須）

**包括的な推奨事項とその根拠を得るため、必ず --design-system** から始めてください。

python3 skills/saas-ui-master/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンドは次の処理を行います。

1. 5 つのドメイン（プロダクト、スタイル、カラー、ランディング、タイポグラフィ）を並行して検索します
2. ui-reasoning.csv の推論ルールを適用して、最適な候補を選択します
3. パターン、スタイル、カラー、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも提示します

ステップ 2b：デザインシステムを保存する（マスター + オーバーライドのパターン）

セッションをまたいだ階層的な取得のためにデザインシステムを保存するには、--persist を追加してください。

python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name"

次のファイルとフォルダーが作成されます。

• design-system/MASTER.md — すべてのデザインルールを含む、グローバルな信頼できる情報源
• design-system/pages/ — ページ固有のオーバーライド用フォルダー

ページ固有のオーバーライドを使用する場合：

python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

階層的な取得の仕組み：

1. 特定のページ（例：「Checkout」）を作成するときは、まず design-system/pages/checkout.md を確認します
2. ページファイルが存在する場合、そのルールがマスターファイルをオーバーライドします
3. 存在しない場合は、design-system/MASTER.md のみを使用します

ステップ 3：詳細検索で補足する（必要に応じて）

デザインシステムを取得した後、ドメイン検索を使って追加の詳細を取得します。

python3 skills/saas-ui-master/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使う場面：

必要な情報	ドメイン	例
スタイルの選択肢を増やす	style	--domain style "glassmorphism dark"
チャートの推奨事項	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
別のフォント	typography	--domain typography "elegant luxury"
ランディングページの構成	landing	--domain landing "hero social-proof"

ステップ 4：スタックのガイドライン（デフォルト：html-tailwind）

実装に特化したベストプラクティスを取得します。ユーザーがスタックを指定しない場合は、**デフォルトで html-tailwind** を使用してください。

python3 skills/saas-ui-master/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

---

検索リファレンス

利用可能なドメイン

ドメイン	用途
product	プロダクトタイプの推奨事項（SaaS、eコマース、ポートフォリオ）
style	UI スタイル、カラー、エフェクト（グラスモーフィズム、ミニマリズム）
typography	フォントの組み合わせ、Google Fonts
color	プロダクトタイプ別のカラーパレット
landing	ページ構成、CTA 戦略（ヒーロー、価格設定、ソーシャルプルーフ）
chart	チャートの種類、ライブラリの推奨事項
ux	ベストプラクティス、アンチパターン（アニメーション、アクセシビリティ）
prompt	AI プロンプト、CSS キーワード

---

出力形式とヒント

--design-system フラグでは、2 つの出力形式を使用できます。

# ASCII box (default) - best for terminal display
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system -f markdown

より良い結果を得るためのヒント：

1. 具体的に指定する — 「healthcare SaaS dashboard」>「app」
2. ドメインを組み合わせる — スタイル + タイポグラフィ + カラー = 完全なデザインシステム
3. UX を必ず確認する — よくある問題を確認するには、「animation」、「z-index」、「accessibility」を検索します

---

プロフェッショナルな UI の共通ルール

UI をプロらしく見せるために、見落とされがちな問題を以下に示します。

アイコンと視覚要素

ルール	使用する	使用しない
絵文字アイコンは使わない	SVG アイコン（Heroicons、Lucide、Phosphor）を使用する	🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使用する
ホバー状態を安定させる	ホバー時にカラーや不透明度を遷移させる	レイアウトがずれる拡大・縮小の変形を使う
正しいブランドロゴを使う	Simple Icons で公式 SVG を調べる	ロゴのパスを推測したり、誤ったものを使用したりする
アイコンのサイズを統一する	固定の viewBox（24x24）と w-6 h-6 を使用する	異なるサイズのアイコンを無作為に混在させる

タイポグラフィとコンポーネントのレイアウト

ルール	推奨	非推奨
テキストの階層	色調（slate-900、700、500）で階層を表現します	フォントの太さ（太字／通常）だけに頼ります
アクションの集約	設定とログアウトをアカウントポップオーバーにまとめます	サイドバーに管理用リンクをばらばらに配置します
テーブルのアクション	行のアクションを省略記号メニューにまとめます	すべての行に3個以上のアイコンボタンを表示します
フォームモーダル	シンプルな作成フローには中央配置のモーダルを使います	ほとんど空の全高フライアウトサイドバーを使います

インタラクションとカーソル

ルール	推奨	非推奨
カーソルポインター	クリック可能なすべてのカードに cursor-pointer を追加します	インタラクティブな要素にデフォルトのカーソルを残します
ホバー時のフィードバック	視覚的なフィードバック（色、影）を提供します	要素がインタラクティブであることを示しません
滑らかなトランジション	transition-colors duration-200 を使います	状態を瞬時に変化させる、または遅すぎる（500ms超）トランジションを使います

ライトモード／ダークモードのコントラスト

ルール	推奨	非推奨
ベースの背景	アプリの背景にオフホワイト／slate-50を使います	アプリのメイン背景に純白の #FFFFFF を使います
ダークモードの間隔	コントラストの間隔を2倍にします（4～6％刻み）	ライトモードとまったく同じ明度の刻みを使います
ダークモードのアクセント	ブランドボタンを300／400の範囲に移します	ダークモードでもボタンに同じ暗い色合いを使います
境界線の視認性	border-gray-200 または控えめな影を使います	強く太い黒の境界線を使います

---

提供前チェックリスト

UIコードを提供する前に、以下の項目を確認してください。

ビジュアル品質とアーキテクチャ

• アイコンとして絵文字を使わず、SVGセット（Heroicons／Lucide）を使っています。
• ナビゲーションを集約しています（フラットなリストの代わりにアカウントポップオーバーを使用）。
• テーブル／リストの行アクションを省略記号メニューにまとめています。
• アプリのベース背景に純白（#FFFFFF）を使っていません。
• 境界線には、強い黒線ではなく、非常に薄い色合いや影を使っています。

インタラクション

• クリック可能なすべての要素に cursor-pointer を設定しています。
• ホバー状態では、レイアウトをずらさずに明確な視覚的フィードバックを提供しています。
• トランジションは滑らかです（150～300ms）。
• キーボード操作時にフォーカス状態が見えるようになっています。

ライトモード／ダークモード

• ライトモードのテキストはコントラスト比4.5:1を満たしています（プライマリには #0F172A）。
• ライトモードでガラス調／透明な要素が見えるようになっています。
• ダークモードの背景では、コントラストの間隔を2倍にしています（4～6％刻み）。
• ダークモードのアクセントを明るい色（300／400の範囲）に移し、読みやすくしています。
• 提供前に両方のモードをテストしています。

アクセシビリティとレイアウト

• 浮動要素には端から適切な余白を設けています（top-4 left-4）。
• すべての画像に内容を説明する代替テキストがあります。
• フォーム入力にラベルが適切に関連付けられています。
• ステータスを色だけで示していません。
• モバイルで横スクロールが発生せず、375px、768px、1024px、1440pxで適切に表示されます。

クレジットと帰属表示

このスキルの基盤となるCLI検索エンジン、Pythonスクリプト（search.py）、および基礎データ配列は、もともとnextlevelbuilderが作成しました。このスキルは、厳格な4層のSaaS UI／UXデザイン哲学を適用することで、その優れた技術フレームワークを基盤としています。