website-finishing-director

ウェブサイト仕上げディレクター

第一印象から公開準備までを対象とする、100点満点の5段階ウェブサイト仕上げ監査です。塗装と同じように、下塗り、ベースコート、細部の仕上げ、クリアコート、最終検査の順で進めます。仕上げの工程を経ずに公開されるサイトはありません。

このスキルを使う場面

• 公開前のゲート — DNS の公開やトラフィックの誘導前に最終検証を行う
• リデザイン後の監査 — ビジュアルを全面刷新した後に、品質が低下していないか確認する
• クライアントへの引き渡し — サイトが品質基準を満たしていることを示す、構造化されたレポートを作成する
• 四半期ごとのメンテナンス — 積み重なった UX の負債、リンク切れ、古くなったコンテンツを見つける
• 対象を絞ったパス — 1つのパスだけを実行する（例：「パス2のみ」をパフォーマンス改善後に実施）

方法論の基盤

情報源:

• Nielsen Norman Group — ヒューリスティック評価フレームワーク（10のユーザビリティヒューリスティック）
• Google Web Vitals — LCP、CLS、INP のしきい値
• OWASP — セキュリティヘッダーの基本基準
• Oli Gardner / Unbounce — ランディングページのコンバージョンに関するベストプラクティス
• Don Norman — Emotional Design（本能的・行動的・内省的な各レイヤー）
• GUIA の本番環境での知見 — 公開済みウェブサイト8件。Next.js、Framer Motion、GSAP、Lenis、Railway、Docker に関する注意点を記録

基本原則: Lighthouse に合格し、メタタグが正しいウェブサイトは、技術的には有効でも、仕上がっているとは限りません。仕上げとは、「動作する」状態と「公開できる」状態の間にあるギャップを埋めることです。個々の指標をチェックリストで確認するのではなく、訪問者がサイトをどのように体験するかを、段階的かつ感情的に、複数のデバイスを通して評価する必要があります。

重要な理由: 既存のツール（Lighthouse、Screaming Frog、Awwwards）は、それぞれ1つの側面だけを監査します。ビジュアルの完成度、UX の網羅性、技術的な基盤、コンテンツの品質、ブランドとの一貫性を、順序立ててスコア化するワークフローにまとめたツールはありません。このスキルがそのツールです。

---

Claude が行うことと、あなたが判断すること

「Claude が監査を実行します。公開するものを決めるのはあなたです。」

Claude が行うこと	あなたが提供するもの
チェックリストに沿って各パスを体系的に実行する	公開中の URL またはコードベースへのアクセス
根拠を示しながら各チェックポイントを採点する	コンテキスト：ブランドの位置づけ、ターゲット層、公開スケジュール
問題を P0/P1/P2 に分類する	判断の変更（例：「MVP では P1 を許容する」）
修正案を含む最終レポートを作成する	最終的な Go/No-Go の判断
本番環境での知見をもとに GUIA スタックの注意点を指摘する	実機での検証（Claude は Safari を開けません）

ご留意ください: これはケンタウロス型のワークフローです。Claude が監査を厳密に構成し、あなたが実機を自分の目で確認して評価を検証します。

---

このスキルでできること

1. 5秒間の第一印象テスト — 最初の瞬間における明確さ、感情的な適合性、CTA の視認性を評価する
2. 技術基盤の監査 — パフォーマンス（Core Web Vitals）、SEO の基本、セキュリティヘッダー、リンク切れを確認する
3. UX の網羅性チェック — コンポーネントの状態、フォームの動作、アニメーションの完成度、モバイルでの使いやすさを確認する
4. コンテンツとブランドの検証 — コピーの品質、プレースホルダーの検出、トーンの一貫性、ビジュアルの統一感を確認する
5. 複数デバイス対応と公開準備 — ブラウザテスト、OG プレビュー、アナリティクス、404ページ、ファビコンを確認する

使い方

公開前のウェブサイト全体の監査

I'm about to launch [site URL]. Run a full website-finishing-director audit (all 5 passes).
Brand quadrant: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm].
Target audience: [who].

特定の修正後に単一パスを実行

I just optimized performance on [site URL]. Run Pass 2 only (Technical Foundation).

ランディングページの簡易監査

Audit this landing page: [URL]. Use the Landing Page profile (passes 1, 2, 4).

---

手順

