premium-web-design

Name: premium-web-design
Author: davila7

github.com/davila7デザイン・UI33.0k49 回インストール1 日前に更新

リポジトリ

premium-web-design について

視覚的な個性を備えた React サイトを制作するためのスキルです。構成、タイポグラフィ、配色、動き、レイアウトを詳しく示し、定型的なデザインを避ける手助けをします。

主な機能

01React JSX コンポーネントの作成
02AIデザインにありがちな型の回避
03タイポグラフィと配色の指針
04ページ構成の15コンセプト
05レイアウトや動き、細部の指針

活用シーン

01個性のあるブランドサイトの制作
02ポートフォリオや編集ページの構成設計
03没入感のあるヒーローやスクロール演出の設計

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/davila7/claude-code-templates --skill premium-web-design

インストール後、Claude Code で/premium-web-designを入力して読み込まれたか確認します。

詳細

プレミアムWebデザイン

Awwwards に掲載されていてもおかしくないReact（.jsx）コンポーネントを作成してください。見た人が「これは誰がデザインしたの?」と尋ねたくなるような仕上がりを目指します。どのピクセルも意図的に配置され、すべてのアニメーションが緻密に振り付けられ、全体として本格的なクリエイティブの才能と予算が注ぎ込まれたという印象を与えるサイトです。

AI 的な美学の問題

多くの AI 生成Webサイトには、見分けやすい共通の特徴があります。それを避けるには、どのような見た目になりがちかを正確に把握しておく必要があります。

ブラックリスト — 絶対にやってはいけないこと

タイポグラフィの罪

Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit をメインフォントとして使うこと — これらは「AI テンプレート」だと一目でわかってしまいます。（注: Inter Tight は異なるメトリクスを持つ別のフォントファミリーであり、使用は問題ありません。）
すべてに 1 つのフォントファミリーを使うこと
予測可能な階層（64px → 32px → 18px → 14px）による均一なフォントサイズ
文字間隔と行間をあらゆる箇所でデフォルトのままにすること
特に複数行の段落を中央揃えにしたテキストブロックをあらゆる箇所で使うこと

カラーの罪

紫から青へのグラデーション（AI デザインにおける最大の定番）
文脈上の理由がないのに、インディゴ／バイオレットをメインのブランドカラーにすること
白い背景 + アクセントカラー 1 色 + グレーのテキスト（SaaS のスターターキット）
理由もなくボタンやカードにグラデーションを使うこと
本格的な色選びの代わりに不透明度や半透明のオーバーレイを使うこと
ダーク背景にネオン系のアクセントカラーを使うこと（「開発者ポートフォリオ」風の見た目）

レイアウトの罪

ヒーロー → 3 カラムの機能グリッド → お客様の声 → CTA → フッター（定番の SaaS ランディングページ）
ヒーロー → 統計バー → 作品グリッド → 会社概要の分割 → CTA → フッター（「プレミアム AI」風のランディングページ — 同じくらい定型的）
サイトごとに入れ替え可能な、予測可能な上から下へのセクション順序すべて。すべてのサイトは固有の構造的な特徴を持つ必要があります — セクションの数、順序付けのロジック、きれいなカテゴリーに収まらないセクションなどが異なっていることが求められます
同じサイズのカードを使った完全に左右対称のグリッド
すべてを中央揃えにし、すべてを最大幅のコンテナ内に収めること
角丸の長方形とボックスシャドウを主要な UI 要素として使うこと
3 つまたは 4 つ並んだ、アイコン + 見出し + 段落のカード
見出し + サブ見出し + 横並びの 2 つのボタンだけの、どこにでもあるヒーロー
テキストだけの静的でフラットなヒーローセクション — ヒーローセクションは没入感のある空間的な体験であるべきです

モーションの罪

スクロール時に下から要素がフェードインすること（使い古された AOS エフェクト）
すべての要素に同一のトランジション（同じ長さ、同じイージング、同じ方向）を使うこと
ホバー時に拡大するだけ、あるいは影を付けるだけのエフェクト
スケルトンスクリーンや振り付けられたリビールの代わりに、ローディングスピナーを使うこと

画像と装飾の罪

背景装飾としてのブロブ（有機的な形状）
「デザイン要素」としての浮遊する幾何学図形（円、三角形）
どこにでもあるグラデーションのメッシュ背景
縦横比が均一なストックフォトのグリッド
セクションの目印としての絵文字や一般的な線画アイコン

高級感とは実際にどのようなものか

プレミアムな Web デザインは、抑制、意外性、そして細部への執拗なまでのこだわりによって、職人技を伝えます。

Typography as Identity

タイポグラフィは、$500 のウェブサイトと $50,000 のウェブサイトを分ける最大の差別化要因です。

フォント選定の考え方:

見出しには、個性と主張を持つ特徴的なセリフまたはディスプレイフォントを使用してください。セリフの出発点としては 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 以上）を施した大文字の小さなラベルを使用してください

Color as Atmosphere

まずは白と黒から始めてください。色は、その役割を果たす場合にのみ加えてください。
一つの支配的な色相を意図をもって選んでください。「この色はどの感情的な領域を担うのか？」を問いかけてください。
純粋な #ffffff や #000000 ではなく、オフホワイトやウォームグレーを使うと、より考え抜かれた印象になります。例: #FAFAF8、#F5F0EB、#1A1A1A、#0D0D0D
モノクロマティックな配色や類似色の配色に、コントラストの効いた一点を加えると、レインボーのような配色よりも洗練された印象になります。
ダークテーマは、単に「暗いグレーの上に白い文字」ではなく、わずかに暖色または寒色を帯びた背景の重ね方を工夫して実現してください。
色は控えめに使うほど効果的です。白黒の海に置かれた一つの赤いリンクは、すべてを赤くするよりも強い印象を与えます。

Layout as Storytelling

このスキルの最大の失敗パターンは、表面的には異なって見えるのに、基礎となる構造が同じサイトを作ってしまうことです。ヒーロー、三つのエディトリアルセクション、プルクォート、フォーム、奥付という構成が繰り返されると、複数のサイトを作った際にカラーだけが違うテンプレートのように感じられてしまいます。これに積極的かつ意図的に抵抗してください。

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

マークアップを書く前に、主要な構造コンセプトを声に出して名付けてください。例えば 「インデックス原稿」 や 「スティッキー水平ジオラマ」 のように、名詞句一つで表現します。一つのバッチ内のサイトでは、同じ主要構造コンセプトを共有してはなりません。 前のサイトがスティッキースクロールのナラティブだった場合、今回のサイトはそれであってはなりません。前のサイトが 33/67 の縦分割だった場合も同様です。構造のアイデアは、ユーザーが最初に気づく要素です。構造を変えずに色だけを変えるのは、見た目だけの変更に過ぎません。

構造的DNAカタログ

これらは、それぞれ異なる主要構造です。各スキルの呼び出しでは、一つのコンセプトを選び、それに徹してください。一つのサイトに二つの構造を混在させないでください（両方の効果が薄れてしまいます）。

