7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

バズってた「ペルソナでUI化ける」記事を参考に、自分をペルソナにしてAIにアプリ作らせてみた

7
Posted at

きっかけ

@natume_nat さんの AIに「ユーザーペルソナ」を与えるだけで、UIデザインはここまで化ける を読んだ。

元記事では架空のペルソナ(カフェ店員のアオイ、PMのケンジ)をAIに渡すとUIの提案がめちゃくちゃ変わるっていう検証をしてた。おもしろい。

ただ読んでて思ったのが、架空のペルソナじゃなくて自分自身を渡したらどうなるん? ってこと。AIに自分の性格とか生活とか好みとか全部教えた上で「お前にはこのアプリが必要」って提案してもらって、さらに自分好みのデザインで作ってくれたら最高じゃん。

ってことでやってみた。

全体の流れ

  1. AIにペルソナの質問項目を作らせる
  2. 自分で回答する
  3. 「ペルソナを渡したら分析→提案→デザイン→実装まで一気にやる」プロンプトを作る
  4. ペルソナを食わせて実行

Step 1: ペルソナの質問項目を作らせる

まずClaude Codeに「自分のペルソナを構築するための質問項目をたくさん出して」って頼んだ。

最初にAIが出してきたのが技術者寄りの質問だった。プログラミング経験年数とか得意な言語とか開発環境の好みとか。まあ悪くはないけど、これだとエンジニアしか答えられんじゃんってなって。「一般の人にも使える範囲がいい」って返したら、AIが全部作り直してくれて、生活者としての自分を掘り下げる質問になった。最終的に26項目。

役割分担: AIが質問項目を生成・修正 / 自分は方向性のフィードバック

# 基本プロフィール
1. 年齢
2. 性別
3. 職業
4. 住んでいるエリア(都会?郊外?)
5. 一人暮らし?同居?

# 性格・行動パターン
6. 性格をひとことで言うと?
7. 意思決定のタイプ(直感?じっくり考える?人に聞く?)
8. めんどくさがり?マメ?
9. 新しいものはすぐ試す?様子見する?
10. 朝型?夜型?

# 日常の過ごし方
11. 休日は何してる?
12. 趣味
13. よく使うアプリ(なんでもOK)
14. SNSは何使ってる?どれくらい見る?
15. 買い物はネット派?店舗派?

# 困りごと・ストレス
16. 日常で一番「めんどくさい」と感じること
17. 「こういうアプリあったらいいのに」と思ったことは?
18. 最近イラっとしたこと(些細なことでOK)
19. 時間が足りないと感じるのはどんなとき?

# 好み・こだわり
20. 好きなアプリやサービスを3つ(UIが好きなもの)
21. 好きな色やトーン
22. デザインの好み(シンプル?リッチ?クール?かわいい?)
23. 情報は多く表示されてる方がいい?スッキリがいい?

# 価値観
24. お金を使うのは何に対して?
25. アプリに求めるもの(効率?楽しさ?安心感?)
26. お金を払ってでも解決したい悩みは?

ポイントは技術的な話を一切入れてないこと。エンジニアかどうか関係なく、「どんな人間か」「何に困ってるか」「何が好きか」だけに集中してる。

Step 2: プロンプトを作る

次に、ペルソナ渡したら分析→提案→デザイン→実装まで一気にやってくれるプロンプトを作った。

ポイントは、いきなりアプリ作らせるんじゃなくて最初にペルソナを8つの観点で深掘り分析させること。「行動パターンの矛盾」「隠れたニーズ」「感情のトリガー」とか、その人を色んな角度から理解してから提案に入る構造にした。こうしないとAIって表面的な情報だけ拾ってなんか無難なもの出してくるんよ。

このプロンプトもAIと一緒に作ってて。AIに素案出させて、自分がレビューして修正指示する繰り返し。たとえば分析観点の一つに「空白の時間を特定する」ってのがあったんだけど、いやアプリって空白の時間にしか使わないわけじゃないじゃん。既存の行動に溶け込むパターンもあるし。「前提がおかしい」って指摘して「いつ・どう使われるか」に直させた。

おもしろかったのがAIの自己レビュー。素案出した後にAI自身が「Step 2〜4が薄い。分析結果との紐付けが弱い」って言ってきて。いやそれお前が出した素案やんって感じだけど、言ってることは合ってたから、各Stepに「分析結果をどう反映したか明示すること」って制約を追加させた。

役割分担: AIがプロンプトの素案作成・自己レビュー / 自分は観点の修正指示・前提の誤りの指摘

Step 3: 自分のペルソナを回答する

