ランディングページデザイナー（提案ラウンド）

ランディングページデザイナー（提案ラウンド） は何をしますか？

ランディングページをラウンド方式で提案する方法、各決定の根拠、そして誰かがページを目にする前に通過しなければならないチェック項目。このスキルの上流：website-concept-architect（サイトの目的）。下流：ui-ux-architect（アプリへの移植）。

0. ジョブとその範囲外

• 描画、リファクタリングは禁止。 出力は <proposals-dir>/<date>/<product>/ 以下への提案です。アプリの出荷コードには触れないでください。オーナーの指示がない限り、コミットやプッシュは行わないでください。
• ページは、検証バー（セクション8）に合格し、その主張がトレースされている（セクション2）場合にのみ完了とみなされます。
• ラウンド方式で作業します。各ラウンドは新しい方向性を生み出し、古い方向性はアイデアライブラリとして保持し、推奨事項とそれが他の案に勝る理由で締めくくります。

1. 基準（「印象的」の意味）

すべてのスクリーンショットを以下のリストに対して評価します。

1. 5秒ルール。 見知らぬ人が、最初のビューポートだけを見て、その製品が何をするのか、誰のためのものか、何が他と違うのかを言えること。
2. 一つのデバイス。 そのページは、一つの具体的で製品固有の事柄、色ではなく、そのデバイスで記憶される。良いデバイスは文字通りのものです：ロゴ内のカーソルを実際のカーソルとして使用する；実際に動く数字；エージェントからサーバーへの交換を、それが実際に行う2つの呼び出しとして示す；コピーが示す瞬間にプッシュが電話に届く。
3. 具体的で、抽象的でない。 すべての主張は、製品またはそのコード内の何かを指し示す。
4. 実際のピクセルがイラストに勝る。 実行中の製品の切り抜きスクリーンショットは、その絵を描くことより優れている。
5. トレードオフを述べる。 コピーは、それが何をするのか、誰のためのものか、そして引き換えに受け入れる一つのことを明記する（セルフホステッド：あなたのアップデートとバックアップ；単一共有サービス：もう一つの依存関係；配送のみ：ポリシーはアプリ内に留まる）。
6. 禁止事項： ストックフォト、紫のグラデーション、各アイコンが入った灰色のカードのベントウグリッド、「10,000チームに信頼されています」、架空の推薦文、偽のメトリクス。

2. 最初にリサーチ：ソース付きの事実

描画の前に、製品ごとに事実テーブルを構築します：主張、値、ソースファイル。マーケティングではなく、コードを読みます。

• 確認すべき場所： README.md、AGENTS.md/CLAUDE.md、設計ドキュメントとADR、CHANGELOG.md、バリデーターとエラーコード、ツール/エンドポイント登録、ワイヤー/プロトマッピング、ワーカー/リトライ定数、ブランドマークコンポーネント、テーマトークンファイル、既存のランディングビュー。
• 見つける価値のある事実： 正確なツール名と破壊的なものの数；エラーロードとメッセージ；定数（リトライ試行回数、バックオフベースとキャップ、ポーリング間隔、信頼制限）；リクエストフィールド（ドキュメントではなく、ワイヤマッピングで数える）；ルート；実際のクイックスタートコマンド。
• コード内のカウントと名前を検証する。 ドキュメントはズレる：文書化された「6つのフィールド」がコードでは8つになることがある；READMEが存在しないディレクトリを指すことがある；ヒーロー例がサーバーが拒否するユニットを使用することがある。
• フラグを立て、黙って修正しない。 矛盾点（キャプチャ内の古いブランディング、同意しないキャプチャ、ドキュメントとコードの違い）は NOTES.md に、そして関連する場合はページ上に記載します。
• ページ上の説明データにラベルを付ける（サンプルエントリ、ID、時刻、通知テキスト）。読み手はメモなしで実際のものとサンプルを区別できなければなりません。

3. ブランドとファミリー

