Claude Codeで「AIっぽくない」フロントエンドを作る方法

紫のグラデーションや翻訳調のコピーを避けるには。方向性の書き方、スキルの選び方、画面確認と公開前の監査の手順を紹介します。

Claude Codeで作ったWebサイトは、動きます。レスポンシブにもなっています。それなのに、どこかで見たような顔をしています。紫のグラデーション、すりガラス風のカード、同じ形の3列カード。原因はモデルの能力不足ではありません。誰も方向性を決めていないので、Claudeが一番無難な平均値を選んでいるだけです。

日本語のサイトになると、ここにもう一つ「日本語らしくなさ」が加わります。この記事では、その両方を避けるための手順を紹介します。

日本語サイトでよく見る「AIっぽさ」

まず症状を知ることから始めます。一般的なものに加えて、日本語サイト特有のものがあります。

欧文フォントだけを指定し、かな漢字はOS任せのフォントで表示される
欧文向けの行間のまま、日本語の本文が窮屈に詰まっている
長い日本語の文章まで中央揃えにしている
見出しが単語の途中で改行され、読みにくい
「ビジネスを次のレベルへ」「革新的な体験を」のような、翻訳調のコピー
日本の読者が期待する情報（料金、会社情報、問い合わせ先）が見つけにくい

一つひとつは小さな問題ですが、重なると「誰もデザインしていないページ」に見えます。名前をつけられれば、禁止することもできます。

方向性を文章で渡す

「モダンなLPを作って」では、Claudeは何も決められません。プロジェクト直下にDESIGN.mdを作り、方向性を書いておきます。

# 方向性
商品：京都の小さな和菓子店のオンラインショップ
雰囲気：静か、手仕事、季節感。ECサイトらしさは控えめに。

# 文字
見出し：明朝体。本文：読みやすいゴシック体。
font-family は tokens.css の変数を使い、欧文フォント単体で指定しない。
本文の行間は欧文より広めにとる。

# 色
生成り色の背景、墨色の文字、差し色は一色だけ。
グラデーション、すりガラス、紫は使わない。

# レイアウト
本文は左揃え。セクションごとにリズムを変える。
ダミーテキストは使わず、実際の商品情報を使う。

# コピー
です・ます調。翻訳調の表現や大げさな言い回しは使わない。

そしてCLAUDE.mdから読み込みます。@をつけたファイルは、セッション開始時に自動で読み込まれます。

UIの作業では @DESIGN.md の方向性に従うこと。
依頼内容と矛盾する場合は、作業前に確認すること。

デザイン系スキルは一つに絞る

Anthropic公式のfrontend-designは、コードを書く前に見た目の方向性を決めさせるスキルです。最初の一つとして一番安心できます。

/plugin install frontend-design@claude-plugins-official

コミュニティ製にも良いものがあります。スタイルや配色の辞書を持つui-ux-pro-max、レイアウトや余白の判断に強いtaste-skillなどです。

ただ、私の意見ははっきりしています。入れるのは一つだけにしてください。スキルごとに好みが違うので、複数入れると指示がぶつかり、どれにも寄らない中途半端なページになります。比べたいなら同じページで一つずつ試し、気に入ったものだけ残しましょう。

Claudeに画面を見せる

ClaudeはふだんCSSの結果を見ずに書いています。スマホ幅での文字の重なりやボタンの折り返しは、見なければ気づけません。Playwrightのプラグインで実際のブラウザを使えるようにします。

/plugin install playwright@claude-plugins-official

UIを変更したら毎回：
1. 幅390px、768px、1440pxでページを開いてスクリーンショットを撮る
2. DESIGN.md と比べて、問題を重要な順に挙げる
3. 上位3つを直して、もう一度撮影する
これを2回までにして、最後のスクリーンショットを見せてください。

回数に上限をつけないと、Claudeはあまり良くならない微調整を延々と続けることがあります。

公開前に監査する

最後のチェックにはimpeccableが便利です。audit、critique、polishといったコマンドがあり、AIが作りがちなデザインのパターンも検出します。インストール方法はREADMEに従ってください。私はこうしたレビューを編集のたびに自動で走らせるのではなく、作業の区切りで自分から実行する方が好きです。

ツールを増やしたくなければ、プロンプトでも十分です。

AIっぽいデザインが嫌いなシニアデザイナーとして、このページをレビューしてください。
DESIGN.md を基準に、問題ごとに「場所」「なぜテンプレートっぽく見えるか」「具体的なCSSの修正」を挙げてください。
日本語の文字組みと、翻訳調のコピーも必ず確認してください。
まだコードは変更しないでください。

ツールが見つけるのはパターンだけです。私は公開前に、三つのことを自分の目で確認しています。5秒で情報の階層が読み取れるか。差し色が、本当に押してほしいボタンを指しているか。そして、スマホで実際に文章を読んで、行間や改行で引っかかる場所がないか。

最後に一番大事な確認です。ロゴを外しても自分たちのサイトだと分かるか。そうでなければ、コードがどれだけきれいでも完成ではありません。次に作るページで、まずDESIGN.mdから書いてみてください。