TERASU_Lens_開発依頼書
TERASU Lens 開発依頼書 v1
TERASU で作った納品前HPを超厳しくチェックする新規ツール。
別Claude Codeセッションで実装するための完全自己完結ドキュメント。
人の最終チェック不要レベル。AI が業界トップクラスの厳しさで評価し、改修指示書まで生成。
クイックアクセス
依頼サマリ
| 項目 | 値 |
|---|---|
| サービス名 | TERASU Lens |
| 由来 | TERASU の世界観(光)× レンズで欠点を拡大して映す |
| ゴール | 納品前HPを超厳しく評価 → 人手不要レベルの自動品質保証 |
| 実装機能数 | 約20項目(A群-E群) |
| 想定工数 | 10-14営業日(フル装備) |
| 公開URL(予定) | https://lens.terasu.scale-group.co.jp/ or https://terasu-lens.pages.dev/ |
| 主担当 | 別セッションで実装 |
1. 別セッション開始時のキックオフプロンプト
新セッション開始時、これをそのままコピペしてください。
TERASU Lens(新規・HP超厳しいチェックツール)の開発を進めます。
【依頼書】
~/Obsidian/SCALE-Brain/40_新規事業/TERASU/TERASU_Lens_開発依頼書.md
【新規リポジトリ作成パス(推奨)】
/Users/oogushiyuuki/株式会社SCALE/terasu-lens/
【公開URL(予定)】
https://terasu-lens.pages.dev/
(独自ドメイン: lens.terasu.scale-group.co.jp 検討中)
【データベース】
Supabase(新規プロジェクト作成 or terasu_app_data テーブル流用)
- terasu_lens_jobs テーブル(評価ジョブ管理)
- terasu_lens_results テーブル(評価結果)
- terasu_lens_industry_rules テーブル(業種別評価基準)
【作業前に読むべきもの】
1. この依頼書全文
2. TERASU 案件管理 v1 依頼書: ~/Obsidian/SCALE-Brain/40_新規事業/TERASU/システム開発依頼書.md
3. TERASU 案件管理 v2 依頼書(A群が Lens 連携): ~/Obsidian/SCALE-Brain/40_新規事業/TERASU/システム開発依頼書_v2.md
4. CLAUDE.md (~/Obsidian/SCALE-Brain/CLAUDE.md)
5. TERASU 競合分析(評価基準の参考): ~/Obsidian/SCALE-Brain/40_新規事業/TERASU/競合分析/2026-04-28_競合分析_統合レポート_v1.md
【守るべきこと】
- 「超厳しい」評価基準を絶対に妥協しない(プロンプトは下記参照)
- TERASU 案件管理(terasu-mgmt.pages.dev)と API 経由で連携
- Cloudflare Workers + Pages Functions を活用
- AIコスト削減のためキャッシュ戦略を組み込む
依頼書の「7. 実装順序」に従って、Phase 1 から順に実装してください。
完了したら、依頼書の「10. 完了状況」をチェックし、Slackで報告。
2. プロジェクト前提
TERASU Lens とは
TERASU で制作した納品前HPを 超厳しい目線で評価する独立ツール。AI(Claude Opus 4.7)と各種linter・Lighthouse・axe-core などを組み合わせて、業界トップ100社レベルの基準で品質を判定する。
なぜ別システムにするのか
- TERASU 案件管理は 進行管理 が主目的
- Lens は 品質保証 が主目的(独立した評価エンジン)
- AI の評価プロンプトを集中的にチューニングする必要
- 将来的に TERASU 以外のクライアント(外部HP制作会社)への外販も視野
コア価値提案
| 観点 | 一言 |
|---|---|
| 核心 | AIが業界トップクラスの厳しさで評価 → 人手不要レベルの自動品質保証 |
| スピード | 1HP 5-10分で完了 |
| 厳しさ | 「年商10億円規模BtoB企業のCEO」目線で評価 |
| 自動ループ | 改修指示書を自動生成 → TERASU案件管理に戻す |
| ゴール | スコア850以上で「納品承認」自動フラグ |
3. 評価10カテゴリ(各100点・総合1000点満点)
カテゴリ1: デザイン(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| 配色一貫性(メイン2-3色+アクセント) | 15 | Claude Vision |
| レイアウト(崩れ・余白・グリッド) | 20 | Playwright + Vision |
| フォント選定・サイズ階層 | 15 | HTML解析 + Vision |
| 視覚的階層(H1>H2>H3が機能している) | 15 | HTML解析 |
| 写真・画像のクオリティ | 15 | Claude Vision |
| ブランド統一感 | 20 | Claude Vision |
カテゴリ2: コピー(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| 読みやすさ(敬体/常体の統一・文長) | 15 | Claude Text |
| 誤字脱字・表記揺れ | 15 | textlint + Claude |
| キャッチコピーの訴求力 | 20 | Claude(業界比較) |
| CTA 文言の明確性 | 15 | Claude |
| トーン一貫性 | 15 | Claude |
| 業種適合度(士業=堅実・飲食=情熱等) | 20 | Claude |
カテゴリ3: UX(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| 動線(CTAへの自然な誘導) | 20 | Playwright(クリックパス) |
| フォーム最適化(項目数・誤入力防止) | 20 | HTML解析 |
| 視線誘導(F型・Z型レイアウト) | 15 | Vision |
| 情報階層(重要情報が上) | 15 | HTML解析 + Vision |
| ナビゲーション分かりやすさ | 15 | Vision |
| クリックターゲット間隔 | 15 | CSS解析 |
カテゴリ4: モバイル対応(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| レスポンシブ(375px/768px/1024px) | 25 | Playwright(マルチデバイス) |
| タップターゲット 44px以上 | 20 | CSS解析 |
| ピンチズーム対応 | 10 | Playwright |
| モバイル特化のCTA | 15 | Vision |
| 縦スクロール最適化 | 15 | Vision |
| 文字サイズ(12px以上) | 15 | CSS解析 |
カテゴリ5: パフォーマンス(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| Lighthouse Performance スコア 90+ | 25 | Lighthouse CI |
| LCP < 2.5s | 15 | Lighthouse |
| CLS < 0.1 | 15 | Lighthouse |
| TBT < 200ms | 10 | Lighthouse |
| 画像最適化(WebP/lazy) | 15 | HTML解析 |
| JS/CSSバンドル最適化 | 10 | Lighthouse |
| フォント最適化 | 10 | Lighthouse |
カテゴリ6: SEO(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| title タグ(30-60文字) | 10 | HTML解析 |
| meta description(120-160文字) | 10 | HTML解析 |
| OGP 完備 | 15 | HTML解析 |
| 構造化データ(JSON-LD) | 15 | Schema.org Validator |
| sitemap.xml 設置 | 10 | URL確認 |
| robots.txt 設置 | 5 | URL確認 |
| canonical URL | 10 | HTML解析 |
| llms.txt(AI検索対応) | 10 | URL確認 |
| 内部リンク構造 | 15 | HTML解析 |
カテゴリ7: アクセシビリティ(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| alt属性すべての画像 | 20 | axe-core |
| コントラスト比 4.5:1 以上 | 20 | axe-core |
| ARIA属性適切 | 15 | axe-core |
| キーボード操作可能 | 15 | Playwright |
| セマンティックHTML | 15 | HTML解析 |
| フォームラベル適切 | 15 | axe-core |
カテゴリ8: セキュリティ(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| HTTPS 強制 | 20 | URL確認 |
| Mixed Content なし | 20 | Playwright |
| CSP ヘッダ設定 | 15 | HTTP Response解析 |
| HSTS 設定 | 10 | HTTP Response解析 |
| XFrameOptions 設定 | 10 | HTTP Response解析 |
| 個人情報送信時の SSL 確認 | 15 | Playwright |
| OWASP 基本(XSS等)チェック | 10 | Custom checker |
カテゴリ9: 法的要件(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| プライバシーポリシー設置 | 20 | URL確認 + Claude |
| 特商法表記(該当時) | 20 | URL確認 + Claude |
| Cookie同意(GDPR / 改正個人情報保護法) | 15 | Vision + JS解析 |
| 著作権表記(フッター) | 10 | HTML解析 |
| 広告ガイドライン適合(医療・士業等) | 20 | Claude(業種別) |
| 連絡先(特商法+運営者情報) | 15 | URL確認 |
カテゴリ10: 業種適合度(100点)
| 評価項目 | 配点 | 評価ツール |
|---|---|---|
| 業種特有の信頼要素(士業=資格・医療=院長プロフィール等) | 30 | Claude(業種別) |
| 業種別 KPI 適合(ECなら購入導線・予約サイトなら予約ボタン等) | 30 | Vision |
| 業種別禁止事項を回避(医療広告ガイドライン等) | 20 | Claude |
| 競合との差別化要素 | 20 | Claude(業種別) |
4. 実装機能一覧(約20項目)
A群: 入力・基盤(5項目)
| # | 機能 | 規模 |
|---|---|---|
| A1 | URLからHP取得・解析 | 中 |
| A2 | ZIPアップロードでHP取得 | 中 |
| A3 | TERASU案件管理から API 連携で受信 | 大 |
| A4 | スクショ取得(PC/タブレット/スマホ・全ページ) | 中 |
| A5 | HTML/CSS/JS パース・前処理 | 中 |
B群: 自動評価エンジン(10カテゴリ・各1機能)
| # | 機能 | 規模 |
|---|---|---|
| B1 | デザイン評価 | 大 |
| B2 | コピー評価 | 大 |
| B3 | UX評価 | 大 |
| B4 | モバイル対応評価 | 中 |
| B5 | パフォーマンス評価(Lighthouse CI) | 中 |
| B6 | SEO評価 | 中 |
| B7 | アクセシビリティ評価(axe-core) | 中 |
| B8 | セキュリティ評価 | 中 |
| B9 | 法的要件評価 | 中 |
| B10 | 業種適合度評価 | 大 |
C群: AI統合評価(4項目)
| # | 機能 | 規模 |
|---|---|---|
| C1 | Claude Vision で全ページスクショ評価 | 大 |
| C2 | Claude Text で HTML+コピー総合評価 | 大 |
| C3 | 業界トップ100社目線評価プロンプト | 大 |
| C4 | 競合HP との比較分析 | 大 |
D群: 結果出力・改修指示書生成(5項目)
| # | 機能 | 規模 |
|---|---|---|
| D1 | スコアダッシュボード(10カテゴリ・レーダーチャート) | 中 |
| D2 | 致命的問題・改善必須・できれば改善の3段階リスト | 中 |
| D3 | Claude Code 用 改修指示書(Markdown)自動生成 | 大 |
| D4 | TERASU 案件管理 への結果送信 API | 中 |
| D5 | PDF レポート出力(クライアント・PM向け) | 中 |
E群: 自動ループ・人手不要化(4項目)
| # | 機能 | 規模 |
|---|---|---|
| E1 | スコア閾値判定(850以上で自動承認フラグ) | 小 |
| E2 | 改修後の再評価自動トリガー | 中 |
| E3 | 5回ループでエスカレーション | 小 |
| E4 | 人手介入不要モード(完全自動)切替 | 中 |
5. 各項目の詳細仕様
A1: URLからHP取得・解析
実装内容:
- URL入力 → Playwright/Puppeteer でページ取得
- Wait 5秒(JS実行完了待ち)
- HTML/CSS/JS/画像/フォント などすべて取得
- サイト全体クロール(最大10ページ)
Acceptance Criteria:
- [ ] http(s) URL を入力可能
- [ ] サブページも自動巡回
- [ ] 取得失敗時のエラー表示
A2: ZIPアップロード
実装内容:
- ZIP ファイルをドラッグ&ドロップ
- 解凍 → 一時ホスティング(Cloudflare Workers)
- ローカルURLで評価
Acceptance Criteria:
- [ ] 50MB まで対応
- [ ] index.html を自動検出
A3: TERASU案件管理から API 連携
実装内容:
- TERASU 案件管理 v2 の A1 機能と対応
- POST /api/lens/jobs(公開URL + プロジェクトID)
- レスポンス: ジョブID
- 完了通知: Webhook で TERASU 側に返信
Acceptance Criteria:
- [ ] API キー認証
- [ ] ジョブIDで進捗確認可能
- [ ] Webhook 失敗時のリトライ
A4: スクショ取得
実装内容:
- Playwright でデバイス別スクショ
- Desktop(1920x1080)
- Tablet(768x1024)
- Mobile(375x812)
- 全セクションスクロールしてフルページスクショ
Acceptance Criteria:
- [ ] 各ページ × 3デバイス = 計X枚保存
- [ ] R2 / Supabase Storage に保存
A5: HTML/CSS/JS パース
実装内容:
- Cheerio / DOMParser で HTML 解析
- CSS 抽出
- JS の構文解析(AST)
- メタ情報抽出(OGP / 構造化データ等)
Acceptance Criteria:
- [ ] 構造化データを JSON で取得
- [ ] 全要素のリストアップ
B1-B10: 各カテゴリ評価
各カテゴリの評価項目(上記「3. 評価10カテゴリ」)に基づき、自動で点数算出。
実装内容:
- 各項目を「ツール(Lighthouse/axe/Claude)」で評価
- 100点満点で算出
- 減点理由をJSON で保存
Acceptance Criteria:
- [ ] 全カテゴリの評価が5-10分で完了
- [ ] 評価ツールの失敗時は明示エラー
- [ ] 各項目の減点理由を表示
C1: Claude Vision 全ページスクショ評価
プロンプト例:
あなたは年商10億円規模のBtoB企業のCEO。
以下の納品予定HPのスクショを見て、競合と比較して10秒以内に「ダメだ」と感じる箇所を
全て厳しく指摘してください。お世辞は一切不要です。
【業界】 {industry}
【ターゲット】 {target}
【スクショ】 {screenshots}(PC・タブレット・スマホ各ページ)
評価基準:
- 業界トップ100社の中で何位の品質か
- 自分が顧客なら問い合わせするか
- 営業マンとして提案する価値があるか
【出力】(JSON)
{
"design_score": 0-100,
"ux_score": 0-100,
"mobile_score": 0-100,
"industry_fit_score": 0-100,
"fatal_issues": [], // 致命的な問題(5件以内)
"must_fix": [], // 改善必須事項(10件以内)
"should_fix": [], // できれば改善(5件以内)
"competitor_compare": "", // 競合と比べた劣後点
"worst_case_scenario": "", // このまま納品したら起きうる最悪のシナリオ
"overall_comment": "" // 総評
}
Acceptance Criteria:
- [ ] スクショを Vision API に渡して評価
- [ ] JSON で結果取得
- [ ] 評価コスト測定(1回あたり $X)
C2: Claude Text で HTML+コピー総合評価
プロンプト例:
あなたはトップBtoBコピーライター。
以下のHP の全テキストを評価してください。
【業界】 {industry}
【ターゲット】 {target}
【全テキスト】
{copies}
評価基準:
- 中小企業経営者が即問い合わせしたくなるレベルか
- 業界トップ10社の HP と比べて何位か
- ベイジ・LIG・グッドパッチが書きそうなレベルに達しているか
【出力】(JSON)
{
"copy_score": 0-100,
"readability": 0-100,
"appeal": 0-100,
"tone_consistency": 0-100,
"industry_fit": 0-100,
"improvements": [
{"section": "ヒーロー", "before": "", "after": "", "reason": ""},
...
]
}
Acceptance Criteria:
- [ ] 全テキスト抽出
- [ ] セクション別の改善案
C3: 業界トップ100社目線評価
実装内容:
- 各業種について「業界トップ100社」のリストを Vault に保存
- 評価時に「この業種なら〜社が標準」を Claude にコンテキスト提供
Acceptance Criteria:
- [ ] 業種別トップ100社リスト整備
- [ ] 評価時に自動利用
C4: 競合HP比較分析
実装内容:
- クライアント指定の競合URL 3-5件を取得
- スクショ・コピー・構造を Claude に渡して比較
- 「競合の強み」「TERASU HPの劣後点」「差別化ポイント」を出力
Acceptance Criteria:
- [ ] 競合URL指定可能
- [ ] 比較結果のヒートマップ表示
D1: スコアダッシュボード
実装内容:
- 総合スコア(0-1000)を大きく表示
- 10カテゴリのレーダーチャート
- 各カテゴリの色分け(850+ 緑 / 700-849 黄 / 700- 赤)
- スコア推移グラフ(再評価時)
Acceptance Criteria:
- [ ] レスポンシブ
- [ ] PDF/PNG エクスポート
D2: 3段階リスト
実装内容:
- 致命的(5件以内):絶対に直す
- 改善必須(10件以内):強く推奨
- できれば改善(5件以内):余裕があれば
- 各項目に「対応する/しない」チェックボックス
Acceptance Criteria:
- [ ] チェック状態を保存
- [ ] D3 の改修指示書生成と連動
D3: Claude Code 用 改修指示書 自動生成
実装内容:
- D2 でチェック付けた項目を Markdown 形式で出力
- TERASU の Claude Code 指示書フォーマットに準拠
- 「{client}」「{public_url}」等の変数展開
指示書テンプレート例:
# {client} HP 改修指示書(TERASU Lens 評価結果より)
## 総合スコア: {score} / 1000
## 致命的な問題(最優先で対応)
### 1. {issue_title}
- 該当箇所: {location}
- 問題: {description}
- 対応案: {suggested_fix}
- スコア影響: +{score_impact} 点
...
## 改善必須事項
...
## 完成後の確認
- [ ] 全項目対応完了
- [ ] TERASU Lens で再評価
- [ ] スコア850以上達成
Acceptance Criteria:
- [ ] Markdown でダウンロード可能
- [ ] クリップボードコピー
- [ ] TERASU 案件管理に直接送信
D4: TERASU案件管理 への結果送信 API
実装内容:
- POST /api/terasu-mgmt/lens-result
- ペイロード: スコア + 改修指示書 + ジョブID
- TERASU 側で受信 → workflow タスクに自動展開
Acceptance Criteria:
- [ ] API キー認証
- [ ] エラー時リトライ
D5: PDF レポート出力
実装内容:
- クライアント向け(簡略版)
- PM 向け(詳細版)
- HTML → PDF 変換(jsPDF or print-to-PDF)
Acceptance Criteria:
- [ ] ブランディング統一
- [ ] ダウンロード可能
E1: スコア閾値判定(自動承認)
実装内容:
- スコア850以上 → 「納品承認OK」フラグを TERASU 側に送信
- 850未満 → 改修ループに
Acceptance Criteria:
- [ ] 閾値設定可能(管理画面)
- [ ] 自動フラグ送信
E2: 改修後の再評価自動トリガー
実装内容:
- TERASU 側で改修完了 → Webhook で Lens に通知 → 自動再評価
- スコア推移を保存
Acceptance Criteria:
- [ ] Webhook受信
- [ ] 自動再評価
E3: 5回ループでエスカレーション
実装内容:
- 5回再評価しても850未満 → PMに通知
- スコアが下がっている場合は警告
Acceptance Criteria:
- [ ] エスカレーション通知
- [ ] スコア低下警告
E4: 人手介入不要モード(完全自動)
実装内容:
- 「自動承認モード」ON で、850以上ならクライアント承認画面まで自動進行
- OFF なら PM 確認待ち
Acceptance Criteria:
- [ ] モード切替UI
- [ ] 案件別に設定可能
6. 技術スタック
フロントエンド
- フレームワーク: Next.js 16 + React 19(SCALE Base に揃える)
- CSS: Tailwind CSS
- チャート: Chart.js or Recharts
バックエンド
- API: Cloudflare Pages Functions / Workers
- DB: Supabase(terasu_lens_* テーブル)
- キャッシュ: Cloudflare KV
- 画像ストレージ: Cloudflare R2 or Supabase Storage
評価エンジン
- Lighthouse CI: パフォーマンス/SEO/アクセシビリティ自動採点
- Playwright: ブラウザ自動操作・スクショ
- axe-core: アクセシビリティ
- W3C Validator API: HTML/CSS構文
- Cheerio: HTML解析
- textlint: 日本語文章チェック
- Claude Opus 4.7 Vision: ビジュアル評価
- Claude Opus 4.7 Text: コピー評価
認証
- API キー: TERASU 案件管理との連携
- Magic Link: 管理者ログイン
ホスティング
- Cloudflare Pages: フロント + Functions
- 本番URL: https://terasu-lens.pages.dev/
- 独自ドメイン候補: lens.terasu.scale-group.co.jp
7. 実装順序(推奨)
Phase 1: ミニマム動作(3-4営業日)
A1, A4, A5, B5, B6, B7, C1, D1, D2
→ URL受信 → スクショ → Lighthouse + axe + Claude Vision → スコア表示
(評価カテゴリ7つだけで動作)
Phase 2: 全カテゴリ評価(追加3-4営業日)
B1-B4, B8-B10, C2, C3, D3
→ 10カテゴリすべて評価可能 + 改修指示書生成
Phase 3: TERASU連携・自動ループ(追加3-4営業日)
A2, A3, C4, D4, D5, E1-E4
→ TERASU 案件管理との完全連携 + 自動承認フロー
8. 守るべきルール
バックアップ
- リポジトリは Git 管理推奨
- 編集前に必ずコミット
Claude API コスト
- キャッシュ戦略を組み込む(同一HPの再評価は差分のみ)
- 評価1回あたりのコスト目安: $0.5-2.0
- 月間コスト目安: $50-200(月100案件評価想定)
TERASU連携
- API 仕様は TERASU 案件管理 v2 開発依頼書 A群と同期
- Webhook 失敗時のリトライ機構必須
デプロイ
- 変更後は必ずデプロイ
- Cloudflare Pages
cd /Users/oogushiyuuki/株式会社SCALE/terasu-lens/ npm run build npx wrangler pages deploy ./dist --project-name=terasu-lens
9. テスト観点
基本動作
- [ ] URL入力 → 評価完了まで5-10分
- [ ] 全10カテゴリのスコアが算出される
- [ ] 改修指示書が生成される
TERASU 連携
- [ ] TERASU から API でジョブ送信→結果受信が動く
- [ ] 結果が TERASU の workflow タスクに反映される
評価の厳しさ
- [ ] 業界トップ100社レベルの基準
- [ ] 「お世辞」が含まれない
- [ ] 致命的な問題を見逃さない
マルチデバイス確認
- [ ] PC(Chrome)
- [ ] スマホ(Safari)
10. 完了状況(実装中に随時更新)
Phase 1 / Phase 2 / Phase 3 全て完了 (2026-04-28・1セッション完結) — A2 のみ R2 セットアップ要のため Phase 3 残として記録。
本番URL: https://terasu-lens.pages.dev/ / ローカル:/Users/oogushiyuuki/terasu-lens/(英語パス)/ セットアップ手順:terasu-lens/SETUP.md
| # | 機能 | 状態 | 担当 | 完了日 | 実装ファイル |
|---|---|---|---|---|---|
| A1 | URLからHP取得・解析 | 完了 | Claude | 2026-04-28 | functions/_lib/parse.ts fetchPage() |
| A2 | ZIPアップロード | 残(R2 セットアップ要) | - | - | Phase 4 として独立実施推奨。Cloudflare R2 一時ホスティング基盤が必要 |
| A3 | TERASU案件管理 API連携 (受信) | 完了 | Claude | 2026-04-28 | functions/api/jobs.ts (x-terasu-lens-key 認証) + functions/api/webhook/reevaluate.ts (再評価) |
| A4 | スクショ取得 | 完了 | Claude | 2026-04-28 | PageSpeed Insights final-screenshot 流用 (functions/_lib/pagespeed.ts) |
| A5 | HTML/CSS/JS パース | 完了 | Claude | 2026-04-28 | functions/_lib/parse.ts parseHtml() |
| B1 | デザイン評価 | 完了 (Vision 70% + 自動シグナル 30%) | Claude | 2026-04-28 | buildVisionDrivenScore('design') + buildAutoDesignSignals() (alt充足率/h1単数/画像数/favicon/CSS) |
| B2 | コピー評価 | 完了 (Vision 40% + Claude Text 40% + 自動シグナル 20%) | Claude | 2026-04-28 | buildVisionDrivenScore('copy') + Claude Text + buildAutoCopySignals() (文長/「の」連続/敬体常体混在/CTA/表記) |
| B3 | UX評価 | 完了 (Vision 65% + 自動シグナル 35%) | Claude | 2026-04-28 | buildVisionDrivenScore('ux') + buildAutoUxSignals() (フォーム項目/label/ナビ/tel・mailto/fold上CTA) |
| B4 | モバイル対応評価 | 完了 | Claude | 2026-04-28 | buildMobileScore() (PageSpeed Mobile + viewport + tap-targets + font-size + Vision) |
| B5 | パフォーマンス評価 | 完了 | Claude | 2026-04-28 | buildPerformanceFromPageSpeed() (LCP/CLS/TBT/画像/JS/CSS/フォント) |
| B6 | SEO評価 | 完了 | Claude | 2026-04-28 | buildSeoCategoryScore() (title/meta/OGP/JSON-LD/canonical/internal_links) |
| B7 | アクセシビリティ評価 | 完了 | Claude | 2026-04-28 | buildAccessibilityFromPageSpeed() (image-alt/contrast/aria/keyboard等) |
| B8 | セキュリティ評価 | 完了 | Claude | 2026-04-28 | buildSecurityScore() (HTTPS/HSTS/CSP/X-Frame/Mixed-Content/SSL/inline) |
| B9 | 法的要件評価 | 完了 | Claude | 2026-04-28 | buildLegalScore() (プライバシー/特商法/Cookie/著作権/業種別広告/連絡先) |
| B10 | 業種適合度評価 | 完了 | Claude | 2026-04-28 | buildVisionDrivenScore('industry_fit') + _lib/industries.ts 9業種ルール |
| C1 | Claude Vision 評価 | 完了 | Claude | 2026-04-28 | functions/_lib/prompts.ts buildVisionPrompt() (CEO + ベイジ + Web Designing 3視点) |
| C2 | Claude Text 評価 | 完了 | Claude | 2026-04-28 | functions/_lib/prompts.ts buildCopyPrompt() + evaluate.ts で並列実行・結果統合 |
| C3 | 業界トップ100社目線 | 完了 | Claude | 2026-04-28 | _lib/industries.ts 9業種×3-5社の代表例を Vision プロンプトに展開 |
| C4 | 競合HP比較分析 | 完了 | Claude | 2026-04-28 | functions/_lib/competitor.ts (最大5件並列fetch + Claude Text で差別化提案) |
| D1 | スコアダッシュボード | 完了 | Claude | 2026-04-28 | src/components/CategoryRadar.tsx + ScoreOverview.tsx (Recharts レーダー + 1000点) |
| D2 | 3段階リスト | 完了 | Claude | 2026-04-28 | src/components/IssueList.tsx (致命的/改善必須/できれば改善 + チェックボックス) |
| D3 | Claude Code 改修指示書 | 完了 | Claude | 2026-04-28 | src/lib/instructionDoc.ts + InstructionDocActions.tsx (.md ダウンロード + クリップボード) |
| D4 | TERASU案件管理 結果送信API | 完了 | Claude | 2026-04-28 | functions/_lib/terasu.ts sendToTerasuMgmt() (評価完了時に webhook 送信、リトライ2回) |
| D5 | PDF レポート出力 | 完了 | Claude | 2026-04-28 | globals.css @media print + InstructionDocActions.tsx window.print() |
| E1 | スコア閾値判定 | 完了 | Claude | 2026-04-28 | 850以上で result.approved = true + webhook payload に approved 含める |
| E2 | 改修後の再評価自動トリガー | 完了 | Claude | 2026-04-28 | functions/api/webhook/reevaluate.ts (TERASU 側からの POST で再評価キックオフ) |
| E3 | 5回ループでエスカレーション | 完了 | Claude | 2026-04-28 | parent_job_id を辿って iteration カウント、5回以上で escalated: true レスポンス |
| E4 | 完全自動モード | 完了 (DBスキーマ + ロジック) | Claude | 2026-04-28 | terasu_lens_jobs.auto_approve カラム追加。webhook 経由で auto_approve 指定可能 |
全Phase 実装サマリ(2026-04-28 1セッション完結)
- 新規ファイル数: 28 (TS/TSX 22 + 設定 5 + SQL 1)
- コード規模: 約 4,000行(設定除く)
- デプロイ済: https://terasu-lens.pages.dev/ / ローカル:
/Users/oogushiyuuki/terasu-lens/ - 依存パッケージ: 439 packages
- 本番動作条件: Cloudflare Pages 環境変数 (ANTHROPIC_API_KEY / SUPABASE_URL / SUPABASE_SERVICE_ROLE_KEY) と Supabase スキーマ適用が必要 →
terasu-lens/SETUP.md参照
スコア統合方式(Phase 2 強化版)
| カテゴリ | スコア構成 |
|---|---|
| デザイン | Vision 70% + 自動シグナル 30% (alt充足率/h1/画像数/favicon/CSS) |
| コピー | Vision 40% + Claude Text 40% + 自動シグナル 20% (文長/「の」連続/敬体常体/CTA/表記) |
| UX | Vision 65% + 自動シグナル 35% (フォーム項目/label/ナビ/tel・mailto/fold上CTA) |
| モバイル | PageSpeed Mobile 25% + Vision 40% + viewport/tap-targets/font 35% |
| パフォーマンス | PageSpeed (LCP/CLS/TBT/画像/JS/CSS/フォント) |
| SEO | 自前パース (title/meta/OGP/JSON-LD/canonical/internal_links) |
| アクセシビリティ | PageSpeed Accessibility |
| セキュリティ | HTTPレスポンスヘッダ (HTTPS/HSTS/CSP/X-Frame/Mixed/SSL/inline) |
| 法的要件 | HTMLパース (プライバシー/特商法/Cookie/著作権/業種別広告/連絡先) |
| 業種適合度 | Vision 100% (9業種別ルール内蔵) |
TERASU 案件管理連携フロー(A3/D4/E1-E4)
TERASU 案件管理 TERASU Lens
| |
| POST /api/jobs (terasu_project_id付) |
| + x-terasu-lens-key |
|------------------------------------------>|
| | ジョブ作成 + 評価開始
| {job_id, status: pending} |
|<------------------------------------------|
| |
| | (5-10分の評価)
| |
| POST {TERASU_MGMT_WEBHOOK_URL} |
| + x-terasu-lens-signature |
| Body: {overall_score, approved, issues, ...}
|<------------------------------------------|
| |
| 改修タスクをworkflowに自動展開 |
| |
| (改修完了後) |
| POST /api/webhook/reevaluate |
| {parent_job_id, terasu_project_id, url} |
|------------------------------------------>|
| | iteration++ で再評価
| | 5回以上でescalation
Phase 4(任意・将来拡張)
- A2 ZIPアップロード対応:Cloudflare R2 一時ホスティング基盤の構築が前提(別セッション)
- C4 拡張:競合 PageSpeed 評価追加
- E4 UI: フォームに「auto_approve」チェックボックス露出
11. 参考: 「超厳しい」を実現する Claude プロンプト全文
あなたは以下の3つの役割を兼ねるトップエキスパートです:
1. 年商10億円規模の BtoB 企業のCEO(顧客視点)
2. ベイジ・LIG・グッドパッチで主席ディレクターを務める Webディレクター(制作視点)
3. 業界誌「Web Designing」の月間レビュー担当(業界視点)
以下の納品予定HPを、上記3つの視点で同時に評価してください。
お世辞・遠慮・忖度は一切不要です。
業界トップ100社のレベルを基準に、容赦なく厳しく指摘してください。
【業界】 {industry}
【ターゲット】 {target}
【URL】 {url}
【スクショ】 {screenshots}
【全テキスト】 {copies}
【メタ情報】 {meta}
評価軸:
1. 競合との比較(業界トップ10社の中で何位レベルか)
2. CEO目線(自分が顧客なら問い合わせするか)
3. ディレクター目線(自分が制作したら恥ずかしくないか)
4. メディア目線(記事で取り上げる価値があるか)
【出力フォーマット】(JSON)
{
"overall_score": 0-1000,
"tier_in_industry": "Top 10 / Top 50 / Top 100 / Below 100",
"ceo_will_inquire": true/false,
"director_proud": true/false,
"media_worth": true/false,
"fatal_issues": [
{
"category": "design/copy/ux/mobile/perf/seo/a11y/security/legal/industry_fit",
"title": "致命的な問題のタイトル",
"location": "該当箇所",
"current_state": "現在の状態",
"issue": "なぜダメか(厳しく)",
"suggested_fix": "具体的な改善案",
"impact": "対応した時のスコア改善見込み"
}
],
"must_fix": [...], // 同形式 10件以内
"should_fix": [...], // 同形式 5件以内
"competitor_compare": {
"top_3_competitors": ["URL1", "URL2", "URL3"],
"where_terasu_loses": "競合より劣る点",
"where_terasu_wins": "競合より優れる点"
},
"worst_case_scenario": "このまま納品したら起きうる最悪のシナリオ",
"honest_overall_comment": "正直な総評(忖度なし)"
}
12. 関連ノート
- TERASU 事業構想
- TERASU 案件管理 v1(25項目完了)
- TERASU 案件管理 v2 開発依頼書 ← A群が Lens 連携
- 競合分析統合レポート
- 全部込み戦略
13. 更新履歴
| 日付 | 内容 |
|---|---|
| 2026-04-28 | 初版作成(10カテゴリ評価・約20項目・3 Phase実装計画) |
このドキュメントは別Claude Codeセッションで完全自己完結に動作することを想定。
セクション1のキックオフプロンプトをコピペするだけで、別セッションが Lens を実装フェーズに入れる。