davila7/claude-code-templates

プレミアムWebデザイン

Awwwardsに掲載されるような、すべてのピクセルに意図があり、すべてのアニメーションが緻密に設計された、クリエイティブな才能と予算を感じさせるReact（.jsx）コンポーネントを作成します。

AIの美的問題

ほとんどのAI生成Webサイトは、共通したDNAを持っています。それを避けるには、それがどのようなものかを正確に知る必要があります。

禁止リスト — 絶対にしないこと

タイポグラフィの禁止事項

• 主要フォントとしてInter, Poppins, Montserrat, Raleway, Space Grotesk, Outfitを使用すること — これらは「AIテンプレート」と認識されます。（注: Inter Tight は別のフォントファミリーであり、異なるメトリクスを持つため、使用は許可されます。）
• すべてに1つのフォントファミリーのみを使用すること
• 予測可能な階層を持つ均一なフォントサイズ（64px → 32px → 18px → 14px）
• すべてにデフォルトの字間と行間を使用すること
• 特に複数行の段落で、テキストブロックをすべて中央揃えにすること

色の禁止事項

• 紫から青へのグラデーション（最も一般的なAIデザインの決まり文句）
• 文脈的な理由なく、インディゴ/バイオレットを主要ブランドカラーとして使用すること
• 白い背景 + 1つのアクセントカラー + グレーのテキスト（SaaSスターターキット）
• 理由なくボタンやカードにグラデーションを使用すること
• 本当の色の選択の代わりとして、不透明度や半透明のオーバーレイを使用すること
• 暗い背景にネオンカラーのアクセント（「開発者ポートフォリオ」風）

レイアウトの禁止事項

• ヒーロー → 3カラムの特徴グリッド → お客様の声 → CTA → フッター（デフォルトのSaaSランディングページ）
• ヒーロー → 統計バー → 作品グリッド → アバウト分割 → CTA → フッター（「プレミアムAI」ランディングページ — 同様に定型文）
• サイト間で交換可能な、予測可能なトップダウンのセクション順序。すべてのサイトは独自の構造的DNAを持つ必要があります（異なるセクション数、異なる順序ロジック、カテゴリにきれいに収まらないセクション）。
• 同じサイズのカードを持つ完全に対称的なグリッド
• すべてを中央に配置し、すべてを最大幅のコンテナに収めること
• 主要なUI要素として、ボックスシャドウ付きの角丸長方形を使用すること
• 3つまたは4つの列に並んだアイコン + 見出し + 段落カード
• 見出し + サブ見出し + 2つのボタンが横に並んだ一般的なヒーロー
• テキストのみの静的でフラットなヒーローセクション — ヒーローセクションは没入感のある空間体験であるべき

モーションの禁止事項

• スクロールに合わせて下からフェードインする要素（使い古されたAOSエフェクト）
• すべての要素に同一のトランジション（同じ期間、同じイージング、同じ方向）
• 拡大またはシャドウを追加するだけのホバーエフェクト
• スケルトンスクリーンや振り付けされたリビールの代わりにローディングスピナーを使用すること

画像と装飾の禁止事項

• 背景装飾としてのブロブ形状
• 「デザイン要素」としての浮遊する幾何学的形状（円、三角形）
• 一般的なグラデーションメッシュの背景
• 均一なアスペクト比のストックフォトグリッド
• セクションマーカーとしての絵文字や一般的なラインアイコン

---

高級感のあるデザインとは

プレミアムなWebデザインは、抑制、驚き、そして細部への執着を通じてクラフトマンシップを伝えます。

アイデンティティとしてのタイポグラフィ

タイポグラフィは、500ドルのWebサイトと50,000ドルのWebサイトを区別する最大の要素です。

フォント選択の哲学:

• 見出しには、個性と意見を持つ特徴的なセリフ体またはディスプレイフォントを使用します。良い出発点: セリフ体の Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif。使い古されていないサンセリフ体: Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans。
• キャラクターのあるディスプレイフォントを、ニュートラルでありながら洗練されたボディフォントと組み合わせます。
• アクセントタイポグラフィ（ラベル、カテゴリ、日付など）として等幅フォントを使用すると、エディトリアルな品質が加わります — JetBrains Mono, IBM Plex Mono, Space Mono。
• ウェイトを劇的に混ぜる — 900ウェイトの見出しと300ウェイトのボディは、視覚的な緊張感を生み出します。