インデックス原稿（Index Manuscript） — セクションを設けない、ひと続きの長い編集コラムです。ページ上から下まで一定の組版リズムで構成されます。ページ全体が、たまたまウェブサイトの形をとった一編の原稿のように読めます。（向いている例：シェフのメニュー、調香師の手紙、マニフェスト。）
固定型の横スクロール・ジオラマ（Sticky Horizontal Diorama） — ページ全体は縦に長くスクロールしますが、スクロールに合わせて見えている内容は横方向にパンするシーンになります。position: sticky と、スクロールで駆動する translateX を使います。（向いている例：依頼作品のタイムライン、段階ごとのプロセス、アーティファクトのコレクション。）
常時二分割ペイン（Two-Pane Permanent Split） — ページは常に 50/50（または 38/62）で分割されます。一方のペインは固定され、もう一方がスクロールします。ページ全体をスクロールして移動するのではなく、ナビゲーションはペイン内で行われます。（向いている例：リアルタイムに更新される索引を備えたアーカイブ、司書の目録。）
スライドシーケンス（Slide Sequence） — 画面の高さいっぱいの「スライド」を一画面ずつ、スナップスクロールで表示します。各スライドはまったく異なる構成になります。（向いている例：写真家のモノグラフ、ギャラリーの案内、エディトリアルのルックブック。）
台座上の展示物（Staged Object on a Plinth） — 単一の 3D 画像または画像の被写体が中央に置かれ、回転できます。ページの残りの部分は、その被写体の周りを巡る欄外の注釈になります。（向いている例：単一製品を扱うブランド（時計、香水瓶、ボトルなど）。）
固定型ナラティブ（Pinned Narrative / Scrollytelling） — 高さ 2〜4 画面分のセクションが画面に固定され、その中身が画像の切り替え、テキストの切り替え、進捗表示などの離散的な状態を順に進んでいきます。ページ中で中心的な演出として 一度だけ 使われます。（向いている例：ミッションのプロファイル、製造プロセス、建物崩壊の研究。）
横方向ナビゲーション（Horizontal Navigation） — ページの主なスクロールは横方向です。セクションは左から右へ読み進めます。縦スクロールは無効にするか、詳細の表示にのみ使用します。（向いている例：時計のアーカイブ、博物館の展示翼、映画スタジオのカチンコ。）
サイドバー＋コラム（Sidebar + Column） — 左側に常駐するサイドバーはスクロールせず、ナビゲーション、メタデータ、常時表示のフッターを置きます。右側のコラムがサイトの本体全体になります。（向いている例：法律事務所、研究所、学術出版社。）
チャプターゲート（Chapter Gates） — 性格の大きく異なる色調のゾーンの間に、画面全体のチャプター区切りを挟みます。各チャプターは、独自の背景色、文字の重み、レイアウトのリズムを持ちます。下へスクロールするにつれて、ページの性格が 変わっていきます。（向いている例：複数分野にまたがるスタジオ、回顧展。）
台帳／登録簿（Ledger / Registry） — ページを、船荷証券、登録簿、船舶の積荷目録のような昔ながらの書類として見せます。表形式の行が中心となり、文字組みは帳簿のように読めます。（向いている例：順番待ちリスト、バッチ登録簿、遠征の積荷目録。）
コラージュ／グリッド破壊（Collage / Grid-Breaker） — 雑誌風の非対称グリッドに、意図的な破綻を加えます。大きな画像がコラムからはみ出し、プルクォートが段間をまたぎ、脚注が余白に配置されます。（向いている例：エディトリアル系の出版物、文化雑誌、クリエイティブスタジオ。）
単一オブジェクト、クロームなし（Single Object, No Chrome） — サイトは被写体そのものだけで構成され、回転できます。その下に短い一文が添えられるだけです。ナビゲーションもフッターもほぼなく、UI はほとんどありません。（向いている例：アーティストの単一作品のリリース、ステートメント作品。）
プロダクト UI スレート（Product UI Slate） — ヒーローに、製品自身のインターフェースを忠実に再現したシミュレーション（ダッシュボードのタイル、差分表示、コマンドパレットなど）を配置します。製品そのものが UI であるテック系・AI 系のブランドで使われます。（向いている例：AI IDE、開発者ツール。）
ダッシュボードのタイルグリッド（Dashboard Tile Grid） — ページ全体を、ライブ感のあるダッシュボードのように構成します。ライブカウンター、スパークライン、点滅するインジケーターを使います。（向いている例：インフラ、サイバーセキュリティ、オブザーバビリティ。）
会話タイムライン（Conversation Timeline） — ユーザーがスクロールするにつれて、シミュレートされた会話、トランスクリプト、通話が再生されます。機能の注釈は特定の瞬間に紐づけられます。（向いている例：音声 AI、サポートプラットフォーム、法律関係のインタビュー。） コンセプトの選び方:

クライアントの中心的な事実から始めます。店の存在意義がたった一つの九品コースにあるレストランなら Index Manuscript が向いています。精度と単一のキャリバーがブランドの核である時計職人なら Staged Object on a Plinth が向いています。毎年の一つの旅がブランドである探検会社なら Pinned Narrative が向いています。
このセッションで前回使ったコンセプトなら、そのコンセプトは採用しないでください。次点のものを選びます。
HTML/JSX を書く前に、コンセプトと、それを正当化する一文を書き留めてください。プロンプトファイルに見える形で残しておいてください。

レイアウトの原則（選んだ構造コンセプトの範囲内で適用）:

意図的にグリッドを崩してください。全幅の見せ場の後に、幅の狭いテキストカラムを続けます。画面外へはみ出す大きな画像。非対称な二カラム分割（60/40、70/30）。
余白を多く取ることは無駄な空間ではなく、上質さを示すシグナルです。セクション間には 8rem 以上のパディングを取ってください。
ポートフォリオやギャラリーには横スクロールのセクションを使います（うまく作られたものに限り、主要なナビゲーションパターンとしては使わないでください。ただし Horizontal Navigation を意図的に選んだ場合は別です）。
重なり合う要素を使ってください。画像の上に重なるテキスト、コンテナからはみ出す画像、セクションの境界をまたぐ要素などです。
スクロールに伴って動く固定要素を使ってください。コンテンツがスクロールしていく間も留まり続けるラベルなどです。

プレミアムに見える具体的な小さなパターン:

均一なグリッドではなく、視覚的コンテンツにはマソンリーや千鳥配置のグリッドを使います。
エディトリアルな効果のために、mix-blend-mode を使って画像に重ねるテキストを使います。
進行が見て分かる番号付きまたは索引付きのセクションを使います。
ときどきデザインが破る、目に見えるグリッドシステム（控えめな線や列）を使います。
単に現れるのではなく、スクロールして通過するにつれて変形・拡大縮小・位置変化するコンテンツを使います。
リスト（バッチ、マニフェスト、レジストリなど）にはカードグリッドではなく、表や台帳形式の行を使います。
フォームフィールドは SaaS のフォームではなく、エディトリアル文書の一部に見えるようにします。小さな等幅フォントのラベルを明朝体の入力欄の上に置き、枠線は使わず下線のみにします。

同一スキルセッション内での繰り返し禁止:

二つのサイトに、どちらも 「左に固定されたカラム + 右でスクロールするカラム」 のプロセスセクションを使わせないでください。一方に採用したら、もう一方には別のものを考案してください。
二つのサイトを 33/67 の非対称ヒーロー で始めないでください。一方がそれを使ったなら、次のサイトは中央配置のステージ、全面背景、台帳、あるいはヒーローなしのいずれかにしてください。
二つのサイトを同じ「問い合わせフォーム + 奥付グリッド」の組み合わせで締めくくらないでください。締めのパターンを変えてください。

ナビゲーションバーの多様性 — 注意すべき見えにくい失敗パターン。

最も安易な初期設定は、grid-template-columns: auto 1fr auto の上部バーで、「左にブランドマーク、中央に何か、右寄せに何か、mix-blend-mode: difference」という構成です。三つのサイトを作ると、これは設計上の選択ではなく署名のように見え始めます。各セッションでは ナビゲーションを大きく変えてください:

ナビゲーションなし（単一オブジェクト、クロームなしのブランド）。
スティッキーサイドバーに組み込んだナビゲーション（サイドバー + カラムのブランド）。
⌘K ランチャーに似せた、下部固定のコマンドバー（テック製品のブランド — Cursor / Linear / Arc）。
中央揃えのインラインワードマークと、その下に広がる二次的なタブのストリップ。
ナビゲーションも兼ねる、全幅の横スクロール式インデックス。
マーキー式ナビゲーション — セクション名が継続的にスクロールするティッカー。
下から上へ書かれた縦書きの左側ナビゲーション。
ライブの稼働状況ピップを備えたステータスバー式ナビゲーション。
マーキー式ティッカーのストリップ（ベンチマーク価格、指標）と、細い上部バー。

ブランドと構造の性格に合ったナビゲーションを選んでください。三カラムの上部バーを初期設定にしないでください。

エディトリアル・ラグジュアリーという初期設定を避けてください。 このスキルは、プレッシャーがかかると次の方向に寄っていきます：温かみのあるクリーム色の地、セリフ体のディスプレイ書体（Fraunces / Cormorant）、等幅のメタデータ、ブラス（真鍮色）のアクセントを1色だけ、広めの字間を取った大文字の小見出しラベル、◦ の箇条書き記号。これは本物の美学であり、オートクチュール、香水、高級料理、時計製造などには適しています。しかし、テック、AI、サイバーセキュリティ、家電、SaaS、開発者向けツールには 適していません。また、これに繰り返し頼ると、同じ制作会社が手がけたかのようにバッチ内のすべてのサイトが同じ見た目になってしまいます。

