最近、AIチャットUIについて考えていた時に、
「AIがツールではなく、存在感を持ったら体験はどう変わるんだろう？」
と思い、キャラクター型AI UIプロトタイプを作ってみました。
今回はあえて、
- 単一HTML
- CSS
- Vanilla JavaScript
- GitHub Pages
だけで軽量に試作しています。
作ったもの
キャラクター型リサーチエージェントAI
「Elena」のUIプロトタイプです。
- キャラクターサイドバー
- チャットUI
- メッセージ内アバター
- ガラス風UI
- GitHub Pages公開
までAIで構築して実装しています。
日本語版
Live Demo：https://cv63kittyhawk.github.io/ux-agent-elena/
GitHub：
https://github.com/cv63kittyhawk/ux-agent-elena
英語版
Live Demo：https://cv63kittyhawk.github.io/ux-agent-elena-en/
GitHub：
https://github.com/cv63kittyhawk/ux-agent-elena-en
完成画面
なぜ作ったか
AIチャットUIを見ていて、
「AIがツールではなく、
存在感を持ったら体験はどう変わるのだろう？」
と思いました。
そこで、
キャラクター型AI UIを試作してみることにしました。
単なる見た目の変更ではなく、
- 信頼感
- 親しみやすさ
- 会話継続性
に変化が起きるのかを観察したかったからです。
そこで考えたのが、
AIを「答えを返すツール」ではなく、
「問いを育てる存在」として捉える考え方です。
Human Insight Interface
実は、このアイデアにはもう一つ出発点がありました。
海外ドラマ『メンタリスト』に登場するパトリック・ジェーンのような人物に相談できたら面白いのでは、と思い、最初はAIプロンプトとして試していました。
そこから実在の人物をそのまま使うのではなく、オリジナルのキャラクターへ置き換え、さらにUXリサーチや思考整理を支援するエージェントとして設計を進めた結果、現在の「Elena」というプロトタイプになっています。
技術構成
今回はかなりシンプルです。
/
├── index.html
├── README.md
└── assets/
├── elena_ig.png
└── ogp.png
使用技術：
- HTML
- CSS
- Vanilla JavaScript
- GitHub Pages
フレームワーク無しです。
ビルド環境もありません。
まずは「止まらず試作する」を優先しました。
今回のプロトタイプ全体の構造は、
次のようになっています。
Elenaの構造
工夫したUIポイント
1. メッセージ内アバター
LINEのように、
エレナの顔アイコンをチャットメッセージ横に表示しています。
<div class="message-avatar-frame">
<img src="assets/elena_ig.png"
class="message-avatar"
alt="Elena avatar" />
</div>
ただ、ここはかなり苦戦しました。
2. avatar cropping 調整
アニメキャラクター画像を丸型アイコンにすると、
- 顔が小さい
- 頭が切れる
- 中央に来ない
という問題が発生しました。
最初はAIに調整を依頼していましたが、
「もう少し中央に」「顔を大きく」といった指示では、なかなかイメージ通りになりませんでした。
そこで一度DevToolsを使い、自分で位置や倍率を調整してから、
「transform: scale(3.2) translateX(-6%) のように調整したい」
という具体的な数値をAIへ伝えるようにしました。
すると、そこからは修正がスムーズに進みました。
最終的には次のようなCSSになりました。
.message-avatar {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(3.2) translateX(-6%);
transform-origin: center top;
}
今回の作業を通じて感じたのは、
AIに任せることと、自分で確認・調整することを行き来すると、試作のスピードが大きく上がる
ということでした。
3. ガラス風UI
背景は glassmorphism を軽く意識しています。
backdrop-filter: blur(18px);
を使用。
AI感と「静かな対話空間」を両立したかったので、
少し暗め + 紫ベースで構成しています。
4. OGP画像
今回かなり面白かったのがOGP画像です。
最初は自分で簡単なものを作るつもりでしたが、
試しにAIに叩き台を作ってもらったところ、
かなり短時間で方向性がまとまりました。
特に：
- キャラクター
- UI
- 世界観
- “Human Insight Interface”
を一枚で伝えられるのが良かったです。
AIと一緒に作った感覚
今回かなり面白かったのは、
「AIが全部やる」感覚ではなかったことです。
むしろ、
- CSS調整
- OGP
- README
- UI試行錯誤
など、
「うわ、これ面倒だな…」
で止まりそうな部分を、
前進し続けられた感覚が強かった。
これは、
Coursera の Google AI Certificate で見た、
「やりたくないと思った時がAIの出番では？」
という話にもかなり近い感覚でした。
AIの価値は、
単純な自動化だけではなく、
“人間が止まらず前進できる”
ところにもあるのかもしれません。
今後やりたいこと
今後は：
- OpenAI API連携
- リアルタイムアニメーション
- 感情反映UI
- 音声対応
- キャラクター切り替え
- メモリ機能
なども試したいと思っています。
特に、
「AIとの会話」から
「存在との対話」
へどう変化するのかはかなり興味があります。
最後に
今回は、
「まず軽量に試作して公開する」
を重視しました。
単一HTML + GitHub Pagesだけでも、
かなり色々試せて面白かったです。
AI時代は、
完璧に準備してから作る
より、
止まらず試作を回す
方が重要になっていくのかもしれません。
試してみる
Live Demo：
https://cv63kittyhawk.github.io/ux-agent-elena/
GitHub：
https://github.com/cv63kittyhawk/ux-agent-elena
English Version
Live Demo：https://cv63kittyhawk.github.io/ux-agent-elena-en/
GitHub：
https://github.com/cv63kittyhawk/ux-agent-elena-en
🌾文章と図の作成はChatGPTを補助に使ってます。