bittencourtthulio/perfect-landing-page

Perfect Landing Page

1つのHTMLファイル（HTML + CSS + JS インライン、Google Fontsのみ外部）で完全なランディングページを生成します。ブラウザで開いてそのまま公開可能です。

参考モデルは exemplos/osvaldo-software.html（スマホケース店向け管理ソフトウェアの事例）です。複数回のレビューを経て、「プロフェッショナルで、AI感の少ない」仕上がりを目指しました。

使用するタイミング

• 企業のサイト、ランディングページ、トップページの依頼
• 「サンプルと同じ形式で」「この参考サイトのように」という依頼
• すでに作成したサイトを、よりプロフェッショナルに見えるように作り直す依頼

使用しないケース: ログイン/バックエンド機能、カート付きストア、複数ページサイト、SNS用の1枚もの

ステップ1: ブリーフィング（不足分のみ質問）

ブリーフィングファイル（BRIEFING.md、BRIEFING2.md）があればそれを読み込みます。なければ、依頼内容から既に分かっていることを踏まえて、1回だけ、明確でない点だけを質問します：

1. 企業名と販売内容（セグメント/ニッチ）
2. 主な差別化ポイント: 訪問者に覚えてほしい唯一のこと。ページ全体の構成を決めます。
3. ターゲット顧客: 誰が買うのか、その日常はどのようなものか。
4. 機能またはサービス（3～6個）。ユーザーがわからない場合は、ニッチに基づいて提案し、提案であることを明記します。
5. 連絡先: 電話番号、WhatsApp、メール。ない場合は (00) 0000-0000 のような明らかなプレースホルダーを使用します。
6. 色または視覚的な雰囲気（任意）。ない場合はニッチから推測します。

ユーザーが十分な情報をすでに提供している場合は、何も質問せずに作成し、調整は後回しにします。

ユーザーが参考サイトを送ってきた場合、作成前に分析します: フォント、ヒーロー、密度、角とボーダー、セクションのリズム、フッター。コピーではなく、原則を抽出します。参考サイトにあっても、企業が持っていないデータ（お客様の声、顧客ロゴ、料金プラン）に依存するブロックは含めません。納品時にその旨を伝え、各ブロックに必要なデータをリストアップします。

ステップ1b: 画像（自動、質問しない）

作成前に、プロジェクトルートから以下を実行します：

python3 -I <スキルフォルダ>/scripts/gerar_imagens.py --detectar

（<スキルフォルダ> はスキルがインストールされているフォルダ、例: ~/.claude/skills/perfect-landing-page; スクリプトは sim または nao のみ出力し、キーは出力しません）

• sim: プロジェクトに環境ファイル内のOpenRouterキーがあります。画像ありでサイトを生成します。質問も確認も不要です（ステップ2cへ）。
• nao: 画像なしでサイトを生成します。質問も「キーがない」という通知も不要です。ページは写真なしバージョン（製品画面とカラーブロック）で、それで完成です。納品時のみ、1行で「画像なしバージョンです」と伝えます。
• 環境ファイルの内容を読み取ったり、出力したり、コメントしたりしないでください。スクリプトのみがアクセスします。

ステップ2: ビジュアルディレクション

ページがプロフェッショナルに見える秘訣は、抑制です。コーディング前に以下を定義します：

• 短いパレット: ブランドのダークカラー、アクセントカラー、明るいセクション用のオフホワイト、テキスト用の2つのグレー（暗い背景用と明るい背景用）。ブランドが黒の場合は、本当の黒（#000）を使用し、ほぼ黒は使いません。すべて :root のCSS変数として定義します。アイデンティティを変更するには、変数のみを変更する必要があります。
• アクセントは数か所にのみ使用: メインボタン、H1の最終行、アクティブなアイテム、製品画面の後ろのカラーブロック。輝き、放射状グラデーション、アクセントカラーの帯全体は使用禁止。
• 明るいアクセント上のテキスト（例: 黄色）は常にブランドのダークカラーを使用し、白は使用禁止。明るい背景では、アクセントをテキストカラーとして使用しないでください。
• セクションは交互に、暗い背景と明るい背景を、端から端まで使用します。ヒーロー、モジュール、フッターは暗く、差別化、お問い合わせは明るくします。
• タイポグラフィ: サンセリフ1ファミリのみ、ウェイトとサイズで階層を作ります。生成サイトの標準になりつつあるフォント（Space Grotesk、Inter単独、セリフ+サンセリフのペア）は避けてください。選択前に、実際のH1をGoogle Fontsの4～6候補でレンダリングし、プリントで比較します。モデルでは: Hanken Grotesk、ウェイト400～800。
• 抑えられたスケール: H1は最大～52px（ウェイト800、行間1.05、ネガティブトラッキング）、H2は最大～40px、本文は16～18px。巨大なタイトルと過剰な余白はテンプレートの特徴です。
• 階層による角: ボタンとフィールドは8px、ウィンドウは12px、ボックスは16px、カラーブロックのみ28px。ピル形状や全てに同じ半径は禁止。
• 影の代わりに細いボーダー。影は製品ウィンドウの下のみ。
• ボタンは長方形、色付きの輝きは禁止、テキストに矢印は禁止。
• ページ内に絵文字は禁止。 アイコン、アバター、連絡先、WhatsAppボタン、確認メッセージにも使用禁止。

