minimalist-ui

プロトコル：プレミアムな実用性を重視したミニマリズム UI アーキテクト

1. プロトコルの概要

名称：プレミアムな実用性を重視したミニマリズムとエディトリアル UI 説明：一流のワークスペースプラットフォームに匹敵する、洗練された超ミニマルな「ドキュメントスタイル」の Web インターフェースを生成するための、高度なフロントエンドエンジニアリング指針です。このプロトコルでは、コントラストの高い暖色系モノクロのカラーパレット、独自性のあるタイポグラフィの階層、細部まで配慮した構造的な大きな余白、Bento Grid レイアウト、意図的に抑えたパステルカラーをアクセントに使う、極めてフラットなコンポーネントアーキテクチャを厳格に適用します。一般的な SaaS デザインのトレンドは明確に排除します。

2. 絶対的な禁止事項（使用禁止の要素）

AI は、次のような一般的な Web 開発の既定パターンを厳密に避ける必要があります。

• 「Inter」、「Roboto」、「Open Sans」の書体は使用しないでください。
• 「Lucide」、「Feather」や標準の「Heroicons」など、一般的で線の細いアイコンライブラリは使用しないでください。
• Tailwind の既定の濃いドロップシャドウ（例：shadow-md、shadow-lg、shadow-xl）は使用しないでください。シャドウは実質的に存在しないか、極めて拡散し不透明度の低いもの（< 0.05）に細かく調整してください。
• 大きな要素やセクションの背景に、主要な色は使用しないでください（例：明るい青、緑、赤のヒーローセクションは禁止）。
• グラデーション、ネオンカラー、3D グラスモーフィズム（控えめなナビゲーションバーのぼかしを除く）は使用しないでください。
• 大きなコンテナ、カード、主要なボタンに rounded-full（ピル形状）は使用しないでください。
• コード、マークアップ、テキストコンテンツ、見出し、代替テキストのどこにも絵文字を使用しないでください。適切なアイコンまたはシンプルな SVG プリミティブに置き換えてください。
• 「John Doe」、「Acme Corp」、「Lorem Ipsum」など、一般的なプレースホルダー名は使用しないでください。文脈に合った、現実味のある内容を使用してください。
• AI コピーライティングでよく見られる決まり文句は使用しないでください：「Elevate」、「Seamless」、「Unleash」、「Next-Gen」、「Game-changer」、「Delve」。具体的で明快な表現を使用してください。

3. タイポグラフィの設計

インターフェースは、エディトリアルな雰囲気を作り出すため、極端なタイポグラフィのコントラストと上質なフォント選びを基盤とする必要があります。

• 基本のサンセリフ体（本文、UI、ボタン）：特徴のある、すっきりとした幾何学的またはシステム標準のフォントを使用してください。推奨：font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif。
• エディトリアルなセリフ体（ヒーロー見出し、引用）：推奨：font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif。文字間隔は狭く（letter-spacing: -0.02em 〜 -0.04em）、行の高さも詰めてください（1.1）。
• 等幅フォント（コード、キーストローク、メタデータ）：推奨：font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace。
• テキストカラー：本文に絶対的な黒（#000000）を使用しないでください。可読性を高めるため、黒に近い色またはチャコール（#111111 または #2F3437）を使い、line-height は十分な余裕を持たせた 1.6 にしてください。セカンダリテキストには、落ち着いたグレー（#787774）を使用してください。

4. カラーパレット（暖色系モノクロ＋ポイントカラーのパステル）

色は希少なリソースとして扱い、意味を示す場合や控えめなアクセントにのみ使用します。

• キャンバス／背景：純白 #FFFFFF または温かみのあるボーン／オフホワイト #F7F6F3／#FBFBFA。
• 主要なサーフェス（カード）：#FFFFFF または #F9F9F8。
• 構造上の境界線／区切り線：極めて薄いグレー #EAEAEA または rgba(0,0,0,0.06)。
• アクセントカラー：タグ、インラインコードの背景、控えめなアイコン背景に限り、彩度を大きく抑えた淡いパステルカラーを使用してください。
  • 淡い赤：#FDEBEC（テキスト：#9F2F2D）
  • 淡い青：#E1F3FE（テキスト：#1F6C9F）
  • 淡い緑：#EDF3EC（テキスト：#346538）
  • 淡い黄：#FBF3DB（テキスト：#956400）

5. コンポーネント仕様

• Bento Box 機能グリッド：
  • 非対称な CSS Grid レイアウトを使用します。
  • カードには必ず border: 1px solid #EAEAEA を指定します。
  • 角丸はシャープにし、最大でも 8px または 12px にします。
  • 内側の余白は十分に確保します（例：24px～40px）。
• 主要な行動喚起（ボタン）：
  • 背景色は #111111、テキスト色は #FFFFFF にします。
  • 角丸は控えめにします（4px～6px）。ボックスシャドウは使用しません。
  • ホバー状態では、色を #333333 にわずかに変化させるか、transform: scale(0.98) でわずかに縮小します。
