AIらしさを改善するImpeccableを試してみた

はじめに

マッハチームのふみ子です。
最近では プロダクトマネージャー そして デザイナーとして業務する上で、コード実装は Claude Codeを使っています。
そんな中で、AI生成された「グロースパック for LINE」のLPから「AIらしさ」を取り除く作業を担当することになりました。

AIで生成したLPは完成度が高く従来であればとんでもない速さで構築できることが魅力的ですが、細かいことを言うと「AIが生成した感じ」が適用されている状態です。

• ①②③から始まる箇条書き
• 重複した説明
• 遷移しないのに浮き上がってくるセクション
• とにかくカードグリッド
• とにかくグラデーション
• とにかくドロップシャドウ……

これらを1つずつ目視で拾ってAIに指示していくのは大変なので、
「Impeccable（インぺカブル）」という Skillを使って改善できないかを検証してみました。
https://impeccable.style/
https://github.com/pbakaus/impeccable

結論

機械的に拾える部分はImpeccable、ブランドや意図に関わる部分は人間、という分担が自分には合っていました。

audit に加えて、修正系の /impeccable polish（仕上げ）と /impeccable bolder（地味なデザインを強める）も別途試した結果、それぞれ別軸の問題を拾うことが分かりました。
詳細は後述します。
最終的に https://lp.growthpackforline.classmethod.net/ の状態まで仕上がりました。

Impeccableとは

ImpeccableはPaul Bakaus氏が公開しているOSSのSkill（Apache 2.0ライセンス）で、Anthropic公式のfrontend-design skillをベースに拡張されています。
Claude Codeに後から追加でき、中身は大きく3つの層に分かれています。

今回の検証では「コマンド」から /impeccable audit、/impeccable polish、/impeccable bolder の3つを使いました。
audit は「監査」や「診断」にあたるもので、コードは変更せず「今のページがどんな状態か」を読み取ってスコアと指摘だけ返してくれる動きです。
polish と bolder は実際に修正をかけるコマンドで、polish は仕上げ（細部の調整）、bolder は地味なデザインを強める（タイポやレイアウトの再構築）方向を担当します。
最初にトップページ全体に audit を走らせて状態を把握し、指摘のうち採用する項目を手作業で Claude Code に指示しました。
その後、手作業修正前の状態に対して polish と bolder も別途試して、それぞれが何を拾うかを確認しています。

audit の中では、対象ページの実装を読み込んで5つの観点でスコアを出してくれます。

スコアは20点満点で、観点ごとに1〜4点で採点されます。

auditで改善されたところ

/impeccable audit の指摘から、機械的に修正できた項目です。

1. 緑色テキストのコントラスト不足

Impeccableはテキストと背景のコントラスト比をWCAG AA基準（4.5:1）でチェックしてくれます。
「詳細を見る →」のリンク色 text-line-green #06C755 は白背景に対して2.4:1、価格表示「初期費用 ¥XX万」の text-line-green-dark #05A847 も白背景に対して3.3:1と、どちらもAA未達でした。
リンク色はクラスメソッドのコーポレートサイトと同じ青系 #2D8DE0 に変更し、価格は黒系に戻すよう指示しました。

2. 画像の sizes 属性未指定

ImpeccableはNext.jsの <Image> コンポーネントで sizes 属性が未指定だと、過大なサイズの画像が配信されている可能性を指摘してくれます。
機能アイコンが <Image fill /> で sizes 未指定で、実表示は 44x44px なのにデフォルトで 100vw 想定の画像が配信される状態でした。
sizes="44px" を追加して解決しています。

3. デザイントークンの散在