タイポグラフィの実行:

• ブレークポイントジャンプの代わりに、clamp() を使用して流動的なタイプスケーリングを実現します。
• 劇的なサイズコントラスト — 見出しはデスクトップで8vw以上にすることができます。
• 大きな見出しにはネガティブな字間（-0.03em ～ -0.06em）
• ボディにはゆったりとした行間（1.6～1.8）、見出しにはタイトな行間（0.9～1.1）
• 混合配置 — 左揃えのボディに、時折右揃えのラベルや非対称の見出し
• 段落には max-width（45～75ch）、見出しには text-wrap: balance
• カテゴリ、日付、メタデータには、広い字間（0.1em以上）の大文字マイクロラベル

雰囲気としての色彩

• 白と黒から始めます。色は、その場所に値する場合にのみ追加します。
• 意図を持った1つの支配的な色相 — 「この色はどのような感情的な領域を主張するのか？」
• オフホワイトと温かみのあるグレー（純粋な #ffffff や #000000 ではない）は、よりデザインされた印象を与えます — #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D を試してみてください。
• 1つのコントラストポイントを持つモノクロまたは類似色のパレットは、虹色のスキームよりも洗練されて見えます。
• ダークテーマの正しい実装: 「暗いグレーの上に白」だけでなく、微妙な暖色または寒色の色合いを持つ、考慮された背景のレイヤリング。
• 控えめに使用される色はより強く印象に残ります — 白黒の海の中の1つの赤いリンクは、至る所にある赤よりも強力です。

ストーリーテリングとしてのレイアウト

このスキルの最大の失敗モードは、表面的には異なって見えても、同じ基本的な構造を共有するサイトを生成することです — ヒーロー、3つのエディトリアルセクション、プルクォート、フォーム、コロフォン。サイトのバッチ全体で、これは異なる色のテンプレートのように感じられます。これに積極的に、そして意図的に立ち向かいます。

構造的DNAの独自性ルール:

マークアップを書く前に、主要な構造的概念を声に出して命名します — 「インデックス原稿」や「スティッキーホリゾンタルジオラマ」のような単一の名詞句です。サイトの1つのバッチ内では、同じ主要な構造的概念を2つのサイトが共有してはなりません。 前のサイトがスティッキースクロールナラティブだった場合、このサイトはそうではありません。前のサイトが33/67の垂直分割だった場合、このサイトはそうではありません。構造的なアイデアはユーザーが最初に気付くものです — 構造を変えずに色を変えることは、単なる表面的な変更です。

構造的DNAカタログ

これらは明確な主要構造です。各スキル呼び出しは、1つの概念を選択し、それにコミットする必要があります。1つのサイトに2つの構造を混ぜないでください（両方の効果が薄れます）。

