/website-build - 正しくWebサイトを構築する
モバイルアプリ企業の実際のマーケティングサイトを構築し、5言語に翻訳し、ローンチし、強化した経験から抽出されました。参考文献のすべてのルールは、実際に問題が発生したり時間を費やしたりしたことに基づいています。このファイルが道筋であり、参考文献に詳細が記載されています。
| これを開く | 次の作業を行うとき |
|---|---|
references/01-architecture-pipeline-deploy.md | フォルダとビルドチェーンを設定し、ライブラリを選択し、ビルドステップを追加し、デプロイし、ホスティング/CSP/リダイレクトを構成し、バックアップを設定する |
references/02-design-typography-mockups.md | トークンとタイプを定義し、フォントと改行を処理し、電話モックアップを作成し、アイコン/ロゴを配置し、コンポーネントとモーションを構築する |
references/03-i18n-seo-geo.md | 翻訳し、市場を追加し、メタ/JSON-LDを書き、サイトマップ/robots/llms.txtを作成し、GEOを実行し、パフォーマンスを最適化し、分析を設定する |
references/04-qa-devices-modes.md | 何かをテストする。ハーネス、デバイス/幅/モードマトリックス、アプリ内ブラウザ、a11y、同意フロー、敵対的QAおよびライブQA |
references/05-process-content-legal-launch.md | プロジェクトを実行する：役割、承認、フィードバックループ、IA、事実、法的ページ、同意、公開 |
scripts/qa/ | QAハーネス（CDPベース、インストール不要）とWebKit/アプリ内ブラウザマトリックス（Playwright）を実行する |
scripts/backup/snapshot.py | 編集前にファイルのバージョン管理、バージョン一覧表示、復元。またはPreToolUseフックとしてインストール |
1. フェーズ（順序通り）
- ブリーフィング (
05): 目標とCTA、市場/言語、ページ一覧、出典付き事実シート、ブランドアセット、市場ごとの法的エンティティ、トラッキングと同意、ホスティング、およびプロダクションをマージする担当者。 - スケルトン (
01): 1つのソースフォルダ、手動編集のマスター言語、べき等なマーク付きブロックで注入される共有クローム、その他すべてのビルダー、_dist（最適化済み）と_deploy（ホスティング用）を一方向生成コピー、ビルドロック、最初のファイルからgit管理。 - デザインシステム (
02): グラウンドごとのトークン、clamp()とremと小さなvwスロープ、画像の実際のwidth/height、絶対srcset、すべてのダイアクリティカルマークをカバーするセルフホストサブセットフォント、要素ごとに1つのモーションシステム、モーション軽減およびJSオフでも安全。 - イメージ (
02): デザインツールから市場ごとにエクスポートされた実際の製品画面（3x PNG -> WebP）。テキストをラスターにパッチしない。ロゴはファイル内で修正し、ブレンドモードでは修正しない。 - コピーと事実 (
05): 1つの事実リスト、概念ごとに1つの用語、市場ごとの法的エンティティ、対象者ごとの敬体/常体。 - i18n (
03): 辞書と完全テキスト一致ビルダー、実行時のタイポグラフィ、hreflang（+ x-default）、市場ごとのデータテーブル、言語QA。 - SEO (
03): マーカー間のべき等な後処理、ページごとの1つのJSON-LD@graph、実際のlastmodを持つサイトマップ、robots（AIクローラーは意図的に許可）、実際の404。 - GEO (
03):llms.txt（+フル）、facts.json、サイト内外で一貫したエンティティデータ、no-JS抽出でも生き残るテキスト、その後GEOテストプロトコル（実際のAIエンジンへの問い合わせを含む）。 - パフォーマンス (
03): インラインアセット -> ハッシュ化ファイル、WebP、ファーストビュー未満は遅延読み込み、セルフホストライブラリ、タグマネージャーの遅延実行、モバイルおよびデスクトップでのLighthouse。 - 同意、分析、法務 (
03,05): 同意バー、Consent Mode v2（Basic vs Advancedを意図的に決定）、同意後にのみタグを許可、プライバシーポリシーにすべてのトラッカーを記載、必要な法的ページ、CSPはまず Report-Only。 - QA (
04): 全ページ x 幅マトリックス、モード、WebKitおよびソーシャルアプリ内ブラウザ、キーボード/フォーカス、同意シナリオ、リンク/アンカー/言語切り替え、敵対的レビュー、その後実際のスマートフォン。 - 公開 (
05,01): 旧サイトとDNSをバックアップ、すべての旧URLをリダイレクト（ストア掲載パスは正確に保持）、プレビューをベースラインと照合テスト、切り替え、ライブチェックリストを実行。
2. 厳格なルール
- 生成されたファイル（言語バージョン、
_dist、_deploy）は手動で編集しないでください。ソースまたはビルダーを編集し、その後再ビルドします。 - 翻訳ビルダーが完全テキスト一致で照合するコピーに、
/<br>を手動で挿入しないでください。改行は実行時に行われます。 - 1つのセッションでビルドと公開を行います。ビルドロックはその所有者を確認します。保持されている場合は待機し、決して削除しないでください。フルビルドの前に空きメモリを確認します。
- ページがレンダリングされることは何も証明しません。すべてのインラインスクリプトを構文チェックし、制御文字をスキャンし、マトリックス全体を実行します。
- すべてのフィードバックは、対象のテキストが消えた場合に失敗するべき等なビルドパスになります。
- プロダクションは所有者がマージします。ホスティング、CSP、同意、トラッキングおよび法的変更は、まずサイドブランチでテクニカルレビュー担当者に送られます。
- 事実は1つのリストに存在します。ページ間で異なる数値は、信頼バグでありGEOバグです。
- バックアップ: 各フェーズでコミットするサイトごとのgit。コミット間のすべては
scripts/backup/snapshot.py（またはそのフック）。公開前に旧サイトとDNSをバックアップ。 - ビルド、ミニファイされた出力でオーバーレイ、スティッキーバー、メニューを再テストします。ミニファイアはセレクタの詳細度を低下させる可能性があります。
- 広告が着地するアプリ内ブラウザ、および状態（URL内のトークン）を保持するページで、CSPと同意をテストします。
3. QAをひとことで
パスはこのスキルフォルダからの相対パスです。まずnode scripts/qa/jscheck.mjs site/_distを実行し、次に
node scripts/qa/audit.mjs <フォルダまたはURL>をQA_WIDTHS=1440x900,1280x800,1024x768,768x1024,430x932,390x844,360x780,320x700で実行し、
次にanchors.mjs、modes.mjs、console-sweep.mjs、shots.mjs（スクリーンショットは自分で確認）、
そしてWebKitとInstagram/Facebook/TikTokのアプリ内ブラウザ用にinapp.mjsを実行します。すべてのスクリプトは1つの終了コード契約に従います：0 クリーン、1 問題あり（ロードに失敗したページを含む）、2 使用方法が不正、3 実行不可（Chrome、axe-core、Playwrightが不足）。チェックリスト：04、セクション「公開前」と「デプロイ後」。