AIが作ったサイトの特徴（避けるべきもの）

• ヒーローに点滅ドット付きのバッジやピル
• 各タイトルの上に大文字のラベル
• 機能を紹介するための、同じカードの横並びグリッド
• 傾いたカード、角のラジアルグロー、色付きの影のボタン
• 動くテキストの帯（マーキー）
• 「アンカーデータ」のためだけに作られた大きな数字（例: 数字の代わりに「中国」と書く）
• すべてのセクションでフェードイン・スライドアップアニメーション
• 絵文字と標準ライブラリのアイコン
• 中点でつながれたテキスト（「A · B · C」）とボタン末尾の矢印

ステップ2b: 手描きアイコン（必須）

• アイコンは独自のSVGとして、ビジネスのコンセプトごとに1つ描き、すべてを<body>の先頭にある非表示の<svg>内の<symbol>にまとめます。必要な場所で <svg><use href="#i-nome"/></svg> を使用します。
• すべてのアイコンで同じビジュアルファミリー: viewBox 32x32（連絡先は24x24）、ストローク2px、ラウンドエンド、色は currentColor、アクセントカラーの塗りつぶしを var(--accent) で1箇所追加。アイコンがアクセントカラー上にある場合は、--accent を白に変更します。
• アイコンにニッチに合ったモチーフを与えます（青果店なら葉っぱ、ケース屋ならスマホとケース）。
• わかりきったアイコン（雷、握手、鍵、ロケット）は避けてください。ビジネスのメタファーを選びましょう。

ステップ2c: 生成画像（ステップ1bが sim の場合のみ）

3枚の画像を生成します。すべてをカバーします（コストはわずかです）: ヒーロー（背景）、差別化（差別化カードを支える）、お問い合わせ（タイトルの横）。

1. プロジェクトルートに imagens.json を作成し、共通の estilo とポルトガル語のプロンプトを記述します。スタイルは以下を固定します: リアルなエディトリアルフォトグラフィ、シネマティックライティング、ブランドのパレット（ダークカラーが支配的、アクセントカラーが光）、テキスト、文字、ロゴ、実際のブランド、ウォーターマークは一切なし。
2. 各プロンプトはソフトウェアではなく、ニッチの顧客と日常を説明します: 顧客の作業現場（ケース屋なら、ケースの壁のあるカウンター）、差別化ポイントが解決するタスクを行う手、接客。コンピューター画面のインターフェースは禁止（読めなくなります）。
   • hero（16:9、モデル pro）: ワイドシーン、テキスト用に左側が暗く空いている。
   • diferencial（4:5、モデル flash）: 差別化ポイントが解決するタスクの詳細、真上から。
   • contato（3:2、モデル flash）: 接客の人間味あふれる瞬間、パッケージや看板に文字はなし（「パッケージは無地、看板や表示は一切なし」）。
