この記事はHTアドベントカレンダー5日目の記事です。
はじめに
博報堂テクノロジーズでデータサイエンティストをしている髙橋です。データとテクノロジーを駆使してメディア・コンテンツを革新していくデータサイエンティスト集団であるAaaS Tech Lab に所属しています。
私のチームでは、テレビの視聴ログや広告の出稿データ、生体データなど、メディア・コンテンツ領域の多様なデータを扱っています。業務内容は分析や予測にとどまらず、観光プロモーションやAIラップ生成といった企画立案から、バックエンド・フロントエンドの実装まで多岐にわたります。
チームメンバーは全員データサイエンティストですが、単に機能を作るだけでなく、UI/UXまで意識して作り込むスタイルをとっています。例えば、AIエージェントとの対話を通じてメディアプランニングができるソリューションなどもその一例です。
前回のアドベントカレンダーの記事でも触れましたが、最近は Claude Code などのCoding Agentの力を借りることで、少人数でも幅広い領域を開発できるようになりました。
しかし、機能実装はAIに任せられても「ユーザーにとって心地よい体験」 をどう設計するかは、依然としてセンスや専門知識が問われる領域です。
そこで今回は、「UXの専門知識がないなら、知識そのものをAIに与えて実装させればいいのでは？」 という仮説のもと、手軽にアプリのUI/UXを向上させるTipsを検証してみます。
UI/UX改善のためのナレッジ
今回の検証にあたり、以下の記事を参考にさせていただきました。
この記事では、「労働の錯覚」や「ドハティの閾値（0.4秒の壁）」など、ユーザー体験を向上させるための心理学的効果とデザイン原則が多数まとめられています。データサイエンティストの私にとっては「なんとなく重要そう」とは思いつつも、言語化・体系化された知識としては知らないことばかりでした。この「UX心理学コンセプト」で学んだ内容をClaude Codeのコンテキストに入れて開発を依頼したら、どれくらいアウトプットが変わるのか試してみます。
検証方法
プロンプト
まず、前述の記事を参考に、主要なUX心理学のコンセプトとその定義をまとめたMarkdownファイル（ux_concepts.md）を作成しました。中身はシンプルに、以下のような定義が羅列されたドキュメントです。
# ux_concepts.md のイメージ
- 美的ユーザビリティ効果: 美しいデザインは使いやすいと感じさせる...
- ドハティの閾値: 0.4秒以内の応答が重要...
- 労働の錯覚: あえて処理中を見せることで価値を感じさせる...
...（その他、主要なコンセプトを定義）
実装タスク
Next.jsでシンプルなAIチャットボットを作成させます。比較のため、以下の2パターンで実装を依頼しました。
パターンA：要件のみ伝える
まずは、UXについての指示をせず、機能要件のみを伝えます。
Next.jsでAIチャットボットを作りたいです。
APIキーとしてはAzure OpenAI APIキーを渡します。
会話ができればOKで、会話履歴の保存は不要です。
パターンB：UX心理学のコンセプトのナレッジを渡して指示
ここで作成した ux_concepts.md を活用します。Claude Codeに以下のような指示をして、UX心理学のナレッジをコンテキストに入れてみます。
Next.jsでAIチャットボットを作りたいです。
APIキーとしてはAzure OpenAI APIキーを渡します。
会話ができればOKで、会話履歴の保存は不要です。
@ux_concepts.md は、優れたUXを実現するための心理学コンセプトをまとめたものです。
UIUX向上のために以下を参考にしてください。
結果
パターンA：要件のみの場合
まずは機能要件のみを伝えて実装された画面です。
機能としては動きますが、見た目は非常にシンプルで管理画面のようなチャットボットになっています。UXとしては、右下の送信ボタンを押すと「送信中」に変わるような実装のみです。
パターンB: UX心理学のナレッジがある場合
一方、ux_concepts.md を読み込ませた上で実装された画面がこちらです。
一目見て分かる通り、非常にモダンで洗練されたUIに生まれ変わりました。また、見た目だけでなく、実際に触ってみると以下のような細やかな配慮が実装されていることに驚かされます。
- 入力フォームにフォーカスすると色が変化したり、Shift + Enter で改行ができるという表記など、チャットアプリとしての当たり前の機能が最初から組み込まれている。
- 送信時に「考え中...」というスピナーが表示されるようになり、単なる待機時間ではなく、AIが処理を行っていることを視覚的に伝える工夫がある。
- フッター部分に「AIは間違った情報を生成する可能性があります」という注釈あり。
なぜここまで変わったのか？
実装後、Claude Codeに「どの心理学コンセプトを意識して開発したか」を解説させたところ、以下のような回答がありました。
解説の一部を抜粋します。
美的ユーザビリティ効果 (Aesthetic-Usability Effect)
shadcn/ui と Tailwind CSS を選定し、統一感のあるカラーパレットと余白を適用。「美しいデザインは使いやすいと感じさせる」という原則を忠実に守っている。
労働の錯覚 (Labor Illusion)
応答待ちの間にあえてスピナーアイコン付きの「考え中...」という表示。「AIが作業している様子を見せることで価値を感じてもらう」というコンセプトがコードに落とし込まれている。
ドハティの閾値 (0.4秒の壁)
ストリーミングレスポンスを採用し、即座にフィードバックを返すことで、ユーザーにストレスを与えない設計に。
親近性バイアス (Familiarity Bias)
一般的なチャットUIパターンである吹き出しデザインや下部固定フォームを採用することで、学習コストゼロで使えるように配慮。
まとめ
今回の検証で、UXの知識がない私のようなデータサイエンティストでも、「良質な知識ソース」さえあれば Coding Agent が補完してくれることが検証できました。ドキュメントを参照させるだけで実装のクオリティが段違いになり、AI駆動開発においてどのような情報をコンテキストとして与えるかの重要性が再確認できました。
今回はUIUXに関する検証をしましたが、セキュリティ要件やコーディング規約、コードレビューなどにも応用できるはずです。博報堂テクノロジーズには多様なバックグラウンドを持つエンジニアが在籍しています。それぞれの専門領域のベストプラクティスを持ち寄り、AIエージェントのためのコンテキストを充実させていくことで、チーム全体の開発力を底上げしていきたいと思います。
最後に
博報堂テクノロジーズは、マーケティング×テクノロジー領域で活躍できる人材を積極的に募集しています。キャリアサイトをリニューアルしましたので、興味をお持ちの方はぜひご覧ください。