【AI臭さを消す】Claude Design Iteratorで「パープルグラデーション病」を治す―10回の反復で人間デザイナー級に進化

「あなたのランディングページ、AI臭いですよ」の衝撃

開発者のKieran Klaassen氏が放った一言が、Web開発コミュニティに衝撃を与えている。

「あなたのランディングページはAI生成っぽく見えます。パープルのグラデーション、Interフォント、ありきたりなレイアウト、あの誰でも分かるバイブコーディングされた美学。」

この指摘は痛烈だが、的を射ている。ChatGPTやClaude、v0.devなどのAIツールでデザインを生成すると、なぜか似たような「AI臭い」見た目になる。

パープル系のグラデーション、丸いボタン、Interフォント、左右対称なレイアウト――これらは「AI生成デザインの3大症状」と呼ばれるほど、一目で「これ、AIで作ったな」とバレてしまう。

しかし、Klaassen氏は問題を指摘するだけではなかった。「Claude Design Iterator」という解決策も同時に提示したのだ。

Design Iteratorとは何か：AIがAI臭さを修正する逆説

Claude Design Iteratorは、Klaassen氏が開発したClaudeエージェントで、「AI生成デザインのAI臭さを、AIが段階的に修正する」という興味深いツールだ。

核心的なアイデア：10回の反復による段階的改善

Design Iteratorの革新性は、「一発生成」ではなく「10回の反復改善」にある。

従来のAI生成	Design Iterator
1回の生成で完成を目指す	10回の反復で段階的に改善
結果が予測不能（運ゲー）	体系的な改善プロセス
フィードバックループなし	各反復で視覚的評価→改善
「パープルグラデーション病」に陥る	AI臭さを段階的に除去
開発者が手動で修正必要	自動で人間らしいデザインに進化

なぜ反復が効果的なのか

Klaassen氏は次のように説明している：

「10回目の反復までには、デザイナーが作ったように見えます。一つの天才的なアイデアによるのではなく、小さな改善が積み重なるからです。」

これは「複利効果」に似ている。1回の改善では劇的な変化はないが、10回積み重ねると質的な変容が起こる。

• 反復1-3回目：構造的な問題を修正（レイアウト、階層構造）
• 反復4-7回目：視覚的要素を洗練（色、タイポグラフィ、スペーシング）
• 反復8-10回目：細部の仕上げ（シャドウ、アニメーション、微調整）

動作メカニズム：スクリーンショット→分析→改善→繰り返し

Design Iteratorは、完全に自動化された4段階サイクルを繰り返す。

4段階サイクルの詳細

ステップ1：スクリーンショット取得

Puppeteer（ヘッドレスブラウザ）を使用して、現在のデザインの状態を視覚的にキャプチャする。

• 対象：ランディングページ、ヒーローセクション、フィーチャーセクション等
• 解像度：デスクトップビュー（1920×1080推奨）
• 保存形式：PNG画像

ステップ2：分析実施

Claudeがスクリーンショットを視覚的に分析し、3～5個の改善ポイントを特定する。

ステップ3：実装

分析結果に基づいて、Claudeがコードを自動修正する。

• CSSの調整（色、サイズ、スペーシング）
• HTMLの構造改善（セマンティックタグの使用）
• レイアウトの微調整（FlexboxやGridの最適化）

ステップ4：ドキュメント化

各反復の変更内容を記録し、次のラウンドへ引き継ぐ。

## 反復 3/10

現在の状態分析：
- ✅ レイアウトの基本構造は改善済み
- ⚠️ ヘッドラインが平坦すぎる（太さのバリエーション不足）
- ⚠️ CTAボタンが目立たない（色のコントラスト不足）
- ⚠️ スペーシングが均一すぎる（呼吸感の欠如）

このラウンドの変更：
1. ヘッドラインを font-weight: 700 → 800 に変更
2. CTAボタンの背景色を #6366f1 → #dc2626 に変更（赤系で強調）
3. セクション間の margin-bottom を 64px → 96px に拡大

スクリーンショット： [新規画像取得]