この監査を実行する際は、5つのパスを順番に進めてください。各パスは前のパスを土台とするため、仕上げより先に基盤を確認します。各チェックポイントを採点し、問題を優先度で分類してから、最終レポートを作成してください。

監査プロファイル

すべてのサイトで5つのパスをすべて実行する必要はありません。プロジェクトに合ったプロファイルを選択してください。

プロファイル	パス	使用するケース
ランディングページ	1, 2, 4	1ページ構成のキャンペーンページまたは製品ページ
ウェブサイト全体	1, 2, 3, 4, 5	ナビゲーション、フォーム、コンテンツを含む複数ページのサイト
Eコマース	2, 3, 5	カート、チェックアウト、製品ページを備えたストア

対象プロファイルでパスを減らす場合は、合計点を比例配分して調整してください。Go／No-Go のしきい値は、素点ではなくパーセンテージスコアに適用されます。

---

パス 1：第一印象（15 点）

「訪問者は5秒で何を理解し、どう感じるでしょうか？」

ホームページ（またはヒーローセクション）を5秒間表示します。以下の5つの質問に回答してください。各3点です。

## Pass 1 — First Impression (5-Second Test)

### 1. WHAT is this? (3 pts)
Can a visitor identify what the site/product/service IS?
[ ] 3 — Immediately clear, no ambiguity
[ ] 2 — Clear after reading subheadline
[ ] 1 — Vague, requires scrolling to understand
[ ] 0 — No idea what this is

### 2. WHO is it for? (3 pts)
Are there signals identifying the target audience?
[ ] 3 — Obvious demographic/psychographic signals
[ ] 2 — Implied but not explicit
[ ] 1 — Generic ("everyone")
[ ] 0 — Actively confusing (signals wrong audience)

### 3. WHY should I care? (3 pts)
Is the value proposition or benefit visible?
[ ] 3 — Clear benefit, emotionally resonant
[ ] 2 — Feature-focused but understandable
[ ] 1 — Present but buried
[ ] 0 — No value proposition visible

### 4. WHAT do I do next? (3 pts)
Is the primary CTA visible and clear?
[ ] 3 — CTA visible above fold, action-specific text
[ ] 2 — CTA present but generic ("Learn more")
[ ] 1 — CTA below the fold or hard to find
[ ] 0 — No CTA visible

### 5. HOW does it feel? (3 pts)
Does the emotional tone match the brand quadrant?
[ ] 3 — Perfect quadrant match (warm brand = warm design)
[ ] 2 — Mostly aligned, minor dissonance
[ ] 1 — Noticeable mismatch (warm brand + cold design)
[ ] 0 — Opposite quadrant (positioning confusion)

### Pass 1 Score: ___/15

Verdict:
- 12-15: PASS — First impression is clear and emotionally aligned
- 8-11: NEEDS WORK — Visitor gets it, but slowly or with friction
- <8: FAIL — Redesign the above-fold experience

統合：感情的な印象をweb-design-directorの象限システムと比較してください。ブランドが温かく穏やかなのに、サイトが冷たく活動的に感じられる場合は、スコアに関係なくP0です。

このパスにおけるGUIAの注意点：

• CTAに/contact/ページではなくCalendlyのURLをハードコードしている（分析に支障が出ます）
• 温かみのあるコピーのトーンと冷たいUI要素を混在させている（テラコッタの配色＋等幅フォント＝混乱）

---

パス 2：技術基盤（25 点）

「インフラストラクチャは、その上に構築するのに十分堅牢ですか？」

## Pass 2 — Technical Foundation

### Performance (10 pts)

| Metric | Target | Score |
|--------|--------|-------|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 0-3 pts |
| INP (Interaction to Next Paint) | ≤ 200ms | 0-2 pts |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0-2 pts |
| Lighthouse Performance score | ≥ 85 | 0-3 pts |

Scoring:
- LCP: 3 = ≤2.5s, 2 = ≤4.0s, 1 = ≤6.0s, 0 = >6.0s
- INP: 2 = ≤200ms, 1 = ≤500ms, 0 = >500ms
- CLS: 2 = ≤0.1, 1 = ≤0.25, 0 = >0.25
- Lighthouse: 3 = ≥90, 2 = ≥85, 1 = ≥70, 0 = <70

### SEO Basics (8 pts)

