Claude Fable 5でサイトのレビューをしてみた
Article actions
Claude Fable 5 が 6/23 以降はサブスクとは別課金になるという話が出ていたので、どう使うか少し考えました。
毎日のコーディングタスクよりも、ロードマップや方向性を決めるような「大きめの判断を要するタスク」に向いているのではと思い、まずは自分のサイト(hidetaka.dev)の現状診断を試してみることにしました。いきなり「方向性を考えてくれ」と投げても抽象すぎるので、現状チェックとそこからの改善提言というかたちで依頼しました。
プロンプトと実行の様子
デザイン・UI 系のスキルを複数リポジトリに追加していたので、それを活かした依頼にしました。また、個別に開発した GA4 / Google Search Console 連携の MCP サーバーも持っているので、それも使うよう指示しています。
デザイン・UI系のスキルを複数追加している。それぞれagent teamで並列実行し、レビューと改善提案をレポートしてください。
ga4 / gscのmcpもあるので、調査して良い。

スキルの定義を確認してから、5 つのエージェントを並列起動する流れになりました。先に GA4 / GSC の調査結果を共有して、後続の統合レポートの優先度付けに使うという段取りも自分で決めていました。
実行ログを展開すると、スキルのスキャンと並行して personal MCP サーバー経由で GA4 プロパティの一覧取得・レポート実行・Search Console のパフォーマンス分析までこなしていることがわかります。

エージェントからの中間レポート
Agent Team での作業なので、完了したエージェントから順番に要点が届きます。最初に返ってきた frontend-design 観点のレビューがなかなか手厳しかったです。

「blur 円形グラデ×3 + グリッド + hover:scale-105 という AI 生成テンプレ 3 点セット」「誰のサイトか視覚から特定できない」あたりは反論できませんでした。theme-factory 観点のレビューでは、zinc / slate / gray の 3 ニュートラル系統が 31 ファイルに混在しているという指摘も出てきました。コードを触っているときは気づかないものです。
統合レポート:深刻度別に整理
全 8 観点のレビューが出揃うと、深刻性で整理した統合レポートが届きます。

P1(即修正推奨)で上がってきた項目の中で、2 番目のコンタクト導線の欠落は面白い発見でした。/contact・/inquiry・/help への継続的なアクセスを GA4 のデータから発見したものです。サイト内に該当ページへのリンクが一切ない状態なので、十中八九スキャン系の攻撃アクセスだとは思いますが、GA4 データをそのまま課題として拾ってくる動き自体は興味深かったです。
ロードマップまで出てくる
指摘をフェーズに分けた修正ロードマップまで出てきます。どのフェーズまでやらせるか、どう Agent Team を組成するか、といったことを考えるベースにできます。ここで GitHub や Linear に Issue を起票して止めるのも十分ありだと思います。

フェーズ 1〜2(即効バグ修正・SEO 基盤)は GSC の CTR 改善に直結するとの判断で、工数感「小〜中」でまとめられています。フェーズ 4〜5(デザイン刷新・構造負債解消)は工数感「大」で、別途計画が必要な扱いです。優先度の根拠として GA4/GSC の実データが紐づいている点がレポートとして使いやすかったです。
実装まで走らせた
せっかくなのでフェーズ 1〜3 の実装までやらせてみました。個人的にはフィードバック項目ごとに PR を切ってほしかったのですが、ロードマップのフェーズ単位で作業したようです。

結果として 3 フェーズそれぞれ 1 ブランチ = 1 PR の計 3 本(#229〜#231)が作成されました。3 エージェントともに pnpm lint:check / pnpm test / pnpm build を通過してからプッシュしています。マージ順は #229 → #230 → #231 の推奨と、後続 PR のリベース注意点もコメントに書いてありました。
まとめ
Claude Fable 5 でサイトのレビューから実装 PR まで一通り試してみました。
トークン消費がかなり激しいので、実装作業そのものは Sonnet(あるいは最低でも Opus)に任せるほうが現実的です。Fable 5 の使いどころとしては、Linear / Backlog / GitHub に Issue やマイルストーンを起票する前の「診断と優先度整理」あたりが向いている気がしました。GA4 や GSC などのデータを持ち込んで多角的に分析させられるのは強みで、定期的な診断用途として予算を確保するのがよさそうです。
Read More Dev Notes
Explore more technical learnings and practical development notes.

Hidetaka Okamoto
Developer Experience Engineer
Developer Experience Engineer. A developer specialized in serverless application development on AWS and Cloudflare. Former Stripe Developer Advocate / AWS Samurai 2017. Skilled in creating content and presentations that introduce service usage and best practices. You can follow me on Twitter at @hidetaka_dev
Related Articles
Claude Design + Claude Code でサイトをリデザインしてみた
Claude Design という、Claudeのアプリ上でデザイン作成や変更・コーディングへの引き継ぎが行える新製品がAnthropicからリリースされました。どんな感じで使えるのかが気になったので、このサイト( hi […]
Devinのreview機能を触ってみた
Devinの新機能「Review」を試してみた体験レポート。PRの内容をAIと相談できる「PR特化版Ask Devin」として、GitHubのPRページ代わりにも使える便利な機能の紹介。
Claude Code の利用状況を OpenTelemetry で Grafana Cloud に流して手元で確認する
Claude Code を一日どれくらい使っているのか、トークンやコストを数字で見たくなりました。調べると OpenTelemetry(OTel)でメトリクスを出せると分かったので、Grafana Cloud に直接流し […]
Claude と DeepWiki MCP で、GitHub に公開されている OSS を効率的に理解する方法
React の SSR 周りで、React Fizz と React Flight の関係を整理したくなりました。公式の docs と RFC、ソースを行き来しながら読むのは骨が折れる作業です。リポジトリを Claude […]