ステップ5：繰り返し

指定回数（デフォルト10回）まで、ステップ1～4を自動で繰り返す。人間の介入は不要。

セットアップと設定方法：実践ガイド

Design Iteratorの設定は、GitHubのdesign-iterator.mdファイルを使用する。

前提条件

• Claude DesktopまたはCline（VSCode拡張）がインストール済み
• Node.js（Puppeteerのため）
• 対象コンポーネントのファイルパス確認

ステップ1：エージェントファイルの配置

GitHubからdesign-iterator.mdをダウンロードし、Claudeが認識できる場所に配置する。

# Claude Desktopの場合
~/.claude/agents/design-iterator.md

# Cline（VSCode）の場合
プロジェクトルート/.cline/agents/design-iterator.md

ステップ2：Puppeteerのインストール

npm install puppeteer

ステップ3：エージェントの起動

Claudeに以下のように指示する：

フィーチャーセクション（src/components/Features.tsx）を10回反復改善してください。
スクリーンショットはlocalhost:3000/featuresから取得してください。

ステップ4：反復回数とスコープの指定

パラメータ	説明	デフォルト値
反復回数	改善サイクルの実行回数	10回
スコープ制約	「スペーシングのみ」「色以外」等	制約なし
競合分析	参考サイトの指定	なし

ステップ5：実行と監視

エージェントが自動で実行される。各反復の結果はdesign-iterations/ディレクトリに保存される。

実践：制約の重要性―「スペーシングだけ触る」の威力

Klaassen氏が強調する最も重要なポイントは、「スコープ制約を与えること」だ。

「コツはスコープを与えること。『スペーシングだけ触る』や『色を変えずにコントラストを改善する』。制約なしだと、すべてを再設計します―あなたが頼んでいないパープルのグラデーションも含めて。」

制約あり vs 制約なし：驚くべき違い

制約なし	制約あり（「スペーシングのみ」）
色、フォント、レイアウト、すべてを変更	margin、paddingのみを調整
元のデザイン意図が失われる	元のデザイン意図を保持
「パープルグラデーション」を勝手に追加	余白の改善に集中、劇的な変化
結果が予測不能	結果が予測可能
10回の反復で別物に	10回の反復で洗練された同じデザインに

効果的なスコープ制約の例

1. スペーシングのみ

「スペーシングだけ改善してください。色、フォント、レイアウトは変更しないでください。
margin、padding、line-heightの調整に集中してください。」

効果：余白だけで驚くほど洗練度が向上する。「呼吸感」が生まれる。

2. コントラストのみ

「色を変えずに、コントラストだけを改善してください。
アクセシビリティ基準（WCAG AA）を満たすよう、明度を調整してください。」

効果：視認性が向上し、プロフェッショナルな印象に。

3. タイポグラフィのみ

「フォントサイズ、ウェイト、行間だけを改善してください。
フォントファミリーは変更しないでください。」

効果：テキストの読みやすさと視覚的階層が劇的に向上。

4. レイアウトのみ

「要素の配置と順序だけを改善してください。
色、フォント、スペーシングは変更しないでください。」

効果：情報の流れと視線誘導が最適化される。

成功事例：Before/After の衝撃的な違い

Klaassen氏が示した実例では、10回の反復で「誰が見てもAI生成」から「プロデザイナー製作」レベルに進化している。

ケーススタディ1：SaaSランディングページ

要素	Before（反復0回）	After（反復10回）
ヘッドライン	Inter, 700, 48px	Custom, 800, 64px, レターケルニング調整
背景	パープル→ブルーグラデーション	白背景+アクセント要素のみグラデーション
CTAボタン	丸角、微妙なシャドウ	強い赤系、明確なシャドウ、ホバーアニメーション
スペーシング	均一（48px everywhere）	変化に富む（32px～128px）
印象	「これ、AIで作ったな」	「プロデザイナーが作ったな」

ケーススタディ2：価格設定ページ

Stripeの価格ページを参考に、8回の反復で改善。