- [ ] (2 pts) Canonical URLs defined + trailing slash consistent
- [ ] (1 pt) Meta titles unique per page (≤60 chars)
- [ ] (1 pt) Meta descriptions present per page (≤160 chars)
- [ ] (1 pt) Sitemap.xml accessible and valid
- [ ] (1 pt) robots.txt present and correct
- [ ] (1 pt) Structured data present (JSON-LD)
- [ ] (1 pt) Alt text on all images

### Security & Links (7 pts)

- [ ] (2 pts) HTTPS enforced (no mixed content)
- [ ] (2 pts) Security headers present (CSP, X-Frame-Options, HSTS, X-Content-Type-Options)
- [ ] (1 pt) No broken internal links (404s)
- [ ] (1 pt) No broken external links
- [ ] (1 pt) No exposed source maps or debug endpoints in production

### Pass 2 Score: ___/25

Verdict:
- 21-25: SOLID — Ship it
- 16-20: ACCEPTABLE — Fix P0s, ship with P1 backlog
- 11-15: FRAGILE — Significant technical debt
- <11: BROKEN — Do not launch

このパスにおけるGUIAの注意点：

• next.config.jsにtrailingSlash: trueがない（2026年1月、Rental-CRMでインデックス解除の原因になりました）
• 'use client'コンポーネントにexport const metadataを設定している（メタデータがサーバーサイドでレンダリングされません）
• モジュールレベルでSDKを初期化している（環境変数がないとビルドに失敗します。関数内で遅延初期化してください）
• echoで設定したVercel環境変数に末尾の改行が含まれる（代わりにprintfを使用してください）
• Nixpacksのビルド中にRailwayの*.railway.internalホスト名に到達できない（パブリックURLを使用してください）

---

パス 3：UXの完全性（25 点）

「サイトは、うまくいく場合だけでなく、現実の利用状況にも対応していますか？」

## Pass 3 — UX Completeness

### Component States (8 pts)

For EACH interactive component (buttons, cards, forms, modals, lists):
- [ ] (2 pts) Loading state — skeleton, spinner, or progressive render
- [ ] (2 pts) Error state — clear message + recovery action
- [ ] (2 pts) Empty state — helpful message, not blank screen
- [ ] (2 pts) Success state — confirmation feedback

Score: deduct per missing state across all components.
8 pts = all states covered. -1 per missing state (cap at 0).

### Forms (6 pts)

- [ ] (1 pt) Client-side validation with clear error messages
- [ ] (1 pt) Server-side validation (not just client)
- [ ] (1 pt) Success feedback after submission (toast, redirect, or inline)
- [ ] (1 pt) Submit button disabled during processing (no double-submit)
- [ ] (1 pt) Spam protection (honeypot, reCAPTCHA, or rate limiting)
- [ ] (1 pt) Privacy policy link near form (GDPR)

### Animation Polish (6 pts)

- [ ] (1 pt) `viewport={{ once: true }}` on scroll animations (no replay on scroll-back)
- [ ] (1 pt) `useGSAP` hook used (not `useEffect`) for GSAP animations
- [ ] (1 pt) `prefers-reduced-motion` respected (disable or reduce animations)
- [ ] (1 pt) No animation blocks content access (content visible even if animation fails)
- [ ] (1 pt) Lenis initialized correctly (not Locomotive Scroll)
- [ ] (1 pt) Exit animations don't cause layout shift

### Mobile Usability (5 pts)

- [ ] (1 pt) Touch targets ≥ 44px (iOS HIG standard)
- [ ] (1 pt) No horizontal overflow / horizontal scroll
- [ ] (1 pt) Font sizes ≥ 16px for body text (prevents iOS zoom)
- [ ] (1 pt) Sticky/fixed elements don't overlap content
- [ ] (1 pt) Scroll behavior works correctly (no scroll-jacking that traps users)

### Pass 3 Score: ___/25

Verdict:
- 21-25: COMPLETE — Real-world usage covered
- 16-20: MOSTLY THERE — Edge cases need attention
- 11-15: INCOMPLETE — Users will hit dead ends
- <11: UNFINISHED — UX not production-ready

このパスにおけるGUIAの注意点：

• GSAPとReact 18 Strict Modeの組み合わせでは、開発環境でアニメーションが2回実行されます（useEffectではなくuseGSAPを使用してください）
• グローバルCSSのa { color: var(--color-coral) }が、アンカーCTAのTailwind text-whiteを上書きします（インラインのstyle={{ color: 'white' }}を使用してください）
• Framer MotionのAnimatePresenceの終了アニメーションは、Next.js App Routerで正しく動作しません
• 同時に多数のScrollTriggerインスタンスを使うと、モバイルのパフォーマンスが低下します
• Lenisのパッケージ名はnpm install lenisです（@studio-freight/lenisではありません）

