MBTIアプリを作ってみた
今日は数週間前の社内LTでの発表内容をブログでも共有したいと思います。
LTのテーマは「AI」です。
ブログタイトルにあるように、私はMBTIのアプリを作って共有しました。
途中途中のスライドのキャプチャはGensparkで作成したものを切り貼りしています。
アプリリンクと作成結果だけ見たい方は、「アプリ作成結果」まで飛ばしちゃってください。
導入
「AIだから…」、「AIの結果を鵜呑みにするな」などの言葉を聞いたことはありませんか。
これらは不正確・曖昧といった特徴・イメージから、AIを批判するようなときに使われる言葉です。
不正確・曖昧であること、はデメリットとして捉えられがちです。
しかし、実は昔から曖昧であることが受け入れられているものがあります。
ということでパッと思いついたのがMBTIだったので、アプリを作ってみました。
MBTIとは
ここではあんまり長々と説明する気はないので、スライドのキャプチャだけ置いておきます。
元々MBTIを知っている人もこのスライドで知った人も、「MBTIって占いじゃないのでは？」と、思ったかもしれません。
厳密にはそうなのですが、今回は許してください…。
アプリ開発
ということでアプリ開発です。
使用したAI技術
・Azure OpenAI
- gpt-5
- gpt-5-chat
・Github Copilot
- gpt-4.1
AIの利用箇所
- コード生成
- 診断質問作成
- 各タイプの説明文作成
正直に言っちゃうと全部AIです（笑）。
開発期間
- 回答と診断の動作作成（10分）
- 診断タイプに普通と厳密を追加（10分）
- なんだかんだ修正（30分）
アプリ構成
- HTML
- CSS
- Javascript
- JSON
ソースはAzure App Serviceにデプロイしました。
やり取りは複数行いましたが、3行程度の短いプロンプトだけでアプリを開発することができました。
アプリ作成結果
無料のプランにデプロイしているのもあって、動作は保証できませんが、誰でもアクセスできるようにしています。
今月いっぱいは公開予定なのでよかったら診断してみてください。
以下、簡単にアプリの説明です。
画面構成
今回作成したMBTIアプリは以下の三画面構成です。
- スタート画面
- 質問回答画面
- 診断結果画面
スタート画面
質問数を選択します。体感では、問題数が多いと、MBTIの診断を行っている有名サイトの結果に近くなります。
質問回答画面
表示された質問に対して、賛成・反対で回答します。内部的にはこの結果を数値として持っておき、最後の診断結果を表示しています。賛成・反対が＋の値か－の値かは質問によって変わるようにしています。出題順はランダムです。
診断結果画面
診断結果が表示されます。けっこう的確な説明をしてくれるかも。
さいごに
ということでMBTIアプリを作ってみた！でした。簡単なプロンプトだけで、基本の動作を行うアプリが10分で作れてしまい、AIの進歩を強く感じました。
こんなアプリを作っておいて、私は実はあまりMBTIの結果を信じていませんでした。質問文が短いので、その時の気分や想定する状況で結果が変わるからあまり信用できないな、と思っていました。それもあって占いからMBTIを連想したという背景があります。
ただ今回動作確認をする中で、診断結果に表示されたメッセージが思ったよりも的確で、MBTIに対する認識が変わりました。私は「仕事」で診断を行ったわけですが、MBTIではこういった場面想定が重要であるように思います。
会社でMBTI診断を行うことで、場面想定を「仕事」で固定し、異動された方や新人の方とのコミュニケーションに役立てる…なんてこともできるかも。
それでは今回は以上になります。ここまで閲覧いただきありがとうございました！
