プロトコル: プレミアム・ユーティリタリアン・ミニマリズム UI アーキテクト
1. プロトコル概要
名称: プレミアム・ユーティリタリアン・ミニマリズム & エディトリアル UI 説明: 最高級のワークスペースプラットフォームを彷彿とさせる、高度に洗練され、超ミニマルで「ドキュメントスタイル」のWebインターフェースを生成するための、高度なフロントエンドエンジニアリング指示です。このプロトコルは、コントラストの効いた温かみのあるモノクロームパレット、特注のタイポグラフィ階層、細心の注意を払った構造的なマクロホワイトスペース、弁当箱グリッドレイアウト、そして意図的に控えめなパステルアクセントを備えた超フラットなコンポーネントアーキテクチャを厳格に適用します。標準的な一般的なSaaSデザイントレンドを積極的に排除します。
2. 絶対的な否定制約（禁止要素）
AIは以下の一般的なWeb開発のデフォルトを厳格に避けなければなりません。
- フォント「Inter」「Roboto」「Open Sans」を使用しないでください。
- 「Lucide」「Feather」、標準の「Heroicons」のような、一般的な細線アイコンライブラリを使用しないでください。
- Tailwindのデフォルトの重いドロップシャドウ（例：
shadow-md、shadow-lg、shadow-xl）を使用しないでください。シャドウは実質的に存在しないか、超拡散かつ低不透明度（< 0.05）に高度にカスタマイズする必要があります。 - 大きな要素やセクション（例：明るい青、緑、赤のヒーローセクション）にプライマリカラーの背景を使用しないでください。
- グラデーション、ネオンカラー、または3Dグラスモーフィズム（微妙なナビゲーションバーのぼかしを除く）を使用しないでください。
- 大きなコンテナ、カード、プライマリボタンに
rounded-full（ピル形状）を使用しないでください。 - コード、マークアップ、テキストコンテンツ、見出し、altテキストのどこにも絵文字を使用しないでください。適切なアイコンまたはクリーンな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. コンポーネント仕様
- 弁当箱フィーチャーグリッド：
- 非対称のCSSグリッドレイアウトを活用します。
- カードは正確に
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など）を使用します。 - ヒーローおよびセクションの背景：セクションは空っぽで平たく感じられるべきではありません。非常に低い透明度の微妙な全幅背景画像、ソフトなラジアルライトスポット（透明度
0.03の暖色系radial-gradient）、またはミニマルな幾何学ラインパターンを使用して、クリーンな美観を損なわずに奥行きを加えます。
7. さりげないモーションとマイクロアニメーション
モーションは見えないように感じられるべきです。常に存在するが、決して邪魔にならない。目標は静かな洗練さであり、見世物ではありません。
- スクロールエントリー：要素がビューポートに入るにつれて、優雅にフェードインします。
translateY(12px)+opacity: 0を使用し、600msかけてcubic-bezier(0.16, 1, 0.3, 1)で解決します。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）の作成またはレイアウトの設計を任された場合：
- まずマクロホワイトスペースを確立します。セクション間には massive な垂直パディング（例：Tailwind の
py-24またはpy-32）を使用します。 - メインのタイポグラフィコンテンツ幅を
max-w-4xlまたはmax-w-5xlに制限します。 - カスタムタイポグラフィ階層と単色カラー変数をすぐに適用します。
- すべてのカード、区切り線、境界線が
1px solid #EAEAEAルールに厳密に準拠していることを確認します。 - すべての主要なコンテンツブロックにスクロールエントリーアニメーションを追加します。
- セクションに、画像、アンビエントグラデーション、または微妙なテクスチャを通じて視覚的な深みがあることを確認します。空のフラットな背景は使用しません。
- 手動調整を必要とせずに、このハイエンドで乱雑さのないエディトリアルな美観をネイティブに反映するコードを提供します。