waitlist-page

ウェイトリストページスキル

ローンチ前のページは、未来のユーザーとの最初の握手です。このスキルでは、ブランドのアイデンティティ、開発中の製品、先行登録リストに参加するための明確な導線を備えた、目的を絞った誠実な入り口を作ります。人為的な希少性も、偽のカウントダウンも、水増し施策もありません。本物の関心を受け止める、モバイルファーストのシンプルな器です。

ワークフロー

事前準備：堅牢化されたテンプレートとブランドの基盤を読み込む

0. ブランドアイデンティティを読み込む — 色のシステム、フォントの組み合わせ、空間のルールについて、DESIGN.mdを読みます。これが基盤となります。ウェイトリストページは、そのページが表現するブランドとの一貫性によって成否が決まります。DESIGN.mdがない場合は、作業に進む前にユーザーに提供を依頼してください。
1. 再利用可能なテンプレートを読み、コピーする — assets/template.htmlを読みます。このテンプレートは、すべての出力のための堅牢なひな形です。これをベースとしてindex.htmlにコピーしてください。HTMLをゼロから書いたり、この構造から逸脱したりしないでください。このテンプレートには、必要なレイアウト、フォーム構造、装飾、フォーカススタイル、アクセシビリティの基盤がすべて組み込まれています。

手順：検証とエスケープを伴うトークンの置換

2. 入力からトークンを割り当てる — テンプレート内の各プレースホルダー（例：{{PRODUCT_NAME}}、{{BG_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{LOGO_MARK}}）について、以下の置換ルールに従います：
   • テキストトークン（{{PRODUCT_NAME}}、{{TAGLINE}}）：HTML のテキストノードまたは属性値に挿入する前に、<、>、&、"、' を HTML エスケープします。
   • HTML トークン（{{LOGO_MARK}}）：テキストのイニシャルを使用する場合は、必ず HTML エスケープします。インライン SVG を使用する場合は、許可リストに基づいて厳密にサニタイズする必要があります。挿入前に、<script> タグ、イベントハンドラー（on*）、<foreignObject>、外部参照（href、xlink:href、url()）、および許可されていない属性・要素を削除します。SVG を安全にサニタイズできない場合は、エスケープ済みのテキストイニシャルにフォールバックします。サニタイズされていない任意の HTML を出力してはいけません。SVG がコンテナー内で適切に拡大縮小されるようにします。
   • 色表現トークン（{{BG_EXPRESSION}}、{{FG_EXPRESSION}}、{{ACCENT_EXPRESSION}}、{{DECO_EXPRESSION}}、{{STRIPE_EXPRESSION}}、{{SUCCESS_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{BTN_LABEL_EXPRESSION}}、{{TICKER_BG_EXPRESSION}}、{{TICKER_FG_EXPRESSION}}、{{DECO_STROKE_EXPRESSION}}、{{LOGO_SHADOW_EXPRESSION}}、{{LOGO_FG_EXPRESSION}}）：明示的な色の文法（#hex、rgb／rgba、hsl／hsla、oklch、またはローカル変数のみを使用する color-mix()）に厳密に従う必要があります。CSS インジェクションを防ぐため、;、{}、<、>、コメント（/*）、@、url(、または外部参照を含む入力は、例外なく拒否します。# で囲んだり、余分な引用符を追加したりしないでください。例：rgba(196, 169, 154, 0.38)、color-mix(in srgb, var(--fg) 38%, transparent)、#FDE8DF。:root の CSS 変数にそのまま挿入します。DESIGN.md があればそこから --success を導出し、なければ許可されたフォールバック #2D6A4F のみを使用します。
   • フォント名トークン（{{DISPLAY_FONT_CSS}}、{{BODY_FONT_CSS}}）：これらは CSS の font-family 値であり、スペースを含む場合は引用符で囲まれています（例：'DM Sans'、Syne）。--font-display と --font-body の宣言にそのまま挿入し、引用符を追加してはいけません。
   • フォント URL トークン（{{DISPLAY_FONT_URL}}、{{BODY_FONT_URL}}）：Google Fonts の URL では、スペースを + にエンコードする必要があります（例：DM+Sans、IBM+Plex+Serif）。挿入前に URL の形式が正しいことを検証します。
3. トークンの割り当てルールを確認する — すべての色トークンは CSS 変数に設定されています：
   • --bg = {{BG_EXPRESSION}}（例：#FDE8DF）
   • --fg = {{FG_EXPRESSION}}（例：#1A1410）
   • --accent = {{ACCENT_EXPRESSION}}（ブランドバッジ）
   • --deco = {{DECO_EXPRESSION}}（装飾の基本色）
   • --deco-stripe = {{STRIPE_EXPRESSION}}（アクセントストライプ）
   • --input-border = {{BORDER_EXPRESSION}}（不透明度を含む完全な CSS 表現）
   • --success = {{SUCCESS_EXPRESSION}} またはフォールバックの #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}}（コントラストを確保するボタンのテキスト色）
   • --ticker-bg = {{TICKER_BG_EXPRESSION}}（アニメーションするティッカーの背景）
   • --ticker-fg = {{TICKER_FG_EXPRESSION}}（アニメーションするティッカーのテキスト）
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}}（SVG の線。通常は不透明度 12〜15% の控えめな色）
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}}（ロゴコンテナーの影。前景色を使った控えめな色合い）
   • --logo-fg = {{LOGO_FG_EXPRESSION}}（ロゴのイニシャルに使用する、コントラストの高いテキスト色）