• 各製品は独自のマークとアクセントを保持します。 実際のマークパスをそのコンポーネントからコピーし、実際のトークン（背景、テキスト、ミュート、アクセント、アクセントテキスト、セマンティックカラー）をトークンファイルからコピーします（両テーマ）。
• フォント：製品独自のもののみ、woff2として fonts/ にコピーします。タイプボイスを選択する前に調査します：

  python -c "from fontTools.ttLib import TTFont; t=TTFont('inter-latin.woff2'); print([(a.axisTag,a.minValue,a.maxValue) for a in t['fvar'].axes])"
  

  全ウェイトレンジで宣言された可変フォントは、新しいフォントなしで、ある製品にはヘアライン数字を、別の製品には動的なヘビーウェイトを与えることができます。
• 組織のブランドキットはファミリーであり、テンプレートではありません。 小さな共有の詳細（キッカーマーク、currentColor のフッタークレジット）に使用し、製品のアイデンティティとしては決して使用しません。
• ファミリーレイヤー： スペーシング、タイプ、モーショントークン、ヘッダー、ボタン、キッカー、セクションレール、フィルムコントロール、コピーボタン、フッター、モーションキットを含む1つの共有ファイル。製品は色、タイプボイス、構成をオーバーライドします。複数のページは、異なる個性を持つ兄弟として読めるべきです。

4. 製品ごとのアートディレクション

レイアウトの前に個性を決定します。それをタイプ、グリッド、色の重み、ペースに反映させます。実際に機能した例：

個性	タイプボイス	構成とペース
落ち着いた、エディトリアル（金融）	ライトウェイトの巨大なヒーローフィギュアと表形式数字；元帳用モノ	たっぷりの余白、非対称グリッド、夜の帯、1つのフルブリードの実際のキャプチャ
賑やかな、動的な（フィットネス）	ブラックウェイト、タイトなネガティブトラッキング、特大数字	ティッカー付きフルブリードアクセントバンド、ハードルール、賑やかなセクションと静かなセクションの交互
技術的、正確な（ID）	モノコールアウト、大きなモノ数字	ヘアライングリッドグラウンド、キャプション付き番号付き図、注釈付きダイアグラム
簡潔な、リズミカルな（通知）	巨大なモノステータスワード	繰り返しモチーフとしてのタイムルーラー、ネガティブスペース、固定セクション

• デフォルトのスケルトンを避ける（アイブロウ、h1、リード、2つのボタン、信頼リスト、グロー）意図的に変更しない限り。すべての製品が1つのスケルトンを共有するラウンドは失敗です。
• 長いページを映画のようにペース配分する： 静かなセクション、賑やかなセクション、フルブリードの瞬間、暗いバンド、背景の変更。均一なスペーシングは継ぎ接ぎに読めます。
• 390pxを意図的にデザインする： 電話用のキャプチャの独自クロップ、縮小する代わりにリフローする図（スタック、サイドバス）、折り畳みの上のフィルムコンテンツ。
• コンタクトシートチェック： すべての製品の最初のビューポートを並べてレンダリングします（両テーマ、1440と390）。同一性とファミリーの断絶を探します。

5. ヒーローフィルム

製品ごとに1つの振り付けされたシーケンスで、4〜8秒で製品を伝え、静的な最終状態に落ち着きます。

• 最終状態はプレーンなHTMLです。 JSオフとモーション削減はそれを即座に表示します；フィルムはそれに向かってアニメーションするだけです（開始状態のための reset()、ステップ [ms, fn(instant)]、end() クリーンアップ）。
• ビューごとに1回再生、ループしません；タブが非表示のときに一時停止します；可視の一時停止/再再生コントロールがあります（WCAG 2.2.2）。フィルム内のタイピングはフィルムタイムラインによって駆動されるため、一時停止も凍結します。
• シーケンスで真実を伝えます。 実際の動作をプロットとして使用します：リクエスト → 実際のエラーで拒否 → 再送 → 保存；3つのコピー → 1つ；キュー → ポーリング → 送信。データがサポートしないハイライトを偽造しないでください。
• 共有要素の動き（合計がヒーローフィギュアに飛び込む、テーブルが1つのデータベースに飛び込む）は、一連の表示ではなく、1つのシーンを作ります。
• アクセシブルなテキスト：可視のタイプされたレイヤーは aria-hidden；完全な文は一度 .sr スパン内にあります。

6. モーションルール