• タグとステータスバッジ：
  • ピル型（border-radius: 9999px）にし、文字を非常に小さく（text-xs）、大文字で、文字間隔を広くします（letter-spacing: 0.05em）。
  • 背景には定義済みのミュートパステルカラーを使用します。
• アコーディオン（FAQ）：
  • コンテナーのボックス装飾はすべて取り除きます。項目は border-bottom: 1px solid #EAEAEA だけで区切ります。
  • 開閉状態の切り替えには、シンプルでシャープな + と - のアイコンを使用します。
• キーストロークのマイクロ UI：
  • ショートカットは <kbd> タグを使って物理キーのように表示します。border: 1px solid #EAEAEA、border-radius: 4px、background: #F7F6F3 を指定し、等幅フォントを使用します。
• OS ウィンドウ風の枠：
  • ソフトウェアを模した表示を作る場合は、上部に白いバーと、小さな薄いグレーの円を3つ配置したミニマルなコンテナーで囲みます（macOS のウィンドウコントロールを再現します）。

6. アイコンと画像に関する指針

• システムアイコン：技術的でやや太めの線の印象にするため、「Phosphor Icons（Bold または Fill のウェイト）」または「Radix UI Icons」を使用します。すべてのアイコンで線幅を統一します。
• イラスト：白い背景に、単色のラフな連続線によるインクスケッチを使用します。落ち着いたパステルカラーで塗りつぶした、少しずらした幾何学形状を1つ配置します。
• 写真：暖色系の、高品質で彩度を抑えた画像を使用します。控えめなオーバーレイ（暖色の粒子感を opacity: 0.04 で適用）を重ね、モノクロのパレットになじませます。彩度の高すぎるストック写真は使用しません。実際のアセットがない場合は、https://picsum.photos/seed/{context}/1200/800 のような信頼できるプレースホルダーを使用します。
• ヒーローとセクションの背景：セクションが空っぽで平坦な印象にならないようにします。ごく低い不透明度の全幅背景画像、柔らかな放射状の光（暖色系の radial-gradient を opacity: 0.03 で適用）、またはミニマルな幾何学模様の線を使い、すっきりとした美しさを損なわずに奥行きを加えます。

7. 控えめなモーションとマイクロアニメーション

モーションは目立たないものにします。存在感はありつつ、決して気を散らさないようにします。目指すのは、派手さではなく静かな洗練です。

• スクロール時の表示：要素がビューポートに入ると、穏やかにフェードインします。translateY(12px) と opacity: 0 を使い、cubic-bezier(0.16, 1, 0.3, 1) で 600ms かけて表示します。IntersectionObserver を使用し、window.addEventListener('scroll') は使用しません。
• ホバー状態：カードはごくわずかなシャドウの変化（box-shadow を 0 0 0 から 0 2px 8px rgba(0,0,0,0.04) へ 200ms かけて遷移）とともに浮き上がります。ボタンは :active 時に scale(0.98) で応答します。
• 段階的な表示：リストとグリッド項目は、段階的に遅延を加えて表示します（animation-delay: calc(var(--index) * 80ms)）。すべてを一度にマウントしないでください。
• 背景の環境的な動き：任意です。ヒーローセクションの背後に、単一の非常にゆっくり動く放射状グラデーションの塊を配置します（animation-duration: 20s+、opacity: 0.02-0.04）。position: fixed; pointer-events: none のレイヤーに適用します。スクロールするコンテナーには適用しません。
• パフォーマンス：アニメーションには transform と opacity のみを使用します。レイアウトを引き起こすプロパティ（top、left、width、height）は使用しません。will-change: transform は必要最小限にし、アニメーション中の要素にのみ使用します。
• モーションの軽減（必須）：スクロール時の表示、段階的な表示、背景の環境的な動きは @media (prefers-reduced-motion: no-preference) の内側に設定します。また、これらを無効にし、コンテンツが静止した状態ですぐに表示される @media (prefers-reduced-motion: reduce) ブロックを追加します。ホバー時と :active 時のフィードバックは残してもかまいません。

8. 実行プロトコル

フロントエンドコード（HTML、React、Tailwind、Vue）の作成、またはレイアウトのデザインを依頼された場合：

1. まず、大まかな余白を確保します。セクション間には大きな垂直方向のパディングを使用します（Tailwind の py-24 や py-32 など）。
2. メインのタイポグラフィコンテンツの幅を max-w-4xl または max-w-5xl に制限します。
3. カスタムのタイポグラフィ階層とモノクロのカラー変数をすぐに適用します。
4. すべてのカード、区切り線、境界線が 1px solid #EAEAEA のルールに厳密に従っていることを確認します。
5. すべての主要なコンテンツブロックに、スクロール時に表示されるアニメーションを追加します。
6. 画像、環境光のようなグラデーション、または繊細なテクスチャでセクションに視覚的な奥行きを持たせます。単調で平坦な背景は使用しません。
7. 手作業での調整を必要とせず、この高級感のある、すっきりとしたエディトリアルな美学をそのまま反映するコードを提供します。