4. レスポンシブレイアウト — テンプレートにはモバイルファーストの拡大縮小が含まれています：
   • 375px：フォームは 1 列になり、ロゴは 40px に縮小され、装飾は小さくなり、横スクロールは発生しません。
   • 768px：ゆとりのある 2 列レイアウト。
   • 1440px 以上：十分な余白を設けて中央に配置したレイアウト。
   • 375×667 および 390×844 で、すべてのテキストが読みやすく、メール入力欄とボタンが切れずにすべて表示されることを確認します。

検証：出力前に強化された品質ゲートを実行します

5. 品質チェックリストを実行します — references/checklist.mdを読みます。出力前に、すべてのP0ゲートを検証します：
   • CTAは1つだけ（メールフォーム）
   • カウントダウンタイマー、偽のソーシャルプルーフ、絵文字は使用しない
   • 375pxで横スクロールが発生しない
   • メール入力欄にtype="email"とrequiredが設定され、名の入力欄にはrequiredが設定されていない
   • フォームでnovalidateを使用せず、JSでcheckValidity()ガードを使用する
   • 成功メッセージにrole="status"またはaria-live="polite"が設定されている
   • すべての色がDESIGN.mdに記載されているか、許可されたフォールバックであること。独自の16進数カラー値は禁止
   • すべてのユーザー向けテキストがHTMLエスケープされていること。カラーのトークンが厳格な文法に準拠していること。フォントのURLエンコードが行われていること
   • **P0に合格しなければ出力しないでください。**P0ゲートに1つでも不合格がある場合は、ユーザーに確認するかトークンのマッピングを修正して再試行してください。
6. 品質審査に向けて、P1ゲートを確認します（推奨）：
   • 送信ボタンにホバー状態とアクティブ状態がある
   • 明確なフィードバックを伴うフォーム検証がある
   • ティッカーのアニメーションがprefers-reduced-motion: reduceを尊重する
   • すべてのインタラクティブ要素に視認可能なフォーカススタイルがある（input:focusにoutlineが含まれる）
   • Tab／Enterキーに対応している
   • 本文テキストとボタンラベルのコントラスト比がWCAG AAに準拠している（それぞれ4.5:1以上）
   • ロゴにalt属性またはaria-labelがある。ティッカーにaria-hidden="true"がある
   • <html lang="">が設定されている

出力

7. クリーンなHTMLを出力します — CSSをインラインで記述し、グラフィックにはSVGを使用した単一ファイルにします。エージェントが解析せずにカスタマイズできるよう、インタラクティブ要素（見出し、フォーム、ロゴ、ティッカー、グリッドなど）にdata-od-idを付けます。

品質ゲート

このスキルは、コンプライアンスを確保するために、強化されたテンプレートベースのワークフローを適用します。この実行手順に必ず従ってください。テンプレートから逸脱すると、出力は不適格になります。