---

パス 4：コンテンツとブランド（20 点）

「コンテンツは完成していて、一貫性があり、ブランドに合っていますか？」

## Pass 4 — Content & Brand

### Copy Quality (8 pts)

- [ ] (2 pts) No placeholder text detected ("Lorem ipsum", "[Your Name]", "Coming soon",
      "example.com", "TODO", empty sections)
- [ ] (1 pt) No spelling or grammar errors
- [ ] (1 pt) Link text is descriptive (not "click here" or naked URLs)
- [ ] (1 pt) CTA copy is specific ("Start free trial" not "Submit")
- [ ] (1 pt) Heading hierarchy is logical (H1 → H2 → H3, one H1 per page)
- [ ] (1 pt) Alt text is descriptive (not "image1.png" or empty)
- [ ] (1 pt) Phone numbers, emails, addresses are real (not placeholder)

### Brand Voice (6 pts)

- [ ] (2 pts) Tone matches brand positioning (warm/cold, formal/casual)
- [ ] (2 pts) Voice is consistent across all pages (same person "speaking")
- [ ] (1 pt) No AI-smoothing markers ("Don't hesitate to contact us",
      "In today's fast-paced world", "It's important to note that")
- [ ] (1 pt) CTAs match the emotional quadrant (warm brand = inviting CTA, not aggressive)

### Visual Consistency (6 pts)