Impeccableは、定義済みのデザイントークンがあるのにhex直書きで迂回している箇所を指摘してくれます。
text-[#4B5563] のようなhex直書きが点在していて、muted-foreground という定義済みトークンを迂回している形でした。
全部 muted-foreground に置き換えるよう指示しました。

4. アンチパターン検出

ImpeccableはAI生成で頻出するアンチパターンを名指しで検出してくれます。
その結果「Identical card grid（同一テンプレ10連発）」が検出されました。
直すべきかどうかは判断が分かれるところでした。

こちらは営業資料として10機能を一覧で見せる目的があり、構造を崩すと設計意図が失われると判断したため、指摘どおりに直さないことを選びました。

polish/bolderで拾えた別軸の問題

audit のあと、手作業で修正する前の状態に対して /impeccable polish と /impeccable bolder も試しました。
これらは audit とは別の軸で問題を拾ってきました。
見た目の印象としては、文字が強調されてフォントサイズが大きくなりました。

polish が拾った項目

• 緑色テキストのコントラスト未達6箇所を #05A847 に置き換え
• side-stripe border（左縁ストライプ装飾、Impeccableで強く禁止される項目）を削除
• ヒーローの decorative blur glow（装飾的なぼかし光）を2箇所削除
• next/image の sizes 属性を追加
• prefers-reduced-motion 対応を globals.css に追加

bolder が拾った項目

• 9連続の英字キッカーラベル（CHALLENGES, WHY GROWTHPACK, FEATURES など）を全削除
• POSITIONING の見出し「SaaSとスクラッチ、その中間に。」をページ最大のタイポに昇格
• STATS セクションの hero-metric テンプレ（4列均等カード）を解体し、巨大数字+サブ統計のエディトリアルレイアウトに再構築

bolder の STATS 解体は、後述「カードのレイアウト調整」と同じ箇所を別アプローチで直していました。
ただし手作業で直した項目のうち、フォント独自選択・ロゴ差し替え・認定バッジ・SaaS比較カードの強調表現などは polish/bolder でも対象外でした。
ブランド統一・固有名詞・情報整理の領域は人間判断で残ると感じています。

Impeccableでは拾われず、私が手作業で指示したところ

ここからはImpeccableが拾わなかったけれど、自分の目で見て気になってClaude Codeに追加で修正をお願いした項目を、サイト全体に関わるものから、トップページの上から順に記載しています。
一部の項目（ステップバッジ）はImpeccableが部分的に指摘してくれましたが、全体を見渡して統一する判断は人間で行いました。

1. フォントをクラスメソッドのコーポレートサイトに揃える

AIで生成したLPは、欧文フォントがGoogle Fontsから自動で選ばれます。
クラスメソッドのコーポレートサイトと並べたときに「クラスメソッドらしさ」が無い印象を持ちました。
同サイトで使われているAdobe Fontsのunivia-proを <link> で読み込み、--font-sans の先頭に追加するよう指示しました。

2. アイコン・プレースホルダーの差し替え

ロゴやアイコンは、指定しないと「G」マークのような汎用プレースホルダで埋まっていたりします。
使ってほしいロゴやサービス名に差し替えるよう指示しました。

3. リンク色をクラスメソッドのコーポレートサイトに揃える

AIで生成したLPは、指定しない限りリンクに必要なコントラスト比や下線（色だけに頼らずリンクと分かる視覚的な区別）が適用されず、全体のトーンに合う色が選ばれがちです。
該当するガイドラインは WCAG 1.4.1 色の使用 と WCAG 1.4.3 コントラスト（最低限） です。
同サイトのリンク色 #2D8DE0 を取り込み、--link / --link-hover トークンを新設するよう指示しました。

4. ヘッダー/フッターのスマホ対応

デスクトップ前提のレイアウトになりがちで、スマホサイズで見るとヘッダーナビ・フッターが破綻していたりします。
ヘッダーナビが横並びのまま、フッターも多段リンクでPC偏重でした。
すべてのページのヘッダー/フッターをスマホ向けに再設計（ハンバーガー化・縦並びレイアウト）するよう指示しました。

5. 記号から適切なアイコンに差し替え

文頭に「・」など記号や絵文字を並べる形が多いように感じています。
「・LINEヤフー Partner Program Technology Partner」と・区切りで表記されていました。
AWS Premier Tier Services Partnerで使われているAwardアイコンを参考に、アイコン+「LINEヤフー Partner Program Technology Partner認定」の形に変更するよう指示しました。

6. カードのレイアウト調整

hero metric（巨大な数字カード）が採用されていて、カードの幅と内部要素の関係までは整えられていないことがあります。
今回は「5,000」が途中で改行されていたため、カードの最小幅を指定して数値を1行に収めるよう指示しました（bolder ではこのセクション自体を「巨大数字+サブ統計」のエディトリアルレイアウトに作り直す提案で、別アプローチでした）。

7. 不要なドロップシャドウを削除する

AIで生成したLPは、装飾としてドロップシャドウや枠が多くの項目に入りがちです。
目立たせる必要のない項目からドロップシャドウを削除するよう指示しました。

8. 冗長なステップバッジを削除する

①の隣に「Step 1: 〇〇」と並んで冗長な表現になっていることがあります。
Impeccableから指摘がありましたが、全体を見渡して統一する動きはなかったため、私から削除を指示しました。

9. カテゴリラベルの位置とサイズを上げる

カテゴリやステップなどの分類ラベルが、見出しや本文より小さく目立たない位置に置かれることがあります。
3フェーズを示すステップラベルが、アイコン+見出しの下に小さく置かれていました。
LPで最初に伝えたいのはフェーズ分けの構造なので、ステップラベルをカードの左上に移動し、フォントサイズを2段階上げるよう指示しました。

10. マウスを乗せたときのフィードバックを追加

静的な見た目は整っていても、マウスを乗せたときのインタラクションまでは差別化されていないことが多いです。
遷移先があるものと、無いもので変化をつけるように指示しました。

11. SaaS比較カードの強調表現を整理

SaaS比較カードの「RECOMMENDED」プランに、ドロップシャドウ・緑の枠線・緑のラベルと、強調が3つ重なっていました。
枠線だけで十分目立つので、ドロップシャドウは削除するよう指示しました。

12. 営業コピーを視覚的に目立たせる

コピーは生成されていても、営業上の訴求ポイントを視覚的に立たせる判断までは入っていません。
フッターの「初回相談は無料です。」が他のテキストと同じ太さで埋もれていました。
そこだけ太字にして視線が止まるよう指示しました。

まとめ

AIで生成したLPから「AIらしさ」を取り除く作業は、Impeccableのコマンドによる自動採点・修正と、自分の目で見て判断するステップを組み合わせると効率が良かったです。
全部を自動でやろうとするとLPとして機能しなくなる箇所が出てきますし、全部を人間でやると時間がかかりすぎます。
audit / polish / bolder の3つを使い分けると、装飾アンチパターンやタイポ階層は機械的に直せて、ブランド統一や固有名詞といった意図が必要なところは人間判断、という分担が見えてきました。

最終的に https://lp.growthpackforline.classmethod.net/ の状態まで仕上げることができました。

検証環境

検証時間

polish は内部で連続 Edit が13回走ったぶん、想定の倍くらいかかっていました。
audit と bolder は体感どおりの時間で完了しています。

最後までお読みいただきありがとうございました。