分野がテクノロジーの場合、美学は次の方向に寄せるべきです：クリーム色ではなく、純白またはほぼ黒の地。ディスプレイ書体には、ネオグロテスク系のサンセリフ（Söhne 風、Inter Tight、IBM Plex Sans、Instrument Sans）。等幅書体はメタデータとしてだけでなく、ディスプレイとして使用します。グラデーションの光彩が縁取るエッジ、実際の UI スクリーンショット、ライブ感のあるダッシュボードのタイル、コピーに並んだインラインのキーボードショートカットチップ、ヒーローとして描画されたコードブロック、そして真鍮と紙ではなく、虹色・クローム・ガラスのテクスチャを使用します。参考にすべきは Vercel、Cursor、Linear、Windsurf、Stripe、Figma、Arc、Zed、Raycast、Supabase、v0.dev、Anthropic、OpenAI です。

3D コンポーネント — 中核となる差別化要素

このスキルで構築されるすべてのウェブサイトには 3D コンポーネントが含まれます。これがこれらのサイトをフラットなデザインから際立たせるものです。ただし、3D はプロフェッショナルで洗練されて見えなければなりません。アマチュアの 3D は、3D がないよりも悪い結果になります。

絶対に Three.js の幾何学的プリミティブ（箱、円柱、円錐、球）で 3D オブジェクトを作らないでください。 箱で作られた車はおもちゃに見えます。円柱で作られたロケットは図解のように見えます。円錐で作られた炎はひどく見えます。Three.js のプリミティブは、粒子フィールド、グリッド平面、浮遊する点などの控えめな背景の雰囲気効果にのみ使用でき、メインのヒーロービジュアルとして使うことは決してありません。

ステップ 1：業界を徹底的に調査する

多くの AI が生成する「プレミアム」サイトが一般的に見えるのは、リサーチのステップが省略されているか、2 文程度の深さでしか行われていないためです。実際の参考サイトを集めることが、このスキルにおける品質を最も大きく左右する要素です。

調査の深さの要件： 最低でも 5 つの実在する参考サイトを調査してください（2 つではありません）。最も有名な業界リーダーと、同じ分野にある知名度は低いものの編集性や文化性の高い事業者を組み合わせてください。独自の表現は、多くの場合、知名度の低い参考サイトから生まれます。一方、有名なサイトはパレットの基準となります。

出発点となる参考サイトのセット（ここで止めず、広げてください）：

AI ツール / 開発者ツール / IDE → Vercel、Cursor、Windsurf、Linear、Stripe、Figma、Arc Browser、Zed、Raycast、Supabase、Replit、v0.dev、Anthropic、OpenAI。注記：ダーク基調または純白、ディスプレイ用途の等幅フォント（メタデータだけでなく）、精密なグリッド、キーボードショートカットのクローム（⌘K、⌘↵）、グラデーションのグロー縁、ヒーローでのアニメーションするコードブロック、ダッシュボードタイルのグリッド、小型大文字の等幅フォントによるサブセクション見出し、<code> スタイルのコールアウト。インタラクティブなヒーローは、静止画ではなくアニメーションするプロダクト UI のスナップショットであることが多いです。
サイバーセキュリティ / インフラ → Cloudflare、Tailscale、1Password Business、Chainguard、CrowdStrike、Datadog Security、HashiCorp、Teleport。注記：スキャンビームのヒーローアニメーション、格子状の防御グリッド、ライブ感のあるステータスインジケーター、緑／琥珀色の「正常稼働」ピップ、余白より高密度のデータ。
エンタープライズ AI / 音声 → Anthropic、OpenAI Platform、ElevenLabs、Vapi、Retell AI、Bland AI、Cohere、Deepgram、Cartesia。注記：温かみのあるほぼ黒の背景、エディトリアル系セリフのディスプレイ書体、ヒーローとしてのライブ文字起こし、タイポグラフィ要素としてのレイテンシ数値。
航空宇宙 / 防衛 → SpaceX、Rocket Lab、Blue Origin、Sierra Space、Axiom、The Planetary Society、Royal Aeronautical Society。注記：ダークテーマ、クリーンなサンセリフ、全面写真、ミッションプロファイル図、控えめな色のアクセント。
自動車 → Porsche、Rivian、Lucid、Singer Vehicle Design、Pagani、David Brown Automotive、Coachbuild.com。注記：ドラマチックなプロダクト写真、機械製図、全画面の没入型ヒーロー。
ファッション / ラグジュアリー → Bottega Veneta、Celine、The Row、Margiela、Lemaire、A.P.C.、Phoebe Philo、Hermès。注記：極端に抑制されたタイポグラフィ、セリフのディスプレイ書体、ほぼ無音の余白。
フード / レストラン → Noma、Eleven Madison Park、Alinea、Central (Lima)、Atomix、Chefs Club、René Redzepi's archive。注記：エディトリアル写真、抑えた色調、原稿のようなメニュー型タイポグラフィ、コースごとのペース配分。
フレグランス / 香水 → Le Labo、Byredo、Frédéric Malle、Lubin、Maison Francis Kurkdjian、Diptyque、Santa Maria Novella。
建築 → 2x4、Olson Kundig、Herzog & de Meuron、Kengo Kuma、SANAA、David Chipperfield。
時計製造 → F.P. Journe、A. Lange & Söhne、Philippe Dufour、Akrivia、Grönefeld、Urban Jürgensen。
アート / ギャラリー → David Zwirner、Gagosian、Hauser & Wirth、Galerie Lelong、White Cube、Pace。
出版 / エディトリアル → New York Review of Books、Granta、The Paris Review、Apartamento、Zeit Online、MIT Press。
音楽 / レコードレーベル → ECM Records、Warp、Mute、Nonesuch、Erased Tapes、Kompakt、Sub Pop。
プライベートウェルス / フィンテック → Addepar、Masttro、Pictet、Edmond de Rothschild、BlackRock Aladdin、Stripe。

リサーチの進め方：

5 つのサイトを見つける。 web_search を使い、"[field] award-winning website"、"[field] Awwwards"、site:awwwards.com [field]、"[field] FWA winner" を検索します。5 サイトのうち少なくとも 2 つは、業界の大手ではなく、あまり知られていないエディトリアルや文化分野の参照先にしてください。
web_fetch で各サイトを調べる。 雰囲気ではなく、パターンを抽出します。各サイトについて、主要なディスプレイフォント、副次的な本文フォント、近似 HEX 値によるパレット、構造上の DNA（カタログのどの概念か）、そのサイト固有の特徴的な手法を具体的に記録します。
コーディング前に 6〜10 行のデザインブリーフを書く。 prompt.md に「Design reference pull」ブロックを書き、5 つのサイト、そこから借用する 3 つの具体的なパターン（およびその出典サイト）、パレット（HEX）、フォントスタック、選んだ構造上の DNA を明記します。
コピーせず、組み合わせる。 各参照先から一つずつ要素を取り入れます。その組み合わせこそが、クローンではなくオリジナルに感じられるサイトを生み出します。このサイトのデザインは、ここに挙げた実在の競合サイトと並べても違和感のないものにしてください。まったく別の世界から来たように見えるのは避け、特定の一つのサイトをそのままコピーしたような見た目にもしないでください。

ステップ 2: トピックに関連する 3D を Spline から調達する

Spline (spline.design) は 3D デザインプラットフォームで、プロフェッショナルな埋め込み用 3D シーンを多数集めたコミュニティライブラリがあります。Spline のシーンがプレミアムなサイトに掲載される価値を持つのは、訪問者がちらっと見ただけでそれが何を表しているかをすぐに理解できる場合に限られます。主題と関係のない美しいシーンは、シーンがまったく無いよりも悪いです。サイトのあらゆる要素が意図的に作られているという印象を損ない、「デザイナーが見つけたかっこいい 3D」のように見えてしまいます。これはプレミアムとは正反対です。

実在のブランド製品のシーンは一切使用しない

Spline のコミュニティシーンには、実在し商標登録されている製品を描いたものが多くあります。たとえば Nike Air Jordan、Sony WH-1000XM5、Apple Watch、Beats Studio、Samsung Galaxy、Tesla Cybertruck などです。これらは架空のブランドのウェブサイトには使用できません。 使用すると次の三つの問題が重なって生じます。

法的問題。 実在のブランド製品には、商標、意匠特許、ライセンス契約があります。架空の「Trio Nord」というフットウェアブランドのサイトに Nike の靴を載せると、せいぜい商標の混同、最悪の場合は侵害になります。
物語上の問題。 製品を認識した閲覧者（そして多くの人は認識します）は、そのサイトが嘘をついていることをすぐに悟ります。その認識が生じた瞬間に、高級感という幻想は崩れます。
没個性。 Nike のデザイナーや Sony のビジュアライザーが作ったから存在するシーンは、「Spline の誰かが有名な製品を再現した」ようにしか見えません。それが自社の製品に見えることは決してありません。

ルール: Spline のシーンを採用する前に、次の問いを立ててください。このシーンの対象は、実在のブランドの、識別可能な実在製品か？ もしそうなら、どれほど見事にレンダリングされていても却下してください。代わりに、抽象的、カテゴリーを代表する、またはオリジナルデザインのシーンを探してください。

Nike Air Jordan の代わりに → ブランド表記のない一般的な手作りレザーシューズ、または抽象的なフットウェアのシルエット
Sony のヘッドホンの代わりに → 抽象的な浮遊するオーディオリングの形状、またはミニマルなオーバーイヤーヘッドホンの汎用デザイン
Apple Watch の代わりに → ブランド表記のないベゼルやダイヤル、またはメカニカルムーブメントの図解

主題に対して非ブランドの代替がない場合は、(a) ブランド表記のない汎用製品の写真を使う、(b) SVG イラストを作成する、(c) 別の分野を選ぶ、のいずれかにしてください。

分野が先、シーンは後。調達の方向性が重要

よくある失敗パターンは、使える Spline の URL が手元にあるため、それを使うために分野を後付けで考え出すことです。これは切羽詰まった印象を与えます。「万年筆のインクメーカー」は、誰かがそれを望んだから存在する高級ブランドではありません。暗い液体のシーンが手元にあったので、それを土台に危うい構造を組み上げただけです。プロンプト自体がそれを露呈しています。

正しい順序は次のとおりです。

分野を選ぶ。 実在し、もっともらしい高級・プレミアム産業を選びます。例として、自動車、時計、オートクチュール、フレグランス、スピリッツ、フットウェア、オーディオ、アイウェア、家具、ホスピタリティ、レザーグッズ、刃物、スキンケア、プライベート医療などがあります。ユーザーが完成したサイトを見たときに、実在のビジネスとして即座に受け入れられる分野でなければなりません。ペンのインクはそれに当てはまりません。
分野の中で製品を定義する。 具体的に何が主題なのかを決めます。指輪、スニーカー、オーバーイヤーヘッドホンのセット、シェフの包丁などです。
その製品を Spline で検索する。 キーワードマップの拡張を使い、my.spline.design/ と prod.spline.design/ の両方の URL を対象にします。
トピックに合うシーンが無ければ、分野を変える。 既に手元にあるシーンに合わせて分野を曲げることはしないでください。

健全なサイトの一式は、読者が認識できる本当に異なる産業にまたがるべきです。利用可能な Spline の URL が示唆する分野が共通の糸になっているサイト群は、ポートフォリオではなく後付けの正当化にすぎません。

シーンの一意性 — セッション内での再利用禁止

単一のセッションやサイトのバッチ内では、同じ Spline シーン URL を 2 つ以上のサイトで使用してはなりません。 同じシーンを複数の住宅サイトで使い回すと、ストックフォト素材が透けて見えるような印象になり、各サイトが独自のアイデンティティを持つという SKILL の前提そのものが崩れてしまいます。

ある 1 つのサイトで worldplanet を使った場合、新しいフィールドにどれほど直接的に「合う」ように見えても、次のサイトで使ってはいけません。別のシーンを探してください。
新しいフィールドに合うユニークなシーンが見つからない場合は、写真を使うか、決定的な SVG/CSS イラストレーションに切り替えてください。決して再利用しないでください。
互換性があるように見えるシーン（2 つの異なる地球のシーン、2 つの異なる流体のシーンなど）も、同じバッチに並べて表示すべきではありません。地球のシーンはバッチ内に 1 つだけ、流体のシーンもバッチ内に 1 つだけにしてください。
新しい prompt.md の冒頭には、このセッション内で前のサイトがすでに使用した Spline URL をすべて列挙してください。新しいサイトの URL がそのリストに含まれていないことを確認してください。

最重要ルール：トピックへの文字通りの一致であり、比喩的な一致ではないこと

Spline シーンは、サイトのブランドの題材を文字通り描いている場合にのみ使用できます。たとえ詩的であっても、比喩的な関連付けは認められません。

流体のシーンはインクメーカー（流体がまさにインクである）には適していますが、レストランには適していません（スープを理由に、メニューの横に黒い流体を置くのは不適切です）。
地球のシーンは宇宙旅行会社（乗客が見るのが地球である）や地図製作者（地図にするのが地球である）には適していますが、「世界的なネットワーク」を掲げるファミリーオフィスには適していません（その関連付けは比喩的だからです）。
時計のシーンは時計職人には適していますが、「時間を大切にする」をうたうコンサルティング会社には適していません。

Spline シーンを使用する前に、prompt.md に次の文を明記してください：「このシーンは X を描いている。私のサイトの題材は X である。」 2 つの X が同じ名詞でない場合は、そのシーンを却下してください。ブランド自体が、そのシーンに描かれているものを事業として扱っている必要があります。単に象徴的に引き合いに出しているだけでは不十分です。

2 秒テストは引き続き適用されます： キャプションがない状態でも、閲覧者はシーンの題材を言い当てられるべきです。「美しい抽象的な構成」は題材ではありません。

テーマの調和 — シーンとサイトは視覚的に一体感がなければならない

Spline シーンは、レンダリングの中に独自の背景色と照明の雰囲気を組み込んでいます。その背景がサイトのパレットと衝突すると、シーンは切り抜いて貼り付けたように見え、3D 自体がどれほど上質でも素人くさくなってしまいます。シーンを確定する前に、次の点を確認してください：

暗いシーン＋暗いサイト — 機能します。シーンの黒い縁がページに溶け込みます。
明るいシーン＋明るいサイト — 機能します。シーンの明るい背景が紙面を延長します。
暗いシーン＋明るいサイト — 通常は失敗します（ページに穴が開いたように見えます）。意図的な枠付きビューポートの表現（壁に掛けられた写真のように、暗いシーンへの縁取りされた「窓」）を用いる場合にのみ許容されます。
明るいシーン＋暗いサイト — 逆向きの同じ失敗パターンです。同じ対策が有効です。

prompt.md に、シーンのネイティブな背景色とサイトの地の色を書き留めてください。両者が反対で、枠付きビューポートの表現も用いない場合は、別のシーンを選ぶか、別のテーマを選んでください。

検索前に検索語彙を広げる

Spline を検索するときは、トピックの単語だけで検索しないでください。単一キーワードの検索では、関連するシーンの 90% を取りこぼします。多くのクリエイターは、カテゴリー名ではなく、作品の中に何が映っているか（wheel、tire、headlight など）でタイトルを付けています。

検索する前に、次の内容を含む少なくとも 8〜12 語のキーワードマップを作成してください。

対象そのもの — car、watch、perfume bottle
同義語 / カテゴリー語 — automobile、sportscar、vehicle、supercar；timepiece、chronograph；fragrance、parfum、scent
象徴的な部品とクローズアップ — wheel、tire、rim、engine、exhaust、dashboard、steering wheel、headlight；gears、tourbillon、crown、dial、movement；bottle、glass、droplet、atomiser
素材と表面 — chrome、metal、leather、carbon；brass、platinum、gold、steel；crystal、glass、amber liquid
工程 / 環境 — assembly、atelier、race track、showroom；workshop、manufacture、loupe；apothecary、laboratory
シンボル / 比喩 — horizon、motion lines；orbit、constellation、star；flower、smoke、vapor

また、Awwwards、Codrops、Tympanus、Dribbble、Twitter/X、および本番サイトの HTML も検索してください（"<iframe" "my.spline.design"、"<spline-viewer" "scene.splinecode"、site:codepen.io "my.spline.design"、site:github.com "my.spline.design"）。稼働中のサイトの動作している iframe 内にある URL は、確実に表示されます。

検索は最低 3 回実施してください：

スラッグ / トピック検索 — キーワードマップの各単語について site:my.spline.design [keyword] を直接検索します。
コミュニティページ検索 — community.spline.design/tag/[keyword] を検索します。
収集検索 — "<iframe" "my.spline.design/[topic keyword]" で、本番の公開サイトに既に埋め込まれている URL を探します。

Spline の URL 形式リファレンス — 手元の URL を把握する

Spline には、遭遇する可能性のある URL 形式が4 種類あります。そのうち埋め込みに使えるのは 2 種類だけです。