- [ ] (1 pt) Color palette used consistently (no off-brand colors)
- [ ] (1 pt) Typography hierarchy clear (display, heading, body, caption — max 2-3 fonts)
- [ ] (1 pt) Spacing rhythm consistent (not random padding between sections)
- [ ] (1 pt) Icon style uniform (don't mix outline, filled, and emoji)
- [ ] (1 pt) Image treatment consistent (all photos same filter/tone, or all illustrations)
- [ ] (1 pt) Component style consistent (cards, buttons, inputs follow same pattern)

### Pass 4 Score: ___/20

Verdict:
- 17-20: POLISHED — Content is finished and on-brand
- 13-16: GOOD — Minor inconsistencies, shippable
- 9-12: ROUGH — Content needs editing pass
- <9: UNFINISHED — Major content gaps or brand mismatch

このパスにおけるGUIAの注意点：

• CalendlyのURLは、正しい担当者（Valeria、Matthieu、またはクライアント）に一致させる必要があります
• 温かみのあるコピー（「お客様の課題を理解しています」）と冷たいUI（ダークモード、等幅フォント、鋭い角）を混在させている
• AI生成コピーの検出：公開前に二重改行を削除してください（LinkedInでAI生成の痕跡になります）
• credou.bzhのコピー方針：仕組みを最初に説明し、履歴書や経歴／タイムラインは載せません

---

パス 5：デバイス間の確認と公開準備（15 点）

「どの環境でも動作し、すべて公開の準備ができていますか？」

## Pass 5 — Cross-Device & Launch

### Browser Testing (5 pts)

Test on the 3 major browsers. Score per browser:
- [ ] (2 pts) Safari — renders correctly, animations work, fonts load
- [ ] (2 pts) Chrome — renders correctly, animations work, fonts load
- [ ] (1 pt) Firefox — renders correctly, no major breaks

Per browser, check: layout, animations, fonts, forms, scroll behavior.
Deduct 1 pt per browser with visual bugs. Deduct 2 pts per browser with functional bugs.

### Device Testing (4 pts)

- [ ] (2 pts) Mobile (375px) — full site usable, no content cut off
- [ ] (1 pt) Tablet (768px) — layout adapts, no awkward breakpoints
- [ ] (1 pt) Desktop (1440px) — content doesn't stretch or float in empty space

### Launch Readiness (6 pts)

- [ ] (1 pt) Analytics installed and firing (GA4, Plausible, or equivalent)
- [ ] (1 pt) OG image renders correctly (test with opengraph.xyz or Twitter card validator)
- [ ] (1 pt) 404 page exists and is styled (not default browser/framework error)
- [ ] (1 pt) Favicon present in all sizes (16, 32, 180, 192, 512 — or SVG adaptive)
- [ ] (1 pt) Google Search Console configured (or equivalent)
- [ ] (1 pt) Social preview correct on LinkedIn, Twitter, WhatsApp

### Pass 5 Score: ___/15

Verdict:
- 12-15: LAUNCH READY — Ship it
- 9-11: ALMOST — Fix critical device/browser issues
- <9: NOT READY — Cross-device experience is broken

このパスにおけるGUIAの注意点：

• LenisのスムーズスクロールにはSafariで既知の問題があります。慎重にテストしてください
• 末尾に改行があるVercel環境変数は、OG画像のURLを壊します
• CI/CDで成功と報告される前に、Dockerのヘルスチェックが通過する必要があります
• deploy.shはflockを使用します。VPS上で同時にデプロイはできません
• ResendのサブドメインDNSでは、send.send.<zone>は不自然に見えますが、正しい設定です（Resendがsend.プレフィックスを追加します）

---

ステップ 6：最終レポートの生成

該当するすべてのパスを実行した後、レポートをまとめます。

## Final Report Template

# Website Finishing Audit: [Site Name]

**URL:** [https://...]
**Date:** [YYYY-MM-DD]
**Profile:** [Landing Page / Full Website / E-commerce]
**Auditor:** [Name] + Claude (website-finishing-director)

---

## Score Summary

| Pass | Name | Score | Max | Status |
|------|------|-------|-----|--------|
| 1 | First Impression | __/15 | 15 | [PASS/NEEDS WORK/FAIL] |
| 2 | Technical Foundation | __/25 | 25 | [SOLID/ACCEPTABLE/FRAGILE/BROKEN] |
| 3 | UX Completeness | __/25 | 25 | [COMPLETE/MOSTLY/INCOMPLETE/UNFINISHED] |
| 4 | Content & Brand | __/20 | 20 | [POLISHED/GOOD/ROUGH/UNFINISHED] |
| 5 | Cross-Device & Launch | __/15 | 15 | [READY/ALMOST/NOT READY] |
| **TOTAL** | | **__/100** | **100** | |

---

## Verdict

| Score Range | Verdict |
|-------------|---------|
| 85-100 | LAUNCH READY |
| 70-84 | CONDITIONAL — fix P0s then ship |
| 50-69 | NEEDS WORK — significant issues |
| <50 | NOT READY — major gaps |

**Override rule:** 1 unresolved P0 = NOT READY, regardless of total score.

**VERDICT: [LAUNCH READY / CONDITIONAL / NEEDS WORK / NOT READY]**

---

## Issues

### P0 — Blockers (must fix before launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P1 — Important (fix within 1 week of launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P2 — Nice-to-have (backlog)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

---

## Strengths

- [What the site does well — acknowledge good work]
- [Specific design/technical/content wins]

## Recommendations

1. [Highest-priority improvement]
2. [Second priority]
3. [Strategic suggestion for next iteration]

---

## Sign-off

- [ ] All P0s resolved
- [ ] P0 + P1 resolved (optimal)
- [ ] Stakeholder review completed
- [ ] Go-live date confirmed: ____________

---

例

例 1：ウェブサイト全体の監査 — credou.bzh

コンテキスト：コンサルタントの個人ブランドサイトです。温かく穏やかな象限です。Next.js 16、Framer Motion、Lenisを使用しています。コピーのバージョン3を完成させ、デプロイしたところです。

入力：

credou.bzhで、ウェブサイト全体のwebsite-finishing-director監査を実行してください。ブランドの象限：温かく穏やか。対象：AIの統合に苦労している意思決定者。

出力：

Webサイト仕上げ監査：credou.bzh

URL: https://credou.bzh 日付: 2026-02-12 プロファイル: Webサイト全体 監査担当者: Matthieu + Claude（website-finishing-director）

---

スコア概要

パス	名前	スコア	最大	ステータス
1	第一印象	13/15	15	合格
2	技術基盤	19/25	25	許容範囲
3	UXの完成度	18/25	25	ほぼ完成
4	コンテンツとブランド	17/20	20	洗練済み
5	クロスデバイスと公開	11/15	15	あと一歩
合計		78/100	100

---

判定

条件付き — スコアは78/100です。P0を修正してから公開してください。

---

問題点

P0 — ブロッカー

#	パス	問題	場所	修正
1	2	セキュリティヘッダーが未設定（CSP、X-Frame-Options なし）	next.config.js	CSP、X-Frame、HSTS、X-Content-Type を含む headers() 設定を追加
2	5	404ページがNext.jsのデフォルトエラー	/app/not-found.tsx	Papier/Encreテーマに合ったスタイル付き404ページを作成

P1 — 重要

#	パス	問題	場所	修正
1	2	eslint.config.js がない	プロジェクトルート	ESLintのフラット設定を追加
2	3	prefers-reduced-motion に未対応	globals.css	アニメーションを無効にする @media (prefers-reduced-motion: reduce) を追加
3	3	コンテンツへのスキップリンクがない	layout.tsx	視覚的に隠されたスキップリンクを追加
4	5	WhatsAppでソーシャルプレビューをテストしていない	OG画像	WhatsAppで共有した際にOG画像が表示されることを確認

P2 — あるとよい

#	パス	問題	場所	修正
1	4	「Le plan」セクションのカードは、間隔にもっと変化をつけられる	HomeContent.tsx	カードの行ごとに縦方向のパディングを変える

---

強み

• コピー v3（アーティキュレーションのボトルネック）は切れ味がある — 仕組みを先に示し、CVで水増ししていない
• Papier/Encreのデュアルテーマに一貫性があり、ブランドに合っている
• グレインテクスチャとボーダーレスカードが、テンプレート的ではない本物の温かみを生み出している
• エッジでレンダリングされるOG画像は、SEOに大きく貢献している

推奨事項

1. セキュリティヘッダーを修正（P0）— 15分の作業で、セキュリティへの効果が大きい
2. カスタム404ページを作成（P0）— リンク切れでもブランド体験を維持する
3. prefers-reduced-motion を追加（P1）— アクセシビリティ要件に準拠する

---

これが効果的な理由：この監査では、「技術的にデプロイ済み」と「実際に完成している」のギャップを捉えています。サイトは第一印象とコンテンツのスコアは良好ですが、インフラ面（セキュリティヘッダー、404）に不足があります。優先順位を付けずに個別に指摘するだけの純粋なLighthouse監査では、この点を見落とす可能性があります。

---

例2：ランディングページ監査 — SaaS製品のローンチ

背景：生産性ツールの新しいSaaSランディングページ。Cold+Activeの象限。フォームのない単一ページで、CTAはウェイトリストにリンクします。

入力：

Landing Pageプロファイル（パス1、2、4）でこのランディングページを監査してください：taskflow.app。象限：Cold+Active。対象ユーザー：エンジニアリングマネージャー。

出力：

Webサイト仕上げ監査：TaskFlow

URL: https://taskflow.app 日付: 2026-02-12 プロファイル: ランディングページ（パス1、2、4） 監査担当者: 製品チーム + Claude（website-finishing-director）

---

スコア概要

パス	名前	スコア	最大	ステータス
1	第一印象	9/15	15	要改善
2	技術基盤	22/25	25	良好
4	コンテンツとブランド	11/20	20	粗削り
合計		42/60	60	（70%）

---

判定

条件付き — スコアは70%です。パス1のP0への対応が必要です。

---

問題点

P0 — ブロッカー

#	パス	問題	場所	修正
1	1	これは何ですか？のスコアが1/3 — ヒーローで製品カテゴリが不明確	ヒーローセクション	タグラインの上に「エンジニアリングチーム向けのプロジェクト追跡」と1行追加
2	4	ストック写真付きのプレースホルダー推薦文が3件ある	ソーシャルプルーフセクション	セクション全体を削除するか、ベータ版の実ユーザーのコメントに差し替える

P1 — 重要

#	パス	問題	場所	修正
1	1	CTA が「Get Started」となっています。ウェイトリスト向けとしては一般的すぎます	ヒーロー CTA	「Join the Waitlist」または「Request Early Access」に変更します
2	4	AI による文章の平滑化を検出：「In today's fast-paced engineering landscape...」	ヒーローのサブタイトル	書き直します。直接的かつ具体的にし、余計な文言を省きます
3	4	機能アイコンに塗りつぶしとアウトラインのスタイルが混在しています	機能グリッド	アイコンのスタイルを統一します

P2 — あるとよい改善点

#	パス	問題	場所	修正
1	2	構造化データがありません（Product または SoftwareApplication スキーマがありません）	<head>	JSON-LD SoftwareApplication スキーマを追加します
2	4	フッターの著作権表示が 2025 になっています	フッター	2026 に更新します

---

強み

• 技術基盤は堅実です（22/25）。高速で、最適化も十分です
• ダーク UI とグラデーションのアクセントが、Cold+Active 象限にぴったり合っています
• レスポンシブレイアウトは、各ブレークポイントで適切に機能します

推奨事項

1. ヒーローを明確にします。訪問者が 3 秒で製品カテゴリを理解できるようにします
2. 偽の推薦文は削除します。偽のソーシャルプルーフを掲載するより、空白のほうが適切です
3. CTA を実際のアクションに合わせて書き直します（「get started」ではなく、ウェイトリストへの登録）

---

これが効果的な理由：Landing Page プロファイルでは、UX の完全性（パス 3）とデバイス間の検証（パス 5）を省き、1 ページにとって最も重要な点、つまり明確に伝わるか、技術基盤が堅実か、コンテンツに偽りがないかに焦点を当てます。70% というスコアは、修正すれば公開可能であることを示しています。P0 はエンジニアリング上の問題ではなく、コピーの問題です。

---

スキルの適用範囲（限界の把握）

このスキルが特に有効な用途：

• あらゆるウェブサイト（静的、動的、SPA、SSR）のローンチ前検証
• クライアントへの引き継ぎ用の構造化された監査レポートの生成
• 技術的に動作する状態から、本当に公開できる状態に仕上げる際の「最後の詰め」の不足を発見
• GUIA スタック（Next.js、Framer Motion、GSAP、Lenis）を使用するチーム。よくある落とし穴が組み込まれています

このスキルがあまり適さない用途：

• 詳細なパフォーマンスエンジニアリング — Lighthouse、WebPageTest、または Chrome DevTools を直接使用します
• アクセシビリティ監査（WCAG 準拠） — 基本項目は確認しますが、完全なアクセシビリティ監査ではありません。axe-core または WAVE を使用します
• セキュリティ侵入テスト — ヘッダーを確認しますが、脆弱性は検査しません。OWASP ZAP を使用します
• コンバージョン率最適化 — CRO には landing-page-optimizer を使用します。このスキルは CTA が存在するかを確認しますが、コンバージョンにつながるかは確認しません
• デザインの方向性 — ビジュアルの方向性を決めるには web-design-director を使用します。このスキルは実装を検証します

品質チェックポイント

監査結果を受け入れる前に、次の点を確認してください：

• 5 つのパスすべて（またはプロファイルに応じたパス）のスコアが付けられている
• 合計ポイントが一致している（完全な監査では 15 + 25 + 25 + 20 + 15 = 100）
• すべての P0 に具体的な修正案がある（単に「改善する」ではない）
• 判定がオーバーライドルールに従っている（P0 が 1 つでもあれば NOT READY）
• 強みのセクションで、実際の成果が認められている（問題点だけではない）

---

反復ガイド

「1 回目で明白な問題を見つけ、2 回目で微妙な問題を見つけます。」

推奨する反復パターン

パス	焦点	問いかける内容
1 回目の監査	全体の確認	「何が壊れていますか？何が足りませんか？何がブランドイメージと合っていませんか？」
2 回目の監査（修正後）	P0 の検証	「ブロッカーは実際に修正されていますか？修正によってリグレッションが発生していませんか？」
3 回目の監査（ローンチ前）	仕上げ	「この URL を公開して誇らしいと思えますか？」

便利なフォローアッププロンプト

• 「パス 2 だけ再実行してください。セキュリティヘッダーと 404 ページを修正しました。」
• 「ホームページと概要ページでブランドのトーンが一貫していないようです。パス 4 を詳しく確認してください。」
• 「E-commerce プロファイルに照らしてスコアを付けてください。チェックアウトフローを追加しました。」
• 「この監査を前回の監査と比較し、改善した点を示してください。」

---

習熟度曲線

使用回数	体験すること
1回目の監査	気付いていなかった抜け漏れ（特に状態とモバイル）を発見します
3回目の監査	仕上げを後付けするのではなく、ワークフローに組み込むようになります
10回目の監査	チェックリストが身に付くことで、問題の少ないサイトを公開できるようになります

プロのヒント：Pass 1（第一印象）は、最後だけでなく完成度が50％の時点でも実施してください。ポジショニングの不一致を早期に見つければ、再設計にかかる時間を削減できます。

---

チェックリストとテンプレート

リリース前のクイックチェックリスト（5分）

## Quick Check (non-negotiable minimums)

- [ ] Site loads in < 4s on mobile
- [ ] CTA visible above the fold
- [ ] No placeholder text anywhere
- [ ] No broken links on main pages
- [ ] HTTPS enforced
- [ ] 404 page exists
- [ ] OG image renders

If ALL checked → safe to soft-launch
If ANY unchecked → run full audit

GUIA スタックチェックリスト（Next.js + Framer + GSAP）

## GUIA Stack Finishing Checklist

### Next.js Config
- [ ] trailingSlash: true in next.config.js
- [ ] export const metadata on server components (not 'use client')
- [ ] Lazy SDK init (getSupabase(), getStripe()) — not module-level
- [ ] sitemap.ts + robots.ts present

### Animation
- [ ] useGSAP (not useEffect) for GSAP
- [ ] viewport={{ once: true }} on scroll animations
- [ ] prefers-reduced-motion media query
- [ ] Lenis (not Locomotive Scroll)

### CSS
- [ ] Global a{color} doesn't override CTA text — use inline style if needed
- [ ] No horizontal overflow on mobile
- [ ] Touch targets ≥ 44px

### Deploy
- [ ] Env vars set with printf (no trailing newline)
- [ ] Docker healthcheck passes before success report
- [ ] deploy.sh flock prevents concurrent deploys

危険信号チェックリスト

## Warning Signs in Your Audit

- [ ] Score is 85+ but something still "feels off" → trust your gut, re-examine Pass 1
- [ ] All passes score well except one pass scores <50% → that pass is a blocker
- [ ] P0 list has more than 3 items → the site isn't ready, period
- [ ] Multiple P2s in the same area → that's actually a P1 (systemic issue)
- [ ] "It works on my machine" for any browser test → test on real devices

---

他の ClawFu スキルとの連携

スキル	連携ポイント
web-design-director	構築前に使用します。感情的な象限を決定し、Pass 1 でそれに照らして検証します。
design-trends-2026	Pass 4 のビジュアルの一貫性で、現在のトレンドとの整合性を参照できます
minimalist-image-director	Pass 4 の画像処理の一貫性
landing-page-optimizer	この監査に合格した後のコンバージョン最適化 — CRO は基盤が機能していることを前提とします
landing-page-copy	Pass 4 のコピー品質 — コピーに問題がある場合は、このスキルに依頼して書き直します

ワークフローの順序：

web-design-director → [build site] → website-finishing-director → [fix issues] → landing-page-optimizer
(direction)            (code)         (QA/finishing)               (iterate)      (CRO/optimization)

---

参考資料

• Nielsen, Jakob. 「10 Usability Heuristics for User Interface Design」（1994年、2020年更新）— UX の完全性チェックの基盤
• Google. 「Web Vitals」— LCP、CLS、INP のしきい値の定義
• OWASP. 「Secure Headers Project」— セキュリティヘッダーの推奨事項
• Gardner, Oli. 「101 Landing Page Optimization Tips」（Unbounce）— リリース前のコンバージョンチェックリスト
• Norman, Don. 「Emotional Design」（2004年）— 本能的・行動的・内省的なデザイン評価
• GUIA Production Memory — .claude/memory/agents/webdesign.md、seo.md、devops.md、gotchas.md

関連スキル

• web-design-director — ビジュアルディレクションのフレームワーク（このスキルの使用前に実施）
• design-trends-2026 — Pass 4 の検証に使う現在のビジュアルトレンド
• minimalist-image-director — 画像の一貫性を保つための AI 写真ディレクション
• landing-page-optimizer — コンバージョン最適化（このスキルの使用後に実施）
• ai-video-qa — 動画コンテンツ向けの関連 QA スキル（同じ採点方針）

---

スキルのメタデータ

name: website-finishing-director
category: ai-design
subcategory: quality-assurance
version: 1.0
author: GUIA
source_expert: Nielsen Norman Group + Google Web Vitals + OWASP + GUIA Production Memory (8 shipped sites)
source_work: null
difficulty: intermediate
mode: centaur
estimated_value: QA/finishing audit engagement (~1500-3000 EUR per site)
tags: [web-design, qa, audit, finishing, pre-launch, ux, performance, seo, brand, cross-device, scoring]
created: 2026-02-12
updated: 2026-02-12

---

このスキルは GUIA Premium Marketing Skills Library の一部であり、AI の基礎と技術的な実装をつなぐ 201 レイヤーです。