プレミアムランディングページビルダー
あなたは、シニアデザイナーの評価を通過するランディングページを構築します。最低ラインは「動作して見た目が良い」ではありません。最低ラインは、本物のプロダクトチームが作ったページと見分けがつかないことです。
このファイルがメソッドです。他のすべてのルールを無効にするルール、プロセスと成果物の11のゲートが含まれています。各ゲートの技術的な詳細は references/ にあります。順番に従ってください。
このスキルの使い方
ゲートが要求するものだけを読み込んでください。 以下の各ゲートの最後には、その時点の参照ファイルを指す 読んでください という行があります。すべての参照を一度に開かないでください。合計で約4000行あり、各ステップで重要なのは1～2ファイルに収まっています。
番号はすべてのファイルで同じです。 テキストが「10.4を参照」や「セクション12.7」と言っている場合、このファイルの最後にあるマップで、そのセクションを含む参照を探してください。セクション0、1、3、19はここにあります。それ以外は references/ にあります。
スクリプトが重いチェックを行います。 書き直す代わりに実行してください。
| スクリプト | 目的 | 必要なもの |
|---|---|---|
scripts/contraste.py | トークンを適用する前にコントラストペアを測定（ゲート4） | Python 3.8+ |
scripts/checar-texto.py | アンチスロップ、ボタン、テキストのリズムをレビュー（ゲート2と10） | Python 3.8+ |
scripts/auditar-responsivo.mjs | 320pxから1920pxまでの幅、200%ズーム、モーション軽減で監査（ゲート9） | Node 18+ と Playwright |
パスはこのスキルのフォルダからの相対パスです。環境でスクリプトが実行できない場合（例：Playwright用のブラウザがない場合）、どのチェックが未完了かをユーザーに伝え、ユーザーが自分のマシンで実行するための正確なコマンドを提供してください。実行されていないチェックを宣言してはいけません。
コード例はプレーンなHTML、CSS、JavaScriptです。 React、Next.js、Astro、Tailwind、Webflow、または他のビルダーの場合は、トークン名、状態、ルールを維持しながら翻訳してください。
0. ピクセルを置く前に
破られた場合、他のすべてのルールを無効にする4つのルールです。
- ブリーフィングが完了するまではピクセルを置くな（ゲート1）。手戻りの大部分は、何をデザインしているのかを知る前に描き始めることから生じます。
- 視覚的な印象による値は許されない。 タイポグラフィ、色、スペース、持続時間のすべての測定値は、トークン、測定、またはテーブルから取得されます。「見た目が良い」からは決して取得しません。
- 依頼されたことだけを実行し、それ以上は行わない。 より良いアイデアがある場合は、依頼を実装し、アイデアを別途提供してください。自分の判断で追加したエフェクトは、確実な手戻りです。
- 他のプロジェクトのアイデンティティを流用してはいけない。 各ページは、そのプロジェクトのブランドから生まれます。例からパレット、タイポグラフィ、ビジュアル署名をコピーすると、セクション1で禁止されているまさにありきたりなページが生成されます。
0.1 メソッドとアイデンティティの違い
これは、このドキュメントで最も重要な区別です。メソッドは変わりません。アイデンティティはプロジェクトごとに変わります。
| 不変：常に使用するもの | 可変：プロジェクトから収集するもの |
|---|---|
| 11のゲートのプロセス | パレットと各色の役割 |
| トークンの構造、つまり名前 | トークンの値 |
clamp() と rem を使用した流動的スケール | フォントファミリーとスケールの比率 |
8pxベースのグルーピングルール、minmax(0,1fr) | コンテナの幅と密度 |
| 2つのトークンを上限とするレイヤードシャドウ | シャドウの色相と強度 |
| 動きの語彙：1つのカーブ、2つのレンジ | 動きの強度とホバーのシグネチャ |
| 独自のビジュアルマテリアル、ストックは不可 | どのマテリアル技法がブランドに合うか |
| WCAG 2.2 AA アクセシビリティとセクション12、16のQA | なし。これは交渉不可 |
| セクション1のアンチスロップルール | なし。これは交渉不可 |
このドキュメント内のすべての具体的な値は、記入例であり、コピーすべき標準ではありません。 例は、すでに検証済みの実際のプロジェクトからのもので、期待される厳格さのレベルを示すためのものであり、再現すべき外観を示すものではありません。ファッションブランド、銀行、ゲームスタジオは、まったく異なる値で同じフィールドを埋め、同じ品質レベルに達します。
このスキルで作られた2つのページが姉妹のように見える場合、スキルは誤って使用されています。
1. ルートルール：AIスロップゼロ
「AIスロップ」とは、基準なく生成されたコンテンツを示す一連の特徴のことです。技術的に正しくても、これによりページは拒否される可能性があります。このセクションは、他の美的選択よりも優先されます。
1.1 ビジュアルスロップ：禁止
| 禁止 | 理由 | 代わりにすること |
|---|---|---|
| 紫または藍色から青色へのグラデーション | AIテンプレートのビジュアルシグネチャ | ブランドから派生したパレット、色ごとに定義された役割 |
| いたるところのグラスモーフィズム | 機能なしで適用されたエフェクト | フローティングナビゲーションとオーバーレイのみブラー |
| ロボット、脳、回路、ホログラム、チップのアイコン | 「AI」の決まり文句 | ドメインの実際のオブジェクトのアイコン（カレンダー、メッセージ、グラフ） |
| ストックフォト | ありきたりで認識可能 | プロシージャルテクスチャ、製品UI、テクニカルイラスト |
| AI生成画像 | 検出可能でブランドと矛盾 | 上記と同じ代替案 |
| インターフェースアイコンとしての絵文字 | 幼稚で構成を壊す | アイコンシステム内の線画SVG |
| グレーの境界線と3×2グリッドの同一の白いカード | テンプレートの最も一般的な型 | 異なるフットプリント、カード内のビジュアルコンテンツ |
| すべてのセクションで繰り返される緑色のチェックリスト | 構成の怠惰 | リスト、比較、サムネイル、データを変える |
| 横に何もない大きな数字01 02 03 | 情報を提供しない飾り | そのステップで何が起こるかのサムネイル付き数字 |
| カラフルな背景のブロブ | 機能のない飾り | ブランドに関連するテクスチャ、または何もなし |
| 大きくてグレーの単一シャドウ | ぼやけのように見え、奥行きがない | レイヤードシャドウ（4.5参照） |
| 暗い星雲のトップに垂直な光のビームと青紫のフレア | テクニカルツールページの全盛期のシグネチャ。コピーすることは、どの年とどのニッチからコピーしたかを宣言すること | ブランドから派生した雰囲気：プロジェクトのテクスチャ、アングル、色 |
| 白からラベンダーとピンクへのグラデーションのタイトル | 仕上げではなくなり、テンプレートマーカーになった | グラデーションは、ストップがプロジェクトのパレットから来ている場合のみ、そしてページで1回だけ使用する |
| 「A、B、C、Dを置き換える」タイプの見出し | 実際に4つのカテゴリを置き換え、それを証明する公開データがある製品でのみ機能する。それ以外の場合はハッタリと読まれる | 10.4の見出しパターンを参照 |
1.2 テキストスロップ：禁止
禁止句読点、例外なし：
| 文字 | 名前 | 代わりに使うもの |
|---|---|---|
— | ダッシュ | ピリオド、コンマ、コロン |
– | 二分ダッシュ | ピリオド、コンマ、または範囲の「から」 |
· | 中点 | コンマ、または2つの要素に分割 |
… 装飾的な省略記号として | ピリオド |
ダッシュは、機械生成テキストの一番の特徴です。文字をスペース付きのハイフンに置き換えるのではなく、文を書き直してください。同じ効果があります。
コードブロックと仕様では、区切り文字として中点を使用しないでください。ラベル付きの行に分割してください。
禁止されているフレーズパターン：
- 「Xではありません。Yでもありません。Zです。」
- 「[状況]を想像してみてください」
- 「今日の世界では」、「デジタル時代において」、「ますます」
- 「変革する」、「革命を起こす」、「高める」、「解除する」、「強化する」
- 「飛び込む」、「探検してみましょう」、「方法を見つける」
- すべてにおいて3つ組：3つの形容詞、3つの箇条書き、すべてのセクションで3列
- インスティテューショナルテキストでの感嘆符
- 積み重ねられたヘッジ：「潜在的に改善するのに役立つかもしれません」
ポジティブルール：
- 短く具体的な文で、読者の言語で、製品の言語ではない。
- 抽象名詞の代わりに動詞：「5分で応答」ではなく「5分以内に応答」
- 出典のある数字のみ。実際のデータがない場合は、何が測定されるかを説明する。
- 完全で正しいアクセント。アクセント文字をASCIIに決して置き換えない。
1.3 構造的スロップ：禁止
最も見つけにくいエラー：すべてのセクションが同じ型。
ラベル → タイトル → 段落 → 3つの同一のカード
ラベル → タイトル → 段落 → 3つの同一のカード
ラベル → タイトル → 段落 → 3つの同一のカード
これは、優れたトークンと優れたアニメーションがあっても、テンプレートです。
バリエーションルール： 同じセクション形式が連続して繰り返されてはいけません。ページ全体で少なくとも5つの形式を交互に使用してください。
- インターフェースのサムネイル付きカードグリッド
- 同期されたステージが横にある垂直リスト
- 製品キャプチャ付きタブ
- 1つの支配的なブロックを持つベントーグリッド構成
- 2列の比較
- タイムラインまたはステップバイステップ
- テクニカルイラスト付きダークブロック
- テーブルまたはデータパネル
1.4 プロセススロップ：禁止
- 参照を測定せずに、記憶からタイポグラフィとコンポーネントを実装する。
- ブラウザで開かず、チェックを実行せずに納品する。
- コンソールエラーがある状態で納品する。
- コントラストを再計算せずに、以前のプロジェクトの値をコピーする。
1.5 スロップテスト
納品前に答えてください。1つでも「はい」があれば不合格です。
- 前のセクションと同じ型を使用しているセクションはありますか？
- 可視テキストにダッシュ、二分ダッシュ、または中点はありますか？
- 画像はストックまたはAI生成ジェネレーターから来ましたか？
- 「テクノロジー」を表すアイコンはありますか（物を表す代わりに）？
- ロゴとパレットを交換した場合、そのページはどの会社にも使えますか？
- 出典のない数字はありますか？
質問5が最も厳しいです。はいの場合、問題はコンセプトであり、仕上げではありません。
3. 11のゲートプロセス
どのゲートもスキップできません。各ゲートには客観的な出口基準があります。
期間の調整、参考スタジオが公開しているものに基づく：集中リデザインで4～6週間；カスタム製品ページで6～8週間；企業またはソフトウェアサイトで8～12週間。新しいブランドと完全なページの文書化されたケースでは、7週間と約600時間かかり、4週間をブランドとデザイン、3週間をアニメーションと構築に費やしました。期限の2日前に終了し、その2日間をレイアウトではなくテキストの調整に使用しました。
スコープはページ数で測れません。 再利用可能な型が少ない30ページのサイトよりも、各ページが独自の構造、カスタムナラティブ、複雑なインタラクションを持つ5ページの体験の方が複雑です。URLの数ではなく、異なる構成の数で見積もりを導いてください。
あらゆる規模に当てはまる4つのプロセス習慣：
- 汎用的なプレースホルダーテキストは高くつく。 短い段落用に構築されたレイアウトは、実際のテキストが機能、対象者、メリットを説明する必要があるときに機能しなくなります。手戻りは最もコストのかかるフェーズで発生します。そのためゲート2が存在し、そのためモックアップは実際のテキストを使用します。
- ビジュアルフェーズはページ全体から始まらない。 将来のシステムの最も重要な要素を含む1つまたは2つのキー構成から始め、すべてを描かずにタイポグラフィ、色、画像、構成、コンポーネント、動きを解決します。
- コードはデザインと一緒に、後ではない。 結果が最も優れている場合、バトンパスはありません。ビジュアルシステムを作成する同じグループがインタラクティブ体験を提供し、パフォーマンスはデザインの一部として扱われます。多くの詳細は、静的なベクターでは現れないニュアンスを持ち、実装でのみ生き生きとします。デザインツールでの日々は優れたアイデアを生み出しますが、アイデアは納品されません。
- 実際のコンテンツでテストする。 長い見出し、翻訳されたテキスト、画像の奇妙なアスペクト比、欠落したメディアは、磨かれたデザインファイルでは見えない問題を明らかにします。
ゲート1. ブリーフィングとアイデンティティ
このゲートを閉じるまで何も描かないでください。 ユーザーに質問してください。回答がない各項目について、2つまたは3つのオプションを提案し、確認を求めてください。黙って仮定したり、例からアイデンティティを継承したりしないでください。
1.1 ビジネスと目標
- 誰がページを読み、どのような決定を下す必要がありますか？
- ページが生成すべき単一のアクションは何ですか？
- 業界（医療、金融、教育、法律、食品）に法的制約はありますか？
- 結果に関する実際のデータはありますか、それとも数字の引用は禁止されていますか？
1.2 ビジュアルアイデンティティ：収集または提案
| フィールド | ユーザーへの質問 | 回答がない場合 |
|---|---|---|
| ブランドカラー | 色は何ですか（16進数）？メインはどれですか？ | セクション4.2から2～3の方向性を提案し、選択を依頼する |
| アクションカラー | ボタンはどの色を使うべきですか？ | ブランドカラーから派生させ、白とのコントラストが4,5:1になるまで暗くする |
| タイポグラフィ | ブランドはどのフォントを使用していますか？ウェブライセンスはありますか？ | セクション4.3から2つの組み合わせを提案し、選択を依頼する |
| ビジュアルトーン | ブランドは、落ち着いた、温かみのある、技術的な、エレガントな、またはエネルギッシュなものですか？ | 質問する。これにより、テクスチャ、半径、密度、動きが決まる |
| ロゴ | SVGファイル、または透明な背景のPNGはありますか？ | 依頼する。ない場合は、選択したタイポグラフィでテキスト名を使用する |
| ブランドマニュアル | マニュアル、ブランドブック、またはアイデンティティガイドはありますか？送っていただけますか？ | 依頼する。最も豊富な情報源です。ない場合は、ロゴと色で作業する |
| ブランドグラフィック | ブランドには、グラフィックパターン、テクスチャ、繰り返し形状、グリッド、または独自のビジュアルシグネチャがありますか？ファイルを送っていただけますか？ | 画像またはベクターを依頼する。これらはセクション7のテクスチャの基礎となる |
| 既存の作品 | プレゼンテーション、投稿、パッケージ、カタログ、または古いサイトはありますか？ | 3～5点の作品を依頼する。これらはブランドが適用された状態を示し、マニュアルが常に示すとは限らない |
| 製品マテリアル | スクリーンショット、独自の写真、または図はありますか？ | セクション7で何を作成するかを定義する |
| 参考資料 | 参考ページはありますか？ | ある場合は、ゲート3で測定する。ない場合は、方向性を提案する |
| 避けるべきこと | ブランドによって禁止されている色、スタイル、または要素はありますか？ | 質問する。今知る方が安い |
| 動きのレベル | 控えめ、バランス、または表現力豊か？ | デフォルト：バランス |
| トーンの声 | フォーマルか直接的か？「あなた」で取り扱うか、それとも敬語か？ | 質問する |
1.3 アイデンティティシート
回答を記録します。このシートは、ゲート4のトークンのソースです。
プロジェクト
ページの目的：
単一アクション：
対象者：
アイデンティティ
メインカラー： #
アクションカラー： # 白とのコントラスト: ___:1
セカンダリアクセント：
…
[翻訳のため省略]