2026.05.08

ホームの顔を作り直して、エージェントを 9 → 6 体に再編した 1 日半

技術日記業務

はじめに

前回の記事(5/7 朝)で「サンプル 190 件 + 自立開発ループ + SOP 整備」を書いた直後から、丸 1 日半で結構いろいろやりました。今回は ホームページの「顔」をいじり倒す 作業がメインで、合わせてエージェント体制の再編、ドキュメント整備、品質チェックも回しています。

ざっくり言うと:

モーション系: View Transitions(ページ遷移をフェード化)導入 → SPA 化に伴う回帰バグを 5 件連続で修正
ホームに看板セクションを 3 つ試作: A 雲海、B 裏方の景色、C ライブ・ドッグフーディング → 一部撤去 → C を AI 開発の流れに作り直し → 結局 A も削除、最後にコピーを 1 文に圧縮 → 結局そのセクションごと撤去
エージェント体制を 9 体 → 6 体に再編: Orchestrator / Planner / Generator を廃止し、Plan-Gen を各 leader に内蔵、Eval だけ独立(self-review バイアス排除)
Hero 画像を 3 連続で差し替え: 写真調 → 中央寄り → 水彩風(最終)
顧客案件用ドキュメント雛形 _client-template/ を新設(cp -r 一発で案件枠が作れる)
customer-manual-template を WordPress 前提から自前 CMS 前提に全面書き直し
HP 全体の品質チェック + 文体回避ルールの撤回: 「寄り添う / 伴走 / 丁寧 / ご提案 / お気軽に」を回避ルールから外し、関連 7 ファイルから該当チェックを削除
パフォーマンス改善: 1.1MB の sawa2.png を Astro Image 経由にして 80% 以上削減

40 コミット入っているので、ここから時系列で書いていきます。

1. View Transitions と Hero マイクロアニメ(5/7 夜)

前回の記事を公開した直後から、サイトの「動き」がもっと欲しくなって、Astro 5 の ClientRouter(View Transitions API)を入れました。SPA 風にページ遷移がフェードする仕掛けです。

合わせて入れたもの:

Hero のマイクロアニメ(タイトルが 1 行ずつふわっと立ち上がる)
Scroll-Driven Animations(@keyframes を animation-timeline: view() に繋いで、スクロール位置で進むアニメ)
装飾雲のドリフト(画面を左から右に流れる)
A2 Magnetic CTA(CTA に近づくとカーソルがちょっと吸い寄せられる)
柔らかカーソル(独自の sage 色のカーソルが本物のカーソルに少し遅れて追従)
B3 サンプル zoom 遷移(samples 一覧 → 詳細でカードが拡大されるトランジション)
C1 ロゴと雲の描画アニメ(SVG path の stroke を時間で描画)

ここまでは綺麗に入って気持ち良かったんですが、SPA 化の副作用で 回帰バグが連続 で出ました。

SPA 遷移後に動かなくなった機能たち

ClientRouter を入れると、ページ遷移は「DOM をスワップする」処理になります。DOMContentLoaded は初回しか発火しません。なので「初回だけ動くスクリプト」がページ遷移後に死ぬ。

実際に死んだもの:

機能	症状
reveal アニメ	2 ページ目以降、要素が `opacity: 0` のまま固まる
MobileNav / ContactForm / SamplesFilter	遷移後に JS イベントが効かない
PageLoader	`/` に戻ったときにオーバーレイが消えない
カスタムカーソル	遷移後に左上に固まる(closure が古い DOM 参照を握っていた)

修正パターンはほぼ同じで:

document.addEventListener('astro:page-load', init) で都度初期化を呼ぶ
「対象要素を querySelector した変数」を let にして再 query 可能にする
二重起動を dataset.bsInit フラグで防ぐ

カスタムカーソルだけ少し癖があって、closure が detach 済みの DOM ノードを指したままになっていました。transition:persist 属性で「同じ DOM ノードをページ遷移を跨いで使い回す」方法に変えて解決。

学び: View Transitions + module script を組み合わせるなら、初回ロード時の <script> は イベント発火点 + cleanup だけに留める。状態は外で持つか毎回 query し直す。

2. 「ホームの顔」3 セクション試作と撤去

ここから 5/8 の作業。「Onbit のホームがあっさりしすぎて、もう少し凝ったほうがいい」という直感から、看板セクションを 3 つ作ってみることにしました。

A. CloudSea(雲海インスタレーション)

5 層の雲シルエットをパララックスで重ねる
スクロール進行度 + cursor 位置で各層を僅かに動かす
コピー: 「いそがず、ひとつずつ」(あとで「急いでつくるより、長く使えるものを」に変更)

B. BackstageNarrative(裏方の景色)

