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 は控えめに使い、アニメーション中の要素にのみ適用します。

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. 手作業での調整を必要とせず、この高級感のある、すっきりとしたエディトリアルな美学をそのまま反映するコードを提供します。