Premium SaaS Web

このスキルは、最も売れているSaaS/AI/エージェンシーテンプレートが高級感を生み出す仕組みをコード化したものです。6つのリファレンスサイト（OptimAI、Aigocy、Adon、Davies、Pastily、AI画像生成デモ）をCSSレベルで調査し、それらが実際に使用している値を測定して抽出されました。レシピは推測ではなく、実際のテクニックです。

ファイル構成。 タスクに必要なものだけを読み込んでください:

directions/<name>/style.md: 視覚的な方向性ごとに1ファイル（トークン、フォント、特徴的なピース、その方向性のみが使用するテクニック）。選択したものだけを読んでください。
shared/*.md: すべての方向性が使用するテクニックをトピックごとに分割したもの。構築しているセクションに応じて該当するファイルを読んでください（ステップ3のマップを参照）。

核となる洞察: 高級感 = コントロールされた光 + 抑制 + 動き

安いページと高級なページは、しばしば同じコンポーネント（ヒーロー、ロゴ、機能、価格、FAQ、CTA）を使用します。違いは、次の4つの仕上げの層にあります:

光 — サーフェスは塗りつぶされたようにではなく、照らされているように見えます。グローはぼかしたシェイプから彫り出されます。カードには左上に光沢があります。ボタンには内側のハイライトと内側の下端のエッジがあります。ボーダーは6〜20%の不透明度のヘアラインです。実際の光は減衰するため、何もフラットな色のブロックではありません。
抑制 — 1つのアクセントカラーのみで、ページの5%以下に使用します。テキストの階層は、多くのグレーではなく、1色の不透明度（100 / 80 / 60 / 50%）から生まれます。最大2フォント（＋ラベル用のオプションのモノスペース）。意味を持たない装飾はゼロ。
緊張感のあるタイポグラフィ — ディスプレイタイプは大きく、タイトにトラッキング（文字間隔 -2% 〜 -7%）、行の高さは約1.0〜1.2。見出しの半分は、多くの場合、薄暗く（不透明度.5または明るいグラデーション）なっており、目が最初に強い半分を読むようになっています。
重みのある動き — スムーススクロール（Lenis）、単語ごとに浮かび上がる見出し、スクロールに応じて塗りつぶされるテキスト、数字のカウンター、決して止まらないマーキー、積み重なるカード。すべてイーズアウト（リニアなし）、跳ねるものはなく、すべてprefers-reduced-motionを尊重します。

出力にこれらの4つの層ではなくコンポーネントしかない場合、セクションがいくつあっても、無料のBootstrapテーマのように見えます。

ワークフロー

1. ブリーフを読み、1つの方向性を選択

以下の表から方向性を選び、そのdirections/<フォルダ>/style.md（完全なトークンセットとその方向性固有のテクニック）を読んでください。他の方向性は読まないでください。

方向性 (フォルダ)	雰囲気	最適な用途	ソース
Ember Dark (`ember-dark`)	ダークネイビーブラック、彫刻的なオレンジ/レッドまたはブルーのグロー、レインボーボーダーのCTA、モノラベルボタン	AIツール、開発ツール、SaaSアプリ	OptimAI
Tactile Light (`tactile-light`)	亜鉛/オフホワイト、光沢のあるスキューモーフィックボタン、光沢カード、1つのホットアクセント（レッド）、3Dレンダリング付きフレームヒーロー	AIエージェンシー、B2B SaaS、コンサルタンシー	Aigocy
Editorial Mono (`editorial-mono`)	純粋な#111 on #F0F0F0、-7%トラッキングの140pxグロテスク、ヘアライングリッド、スクロールフィルテキスト、シャドウなし	エージェンシー、スタジオ、プレミアムサービス	Adon
Noir Spotlight (`noir-spotlight`)	ブラック、1つのネオンアクセント、写真と相互作用する巨大なワード、シェーダー/WebGL背景、積み重なるプロジェクトカード	パーソナルブランド、ポートフォリオ、クリエイティブテック	Davies
Warm Playful (`warm-playful`)	暖かみのあるオフホワイトの紙、ほぼ黒のインク、ミュートされたグリーン→ゴールド、28pxの白いカード、手書き風ノート、端からはみ出すデバイス、写真背景の価格表示	デスクトップ/メニューバーアプリ、ユーティリティ、インディー＆消費者向けツール、買い切りソフトウェア	Pastily

ユーザーが指定しておらず、SaaS/AIの場合は、デフォルトでEmber Darkを使用します。製品がネイティブ/デスクトップ/モバイルユーティリティ、インディーまたはソロファウンダーツールである場合、またはブリーフがフレンドリー、親しみやすい、居心地が良い、「コーポレートではない」と述べている場合（「SaaS」と一度も言っていなくても）は、Warm Playfulに切り替えてください。Ember Darkは、9ドルのクリップボードアプリをエンタープライズインフラのように見せてしまいます。方向性を混在させると、ページが濁ります。別の方向性から1つのテクニックを借りるのは、パレットとタイプに一貫性がある限り問題ありません。

どの方向性を選んだか、その理由を1行でユーザーに伝え、早い段階で方向転換できるようにしてください。ブランドが独自の色を持っている場合（ユーザーが名前を挙げた場合、または製品がすでに色を使用している場合）を除き、その方向性のアクセントを維持します。「居心地の良い」や「夕暮れ」などの気分を表す単語はブランドカラーではありません。実際のブランドカラーについては、directions/README.mdの「アクセントの交換」を参照してください。

2. ページをリストではなくリズムとして計画

プレミアムページは密度とトーンを交互に配置します。一般的に機能するSaaSホーム:

ヒーロー: アイブロウバッジ（「✦ AI駆動エージェンシー」のようなピル型、または「v1.4リリース」のような実際の事実。ユーザーから実際の評価をもらった場合のみアバタースタック＋評価）、薄暗い半分がある2行の見出し、60%の不透明度の1〜2行のサブコピー、プライマリ＋セカンダリCTA、そして製品そのもの（ブラウザフレームのモックアップまたはインタラクティブなプロンプトボックス）がグラデーションフェードで次のセクションに流れ込む。
ロゴストリップ: グレースケールのロゴ、無限マーキー、マスクされたエッジ。
Bento機能グリッド: 5〜7つの不均等なサイズのセル。それぞれに、HTML/CSSで構築されたミニUIイラストレーション（ワークフローノード、チャットバブル、トグル、チャート、カラーチップ）があり、ストックアイコンではありません。
スクロールフィルステートメント: スクロールするにつれて30%→100%に塗りつぶされる1つの大きな文。塗りつぶしは厳密に1行ずつ実行され（ブロックごとに1つのスクラブタイムライン、行は連続）、複数行が同時に実行されることはありません。shared/typography.mdを参照。
数字: 3〜4つの統計情報とロールするカウンター。装飾としての1つの巨大な薄暗い数字。
仕組み / タブ または 積み重なるカード。
お客様の声: ユーザーが提供した引用のみ、アバター＋名前＋役割、おそらくカードの垂直マーキー。提供されていない場合は、セクションを省略するか（代わりに信頼/プライバシーバンドまたは製作者からの短いメモに置き換える）。捏造されたレビュー、評価、ユーザー数は偽の社会的証明であり、購入者を誤解させ、所有者が誤って出荷する可能性があります。
価格: 3つのティア。中央がアクセントボーダー/グローで浮き上がっている。月額/年額のトグル。
FAQ アコーディオン。
最終CTA ページで最も強いグローを持つもの。その後、大きなワードマークのある落ち着いたフッター。

セクションの背景をダーク/ライト（またはbg-1/bg-2）で交互に切り替えて、リズムを生み出します。セクションのパディングは広めに: デスクトップでは垂直方向に120〜176px。

3. レシピで構築

レシピはコピー可能なCSS/HTML/JSです。あなたの方向性のstyle.mdには、既にその方向性固有のテクニック（例: Emberのレインボーボーダー、Tactileの触覚ボタンと光沢カード）が含まれています。その他すべてについては、構築しているものに一致する共有ファイルを読んでください:

構築しているもの…	読むファイル
ヒーローライト、グロー、ドット/グリッド/ノイズ背景、ヘアライングリッド＆カラムガイド	`shared/light.md`
見出し（タイトなトラッキング、薄暗い半分、メタリックグラデーション）、スクロールフィルステートメント（行ごとのGSAP、または色付きキーワードを使用した単語ごと）	`shared/typography.md`
ヒーロー内の製品モックアップ（ブラウザフレームまたはOSクロム付きデスクトップアプリアイテム）、スクリーンショットギャラリー、ミニUI付きBentoグリッド	`shared/product-proof.md`
ガラスナビ、セクション認識型ピルナビ、アイブロウバッジ＆アバタースタック、手書き風注釈、ソフトホワイトカード、カードスポットライト、マーキー、価格表示（3ティア、写真背景の単一価格、またはプレーンな単一価格カード）、FAQ、フッターワードマーク	`shared/components.md`
アイコン付きの任意の名前付きブランド（統合、ロゴストリップ、オービット、「連携」）	`shared/logos.md`
GSAP + Lenisボイラープレート、タイミング/イージングテーブル、`gsap.matchMedia()` reduced-motionパターン、リビール、カウンター、積み重なるカード、CSSのみのトーンシフトストーリースタック、固定UIチップウォール、固定スクロール、ホバー、注意点、ネイティブCSSスクロール駆動モーション	`shared/motion.md`
シェーダー/WebGL背景、パーティクルフィールド、ブルーム（Three.js、CSSフォールバックとモバイルゲート付き）	`shared/webgl.md`

完全なランディングページには通常、これらすべてが必要です。単一のセクションまたは小さな編集には、その行のみが必要です。すべてのGSAPプラグイン（SplitTextを含む）は3.13以降無料であり、jsDelivrからロードします。

4. 技術的なデフォルト

Tailwind CDNを使用した単一ファイルHTML（またはプロジェクトの既存のスタック — 存在する場合はそれに従う）。デザイントークンは:rootのCSSカスタムプロパティに配置して、パレットの変更が1回の編集で済むようにします。
Google Fontsからのフォント。リファレンスからの実績のある組み合わせ: Sora + Inter Tight + IBM Plex Mono (Ember)、Urbanist (Tactile)、「Inter Tight」/「Schibsted Grotesk」/「Familjen Grotesk」のようなグロテスク + DM Sans (Editorial)、Figtree/「Outfit」 (Noir)。
アイコン: インラインSVG（Lucideスタイル1.5pxストローク）。絵文字をアイコンとして使用しないでください。
画像: 画像生成が利用可能な場合は、ブランドに合った3Dレンダリング/抽象オブジェクトを生成します。それ以外の場合は、CSS/SVG（グロー、ミニUI、ドットグローブ）でビジュアルを構築します。人物/ポートレートにはhttps://images.unsplash.com/...の写真のみを使用します。ヒーローに視覚的なアンカーがないページは、未完成に見えます。
実際のブランドロゴを使用し、プレースホルダーの文字は使用しないでください。 ページに既存の会社、製品またはSaaSを記載する場合（統合チップ、ロゴアーク/ストリップ、「連携」バンド、お客様の声、比較表）で、その横にアイコンを表示する場合は、そのブランドの実際のロゴを使用してください。イニシャルが入った色付きの正方形（Figmaなら「F」、Slackなら「S」）は、安いテンプレートとして読み取られ、信頼を損なう。詳細とソースはshared/logos.mdにあります。実際のロゴを入手できない場合は、アイコンなしで名前をプレーンテキストとして表示します。偽のアイコンはないより悪いです。
モバイル: <768pxではすべてが1カラムに折りたたまれます。ディスプレイタイプはclamp()でスケーリングします。グローは縮小します（大きなブラーはスマートフォンでコストがかかります）。タッチではカーソル効果を無効にします。

5. 引き渡し前のセルフレビュー

可能であれば、ブラウザでページを開き、1440pxと390pxでスクリーンショットを撮ってください。以下のリストに照らして確認してください。これらが「AI生成」と「トップセラー」を分けるものです:

避けるべきこと（「安いテンプレート」の兆候）

ホバー時に動くボタン。厳格なルール、例外なし。 磁石/カーソル追従ボタンなし。:hoverでのボタンまたはそのラベル/アイコンのtranslate/scale/rotateなし。スライドアウトする矢印なし。ホバー時の浮き上がりなし。レイアウトはカーソルの下で静止したままにし、クリックターゲットが逃げないようにする。色、明るさ、グロー、ボーダー、またはシャドウの変更のみでホバーを表示する。（カードは浮き上がってもよい。ボタンおよびボタンとしてスタイル設定されたリンクは浮き上がってはならない。）
すべてに紫から青へのグラデーション。複数の競合するアクセントカラー。
暗い背景に0 4px 6px rgba(0,0,0,.3)のようなドロップシャドウ（影は暗い上では読めない。代わりにグローとボーダーを使用する）。
3つのアイコン＋タイトル＋テキストの同一のカードグリッドによるすべて中央揃え。
ガラスの背後にぼかすものがないガラスモーフィズム。
偽のブランドアイコン: Figma、Slack、GitHubなどの代わりに文字が入った色付きの角丸正方形。
弾む/弾性のあるイージング、1秒以上かかるフェードイン、すべての要素に一度にアニメーション。
本文コピーのグラデーションテキスト。ビューポートあたり2つ以上のグラデーションテキストフレーズ。
ストックの「AI脳」画像。代わりに製品または抽象的なレンダリングを表示する。
暗い上での低コントラストの本文: 本文コピーは、グローに対して読みやすいように、少なくとも約70%の白を維持する。

プレミアムSaaSサイト構築