6 シーン(相談 → 提案 → 制作 → 確認 → 公開 → 運用)を pinned visual + scroll で進行
position: sticky で固定された stage の中で scene が切り替わる
進行 rail が左にあって、現在のシーンが sage で点灯

C. BehindTheSite(ライブ・ドッグフーディング)

「このサイト自身が商品の見本」を体現
4 ノードのデータフロー図(投稿 → 仕上げ → 配信 → 読者)
リアルな最新ブログ記事カード + 「↑ この記事もこの仕組みで配信中」

3 つとも実装してデプロイしたんですが、C はメッセージが弱くて即撤去。理由は「自分のサイトの blog 機能を見せても、見ている人にとっての価値が分かりづらい」と判断したため。

代わりに C を「AI 開発の流れ(BehindTheBuild)」に作り直し。Onbit が Claude Code を使って実装してることを、4 ステップのフロー図と直近 git コミットの “ライブ表示” で見せる構成にしました。

Step	Label	担当
01	要望を整理する	人 + Claude Code
02	設計・実装する	Claude Code(AI 単独・sage 塗り)
03	コードレビューと動作チェック	人 + Claude Code
04	公開する	人 + お客様確認

学び: 透明性をフレーミングするなら「速さの理由」だけにとどめて、Phase 2 のティザーには寄せない。ノイズが増える。

モバイル横スワイプ対応とバグ修正

B(BackstageNarrative)は最初モバイルだと縦に積まれて長くてカッコ悪かったので、横スワイプ carousel に切り替え。scroll-snap-type: x mandatory + 矢印ボタンで実装。

そして「半分画面で動かない」バグ。原因は anchor 要素の top: calc((i + 0.5) / N * 100%) という相対指定が一部の幅で不安定だったこと。anchor を介さない直接スクロール進行度ベースの判定にリライトして解決。

const rect = inner.getBoundingClientRect();
const progress = Math.max(0, Math.min(1, -rect.top / (rect.height - vh)));
const idx = Math.min(scenes.length - 1, Math.floor(progress * scenes.length));

シンプルな式 1 行で 6 シーンの離散化が決まる方が、anchor の位置計算より確実でした。

A の最後: 撤去

A(CloudSea)は背景に手描きの「生命の樹」イラストを入れて、その上に「はたらくに余白を、くらしに彩りを」 + 3 つの value(話す / 続ける / 育てる)を乗せる構成にしてみたんですが、何度直しても臭く て、最終的にセクションごと削除しました。

捨てた版の遍歴:

雲シルエット 5 層 + コピー → 雲が画像とぶつかる
雲撤去 → カードに value 3 つ → カードが過装飾
カード装飾外して文字組みのみ → まだ臭い
3 つを 1 文に圧縮 → 「〜います」が強引
削除

学び: 看板セクションは無理に作るより、ない方が品が出ることもある。「意味が見いだせない」と言われた時点で消す。

3. エージェント体制を 9 → 6 体に再編

5/7 に導入した自立開発ループ(Orchestrator / Planner / Generator / Evaluator の 4 体)が、業務知識レイヤー(Founder / SalesLeader / ProductLeader / DeliveryLeader / BusinessLeader)と並列にいて、整理しきれていない感がありました。

検討した 3 案:

	体数	起動経路	評価
現状(9 体並列)	9	leader → Orchestrator → loop	中央集中で安全だが冗長
推奨案(8 体)	8	leader → loop method	Orchestrator 廃止・loop は共有メソッドに
ラディカル(5 体)	5	leader が自律ループ	プロンプトに loop を埋め込み

最終決定は 6 体構成(折衷案):

さわ
  ↓
Founder(戦略・OKR + 全体司令塔)
  ↓
SalesLeader / ProductLeader / DeliveryLeader / BusinessLeader
  ↓
EvaluationLeader(独立評価)

ポイント:

Orchestrator 廃止: タスク振り分けは Founder に統合
Plan + Gen を各 leader に内蔵: 旧 Planner / Generator は廃止し、各 leader のプロンプトに「分解の作法」「実行の作法」を直接書く
Evaluator を EvaluationLeader に昇格: ここだけは独立。実装した leader が自分で評価しない(self-review バイアスを排除)

self-review バイアスを避けるのが一番のキモです。同じ文脈・同じプロンプトで「作る」「評価する」両方を担当させると、LLM は自分の出力を pass しがち。Evaluator を別人格に切り出しておく方が品質が上がる、という経験則。

学び: agent 数を減らすときは、責任の重複を減らすのが目的。「self-review はしない」ような構造的な原則を設計に埋め込む方が、プロンプトの注意書きより効く。

4. Hero 画像を 3 連続で差し替え

ホームの第一印象を変えたくて、生成 AI で作った画像を 3 連続で差し替えました。

版	特徴
v1(初版)	写真調・中央に大きな樹・家族・家
v2	樹が中央寄り・空が広く取られた構図
v3(最終)	水彩風タッチに再描画(他のサイト要素と馴染む)

