概要
https://qiita.com/nori0724/items/5c1aa2a5d5327bb68b6c
詳細内容
## Claude CodeのコンテキストにUX心理学を与えたら、UI/UXはどう変わるのか
https://qiita.com/nori0724/items/5c1aa2a5d5327bb68b6c
良質な知識をコーディングエージェントのコンテキストとして与えることで、UI/UXの専門知識がなくても、AIが生成するアプリケーションの品質を劇的に向上させられることが実証されました。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 81/100 | **Annex Potential**: 80/100 | **Overall**: 80/100
**Topics**: [[AI駆動開発, コンテキストエンジニアリング, UI/UX改善, UX心理学, コーディングエージェント]]
博報堂テクノロジーズのデータサイエンティストである著者は、機能実装はAIに任せられる一方で、「ユーザーにとって心地よい体験」の設計は依然として専門知識が問われる課題だと指摘します。そこで「UXの専門知識がないなら、知識そのものをAIに与えて実装させればいいのでは？」という仮説のもと、Claude CodeにUX心理学のコンセプトをコンテキストとして与え、UI/UXがどのように変化するかを検証しました。
検証では、Next.jsでシンプルなAIチャットボットを開発するタスクを設定。比較のため、以下の2パターンでClaude Codeに実装を依頼しました。
1. **要件のみを伝えるパターンA**: UXに関する指示はせず、機能要件のみを伝達。
2. **UX心理学のナレッジを渡すパターンB**: 主要なUX心理学のコンセプトとその定義をまとめたMarkdownファイル（`ux_concepts.md`）をコンテキストとして与え、UI/UX向上に役立てるよう指示。
結果は顕著でした。パターンAでは機能的には動くものの、見た目は非常にシンプルな管理画面のようなチャットボットが生成されました。一方、`ux_concepts.md`を読み込ませたパターンBでは、モダンで洗練されたUIが実現されただけでなく、以下のような細やかな配慮が自動的に実装されました。
* 入力フォームのフォーカス時の色変化や、`Shift + Enter`での改行表記など、チャットアプリとしての当たり前の機能が組み込まれている。
* 送信時に「考え中...」というスピナーが表示され、AIが処理を行っていることを視覚的に伝える「労働の錯覚」が適用されている。
* フッターに「AIは間違った情報を生成する可能性があります」という注釈が表示される。
実装後、Claude Codeにどの心理学コンセプトを意識したか解説させたところ、「美的ユーザビリティ効果」「労働の錯覚」「ドハティの閾値」「親近性バイアス」といった具体的な概念を挙げ、それらがどのようにコードに落とし込まれたかを説明しました。
この検証は、UI/UXの専門家でなくとも、良質な知識ソースをコーディングエージェントに与えることで、実装の品質を飛躍的に高められることを証明しています。著者は、AI駆動開発において、セキュリティ要件やコーディング規約、コードレビューなど、多様な領域のベストプラクティスをコンテキストとしてAIエージェントに与える「コンテキストエンジニアリング」の重要性を強調し、これによりチーム全体の開発力を底上げできる可能性を示唆しています。