テンプレートベースの必須実行手順：

• ベースとして assets/template.html を読み込んでください。HTML をゼロから作成しないでください。
• これを index.html にコピーし、検証およびエスケープ済みの値で {{PLACEHOLDER}} トークンだけを置き換えてください。
• 出力前に references/checklist.md の P0 ゲートをすべて実行してください。失敗した項目があれば、修正して再検証してください。

P0 ゲート（必ず合格）：

• CTA は1つのみ：インタラクティブ要素はメールフォームのみです。ナビゲーション、追加ボタン、ソーシャルリンクは設置しないでください。
• ロゴの配置：左上に固定し、DESIGN.md のアクセントカラーに合わせ、モバイルでは縮小します（50px → 40px）。
• 色の一貫性：すべての色を DESIGN.md のパレットから使用してください。ハードコードが許可される例外は --success の #2D6A4F のみです。
• アンチパターンなし：カウントダウンタイマー、偽のソーシャルプルーフ、絵文字アイコン、lorem ipsum は使用しないでください。
• コンテンツの整合性：見出しとコピーは product_name および tagline の入力に直接関連付けてください。埋め草のコピーは使用しないでください。
• モバイル表示：幅375pxで横スクロールが発生しないこと。375×667 および 390×844 で、メール入力欄と送信ボタンが完全に表示され、切れないこと。縦方向のオーバーフローはスクロール可能とし、非表示にしないでください。
• タイポグラフィの規律：ディスプレイ用フォントと本文用フォントのみ（2フォントのルール）。セクション間でサイズに一貫性を持たせてください。
• フォームの構造：フィールドは2つ（名は任意、メールアドレスは必須）とし、checkValidity() ガードを設け、成功メッセージには role="status" を設定してください。
• トークンのエスケープ：ユーザー入力のテキストはすべて HTML エスケープしてください。カラーのトークンは厳格な文法に従い、安全でない文字（;、{}、<、>、/*、@、url(）を含めないでください。フォント名は URL エンコードしてください。{{LOGO_MARK}} はエスケープ済みのテキストのイニシャル、または厳格にサニタイズされたインライン SVG のみとし（スクリプト、イベントハンドラー、foreignObject、外部 href は不可）、使用してください。

P1 ゲート（品質の高い提出物にするため、合格が望ましい）：

• ヒーローセクションが視覚的に際立ち、ファーストビュー内に表示されること。
• メール送信ボタンにホバー状態とアクティブ状態があること。
• フォームの検証で明確なフィードバックが提供されること。
• すべてのモバイルビューポートでページが切り取られずにスクロールでき、CTA がスクロールせずに表示されること。
• prefers-reduced-motion: reduce の場合、ティッカーのアニメーションが停止または削除されること。
• すべてのインタラクティブ要素に視認可能なフォーカススタイルがあること（outline:none だけにしないこと）。
• キーボード操作：Tab キーですべてのフォームフィールドに移動でき、Enter キーで送信できること。
• WCAG AA のコントラスト比：本文テキストは4.5:1以上、ボタンラベルは4.5:1以上であること。
• ロゴに alt または aria-label が設定され、ティッカーに aria-hidden="true" が設定されていること。
• <html lang=""> に正しい言語コードが設定されていること。

装飾は控えめに：

• 下部の領域は、気を散らさずにページを引き立てるものにしてください。不透明度を抑え、ストロークを控えめにし、アニメーションを落ち着かせてください。
• ビューポートの高さの20％を超えて広がるグラデーションは使用しないでください。
• コイル、ストライプ、グリッド、ティッカーには、いずれも DESIGN.md の色のみを使用してください。

出力

references/checklist.md の P0 ゲートをすべて通過した後にのみ出力してください。

アーティファクトをタグで囲んで出力してください：

<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

アーティファクトの上に説明を1行だけ記載し、その下には何も記載しないでください。

出力後： ユーザーが変更を求めた場合は、index.html を直接更新し、次のバージョンを出力する前に P0 チェックリストのゲートを再実行してください。反復時にも検証を省略しないでください。