3. 実行: python3 -I <スキルフォルダ>/scripts/gerar_imagens.py imagens.json（1枚だけ再生成する場合は、最後に名前を渡します）。画像は imagens/*.jpg に出力されます。比率 16:10 は存在しません。3:2 を使用してください。
4. 使用前に各画像を確認してください。テキスト、判読可能なロゴ、変形した手や顔、シーンがニッチに関係ない場合は、再生成します（失敗したものだけ）。画像1枚につき最大2回の再生成。
5. HTMLでは、画像は imagens/ に配置され、相対パスで参照されます（フォルダごと公開されます）。exemplos/osvaldo-software-com-imagens.html を参照してください:
   • Hero: セクションの background に写真、その上に2層の黒グラデーション: 水平（左端≈94%から右端≈22%）と軽い垂直。テキストは常に暗い部分の上に配置します。プリントでH1とサブタイトルが読めるかテストしてください。
   • Diferencial: 写真はカラーブロック内に、::before で filter:brightness(2.4) grayscale(.35) と mix-blend-mode:multiply をアクセントカラーに適用: ブランドパレットのデュオトーンになります。その上のキャプションは明るくなります。
   • Contato: タイトルと2カラムの <img>、aspect-ratio:3/2、height:auto（これがないと height 属性で画像が伸びます）、loading="lazy"、width/height、説明的な alt。モバイルではテキストの下に配置されます。
   • 写真の alt には、画像はAIで作成されたイラストであることを記載します。
6. フッターの注記は、「画面と写真はAIで作成されたイラストです」に変更します。生成された写真は、実際の店舗、スタッフ、顧客の写真として提示してはいけません。

キーなし（nao）: このステップ全体をスキップします。ヒーローはフラットな黒、差別化のカラーブロックはアクセントカラー、お問い合わせセクションは1カラムになります（exemplos/osvaldo-software.html のように）。

ステップ2d: マウス追従エフェクト（標準、常時）

すべてのサイトに、マウスに反応するエフェクト（特にヒーロー）が含まれます。exemplos/osvaldo-software-com-efeitos.html からCSSブロックとスクリプトをコピーし、色と強度のみを調整します。Canvas 2Dと requestAnimationFrame を使用し、ライブラリは使用禁止（Tween.jsやGSAPは使用しないでください）。

ヒーロー（最も動きのある場所）:

• レイヤー: 写真（またはフラットな背景、画像なし）は専用の div.hero-bg に inset:-36px で配置。その上に div.hero-light と canvas.hero-fx、すべて aria-hidden かつ pointer-events:none。コンテンツは z-index:3。
• ランタン: アクセントカラーの radial-gradient、mix-blend-mode:screen、--mx/--my でカーソルを追跡し、マウスが離れると消えます。
• キャンバス上の光の粉: 最大120個の小さな点（アクセントカラーと白）がゆっくり上昇して点滅。カーソルに近づくと（半径～150px）逃げ、アクセントカラーの細い線でカーソルと結びつきます。控えめなリングがカーソルをマークします。devicePixelRatio（最大2）を使用し、resize で測定を再実行します。
• 奥行き: 背景はマウスと逆方向に動きます（最大～22px）。製品ウィンドウは3Dで傾きます（最大～6°）、光の反射付き（::after で soft-light）。フローティングカードとカラーブロックは、translate プロパティ（transform ではない。エントリーアニメーションと競合しないため）で異なる速度で動きます。

ページの残りの部分:

• .tilt をハイライト要素（差別化カード、画面パネル）に: 最大～7°傾き（大きなパネルは3.5°）、カーソルの下に光、マウスが離れると中央に戻ります。
• マグネットボタン（.btn-y、.btn-k、.fab）: カーソルの方向に～25%引き寄せられ、translate に transition が付きます。

ルール:

• すべての動きは補間（lerp）でスムーズに、ジャンプは禁止。
• ヒーローのループは、ヒーローが画面外に出ると停止します（IntersectionObserver）。
• prefers-reduced-motion: エフェクトなし。
• マウスなし（pointer: fine が偽、スマホ・タブレット）: 粉の上昇のみ、傾きやマグネットボタンはなし。
• 画面ラインのエントリーには @keyframes（animation）を使用します。transition は使用しません。アニメーションループが動作しているため、より堅牢です。
• エフェクトはレイアウトやテキストを変更しません。ユーザーがエフェクトなしのバージョンを希望する場合は、スクリプトブロックとヒーローの3つのレイヤーを削除するだけです。

ステップ3: ページ構成（この順序で）

すべて左揃え。各セクションは1つの役割のみを果たします。2つのセクションが同じことを言っている場合は、統合します。

1. 固定ヘッダー: ダークカラー。ロゴ（ブランド名＋企業名）、右にアンカーリンクメニュー、テキストのWhatsAppリンク、CTAボタン。モバイルではロゴとボタンのみ。
2. 2カラムヒーロー: 左: ニッチ＋差別化ポイントを3行の短いH1にまとめ、最終行をアクセントカラーに。2文のサブタイトル、2つのボタン（塗りつぶしとアウトライン）、ボタンの下にクリック後のアクションを説明する小さなサポートテキスト。タイトルの上にラベルはなし。右: 差別化ポイントを証明するシステムウィンドウ。サイドメニュー、検索バー、リスト、アクセントカラーのブロック（画面端まで出血）、選択アイテムの詳細を示すフローティングカード。
3. 静的ストリップ: 差別化ポイントに関する4つの短いフレーズを、それぞれアイコンとともに、細い線で区切って1行に。
4. 差別化（明るいセクション）: 左: アクセントブロック上の製品画面の拡大切り抜き、ヒーローとは反対側に出血。右: 肯定的なタイトル、1段落、ラインでつながれた3つのステップ（「しくみ」はここ）、ボタン。
5. タブ付きモジュール（暗いセクション）: 左にタイトルと段落、その後に番号付きリスト（01、02...）、各アイコン、名前、サポートテキスト。アクティブなアイテムはフレーズを開き、アクセントバーを取得。右: 各モジュールの手描き画面プレビューをシンプルなHTML/CSSで表示。順序に意味がある場合のみ番号を付けます（モデルでは、商品の流れ: サプライヤーからカウンターへ）。ホバー、クリック、キーボードで切り替え。role="tablist"、role="tab"、role="tabpanel"、aria-selected、tabindex はアクティブなタブのみ。モバイルではパネルはリストの下に。4～6モジュール。
6. お問い合わせ（明るいセクション）: 質問形式のタイトル、その下に差別化ポイントのハイライトフレーズ、2つのボックスを横並び: 1つはダークカラーでフォーム（名前、会社、WhatsApp）、もう1つはアクセントカラーで直接連絡先。
7. カラムフッター: ブランドと1フレーズ、ナビゲーション、モジュール、連絡先。下部に著作権と、画面はイラストであることの注記。実際に存在するリンクのみ配置: 実際のページがないソーシャルメディア、ブログ、ポリシーへのリンクは禁止。
8. フローティングWhatsAppボタン: 小さく、アクセントカラー。

製品画面

• 実際の製品のように描画: サイドメニュー、検索バー、カラムのあるテーブル、アクションボタン。暗い背景に明るい画面でコントラスト。
• すべての場所（ヒーロー、差別化、タブ）で同じインターフェースを維持。
• すべての画面は「サンプルデータのイラスト」とラベル付け。
• 画面はテキストが約束できないことを約束してはいけません: 顧客やサプライヤーのカウント、「確認済み」バッジ、期限、輸入価格、星評価など、テキストが具体的に言及していないものは禁止。

ステップ4: コード作成

exemplos/osvaldo-software.html の構造に従います。以下を維持: セクション順序、CSS変数、アクセシビリティ属性（aria-*、role、tabindex）、レスポンシブデザイン。

• 単一ファイル。<style> は <head> 内。<script> は </body> の直前。
• すべてのテキストは、ステップ1で収集した実際の企業情報に基づく。プレースホルダーは禁止。
• 画像パスは imagens/ 内の実際のファイルを指す。
• すべてのインタラクションが機能することをテスト: タブ、アンカーリンク、フォーム送信（action="#" で十分）、モバイルメニュー。
• 納品は、人間が読めるコメント付きの完全なHTML。[...] や「...」などの省略は禁止。

ステップ5: 納品（最後の仕上げ）

コードを提供した後、以下を確認します:

• ページはプロフェッショナルで、AIが作った感がない。
• 画像が読み込まれ、正しい。
• エフェクトがマウスとキーボードで動作する。
• モバイルで壊れていない。
• 必要に応じて微調整を提供。

納品メッセージの形式:

「[企業名] のランディングページを準備しました。差別化ポイントは [差別化] で、[機能数] のモジュールがあります。[画像あり/画像なし] バージョンです。調整が必要な箇所があればお知らせください。」

画像なしの場合は、1行追加:

「このバージョンは画像なしです。OpenRouterキーを設定すると、自動的に3枚の写真が追加されます。」

なぜこれが機能するのか

厳格なビジュアルルール、ステップバイステップのブリーフィング、自動画像生成、手描きアイコン、マウス追従エフェクトを組み合わせることで、このスキルはプロフェッショナルでありながらテンプレート感のないランディングページを生成します。開発者は、数回の質問と自動検出だけで、すぐに公開できる高品質のページを手に入れられます。