ついでに 雲のドリフトを画面上部 1/3 に集約(top 8 → 4%, top 42 → 14%, top 70 → 24%)。画像内に雲がもう描かれているので、SVG ドリフトは上空だけにしてカブりを減らしました。

最後に、Hero 上部の eyebrow「フリーランス・小規模事業のためのウェブ制作」を 白 pill バッジ にして強調。水彩画像の上でくっきり浮くようにしました。

5. ドキュメント雛形と顧客マニュアル更新

顧客案件ドキュメント雛形 `_client-template/`

新規案件が始まったら cp -r .company/projects/_client-template .company/projects/<client-slug> でドキュメント枠が作れる構造を整備:

README.md — 基本情報 + 8 段階デリバリーステータスのチェックリスト
brief.md — 初回ヒアリング(SalesLeader 担当)
proposal.md — 提案書 draft
quote.md — 見積内訳・税込総額
delivery-scope.md — 工数・スコープ・週次配分
design-spec.md — 技術仕様
communications/ — メール・打ち合わせ記録
handover.md — 納品マニュアル
decisions.md — 案件固有の意思決定ログ

コード側は apps/<client-slug>/ に同じ slug で並べる運用。

customer-manual-template の全面書き直し

以前のテンプレが WordPress 前提 で書かれていて(「投稿 → 新規追加」「外観 → カスタマイズ」「メディア → 置換」)、Onbit は静的 Astro サイト + 自前 CMS で納品しているため実態と齟齬がありました。

新しいテンプレ構成:

サイト更新の依頼(共通) — 月額に含む / 含まない範囲を明示 + メール 1 通の依頼フォーマット
お知らせ更新代行(オプション) — ライト / スタンダード / 取材付きプラン
Onbit CMS で自分で投稿する(CMS 導入時のみ) — 実際の管理画面に即した手順
困ったときの連絡先 — 症状別 self-help 表
用語の言い換え — CMS / SSL / ドメイン等を現代化

6. HP 全体の品質チェック + 文体ルール撤回

ここまでで結構変更したので、サイト全体を一度棚卸し:

SEO チェック(全項目 OK)

title / description / canonical / OG / Twitter Card / robots.txt / sitemap.xml
構造化データ(Organization / WebSite / BreadcrumbList / BlogPosting)
h1 階層・alt 属性

文体回避ルールの撤回(これは方針転換)

これまで「寄り添う / 伴走 / 丁寧 / ご提案 / お気軽に」を回避ルールにしていましたが、撤回することにしました。理由は「これらの語を完全に避けるのは現実的じゃないし、むしろ自然な日本語で書きたいときに窮屈になっていた」と判断したため。

回避を続けるルール:

自分語り(「Phase 1 は実績作り」のような運営側都合)
身内ネタ(「妻に説明できる範囲」のような文脈依存)
上から目線(「IT が苦手な方」のような表現)
徳島生まれ / 出身
対外発信での本業言及

エージェントの必須チェック項目から「寄り添う / 伴走 / 丁寧 / ご提案 / お気軽に」を 7 ファイル(各 leader + EvaluationLeader + Plan-Gen-Eval ループ仕様書)から削除。

クリーンアップ

public/ の不要ファイル:

onbit-pricing-final-v3.html(旧 pricing 提案 HTML、SEO ノイズ)
sawa.png(旧プロフィール、現在は sawa2.png 使用中)
*:Zone.Identifier 系 6 ファイル(WSL に Windows ドラッグ&ドロップした残骸)

合わせて .gitignore に .astro/ と images-staging/ を追加(誤コミット防止)。

パフォーマンス改善

public/sawa2.png が 1.1MB で Astro Image を通っていない 状態でした。src/assets/ に移して <Image> コンポーネント経由にすると、WebP 自動変換 + レスポンシブ widths 生成で 30〜80KB まで縮小されます(80% 以上削減)。

合わせて未使用の make-onbit.png(2.5MB)も削除。合計で約 3.5MB のダウンロード削減。

振り返り

今回 1 日半で 40 コミット、行数で +5000 / -3000 ぐらい動いて、過去最大級の “迷走 + 修正” がありました。学びを 3 つだけ:

作って捨てる勇気: 看板セクション 3 種を 1 日で作って、A と C(初版)は撤去。「捨てる」を恐れない方が結果的に品が出る。
構造で品質を担保: エージェント再編で「self-review しない」を構造化。プロンプトの注意書きは破られる、構造は破られない。
回避ルールは時として邪魔: 文体回避ルールを撤回したのは、サイト全体を読み返したときに「あれ、これ別に問題ないな」と気付いた時。ルールはたまに見直す。

次は実際の案件を取りに行きたいところ。SOP も道具も揃ってきたので。

関連リンク: