技術 約4分で読めます

Claude CodeのUI出力を劇的に改善する3つのリソース

Claude Code AI デザイン UI UX

Claude CodeにUIを作らせると「AIっぽい量産型デザイン」になりがち。これを改善する3つのリソースがあるらしいのでメモ。

うち1つ（Atlassian Design System）は別の仕事で何回か使っていて、スケルトンやモックを見せるレベルなら効果を実感している。
逆に言うと、そのレベルを超えるとまだAIっぽさが抜けてない印象。
残り2つも組み合わせたらどうなるか試してみたい。

3つのリソース

  1. UX心理学 - https://www.shokasonjuku.com/ux-psychology
  2. frontend-design SKILL.md - https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
  3. Atlassian Design System - https://atlassian.design/

それぞれの役割

リソース役割レイヤー
UX心理学「なぜそうすべきか」の原則設計思想
frontend-design SKILL.md「何をやるな/やれ」の美的ルール表現方針
Atlassian Design System「具体的にどう組むか」の実装パターン構造・余白・グリッド

1. UX心理学

松下村塾株式会社がまとめたUXに影響を与える心理学・バイアスのコレクション。約50種類の心理効果が解説されている。

主なもの：

  • 美的ユーザビリティ効果: 美しいUIは「使いやすい」と感じられる
  • 認知負荷: ユーザーの精神的負担を減らす設計
  • 決断疲れ: 選択肢が多すぎると合理的判断ができなくなる
  • ドハティの閾値（0.4秒の壁）: 0.4秒以上待たせると興味喪失
  • 損失回避: 人は「得る」より「失う」を避けたがる
  • ピーク・エンドの法則: 最高の瞬間と終わりの印象が評価を決める
  • 段階的開示: 情報を一度に出さず、必要なときに出す

2. frontend-design SKILL.md

Claude Codeのフロントエンドデザインスキル。「AIっぽい量産型デザイン」を避けて独自性のある本格的なUIを作るためのガイドライン。

核心ルール

コーディング前に「美的方向性」を決める。ブルータリスト、レトロフューチャー、ミニマル、マキシマリスト、オーガニック、ラグジュアリーなど「極端な方向性」を選ぶ。

絶対やるな（NGリスト）

  • Inter、Roboto、Arial、システムフォント
  • 紫グラデーション on 白背景
  • 予測可能なレイアウト・コンポーネント
  • Space Grotesk（AIが収束しがちなフォント）

5つの美的原則

  1. タイポグラフィ: 個性的で美しいフォントを選ぶ（ディスプレイ＋本文のペアリング）
  2. カラー&テーマ: CSS変数で一貫性、ライト/ダーク両方対応
  3. アニメーション: 高インパクトなモーメント（ページロードの段階的表示、ホバー演出など）
  4. レイアウト: 型破りな配置、非対称、意外性
  5. 背景: ベタ塗りではなく雰囲気と奥行きを出す

重要な姿勢: ミニマルでもマキシマルでも「意図」があればOK。大事なのは意図的であること。

3. Atlassian Design System

Atlassianのデザインシステムには以下が網羅されている：

  • 余白設計
  • グリッドシステム
  • フォント運用
  • 色・アイコン・イラスト・タイポグラフィの指針

URLを渡すだけで、細かい指示なしで改善点や提案までやってくれる。

組み合わせの効果

3つは競合せず、補完関係になる：

  1. Atlassian → 基本構造がしっかりする（余白、グリッド、コンポーネント配置）
  2. frontend-design SKILL.md → 「Atlassianっぽいのっぺり感」を崩す方向性を与える（個性的なフォント、意外なカラー、型破りなレイアウト）
  3. UX心理学 → 判断に迷ったとき「認知負荷下げろ」「0.4秒以内にフィードバック」みたいな根拠で決定できる

実際に起きること

  • Atlassianだけだと「整ってるけど無個性」になりがち
  • frontend-design SKILL.mdを足すと「ブルータリストで行く」「レトロフューチャーで行く」みたいな方向性が入って、Atlassianの骨格の上に個性が乗る
  • UX心理学は「CTAボタンどこに置く？」「選択肢いくつにする？」みたいな判断のときに効く

使ってみた感想

結局、AIに丸投げせずに最低限決めておくべきことがある：

  • カラー: サイトのカラーは3色くらい決めておく。これだけで紫グラデーションには収束しなくなる
  • フォント: 自動生成だとウェブフォントに頼るしかないので、NGリストのフォントを避けるのは難しい面もある。契約しているウェブフォントがあれば指定するのもあり
  • 背景アニメーション: よっぽどインタラクティブなサイトでない限り、グリグリ動く背景はうっとうしい。謎の動く背景を入れてくることがあるので注意

きれいなUIと使いやすいUIは別の話。見た目を整えるだけじゃなくて、使い勝手を考えるためにUX心理学が必要になる。

試してみる（TODO）

3つ全部CLAUDE.mdに入れて、何かUIを作らせてみる。