• ゲート： コンテンツはデフォルトで可視；ヘッドスクリプトが prefers-reduced-motion が許可する場合のみ html.anim を追加します；すべての非表示またはアニメーションルールは .anim の下に配置します。
• ワンショットリビールでは不透明度のみ（IntersectionObserver、1で終了）。スクロールリンク効果（animation-timeline: view()/scroll()、スティッキースクラブ）は transform、clip-path、または stroke のみ をアニメーションします：半透明のテキスト状態はaxeでコントラストに失敗します。
• 許可：静的なフォールバック付きのCSSスクロール駆動アニメーション、テーマスイッチのためのビュートランジション（トグルからの円形ワイプ）、CSS linear() スプリング、可変ウェイトアニメーション、モーションオフ時に最終テキストを書き込むカウントアップ。
• 自動移動コンテンツ（ティッカー、自動再生）は一時停止コントロールが必要で、ホバー/フォーカスで一時停止します。
• レイアウトシフトを測定します；カウンターとタイプされたテキストのためのスペースを確保します。

7. キャプチャ

• 実行中の製品からのみ、そのモックアップからではありません。決定論的にデモデータをシードして、キャプチャ間で数字が一致するようにします（または、一致しないことをページに記載します）。
• 意図を持ってクロップします（ポイントごとに1パネル）、両テーマ、2倍、さらに別の電話クロップ。
• 古いブランディングをクロップアウトし、フラグを立てます。UI言語がページのものと異なる場合はキャプションに記載します。
• height:auto、意味のある alt、およびキャプチャの座標空間に配置されたマーカー（測定；マーカーはドリフトする）を持つライト/ダーク <img> ペアとして実装します。
• ビルドがブロックされている場合（プライベートパッケージ、欠落トークン）、そのように記載し、描画データを説明用としてラベル付けし、正確なブロック解除方法をリストします。

8. ハード要件と検証バー

すべてのページ：

• 自己完結型HTML、インラインCSSとSVG、CDNなし、製品のフォントのみ；キャプチャを除いて 200 KB未満。
• data-theme によるライト/ダーク、トグル付き（保存された設定、システムデフォルト）。
• ランドマーク、1つの h1、ギャップのない見出し順序、スキップリンク、focus-visible、44pxターゲット、forced-colorsフォールバック。

チェック（誰かに見せる前にすべて合格する必要があります）：

1. verify.js： axe-core（wcag2a/2aa/21aa/22aa + best-practice）を 390x844 と 1440x800 × ライト/ダーク × モーション/削減 = 8回実行、違反ゼロ。モーションモードでは、最初にページ全体をスクロールしてリビールを発火させます。また：水平スクロールなし；画像がブロックされても読み取り可能；JSオフでも読み取り可能。
2. HTMLパーサーチェック for 飲み込まれたテキスト：テキスト内の生の <token> または <no-reply@…> はタグになり、axeはそれを教えてくれません。< としてエスケープします。
3. スモークテスト ページごと：1440と390ですべてのコントロールをクリック、pageerror で失敗、インタラクティブな最終状態（ダイアログが開いている、適用後）で再度axeを実行します。
4. スクリーンショット： 定着したフィルムとモーション削減、両テーマ、両幅。それらを見て、厳しいアートディレクターとして少なくとも2回反復します。
5. カバーされていないことを述べる： スクリーンリーダー、Safari/Firefox、実際のデバイス、5秒クレームのユーザーテスト。

9. トラップ（それぞれ一度は時間を費やした）

