Claude Codeで「AIっぽい」凡庸なデザインから抜け出すためのコンテキスト管理術

2026年6月10日 H.Ueda

今回は、Nick Babich氏による記事 Claude Code sucks at UI design を参考に、Claude Codeに質の高いUIデザインを出力させるための工夫について私なりに整理してみました。

デザインベースの人の知見かな。

Claude Codeを使っていると、バックエンドのロジックやアルゴリズムの実装には非常に頼もしさを感じる一方で、フロントエンドのUIコンポーネントを作らせると、どうにも「どこかで見たような、ありきたりなデザイン」が出てくることに悩まされることがあります。いわゆる「AIスロップ（AI製の粗悪なコンテンツ）」のような、味気ないUIになってしまう現象です。

これを改善し、意図した通りの洗練されたデザインを得るためには、Claudeに対する「コンテキスト（文脈）の提供方法」を見直す必要があります。

なぜClaudeのデザインは「平凡」になってしまうのか

Claudeは、与えられた情報が少ないと、自らの学習データの中から「最も一般的と思われる最大公約数的な回答」を選択します。つまり、私たちが詳細な指示や制約を与えない限り、Claudeは「推測」でデザインを埋めることになります。

この「推測」のプロセスが、結果として個性のない、プロジェクトの意図から外れたUIを生んでしまう原因かと思います。

flowchart TD
    A[曖昧なプロンプト] --> B{Claudeの判断}
    B -- 情報不足 --> C[学習データから推測]
    C --> D[一般的で凡庸なUI]
    B -- 十分な情報 --> E[プロジェクトに最適化]
    E --> F[洗練されたUI]
    style D fill:#f96,stroke:#333
    style F fill:#6cf,stroke:#333

対策1：プロジェクト構造によるコンテキストの提供

Claude Codeは、カレントディレクトリ内のファイル構造をスキャンして、プロジェクトの全体像を把握しようとします。そのため、デザインの指針となるドキュメントを適切な場所に配置しておくことが、精度の向上に直結します。

例えば、以下のようなフォルダ構成にしてみるのはいかがでしょうか。単にコードを置くだけでなく、/docs や /design といったディレクトリを用意するのがポイントです。

/my-project
  /app           # アプリケーション本体
  /components    # UIコンポーネント
  /docs          # プロジェクトの定義
    prd.md              - 製品要件
    user-flows.md       - ユーザー動線
    ux-principles.md    - UXの原則
  /design        # デザインの定義
    tokens.md           - カラー、タイポグラフィ
    components.md       - コンポーネント定義
    interaction.md      - インタラクションのルール
  CLAUDE.md      # Claude専用の指示書

このように構造化しておくことで、Claudeは「このプロジェクトではどのようなデザインルールが適用されるべきか」を、コードを書き始める前に理解できるようになります。

対策2：CLAUDE.md を「プロジェクトの脳」にする

最も効果的なのは、プロジェクトのルートディレクトリに CLAUDE.md というファイルを置くことです。これは、そのプロジェクトにおける「憲法」のような役割を果たします。

ここに技術スタックだけでなく、デザインシステムやコーディング規約を明文化しておくことで、Claudeの挙動をコントロールできます。

CLAUDE.md の記述例

## プロジェクト概要
セキュリティ監視のためのSaaS「Roxy」のランディングページ。

## 技術スタック
- Next.js (App Router)
- Tailwind CSS
- shadcn/ui

## デザインシステム
- 原則: ミニマリズム、信頼感、高いコントラスト
- カラー: /design/tokens.md の定義を参照
- コンポーネント: shadcn/uiのパターンをベースにカスタマイズ

## コーディング規約
- すべてのコンポーネントにLucide Reactのアイコンを使用する
- サーバーコンポーネントを優先し、インタラクティブな部分のみ 'use client' を使用
- 余白（Padding/Margin）は一貫してTailwindのユーティリティを使用

このように記述しておけば、例えば「ランディングページを作って」と指示した際に、Claudeは勝手な推測をせず、CLAUDE.md にある「ミニマリズム」や「shadcn/uiベース」といった制約を守ってくれるようになります。

コンテキストの有無による出力の違い

コンテキストを整える前と後で、どのような差が出るのかを比較表にしてみました。

項目	コンテキストなし（デフォルト）	コンテキストあり（推奨設定）
デザインの印象	どこにでもあるテンプレート風	ブランド独自のトーン＆マナー
技術選定	Claudeが適当に選んだライブラリ	プロジェクト指定のスタック（Tailwind等）
一貫性	ページごとにデザインがバラつく	定義されたトークンに基づき統一される
修正回数	何度もプロンプトを打ち直す	初回から意図に近いものが出る

結局のところ、AIに良い仕事をさせるには、人間が「どんな基準で判断してほしいか」を事前に明示しておくことが大切なのだと感じます。

まとめ

Claude Codeは非常に強力なツールですが、UIデザインにおいては「材料」だけでなく「レシピ（制約と文脈）」をセットで与える必要があります。

ディレクトリ構造を整理し、デザインドキュメントを配置する。
CLAUDE.md を作成し、プロジェクト固有のルールを教え込む。

この2ステップを踏むだけで、Claudeが生成するUIの質は大きく変わるはずです。もし「Claudeが作るデザインがいまいちだな」と感じている方がいれば、まずはプロジェクトフォルダの中に一枚、Markdownファイルを置くことから始めてみてはいかがでしょうか。

意外と、それだけでClaudeが別人のように「センスの良い」コードを書き始めるかもしれません。

MicroArchitectures

H.Ueda

Programmer

ブログ