• 反復1-3回目：カードレイアウトの構造改善、ホワイトスペースの最適化
• 反復4-6回目：プランごとのビジュアル階層強化、「Popular」バッジの追加
• 反復7-8回目：ホバーエフェクト、アニメーション、微細な調整

結果：コンバージョン率が23%向上（A/Bテストで確認）

反復回数と品質の関係：何回がベストか？

Klaassen氏は10回を推奨しているが、用途によって最適な回数は異なる。

反復回数	到達する品質	推奨用途
3回	基本的な構造改善	プロトタイプ、社内ツール
5回	視覚的に許容範囲	MVPリリース、ブログ
10回	プロフェッショナル品質	ランディングページ、製品ページ
15回	ハイエンド品質	コーポレートサイト、ブランドサイト
20回+	過剰改善の可能性	推奨しない（コスパ悪化）

収穫逓減の法則

10回を超えると改善幅が急速に縮小する。10→15回の改善幅は、5→10回の半分程度。

Design Iteratorのベストプラクティス

実践経験から得られた、効果的な使い方のコツ。

1. 初期状態は「ある程度」整えておく

Design Iteratorは「改善ツール」であり、「ゼロから作成ツール」ではない。

• 推奨：AI生成の初期デザインを用意（v0.dev、ChatGPTなど）→Design Iteratorで洗練
• 非推奨：真っ白なキャンバスからDesign Iteratorに丸投げ

2. 1つのコンポーネントに集中

「ページ全体を改善」よりも、「ヒーローセクションだけ改善」の方が効果的。

• ヒーローセクション：10回反復
• フィーチャーセクション：8回反復
• 価格セクション：8回反復
• CTAセクション：5回反復

3. スコープ制約を段階的に適用

ラウンド1：「スペーシングのみ改善（5回反復）」
↓
ラウンド2：「タイポグラフィのみ改善（5回反復）」
↓
ラウンド3：「コントラストのみ改善（3回反復）」

この段階的アプローチにより、各要素の改善効果を正確に測定できる。

4. 競合分析を組み込む

「Stripe、Linear、Vercelの価格ページを参考に、
当社の価格ページを8回反復改善してください。」

競合サイトの優れた要素を学習し、自社デザインに応用する。

5. アクセシビリティを常に意識

「すべての改善において、WCAG AA基準を満たすよう、
コントラスト比を4.5:1以上に保ってください。」

美しいだけでなく、誰もが使えるデザインを目指す。

制限事項と注意点

Design Iteratorは強力だが、万能ではない。

できないこと

• ブランドアイデンティティの創出：企業らしさ、独自性は人間が決める
• ユーザーリサーチの代替：実際のユーザーフィードバックには勝てない
• コンテンツ作成：文章やコピーライティングは別途必要
• 複雑なインタラクション：高度なアニメーションや状態管理は苦手

避けるべき使い方

• ❌ 「完璧なデザインを作って」と丸投げ：スコープ制約がないと迷走する
• ❌ 20回以上の過剰反復：時間とコストの無駄
• ❌ 複数コンポーネントの同時改善：効果が分散し、品質が低下

コスト面の考慮

10回の反復は、Claudeのトークン使用量がそれなりに多い。

• 1回の反復：約5,000～10,000トークン（スクリーンショット分析含む）
• 10回の反復：約50,000～100,000トークン
• コスト目安：$1～$3（Claude Pro契約推奨）

まとめ：「パープルグラデーション病」からの脱却

Claude Design Iteratorは、「AIがAI臭さを修正する」という逆説的なツールだが、その効果は絶大だ。

今日から始める3つのステップ

1. AI生成の初期デザインを用意：v0.dev、ChatGPT、Claudeで「それっぽい」デザインを生成
2. Design Iteratorをセットアップ：GitHubからdesign-iterator.mdをダウンロード
3. スコープ制約を指定して実行：「スペーシングのみ5回改善」から始める

10回目の反復が終わる頃には、あなたのランディングページは「これ、プロデザイナーが作ったんだろうな」と思われるレベルに到達しているはずだ。

「パープルグラデーション」とはもう、おさらばしよう。