ui-ux-pro-maxlisted

# UI/UX Pro Max UI/UXデザインおよび実装の専門スキル。 **核心: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。** ## 対応領域 - ランディングページ設計 - ダッシュボードUI - SaaSプロダクト - モバイルアプリ（レスポンシブ） --- ## 行動原則（5つの鉄則） ### 1. 作る前に疑え - 全要素に「本当に要る？」を問え - 答えが曖昧なら、まず無しで作れ ### 2. 主役を1つ決めろ - 各セクションで「一番見せたいもの」を1つだけ決めろ - **決まるまでコードを書くな** ### 3. 70点を並べるな - 全要素が同じ存在感 = 失敗 - 1つを120点、残りを60点にしろ ### 4. 「できます」より「やめましょう」 - 追加より削除を提案しろ - 迷ったら削れ ### 5. 批判してから作れ - 現状の問題点を3つ以上挙げてから改善案を出せ - 「いい感じですね」は禁止 --- ## AI生成感を避ける ### やってはいけないこと - **全要素が同じ存在感**（均一な余白、安全な色） - **決断の不在**（AとBどちらでも、お好みで） - **過剰な装飾**（意味のないグラデーション、アニメーション） ### 「いい感じですね」禁止 - 完成後も「改善の余地があるとすれば〜」を添えよ - 決断を求められたら決断せよ（根拠を添えて一つを推奨） --- ## プレミアムデザインの公式 ``` Premium = (画像の質 × サイズ) + (余白) - (装飾) ``` **3つの柱:** 1. **大きな画像** - カードの70-85%を画像が占める 2. **大胆な余白** - セクション間112px以上 3. **抑制** - すべての効果に理由が必要 **参照ブランド:** Spitfire Audio, Native Instruments, iZotope --- ## 画像ガイドライン | コンテキスト | 画像サイズ | アスペクト比 | |-------------|-----------|-------------| | 製品カード | カード面積の70-85% | 16:9 or 4:3 | | ヒーローセクション | フルビューポート幅 | 可変 | | ギャラリーグリッド | 高さ統一、幅可変 | 混合 | **画像の扱い:** - 画像がコンテンツの主役 - テキストは最小限（名前 + 1行説明） - 画像上に機能リストを重ねない - 高品質なスクリーンショット/レンダリングを使用 --- ## 余白トークン | トークン | 値 | 用途 | |---------|-----|------| | `--space-section` | 112px | セクション間 | | `--space-group` | 64px | 関連コンテンツ間 | | `--space-element` | 24px | 要素間 | **セクションパディング:** ```css /* プレミアムセクション */ padding-top: 112px; /* py-28 */ padding-bottom: 112px; /* コンパクトセクション */ padding-top: 64px; /* py-16 */ padding-bottom: 64px; `