会計事務所向けWebサイトビルダー (HandL Agency)
ほとんどの会計事務所のWebサイトは似たり寄ったりで「スミス・アンド・カンパニーへようこそ」で始まります。デザインが原因で集客できないわけではありません。本当の理由は、H1にサービスと町名が入っていないこと、価格がないこと、顔が見えないこと、訪問者が読んでいる場所に問い合わせ手段がないことです。このスキルは、見た目も高級で、かつ成果を出すページを構築します。
以下の手順を順番に実行してください。
1. ブリーフを取得する（一度だけ質問し、その後は判断）
以下のうち、推測できない項目だけを1つの短いメッセージで質問してください。残りは自分で埋め、選択した内容を説明すること。
- 事務所名、サービス（例：「会計士」「記帳代行」「フリーランス向け会計士」）と町または地域。
- 支援対象者（「すべての企業」よりも特定のニッチが効果的）、他社との違い（定額料金、毎回同じ担当者、応答時間など）。
- 訪問者が取るべき1つのアクション（例：「見積もりを取得」）。1つのメインボタンとして全ページで使う。
- 3語で表すムード、ブランドカラー、もしあれば自社の写真や動画。
2. ブリーフファイルを作成する
references/brief.mdを参照してbrief.jsonを書いてください。examples/内の最も近いファイルをコピーして変更すること。ゼロから書き始めないでください。ルール：
h1にはサービスと町名を含めること。人間らしく、キーワードの羅列にならないように：「ブリストルの会計士、ついにあなたの味方に。」subは120〜165文字にすること。メタディスクリプションとしても使われるため。statsは事務所が実際に約束していること（応答時間、年間のチェックイン回数）。決して架空のクライアント実績、レビュー、受賞歴を作り出さないこと。- レイアウトは
references/layouts.mdで選んでください。
3. ヒーローシーン（差別化を生む要素）
デフォルトはstageレイアウト：シネマティックな背景プレート、動く金融オブジェクト1つ（滑る、ホバー、浮遊、回転、または流れる）、パーティクル、奥行きを出すための巨大なエコーワード、マウスパララックス、スクロールに合わせてオブジェクトがページ下方に飛んでいく演出。references/scenes.mdを参照してシーンを構築してください：
- 事務所に合った金融オブジェクトを選ぶ（コイン、紙幣風の紙で折った折り紙の鶴、金色の鳥、ガラスの小包、税務書類の紙の舟、クロームのリボン）。既製のシーンは
assets/scenes/にあります。 - 新しいシーンを作る場合、画像生成モデルで1枚の静止画を生成し（プロンプトの公式は
scenes.mdに記載）、オブジェクトを切り抜き、モデルに同じ画像でオブジェクトだけを除去したもの（プレート）を依頼してください。 - モーション、パーティクル、エコーワードを
brief.jsonに設定します。
事務所のチーム写真はヒーローセクションの下に配置します。権利のないメディアへのホットリンクは禁止。握手や電卓のストック写真は絶対に使用しないでください。
4. ビルド
python3 scripts/build.py brief.json site/ を実行してください。site/index.html（1ファイル、ビルドステップ不要、どこでも開ける）を書き出し、SEOチェック結果を表示します。失敗したチェックをすべて修正し、再度ビルドしてください。
5. 確認と修正（このステップは省略しないこと）
python3 scripts/shoot.py site/index.html shots/ を実行してください（Playwrightが必要：pip install playwright && python -m playwright install chromium）。スクリーンショットを開き、references/review.mdでページを採点してください。最も弱い3点を修正し、再度撮影。すべての項目が4以上になるか、3ラウンドが終了したら終了してください。
6. 納品
以下のものをユーザーに提供してください：
index.htmlファイルとその開き方。- 最終的なデスクトップスクリーンショット。
- ページタイトルとH1（サービスと町名が含まれていることを確認するため）。
- 公開前に差し替えるべき項目：実際の写真、実際の価格、予約・問い合わせリンク、フッターの事務所の規制文言（例：ICAEW/ACCA/AATの実務詳細）。
ファイル
references/brief.md：brief.jsonの全フィールド。references/layouts.md：レイアウトと各レイアウトの使用タイミング。references/scenes.md：アニメーションヒーローシーンの構築方法、モーションの種類、画像プロンプト。assets/scenes/：6つの既製金融シーン（プレートと切り抜きオブジェクト）。references/finance-rules.md：金融系事務所Webサイト向けSEOとコンバージョンのルール。references/review.md：ステップ5の採点基準。examples/*.json：6つの完成済みブリーフ（会計士、記帳代行、フリーランス向け会計士、Eコマース記帳、確定申告、給与計算）。scripts/build.pyおよびscripts/stage.py：ページをレンダリング（メディアを隣にコピー）し、SEOチェックを実行。scripts/shoot.py：レビュー用のデスクトップおよびモバイルスクリーンショットを撮影。