26項目に答えた。抜粋するとこんな感じ。

  • 29歳、男、エンジニア、東京一人暮らし
  • 性格: 優しいけど変人。直感型。めんどくさがり。夜型。
  • 趣味: ゲーム。休日もゲーム。
  • SNS: Twitter 2時間、YouTube 3時間、TikTok 3時間(計8時間
  • よく使うアプリ: TikTok
  • 日常で一番めんどくさいこと: すべて
  • 欲しいアプリ: それがわからない
  • 最近イラッとしたこと: AIが嘘ついたとき
  • 好きなUI: YouTube、Apple、朝倉未来の公式サイト
  • 好きな色: 黒、赤、パステルも好き
  • デザインの好み: シンプルリッチ、スッキリ

割と正直に書いた。「すべてがめんどくさい」とか「欲しいものがわからない」とか投げやりだけど、こういう回答でAIがどこまで読み取れるかが勝負でしょっていう。

Step 4: AIに食わせて実行

ペルソナとプロンプトをClaude Codeに渡して実行した。

AIの分析で「お、わかってんじゃん」ってなったとこ

AIが8つの観点で分析してきたんだけど、刺さったのがこのへん。

「めんどくさがり」なのにSNS 8時間の矛盾

めんどくさいのは「自分で何かを決めること・始めること」であって、受動的に流れてくるものには没頭できる。

たしかに。TikTokもYouTubeも自分から探しに行ってるわけじゃなくて、勝手に流れてくるから8時間見れてるんだわ。

「欲しいものがわからない」の裏側

ニーズがないのではなく、自分のニーズを発見するプロセス自体を他者(またはシステム)に委ねたい。

これも当たり。考えるのがめんどくさいから「それがわからない」って答えたんだけど、AIはそれ自体をデータとして拾ってきた。

使い続けられる条件

3日で飽きるアプリの特徴: 初回に設定が必要、毎回「何をする?」を聞いてくる。
毎日使っているサービスの共通点: 開いた瞬間にコンテンツが流れてくる。選ぶ必要がない。

これ自分じゃ言語化できてなかったけど、言われてみたら完全にそう。

で、AIが出してきたのが

「Drift」— 夜のための発見フィード

要は自分の興味に合った面白いものが無限に流れてくるやつ。SNSじゃない。広告もない。人もいない。自分だけの夜のお供。

  • 雑学、グルメ、ゲームニュース、レビュー、ミニゲームがジャンル横断で流れてくる
  • TikTok式の上スワイプ。選ぶ必要なし。
  • 開いた瞬間にもう1枚目のカードが出てる。登録もチュートリアルもなし
  • ダークUI(黒ベース×赤アクセント)で夜向け
  • ソーシャル機能ゼロ。コメントもいいねもシェアもなし

ちゃんと分析結果から提案に落ちてるのがわかる:

自分のペルソナ アプリにどう反映されたか
めんどくさがり×SNS 8時間 勝手に流れてくる設計
欲しいものがわからない 選ぶ必要がないUI
TikTokが一番使うアプリ TikTok式スワイプ
黒・赤・シンプルリッチ ダークUI×赤アクセント
AIの嘘にイラッとする 情報ソースを必ず表示
一人暮らし・ゲーム ソーシャル機能なし

完成したアプリ

image.png

image.png

image.png

image.png

で、実際に動くモックまで出てきた。

  • 25枚のコンテンツカード — 雑学、グルメ(評価・価格つき)、ゲームニュース、買ってよかったもの、映画、テック、ライフハック
  • カテゴリフィルター — ジャンルごとに絞れる
  • ブックマーク — 気になったカードを保存できる
  • 詳細表示 — 「もっと見る」で深掘り情報が出る
  • 遊べるミニゲーム2種 — カラー記憶チャレンジとリアクションスピードテスト
  • PC/スマホ両対応 — キーボード、マウスホイール、タッチ操作全部いける

やってみて思ったこと

回答は正直に書いたほうがいい。 「すべてがめんどくさい」みたいな投げやりな回答でも、AIはちゃんとそこから読み取ってくる。むしろ取り繕うより素直なほうが矛盾が出やすくて、分析が深くなる。

いきなり作らせると浅い。 分析を先にやらせるのが大事。じゃないと「TODOアプリ」とか「習慣トラッカー」みたいな無難なやつが出てくる。先に深掘りさせとけば「こいつにTODOアプリは絶対無理」ってAI側で判断できるようになる。

AIと人間の分担はこんな感じだった:

工程 AI 自分
質問項目 生成・修正 方向性のフィードバック
プロンプト 素案作成・自己レビュー 観点の修正・前提の誤り指摘
ペルソナ回答 26項目に正直に回答
分析・提案・実装 全部 レビュー

全部AIに丸投げでもないし、全部自分で書いたわけでもない。AIが出してきたものを自分がレビューして軌道修正する、このやり取りが一番いい感じのものが出る方法だった。

まとめ

正直、思ったよりできは悪かった。中身はダミーデータだし、実用レベルには程遠い。ただこれはAIが悪いっていうよりプロンプトの詰めがまだまだ甘かったなと。分析→提案の流れは悪くないんだけど、「実装」のステップが雑すぎた。どういうデータ使うかとか、コンテンツの粒度とか、そのへんの指示が全然足りていなかった

ただデザインとか雰囲気はいい感じにできてる気がする。ペルソナから色味とかレイアウトとか操作感を導き出すってアプローチは、ちょっと気を引くものにはなった。

改善するならプロンプトの実装指示をもっと具体的にするところからだし、コンテンツも本物のAPIから引っ張ってくるとかしないと「使える」にはならない。今回はあくまで「ペルソナ渡したらここまで出てくるよ」っていうデモ。

  • プロンプトもAIと一緒に作ると楽。ただし詰めが甘いとそのまま出てくる。(ここは反省)
  • デザインの方向性を出すところまではかなり使える。プロンプト次第で化けそう
7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?