URL の形	内容	埋め込みに使えるか	方法
`community.spline.design/file/[uuid]`	コミュニティギャラリーのページ（JS ビューア付き HTML）	❌ 不可	`X-Frame-Options` を送信するため、iframe はブロックされます。また、HTML に埋め込み用 URL は含まれていません。`my.spline.design` のスラッグは、ユーザーが共有ボタンを押した後にクライアント側で追加されます。
`app.spline.design/community/file/[uuid]`	そのコミュニティファイルを開いた Spline エディター	❌ 不可	埋め込み用ではなくエディターのページです。
`my.spline.design/[slug]/`	公開された HTML シーンページ	✅ 可能（iframe 経由）	`<iframe src="https://my.spline.design/[slug]/">`
`prod.spline.design/[id]/scene.splinecode`	生のランタイムバイナリ	✅ 可能（spline-viewer 経由）	`<spline-viewer url="https://prod.spline.design/[id]/scene.splinecode">`

避けるべき重大な誤用： .splinecode の URL を <iframe src> に入れないでください。壊れたプレースホルダーになるか、バイナリがダウンロードされるだけです。代わりに Web コンポーネントを使用してください。逆に、my.spline.design/ の URL を <spline-viewer url> に入れないでください。ビューアーが期待するのはランタイムバイナリであり、HTML ページではありません。

スラッグを捏造しないでください。 コミュニティファイルの UUID と公開シーンのスラッグは別の識別子です。スラッグを推測すると、ほぼ確実に 403 になります。URL が HTTP 200 を返すことを確認できない場合、その URL は存在しないものとみなしてください。

コミュニティURLに関する重要な注意点

https://community.spline.design/file/[uuid] で表示されるシーンは、iframeで直接埋め込むことはできません。コミュニティドメインは X-Frame-Options ヘッダーを送信しており、フレーム表示がブロックされます。また、Googleは基になる my.spline.design/[slug]/ URLをインデックスしていません。検索で一見理想的なコミュニティシーンが見つかっても、community.spline.design/file/... をそのままiframeに入れることはできません。

回避策（信頼性の高い順）:

ユーザーに依頼する: コミュニティのファイルを開き、Share → Public URL を選択して、my.spline.design/… のリンクを貼り付けてもらいます。理想的なシーンを見つけたものの埋め込みURLを取得できない場合は、これが正しい対応です。
作成者がポートフォリオにリンクしていないか確認する: 多くのSplineクリエイターは、自分のシーンを個人サイトに埋め込んでいます。
リミックスのワークフロー: ユーザーがコミュニティのファイルを開き、Remix をクリックします。リミックスされたコピーはユーザーのアカウントに属し、ユーザーが共有できる独自の公開 my.spline.design URLを持ちます。
制約を受け入れる: URLを検証できない場合は、slugを推測しないでください。

Splineの埋め込み — 確実なパターン（両方の方式共通）

Splineのサイズに関する問題は、すべて一つの根本原因に起因します。シーンの内部キャンバスはコンテナの100%を占め、3Dオブジェクトの周囲は、シーンの内部背景色で埋められます。この背景色は、ページの背景ではなく、作成者が選んだニュートラルな色がデフォルトです。背の高いコンテナにシーンを配置すると、オブジェクトが占める部分は正しく見えますが、残りの部分は単色の空白のように見えます。この空白はレンダリングのバグではなく、シーンの背景です。

修正は常に次の3つを一緒に適用します。

コンテナでサイズを明示的に定義する: 幅、高さ、position、overflow:hidden を指定します。シーン自身にサイズを決めさせないでください。
シーン要素でコンテナを埋める — position:absolute、inset:0。
シーンの背景をページの背景に合わせる: <spline-viewer> の background 属性を使うか、（iframeの場合）背景がもともとページに合うシーンを選びます。

方式1 — iframe埋め込み（my.spline.design/[slug]/ URLの場合）:

// Container — always defines size + overflow:hidden
<div
  style={{
    position: "relative",
    width: "100%",
    height: "100%",           // or a specific value / aspect-ratio / vh
    minHeight: 420,           // guarantees a usable minimum
    overflow: "hidden",
    background: "#0A0B0F",    // matches the page ground — seen during load
  }}
>
  {/* skeleton loader underneath — visible until Spline paints */}
  <div
    style={{
      position: "absolute",
      inset: 0,
      background:
        "linear-gradient(110deg, #0A0B0F 30%, #151821 50%, #0A0B0F 70%)",
      backgroundSize: "200% 100%",
      animation: "skl 1.8s ease-in-out infinite",
      zIndex: 0,
    }}
  />
  <iframe
    src="https://my.spline.design/[scene-slug]/"
    style={{
      position: "absolute", inset: 0,
      width: "100%", height: "100%",
      border: "none", display: "block",
      zIndex: 1,
    }}
    title="3D Scene"
    loading="lazy"
    allow="autoplay; fullscreen"
  />
</div>

iframeでは背景を指定できません。作成者が焼き込んだ背景がそのまま表示されます。ページと合わない場合は、(a) 境界線付きのカードでシーンを囲むなど、枠付きのビューポート表示を受け入れるか、(b) 同じシーンの .splinecode URLに切り替えてWebコンポーネント（下記）を使うかのどちらかです。Webコンポーネントでは背景を上書きできます。

方式2 — <spline-viewer> Webコンポーネント（prod.spline.design/[id]/scene.splinecode URLの場合）:

テーマの調和が重要なテックサイトでは、こちらが推奨の方式です。<spline-viewer> にはシーンの内部背景を完全に置き換える background 属性があるためです。

// Inject the viewer script once per app (put in main.jsx or the first component that uses it):
useEffect(() => {
  if (document.querySelector('script[data-spline-viewer]')) return;
  const s = document.createElement("script");
  s.type = "module";
  s.src = "https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js";
  s.setAttribute("data-spline-viewer", "1");
  document.head.appendChild(s);
}, []);

// Then render the viewer inside a sized container.
// Use dangerouslySetInnerHTML because JSX can't parse the custom tag's `background` attribute as a color.
<div style={{ position: "relative", width: "100%", height: "100%", minHeight: 480, overflow: "hidden" }}>
  <div
    dangerouslySetInnerHTML={{
      __html: `<spline-viewer
        url="https://prod.spline.design/[id]/scene.splinecode"
        background="#0A0B0F"
        style="position:absolute;inset:0;width:100%;height:100%;display:block;"
      ></spline-viewer>`,
    }}
  />
</div>

background 属性には任意のCSS色の値を指定できます。例えば #0A0B0F、transparent、rgba(11,16,20,0.9) などです。ページの背景色を設定してください。 3Dオブジェクトの周囲の空白がページになじみ、「下半分が黒い」という問題がなくなります。

Splineシーンの種類 — 「ヒーローセクション」系のシーンは避ける

すべてのSplineシーンが個別の3Dオブジェクトとは限りません。コミュニティには次のようなタイトルのシーンが多数あります。

"reeded glass prism — hero section UI concept"
"AI landing page hero"
"SaaS hero with CTA"

これらのシーンには、3D構成の一部として描画された、HTMLのようなテキスト、ボタン、レイアウトが焼き込まれています。このようなシーンを埋め込むと、ヒーローの中に事前にデザインされた別のヒーローが入ることになります。シーン自身のテキストがページのテキストと競合し、シーン自身のCTAがあなたのCTAと競合します。

シーンを採用する前に、そのタイトルを確認してください。 タイトルに "hero section," "landing page," "UI concept," または "website template" が含まれる場合は、注意してください。シーンを開いて確認し、次のいずれかを行います。

シーンをヒーローとして採用する（その上に重ねてあるご自身のヒーローHTMLを削除します）。
シーンを却下し、純粋なオブジェクトのシーン（タイトルがオブジェクトだけのもの。例: "watch," "shoe," "orb"。構成を示すものではないもの）を探す。

カメラのフレーミング — 「オブジェクトが小さすぎる／ズームしすぎている」を修正する方法

シーンのズームが誤っている場合（大きなキャンバスの中でオブジェクトが極端に小さい場合）、制作者が焼き込んだカメラ設定が原因です。簡単な順に3つの修正方法があります。

CSS transform — ビューアーをコンテナで囲み、内側の要素に transform: scale(1.4) を適用します。レンダリングされたキャンバス全体が拡大され、コンテナの overflow: hidden によって端が切り取られます。シンプルで、iframe と web-component のどちらでも動作します。
コンテナを狭くする — Spline のキャンバスは自動的にフィットします。幅が狭く高さのあるコンテナではシーンが拡大される傾向があり、幅が広く高さの低いコンテナではオブジェクトの周りに空白が多く表示されます。コンテナの aspect-ratio を調整して、オブジェクトに合わせてトリミングしてください。
React Spline と setZoom() — @splinetool/react-spline を使用している場合のみ（<spline-viewer> の場合は不可）。onLoad コールバックは、setZoom(level) メソッドを持つ Spline の Application オブジェクトを受け取ります。読み込み時に application.setZoom(1.5) を呼び出してください。