• CSS詳細度：画像のテーマ切り替えルールはコンポーネントルールに打ち勝つ必要があります（.crop img ではなく img.sl）。
• 非表示要素の測定は0になります（レンズ、ズーム）：表示してから測定します。
• 不透明度で暗くされた非アクティブステップはコントラストに失敗します：代わりに境界線/背景で強調します。
• role="list" は listitem 子要素が必要です；セクションタイトルは h1 から h3 にジャンプしてはいけません。
• グロー/メッシュ背景はフルブリード、マスク、そして body{overflow-x:clip} が必要です。
• グリッドセル内の分割できない <code> は390で水平スクロールを引き起こします；スクロール可能な pre は scrollable-region-focusable に失敗します（tabindex="0"、role="region"、ユニークなラベルを与える、または pre-wrap を使用します）。
• ジェネリックなクラス名は共有CSSと製品CSSで衝突します（.tl、.copy）：ファミリークラスを名前空間化します。
• cqw は祖先コンテナに対して解決され、要素自体に対しては解決されません。
• 可視テキストと異なる aria-label は label-in-name を壊します；追加のコンテキストを .sr スパンに入れます。
• f プレフィックスが欠落したPythonテンプレート文字列は {label} をアクセシブル名にリークします：出力をgrepします。
• loading="lazy" 画像は全ページスクリーンショットに欠落しています；欠陥ではありません。
• 抽出によって組み立てられたページは、アセンブラが再実行されるまでソースが変更されても更新されません。

10. プロセス

1. 読む ブリーフ/ハンドオフ、製品コードとドキュメント；事実テーブルとフラグを構築します（セクション2）。
2. ブランドを棚卸し： マークパス、トークン、フォント（軸）、既存のキャプチャとその問題。
3. 方向性のラウンド： 製品ごとに3つの小さく異なる方向性、それぞれ1つのデバイスを中心に構築します。アイデアライブラリとして保持します。
4. オーナーフィードバック → 最良のアイデアを組み合わせて長いページにします（セクションレール、FAQ、コピーボタン付きの実際のクイックスタート、重み付けされた「あなたが受け入れるもの」ブロック）。
5. 天井を上げる： 最初に共有ファミリーレイヤー、次に製品ごとにヒーローフィルム付きの1つのアートディレクションページ。独立した製品は並行して構築できます（製品ごとに1エージェント、ファミリーレイヤーは読み取り専用、提案は報告されて一度適用され、その後すべてのページが再構築され再検証されます）。
6. 一緒にレビュー： コンタクトシート、ファミリーレイヤーの一貫性修正、完全な再検証。
7. 納品： 製品ごとに NOTES.md（コンセプト、実際とサンプル、フラグ、検証テーブル）；次のセッションのための HANDOFF.md（目標、決定、フラグ、弱点、次のアイデア）；フォントとキャプチャがインライン化された閲覧専用のスタンドアロンプレビュー；製品ごとに1つの推奨事項とその勝因を含む短いサマリー。

11. ファイルとツール

<proposals-dir>/<date>/
  HANDOFF.md                  次のセッションのためのブリーフ
  <product>/direction-N.html  ページ; NOTES.md; fonts/; shots/
  _tools/verify.js            axe x8、オーバーフロー、画像ブロック、JSオフ
  _tools/family.py            共有シェル、トークン、モーションキット（フィルム、カウント、タイプ、onView）
  _tools/build_<product>.py   製品ごとに1つのジェネレーター
  _tools/settled.js           フィルムが定着した後のスクリーンショット
  _tools/standalone.py        フォントとキャプチャがインライン化された閲覧専用コピー
  _tools/smoke_<product>.js   インタラクションスモークテスト

ジェネレーターはそれらを作成したセッションからのハードコードされたパスを運びます。実行前に sys.path と出力パスを修正します。verify.js は兄弟ディレクトリ verify/node_modules にインストールされた [email protected] を期待します。

12. ページを表示する前のチェックリスト

• 最初のビューポートが5秒テストに合格；1つのデバイスがそこに可視である。
• すべての数字と名前がファイルにトレースされている；サンプルデータがページにラベル付けされている；フラグが NOTES.md にある。
• トレードオフが明確に述べられ、視覚的な重みを与えられている。
• ヒーローフィルムが定着する；最終状態がデフォルトのHTMLである；一時停止/再再生が機能する；モーション削減とJSオフで問題なく読める。
• スクロールリンク効果はtransform/clip/strokeのみを使用；リビールはワンショットである。
• 390pxがデザインされている（独自のクロップ、リフロー図）、単に積み重ねられていない。
• verify.js ALL CLEAN（8回実行）、パーサーチェッククリーン、スモークテストクリーン、200KB未満。
• スクリーンショットを見た、両テーマ、両幅、そして見たものに基づいて何かを変更した。