1. Index Manuscript（インデックス原稿） — セクションのない、1つの長いエディトリアルカラム。上から下まで1つのタイポグラフィリズム。ページ全体が、たまたまWebサイトである1つの原稿のように読めます。（用途: シェフのメニュー、調香師の手紙、マニフェスト。）
2. Sticky Horizontal Diorama（スティッキーホリゾンタルジオラマ） — ページは長い垂直スクロールですが、スクロールするときに見えるものは、水平にパンするシーンです。position: sticky + スクロール駆動の translateX を使用します。（用途: 委託作品のタイムライン、段階的なプロセス、アーティファクトのコレクション。）
3. Two-Pane Permanent Split（2ペイン固定分割） — ページは常に50/50（または38/62）の分割で、1つのペインはスティッキーで、もう1つはスクロールします。ナビゲーションはペイン内で行われ、ページ全体をスクロールすることはありません。（用途: ライブ更新インデックス付きアーカイブ、司書のカタログ。）
4. Slide Sequence（スライドシーケンス） — 画面ごとに1つの、ビューポート全体の高さの「スライド」。スナップスクロール。各スライドはまったく異なる構成です。（用途: 写真家のモノグラフ、ギャラリーのウォークスルー、エディトリアルルックブック。）
5. Staged Object on a Plinth（台座の上のステージングオブジェクト） — 中央に配置され、回転可能な単一の3D/画像被写体。ページの残りの部分は、そのオブジェクトの周りを周回する傍注です。（用途: 単一製品ハウス — 時計、フラコン、ボトル。）
6. Pinned Narrative (Scrollytelling)（固定ナラティブ（スクローリーテリング）） — 2～4画面分の高さのセクションが固定され、その内容が個別の状態（画像の入れ替え、テキストの入れ替え、進行状況）を経て進行します。ページ内で1回、その中心的な目玉として使用されます。（用途: ミッションプロファイル、製造プロセス、建物の崩壊研究。）
7. Horizontal Navigation（水平ナビゲーション） — 主要なページスクロールは水平方向です。セクションは左から右に読み進めます。垂直スクロールは無効化されるか、詳細の表示のために予約されます。（用途: 時計コレクション、博物館の Wing、映画スタジオの作品リスト。）
8. Sidebar + Column（サイドバー + カラム） — 永続的な左側のサイドバーはスクロールしません（ナビゲーション、メタデータ、実行中のフッター）。右側のカラムがサイト全体です。（用途: 法律事務所、研究所、学術出版社。）
9. Chapter Gates（チャプターゲート） — 非常に異なるトーンゾーンの間にある、ビューポート全体のチャプター区切り。各チャプターは独自の背景色、タイポグラフィのウェイト、レイアウトリズムを持ちます。ページは降りるにつれて性格を変えます。（用途: マルチディシプリンスタジオ、回顧展。）
10. Ledger / Registry（元帳/登録簿） — ページは古い学校の文書（船荷証券、登録簿、船のマニフェスト）として表示されます。表形式の行が支配的で、タイポグラフィは元帳のように読めます。（用途: ウェイティングリスト、バッチレジスタ、遠征マニフェスト。）
11. Collage / Grid-Breaker（コラージュ/グリッドブレイカー） — 意図的な破綻を伴う雑誌スタイルの非対称グリッド — カラムににじみ出る特大画像、ガターを横切るプルクォート、余白の脚注。（用途: エディトリアル出版物、カルチャーマガジン、クリエイティブスタジオ。）
12. Single Object, No Chrome（単一オブジェクト、装飾なし） — サイトは被写体のみで、回転可能で、その下に1つの短い文があります。ナビゲーションなし、フッターなし、ほとんどUIなし。（用途: アーティストの単一作品リリース、ステートメント作品。）
13. Product UI Slate（製品UIスレート） — ヒーローは、製品自身のインターフェース（ダッシュボードタイル、差分ビュー、コマンドパレット）のリアルなシミュレーションです。製品がUIであるテクノロジー/AIブランドによって使用されます。（用途: AI IDE、開発ツール。）
14. Dashboard Tile Grid（ダッシュボードタイルグリッド） — ページ全体が、ライブカウンター、スパークライン、パルスするピップを持つ、ライブ感のあるダッシュボードのように構成されています。（用途: インフラ、サイバーセキュリティ、可観測性。）
15. Conversation Timeline（会話タイムライン） — ユーザーがスクロールするにつれて、シミュレートされた会話/トランスクリプト/通話を再生します。機能の呼び出しは特定の瞬間に固定されます。（用途: 音声AI、サポートプラットフォーム、法律インタビュー。）

概念の選び方:

• クライアントの中心的な事実から始めます。アイデンティティ全体が1つの9コースメニューであるレストランは、Index Manuscript を望んでいます。アイデンティティが精度と単一のキャリバーである時計職人は、Staged Object on a Plinth を望んでいます。ブランドが年に1回の旅である探検会社は、Pinned Narrative を望んでいます。
• その概念が、このセッションで最後に使用されたものである場合は却下します。次善のものを選択します。
• 任意のJSXを書く前に、概念と1文の正当性を書き留めます。プロンプトファイルに表示したままにします。

レイアウトの原則（選択した構造的概念内で適用します）:

• グリッドを意図的に破ります。フルワイドの瞬間の後に、狭いテキストカラムが続きます。画面外にはみ出す特大画像。非対称の2カラム分割（60/40、70/30）。
• 広々としたホワイトスペースは無駄なスペースではなく、贅沢のシグナルです。セクション間の 8rem 以上のパディング。
• ポートフォリオやギャラリーのための水平スクロールセクション（適切に実装され、メインのナビゲーションパターンとしてではない場合 — ただし、Horizontal Navigation を意図的に選択した場合を除く）。
• 重なり合う要素 — 画像の上のテキスト、コンテナからはみ出す画像、セクション境界を越える要素。
• スクロールに伴うスティッキー要素 — コンテンツがスクロールして通過する間、留まるラベル。

プレミアムと認識される特定のマイクロパターン:

• 均一なグリッドの代わりに、ビジュアルコンテンツに Masonry または千鳥格子グリッドを使用します。
• エディトリアル効果のために mix-blend-mode で画像に重なるテキスト。
• 目に見える進行状況を持つ番号付きまたはインデックス付きセクション。
• デザインが時折破る、目に見えるグリッドシステム（微妙な線またはカラム）。
• スクロールして通過するときに変化するコンテンツ — 単に出現するだけでなく、変形、拡大縮小、位置変更を行う。
• カードグリッドではなく、リスト（バッチ、マニフェスト、登録簿）のための表形式/元帳行。
• SaaSフォームの一部ではなく、エディトリアル文書の一部のように見えるフォームフィールド — セリフ体の入力の上にある小さな等幅フォントのラベル、アウトラインなし、下部の境界線のみ。

禁止された繰り返し（スキルセッション内）:

• 2つのサイトに*「スティッキー左カラム + スクロール右カラム」*プロセスセクションを与えないでください。1つで選択し、もう1つは別のものを考案してください。
• 2つのサイトを33/67の非対称ヒーローで開かないでください。1つがそうした場合、次は中央のステージ、フルブリードの背景、元帳、またはヒーローなしで開きます。
• 2つのサイトを同じ「問い合わせフォーム + コロフォングリッド」のペアで終わらせないでください。最後の動きを変えてください。

ナビゲーションバーの多様性 — 注意すべき静かな失敗モード。

最も簡単なデフォルトは、「左にブランドマーク、中央に何か、右寄せに何か、mix-blend-mode: difference」という grid-template-columns: auto 1fr auto のトップバーです。3つのサイトの後、それはデザインの選択ではなく、シグネチャとして読まれ始めます。各セッションでは、ナビゲーションを大幅に変更します:

• ナビゲーションなし（Single Object, No Chrome ブランド）。
• スティッキーサイドバーに組み込まれたナビゲーション（Sidebar + Column ブランド）。
• ⌘K ランチャーのようにスタイルされた下部固定コマンドバー（テクノロジー製品ブランド — Cursor / Linear / Arc）。
• セカンダリストリップとして下に広がるタブを持つインライン中央揃えのワードマーク。
• ナビゲーションとしても機能するフルワイド水平スクロールインデックス。
• セクション名が連続的にスクロールするマーキーナビゲーション。
• 下から上に書かれた左垂直ナビゲーション。
• ライブ運用ピップ付きのステータスバーナビゲーション。
• （ベンチマーク価格、メトリクス）+ スリムなトップバーを持つマーキーティッカーストリップ。

ブランドと構造的DNAに属するナビゲーションを選択します — デフォルトで3カラムのトップバーにしないでください。

エディトリアルラグジュアリーのデフォルトを避けてください。

このスキルは、プレッシャーがかかると、次の方向に偏ります: 温かみのあるクリーム色の背景、セリフ体のディスプレイ（Fraunces / Cormorant）、等幅フォントのメタデータ、単一の真鍮のアクセント、ワイドトラックの大文字マイクロラベル、◦ の箇条書き記号。これは本物の美学であり、オートクチュール、香水、オートキュイジーヌ、時計に適しています。これは、テクノロジー、AI、サイバーセキュリティ、家庭用電化製品、SaaS、開発者ツールには適していません — そして、繰り返しデフォルトでそれにすると、バッチ内のすべてのサイトが同じエージェンシーが作成したように見えます。

フィールドがテクノロジーの場合、美学は次の方向に傾ける必要があります: 純白またはほぼ黒の背景（クリーム色ではない）。ネオグロテスクなサンセリフ体（Söhne風、Inter Tight、IBM Plex Sans、Instrument Sans）をディスプレイに…

…

[以下、翻訳のために省略]