読み込み中の状態 — 決して真っ白にしない

Spline のシーンは 1〜16 MB のバイナリで、高速な接続では 2〜8 秒で読み込まれます。その間に真っ白なビューポートが表示されるのは、最悪の体験です。

必ず、同じコンテナ内でシーンの下にスケルトンローダーを重ねてください。 コンテナの背景としてスケルトンを配置し（シマー効果のあるグラデーションアニメーションを使用）、読み込まれるとシーンがその上に描画されます。JavaScript による協調処理は不要です。

@keyframes skl {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

スケルトンには、ページの背景色と、それより少し明るい色調の1色を使用してください。ダークなサイトで白いスケルトンを使うことは避けてください。

ビルド後のレンダリングサイズ確認（必須）

URLが動作することを確認するのと、シーンがレイアウト内で適切なサイズで描画されていることを確認するのは別物です。Splineシーンには独自の内部カメラとフレーミングがあります。小さなビューポート、横長のバナー、不自然なアスペクト比にシーンを配置すると、被写体がフレームから切れたり、点のように小さくなったりすることがよくあります。

サイトをビルドした後、完了とする前に、次の手順を順番に実行してください。

プレビューを起動します。
ページを読み込み、Splineランタイムの読み込みを6〜10秒待ちます。
ヒーロー部分のスクリーンショットを撮ります。
スクリーンショットを確認します。シーンの被写体は次の条件を満たしている必要があります。
- 見える（横に切れていない、透明にし忘れたベールの裏に隠れていない）
- 適切な比率である（1600pxのコンテナの4%しか占めていない、というのではなく、意図したサイズで認識できる）
- 欠けていない（モデルが全体として写っており、タイポグラフィレイヤーで半分に切られていない）
いずれかが満たされない場合は、コンテナのアスペクト比を調整する、iframeのサイズを変更する、iframeにtransform: scale()を適用してシーンの余白を調整する、またはシーンの配置方法（ステージ／バックドロップ／コンパニオン）を変更します。
再度スクリーンショットを撮ります。シーンが正しく描画されるまで繰り返します。

よくあるサイズの問題と対処法:

巨大なコンテナの中でシーンが小さく見える → シーンのカメラが固定ズームになっており、制作者が別のアスペクト比用に設定したものです。(a) シーンを、より小さく、アスペクト比の合ったコンテナに入れるか、(b) iframeにtransform: scale(1.4)を適用して拡大してください。
シーンが横に切れている → シーンの本来の中心がずれています。iframeにtransform: translateX()を使って中央に戻してください。
暗い背景と同化してシーンが見えなくなる → CSSのベールが濃すぎるか、サイトの背景がシーンを覆い隠しています。ベールの不透明度を下げてください。background属性を使用してください。
シーンの背景色がサイトのテーマと合わない → テーマ調和のルールに反しています。background属性（spline-viewerの場合）を使うか、別のシーンを選んでください。

この手順は省略できません。中心がずれていたり、サイズが不適切なSplineシーンを含むサイトは、適切に構成された静止画像のサイトよりも明らかに劣ります。

配置も関連性の一部である

適切なシーンでも、配置が不適切であれば効果は損なわれます。次の空間的なロジックのいずれかを選んでください。シーンをパネルに放り込んで、あとは期待するだけというのは避けてください。

ステージ — シーンを台座の上の製品のように配置します。ビューポート全体（または広い範囲のコンテナ）に中央配置し、その周囲にタイポグラフィを置きます。車、時計、ボトルなど、あらゆる物理的なオブジェクトに適しています。ユーザーは回転させて見ることができます。通常はこれが適切な選択です。
バックドロップ — シーンをヒーローのタイポグラフィの背後に画面全体に広げ、文字が読みやすいようにグラデーションのベールをかけます。シーンは焦点ではなく、文脈や雰囲気を作るものになります。20%の不透明度でも読み取れる主要な被写体がある場合（地球、ロケット、惑星など）に有効です。
コンパニオン — シーンを専用のパネル（40/60または33/67の分割）に配置し、反対側にタイポグラフィを置きます。シーンの被写体がトピックに明らかに関連している場合にのみ許容されます。
editorialレイアウト内のオブジェクト — シーンを中〜小サイズにして、グリッド上の特定の位置に固定し、エディトリアルレイアウトの額入り写真のように扱います。マニフェストやストーリーのセクションに有効で、通常はヒーローには向きません。

選んだシーンが、これらのいずれにも明確な理屈で当てはまらない場合は、無理に押し込むのではなく、別のシーンを探すべきであるという合図です。

フォールバックの階層 — 常に階層化し、慌てて切り替えない

トピックに関連する Spline シーンを、全体検索の後でも確認できなかった場合は、無理に使用しないでください。また、「Spline が失敗したら写真に切り替える」という脆い JavaScript の切り替えも作らないでください。それは画面上で目立つ不具合になります。代わりに、Spline ビューアーの下層にフォールバックを重ねて配置してください。そうすれば、Spline が遅い場合や読み込みに失敗した場合でも、ユーザーには意図的に作られた表示が見えます。

階層（優先順）:

クライアント提供のアセット — ユーザー独自の Spline シーン、製品レンダリング、ブランド動画があれば、まずそれを依頼してください。
検証済みの Spline シーン（my.spline.design/[slug]/ または prod.spline.design/[id]/scene.splinecode）で、対象を実際に描写しているもの。
プロ品質の静止写真（クライアント提供、または Unsplash から厳選したもの）に、CSS のパララックスと控えめなグレインやフィルターを適用。画像が期待どおりに表示されるかは、必ずスクリーンショットで確認してください。
CSS / SVG イラスト — HTML/CSS/SVG だけで構築した、意図的なカスタムイラスト（ジュネーブストライプ、手描き風の図、レンダリングしたモックアップなど）。決定的な表示になり、ネットワークに依存しません。
Three.js の雰囲気レイヤー — 最小限のパーティクルフィールド、グリッド平面、漂う塵のキャンバスなどを、背景の雰囲気としてのみ使用します。静止画やタイポグラフィのヒーローの背後に置き、メインのビジュアルにはしないでください。

レイヤー実装（Spline の下に置く CSS のみのフォールバック）:

<div className="hero-stage">
  {/* Layer 0 — always visible. The base fallback (photo or illustration). */}
  <div className="hero-fallback" />

  {/* Layer 1 — Spline paints over the fallback if/when it loads.
      If Spline 404s, never loads, or is disabled, layer 0 remains visible. */}
  <div
    className="hero-scene"
    dangerouslySetInnerHTML={{
      __html: `<spline-viewer url="..." background="transparent" style="..."></spline-viewer>`
    }}
  />
</div>

/* CSS */
.hero-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero-fallback {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-[verified-id]?w=1800&q=85");
  background-size: cover; background-position: center;
  filter: saturate(0.9) contrast(1.05);
  z-index: 0;
}
.hero-scene { position: absolute; inset: 0; z-index: 1; }

Spline で background="transparent" を指定している場合、3D オブジェクトの周囲の空白部分から、下層のフォールバック写真が見えます。ページには常に目に見えるヒーローが存在します。Spline は強化要素であり、必須要素ではありません。

写真のフォールバック — 推測せず、画像を確認する

Unsplash の URL は便利ですが、読み込んで確認しない限り検証できません。https://images.unsplash.com/photo-1548484352-ea579e5233a8?w=1200&q=80 のような URL は、写真 ID を指定しているため具体的に見えます。しかし、撮影者がファイルを差し替えたり削除したりしている可能性があり、トリミングも想定と異なるかもしれません。さらに、ビューポートのアスペクト比が異なると、写真の名前が示す対象とはまったく別の被写体が表示されることもあります。

写真のフォールバックを使う場合は、次のとおりにしてください。

まずクライアント提供の画像を優先してください。 ユーザーに製品写真を依頼します。
Unsplash を使う必要がある場合は、すでに確認した写真を選んでください（URL を表示できるツールで確認するか、ユーザーに写真の確認を依頼します）。ファイル名からトピックを推測して写真 ID を選ぶのは避け、必ず検証してください。
構築後、写真を実際の配置場所でスクリーンショットしてください。 画像を見て、被写体、トリミング、色調を確認します。
写真が期待どおりに表示されない場合は、差し替えてください。 具体的な名詞で Unsplash を再検索し、再度スクリーンショットを撮ります。

関連するシーンも写真もない場合は、決定的な CSS/SVG イラストが常に有効な代替手段です。ページ内だけで構築され、ネットワークに依存せず、常に同じように表示されます。例として、CLT 木質パネルの断面図、時計職人の橋に描いたジュネーブストライプ、スニーカーのシルエット、円錐グラデーションで作ったリアクティブなオーブなどがあります。

関係のない 3D シーンは、どれほど見映えが良くても高級感を損ないます。考え抜かれた静止画や SVG イラストは、そのようなことはありません。

業界に合わせた色とタイポグラフィ

航空宇宙 / 防衛: ダークな背景（#0A0A0A、#0C1222）、すっきりとしたサンセリフ、控えめなアクセントカラー（白、シルバー、または抑えた青one色）。SpaceX のようなイメージで、オレンジと白は使わないでください。
自動車: 深い黒、ドラマチックな照明効果、プレミアムなサンセリフまたは幾何学的なフォント、メタリックなアクセントトーン。Porsche のように、抑制が効いていて自信に満ちた印象にしてください。
ファッション / ラグジュアリー: 極限までの抑制。ディスプレイにはセリフ、本文には細いサンセリフを使用します。ほぼ黒とオフホワイトを基調とし、明るいアクセントカラーは使わないでください。Bottega Veneta のようなイメージです。
フード / レストラン: 温かみのあるトーン（クリーム、チャコール、落ち着いたアースカラー）、エディトリアル系のセリフ、ゆとりのある余白。Noma のようなイメージです。
テック / AI ツール: 暗めにも明るめにもできますが、紫のグラデーションというありがちな表現は避けてください。等幅フォントを用いた、整然としたシステマティックなレイアウトにします。Linear / Vercel / Cursor のようなイメージです。
金融 / 法務: 保守的なパレット（ネイビー、チャコール、フォレストグリーン）、権威を示す伝統的なセリフ、構造化されたグリッド。

サイトを非プロフェッショナルに見せてしまう不適切な色の選択:

航空宇宙にオレンジと白の組み合わせ（建設会社のように見えてしまいます）
黒背景にすべて鮮やかなシアン（ハッカー映画のように見えてしまいます）
異なる業界で同じアクセントカラーを使うこと

重要な技術ルール:

フックを使う場合は必ず import React も併せて記述してください: import React, { useState, useEffect, useRef } from "react";
JSX のフラグメント（<>...</>）は使用しないでください。互換性のため <span> または <div> を使用してください
Spline を iframe で埋め込む場合は、loading="lazy" を設定し、スタイル付きのローディングプレースホルダーを用意してください
画像を使用する場合、Unsplash の URL には必ず ?w=1920&q=80 パラメータを含めてください
Three.js を使用する場合はすべて、alpha: true を設定し、setPixelRatio(Math.min(window.devicePixelRatio, 2)) を使用し、アンマウント時にクリーンアップしてください

スクロール駆動型の体験

スクロールは、単にページを下に移動させるものではなく、演出された体験の流れとして感じられるようにしてください。

スクロール駆動の手法:

パララックスレイヤー: 複数の要素を異なる速度で動かします。window.scrollY を追跡し、要素ごとに異なる係数を適用してください。
横スクロールセクション: ユーザーが縦方向にスクロールすると、セクションが横方向にスクロールします。コンテナに position: sticky と overflow: hidden を設定し、スクロールの進行度に応じて内側のコンテンツを translateX で移動させてください。
スクロールに連動した拡大: スクロールしていくと、小さな状態から全画面サイズまで大きくなる要素です。しきい値の配列を指定した IntersectionObserver を使用するか、getBoundingClientRect() から進行度を計算してください。
スクロールに連動したテキストの表示: スクロールが到達した単語や行を順番に表示します。テキストを span に分割し、それぞれの位置に応じて表示をトリガーしてください。
スクロールに連動した色の遷移: ユーザーがセクション間をスクロールするにつれて、ページの背景色やテキストの色が滑らかに切り替わります。
ピン留めされたスクロールシーケンス: セクションを固定したまま、その中のコンテンツが切り替わります。画像が順番に表示されたり、テキストが入れ替わったり、ストーリーが進行したりします。
ズームスルー型の遷移: ユーザーがスクロールするにつれて「ズームイン」していくようなコンテンツです。小さく遠くに見えている状態から始まり、ビューポート全体を埋めるまで拡大します。

スクロール進行度の実装パターン:

const getScrollProgress = (element) => {
  const rect = element.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  return Math.max(0, Math.min(1, 1 - (rect.top / windowHeight)));
};

useEffect(() => {
  let ticking = false;
  const onScroll = () => {
    if (!ticking) {
      requestAnimationFrame(() => {
        // update state based on scroll
        ticking = false;
      });
      ticking = true;
    }
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  return () => window.removeEventListener('scroll', onScroll);
}, []);

モーションの演出設計

スクロール駆動の効果だけでなく、すべてのモーションは演出され、順序立てられているように感じられるべきです。

すべてをずらして動かしてください。複数のものが同時に動くことは避けます。animation-delay または順序付けられたタイマーで調整してください。
速度に変化をつけると動きに生命感が生まれます。素早い登場（200〜300ms）と、ゆっくりとした落ち着き（500〜800ms）を組み合わせてください。
イージングは個性を決めます。滑らかなオーバーシュートには cubic-bezier(0.16, 1, 0.3, 1)、キレのある動きには cubic-bezier(0.77, 0, 0.175, 1)、上品なイーズアウトには cubic-bezier(0.33, 1, 0.68, 1) を使用してください。
テキストや画像には clip-path による表示アニメーションを使用します。矩形やポリゴンが広がるように見せてください。
単語や文字ごとに独立してアニメーションするスプリットテキストアニメーションを使用してください。
インタラクティブな場面では、カーソルに追従する要素やマグネティックボタンを使用してください。

完成度を示す細部

以下の小さな要素が「プレミアム」と「そこそこ良い」を分けます。

カスタムカーソルのスタイル（小さなドットカーソル、またはインタラクティブ要素の近くで変化するカーソル）
スクロール進捗インジケーター（ビューポート上端の控えめなライン）
scroll-behavior: smooth または Lenis などのライブラリによるスムーズスクロール
デザインされたローディング状態（レイアウトに合わせたスケルトンスクリーンや、ブランドのローダー）
ホバー、アクティブ、フォーカスなどの状態遷移を、デフォルトではなく練り上げられたものにする
border-radius は控えめかつ一貫して使用する。エディトリアル／ブルータリスト調なら角を完全に直角（0）にするか、明確に指定した半径にし、すべてに既定の 8px を適用することは避ける
温かみと奥行きを出すために、背景に SVG フィルターを使った控えめなグレイン／ノイズのテクスチャオーバーレイを重ねる
ブランドに合わせて ::selection の選択色をスタイリングする
WebKit系ブラウザー向けのスクロールバーのスタイリング

React（.jsx）向け実装ガイド

構成

// Always use a default export with no required props
export default function SiteName() {
  return (
    <div>
      {/* Full implementation */}
    </div>
  );
}

フォントの読み込み

<style> タグ内の @import または、コンポーネント内の <link> で Google Fonts を読み込みます。必ず、よく考えられたフォールバックのスタックを用意してください。

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

利用可能なライブラリ

Three.js（r128）: 雰囲気のある背景（パーティクル、グリッド）にのみ使用します。import * as THREE from 'three' としてインポートします。注意: r128 では THREE.CapsuleGeometry は利用できません。OrbitControls も利用できないため、カメラの動きは手動で実装してください。
@splinetool/viewer: <spline-viewer> Web コンポーネント用に CDN スクリプトで読み込みます
lucide-react: アイコン用です（ただし控えめに使用してください。アイコンの多用は AI が生成したものだと示すサインになります）
recharts: データの可視化に使用します
d3: 複雑なアニメーションや可視化に使用します
lodash: ユーティリティ用です
Tone.js: 音声用です

CSS のアプローチ

コンポーネント内でインラインスタイル、または <style> タグを使用します。テーマの一貫性のために CSS 変数は不可欠です。

:root {
  --color-bg: #FAF9F6;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-accent: #C8553D;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --space-unit: clamp(1rem, 2vw, 2rem);
}

アニメーションのパターン

スクロールをトリガーとする効果には、CSS アニメーションと IntersectionObserver を優先してください。オブザーバーには useRef と useEffect を、アニメーションの状態のトリガーには useState を使用します。

const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);

useEffect(() => {
  const observer = new IntersectionObserver(
    ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
    { threshold: 0.15 }
  );
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

レスポンシブ戦略

ビジュアルのインパクトを優先してデスクトップ向けに設計し、その後モバイルに適応させてください。流動的な余白とタイポグラフィには clamp() を積極的に使用します。単に縮小するのではなく、ブレークポイントでレイアウトを組み替えてください。

プロンプトは詳細でなければならない ― 段落ではなくチェックリストとして書く

ユーザー（またはこのスキルそのもの）が新しいサイト用に prompt.md を作成するとき、短いプロンプトからは短い出力しか得られません。スキルが最良の成果を出せるのは、すべての決定事項をプロンプト内で明示的に指定したときです。完全なプロンプトには、以下の各項目が順番どおりに含まれます。

分野の宣言（Field-first declaration） ― 業界、その中の具体的な製品、そしてこの分野が実在すること（シーンに合わせた言い逃れではないこと）の理由。
シーン／被写体の一致（Scene / subject match） ― Spline の URL、それが描いているもの、サイトの被写体、両者が同じ名詞であることの確認、シーンが本来持つ背景色、サイトの地の色、テーマの調和に関する判定。
このセッションで使用済みのシーン（Previous scenes used this session） ― すでに使われた URL の一覧と、新しい URL がその中に含まれていないことの確認。
構造的 DNA（Structural DNA） ― 選んだコンセプトの名称、過去サイトの DNA、新しい DNA が異なることの確認。
デザインリファレンスの引用（Design reference pull） ― 具体的な実在の本番サイト 5 件以上。それぞれについて、借用する一つの手法を明記する。テクノロジー／AI 分野では、デフォルトとして Vercel、Cursor、Linear、Windsurf を含める。
パレット（Palette） ― 感情的な役割（地・インク・アクセント・セカンダリーアクセント）を持つ 4〜6 個の HEX 値。
フォントスタック（Font stack） ― ディスプレイ／本文／等幅を名前で指定する。ブラックリストのフォント（Inter、Poppins、Montserrat、Raleway、Space Grotesk、Outfit）は採用しない。
ナビゲーションパターン（Nav pattern） ― カタログのどのナビゲーションバリエーションをこのサイトで使うか。本当に適切な場合を除き、デフォルトの上部バー 3 カラムレイアウトは明示的に使用しない。
ブランドのトーン（Brand voice） ― 3〜5 文でトーンを調整する。コピーはどのように読まれるべきか？このブランドが言わないことは何か？
構成 ― 全セクション（Structure — every section） ― 名称、配置、含む内容、長さ。6 セクションのプロンプトは 6 セクションのサイトを生み、「いくつかのセクション」といった曖昧なプロンプトはテンプレートを生みます。
具体的なコピーのフック（Specific copy hooks） ― サイト上に一字一句そのまま現れなければならない具体的な文が少なくとも 3 つ（ヒーローの見出し、引用文、締めの一文など）。これらがトーンの軸になります。
具体的な技術的フック（Specific technical hooks） ― テクノロジー／AI の場合：キーボードショートカットのチップ、架空のコードブロック、具体的な価格プラン、架空のコマンドライン、架空の製品名、架空の顧客ロゴ（例示であることを明記）。ラグジュアリーの場合：ロット番号、受注台帳、具体的な素材の来歴。
モーションの振り付け（Motion choreography） ― 2〜3 個の具体的なモーション手法：ヒーローの登場アニメーション 1 つ、スクロール連動の動作 1 つ、マイクロインタラクション 1 つ。このセッションで過去のサイトに使った手法は繰り返さない。
重要なルール／禁止事項（Critical rules / banned moves） ― このサイトがしてはならないこと：禁止色、禁止の構造的手法、過去のサイトから引き継ぐ禁止パターン。明示的に記述する。
レンダリング検証のチェックポイント（Render verification checkpoint） ― ビルド後に制作者が撮影すべき具体的なスクリーンショットと、注意すべき具体的な失敗モード。

プロンプトは、この 15 項目すべてに具体的で明確な答えがあるとき「完成」となります。「温かみのあるパレット」「何らかのモーション」「すっきりしたレイアウト」のような曖昧な回答は却下されます。それらこそ SKILL が陥る失敗パターンだからです。

プロセス

ユーザーがプレミアムなウェブサイトを依頼した場合:

ブリーフを吸収する — 分野を最優先に。 ブランド、オーディエンス、目的、分野・業界を理解します。分野は、閲覧者が説明なしに受け入れられる 実在する、もっともらしいプレミアム業界 でなければなりません。自動車、時計製造、オートクチュール、香水、履物、オーディオ、アイウェア、プライベートメディシンなどです。利用可能な Spline シーンを埋め合わせるために架空のニッチブランド（「万年筆インク工房」「天文暦出版社」など）を作ってはいけません。ユーザーに、商品画像、ブランドアセット、動画、使用したい特定の 3D モデルがあるかを確認してください。
業界を深く調査する。 実在する参考サイトを 少なくとも 5 つ 調べます（業界の大手と、あまり知られていない編集系・文化系の運営者を組み合わせます）。それぞれについて、主要な見出しフォント、本文フォント、16 進数によるパレット、使われている構造的な DNA、そして一つの特徴的な表現を書き出します。サイトの prompt.md の先頭に、6〜10 行の デザイン参考抜粋 ブロックをまとめてください。
トピックに合った 3D を Spline から調達し、そのサイト専用であることを確認する。 販売する商品に関するキーワードを 8〜12 語のマップにまとめます。3 回の検索を行います。site:my.spline.design [keyword]、community.spline.design/tag/[keyword]、本番サイトからの収集（"<iframe" "my.spline.design"、"spline-viewer" "scene.splinecode"）です。どちらの埋め込み形式も受け入れます。このセッションで以前のサイトが使用した Spline URL の一覧を確認し、新しいサイトの URL はそのいずれとも一致してはいけません。 利用可能なシーンがすべて使用済みの場合は、写真または SVG/CSS のイラストレーションにフォールバックし、再利用はしないでください。候補となるシーンは、4 つのチェックに合格する必要があります。200 で応答すること、読み込み時に期待どおりの品質で描画されること、被写体が 2 秒以内に名前を言えること、雰囲気がブランドに合うことです。スラッグを捏造してはいけません。実在のブランドの製品を描いたシーンは除外してください。配置（ステージ / 背景 / コンパニオン / 見開きの中の物体）を決めてから確定させます。
構造的 DNA を名前で選ぶ。 構造的 DNA カタログから、ページの 主要な コンセプトを一つ選び、プロンプトファイルの先頭に名詞句として一行で書きます。このセッションで前のサイトが使用したコンセプトではないことを確認してください。
コンセプトを確定する。 業界調査と構造的 DNA に基づき、その分野のビジュアル言語に合ったクリエイティブな方向性を定義します。
タイプシステムを構築する。 業界に合ったフォントを（調査に基づいて）選びます。スケールを設定し、階層を定義します。ブラックリストに載っているフォントは避けてください。
スクロール駆動のトランジションをデザインする。 ユーザーのスクロール体験がどのように展開するかを計画します。少なくとも 2〜3 種類の異なるスクロール技法をサイト全体で使用しますが、このセッションで前のサイトの中心的な演出として既に使われた技法は繰り返さないでください。
細部にこだわる。 カスタムの選択色、丁寧に考えられたホバー状態、洗練された余白、グレインテクスチャ、カスタムスクロールバーを用意します。
描画を検証する — 省略不可。 プレビューを起動し、ページを読み込み、Spline ランタイムのために 6〜10 秒待ってから、スクリーンショットを撮って確認します。 シーンの被写体は見えていて、適切な比率で、欠けがないこと。シーンのネイティブな背景色がサイトの地色と衝突しないことを確認してください。シーンがトリミングされていたり、中心がずれていたり、サイズが不適切だったり、テーマと衝突していたりする場合は、作業完了と判断する前に修正してください。Spline の描画が崩れたサイトは、うまく構成された静止画像のサイトよりも明らかに劣ります。

「競合他社を調査している」や「3D を調達している」とは決して説明しないでください。職人技で黙って実行してください。デザインがそれ自体を語るべきです。

Markdown 対応

ログインしてコメント

基本情報

作者: davila7
リポジトリ: davila7/claude-code-templates
カテゴリ: デザイン・UI
インストール数: 49
GitHub スター: 32,960

問題を報告