AIでオリジナルの思考IQ診断を作った
AIを使って、オリジナルの「思考IQ診断」を作った。 10問版と30問版を選べて、結果では推定IQ風スコア、分野別スコア、哲学者モチーフの認知タイプが出る。
※5/26更新）公開後に、結果共有URL、X用のOGPカード、短縮URL、クリック解析、診断結果ログ、問題別正答率の集計まで追加した。
今は、ただ遊べる診断ではなく、どの結果が共有されたか、どの問題が難しかったかまで見られる形になっている。
※5/28更新）その後さらに、日本語・英語の切り替え、英語版の公開URL、GA4のアクセス解析、外部公開用のOGP画像まで整えた。
日本語版はこちら。
英語版はこちら。
作ったもの
今回作ったのは、正式なIQ検査ではなく、ブログやSNSで楽しめるエンタメ診断だ。 ただし、ただの性格診断ではなく、問題を解いた結果から思考の傾向が見えるようにした。
- 10問版の簡易診断
- 30問版のしっかり診断
- 時間制限つきの出題
- 図形問題
- 自動採点
- 推定IQ風スコア
- 5分野のスコア
- 哲学者モチーフの認知タイプ
- 結果画像生成
- X投稿ボタン
診断結果はIQ風スコアだけではなく、認知タイプも出る
結果は単純な点数だけではなく、認知タイプも表示される。 たとえば、カント型、ライプニッツ型、パスカル型、デカルト型、ヴィトゲンシュタイン型、ニーチェ型のように、哲学者の名前を使ったタイプにした。
この形にしたのは、数字だけよりも共有しやすいからだ。 「107点だった」だけだと少し弱いが、「パスカル型 × デカルト型だった」と出ると、少し話題にしやすい。
最初は10問版と30問版の問題が重複していた
作っている途中で、10問版の問題をそのまま30問版の最初に使っていた。
でも、10問版を解いたあとに30問版へ進んだ人から見ると、同じ問題が出るのは手抜きに見える。
そこで、10問版と30問版の問題は完全に分けた。
10問版は入口用、30問版は別問題でじっくり解く形にした。
問題文もかなり調整した
図形問題では、最初は問題文でヒントを出しすぎていた。
たとえば「時計回りに動く」「白い穴を見る」など、解くための視点をこちらから教えすぎていた。
それだと、規則性を読み取る問題ではなく、言われた場所を見るだけの問題になる。
そこで、出題時の文言はできるだけ短くして、解いたあとに解説で規則を説明する形にした。
結果画面ではキャラクターと会話例も出る
診断結果では、哲学者モチーフのデフォルメキャラクターも表示される。
最初はかわいすぎたので、少し年齢感や皺のある方向に調整した。
さらに、タイプごとの「あるある会話」も入れた。
診断結果を見た人が「あー、わかる」と思いやすいように、ただの説明文ではなく、少し砕けた会話形式にしている。
Xに投稿できるようにした
診断結果はXに投稿できるようにした。
投稿文には、タイプ名、短い一言、推定IQ風スコア、正答数、ハッシュタグが入る。
画像も生成できるので、結果画像を保存して手動で添付することもできる。
ブラウザだけでXに画像を自動添付するのは難しいため、画像は保存式にした。
日本語と英語の切り替えにも対応した
せっかく作るなら、日本語だけではなく英語でも使えるようにしたかった。
そこで、診断トップ、問題文、選択肢、結果ページ、解説、X投稿文、OGPカードまで、日本語と英語で切り替わるようにした。
特に面倒だったのは、結果ページとX投稿まわりだった。
英語表示にしても、投稿文やOGP画像が日本語のままだったり、逆に日本語に戻した時に一部だけ英語のまま残ったりした。
最終的には、URLの lang=ja / lang=en をもとに、ページ表示、投稿文、結果画像、OGPカードを切り替える形にした。
結果ページをそのまま共有できるようにした
最初は、Xに投稿しても診断ページのトップに飛ぶだけだった。
でも、それだと見た人からすると「この人の結果はどこにあるの？」となりやすい。
そこで、診断結果ごとに専用のURLを作るようにした。
共有されたリンクを開くと、その人の診断結果ページが直接表示される。
さらに、X上で見たときに結果が分かりやすいように、OGP用の結果ページも作った。
投稿画面でカード画像が読み込まれると、診断結果っぽいカードとして表示される。
Xの投稿画面では、カード画像が出るまで数秒待ってから投稿するのがよさそうだった。
すぐ投稿すると、画像なしになったり、カードの反映が遅れたりすることがある。
WordPressへの設置で詰まったところ
診断本体はWordPressの記事本文に直接貼るのではなく、HTMLファイルとしてアップロードし、固定ページにiframeで埋め込む形にした。
この方が、WordPressテーマのCSSやJavaScriptと干渉しにくい。
ただし、iframeはスマホ表示やスクロール位置の調整で少し詰まった。
特に、診断結果を見るボタンを押したあとに、画面が結果の上ではなく下の方に残る問題があった。
これはiframeの中だけでスクロールしても、親ページ側のスクロール位置が戻らないことが原因だった。
最終的には、診断側から親ページへ通知を送り、親ページ側でiframeの先頭へ戻す処理を入れて解決した。
iPhoneのXアプリ内ブラウザでも動くように調整した
PCのChromeでは問題なく動いても、iPhoneのXアプリ内ブラウザでは別の問題が出た。
結果共有URLを開いたとき、PCでは診断結果ページが出るのに、iPhoneのXアプリ内ブラウザでは診断トップに戻ってしまうことがあった。
原因としては、Xアプリ内ブラウザ側に古いJavaScriptがキャッシュされていた可能性が高かった。
そこで、diagnosis.html側の読み込みURLにバージョン番号を付けて、古いファイルが残りにくいようにした。
この調整を入れたことで、iPhoneのXアプリ内ブラウザでも、共有された診断結果ページを開けるようになった。
短縮URLとクリック解析も追加した
診断結果のURLは、結果データを含むため長くなりやすい。
そのままXに投稿すると見た目が悪く、共有しにくい。
そこで、診断結果ごとに短縮URLを作るようにした。
X投稿文には短縮URLが入り、その短縮URLをクリックすると、元の診断結果ページへ移動する。
さらに、短縮URLが何回クリックされたかも記録するようにした。
Xのカード取得やBotによるアクセスは、人間のクリックとは分けて記録する。
これで、実際にどれくらい人が見に来たのかを判断しやすくなった。
公開用URLも短くした
診断本体のURLは、もともと wp-content/uploads 配下の長いURLだった。
外部に出すには少し見た目が悪いので、Pretty Linkを使って公開用URLを作った。
- 日本語版：https://pilnmeness.com/thinking-iq-diagnosis/
- 英語版：https://pilnmeness.com/thinking-iq-diagnosis-en/
最初は301リダイレクトにしていたが、古い転送先がブラウザに残ってしまい、英語版URLを開いても最後に開いていた言語で表示される問題が出た。
そこで、リダイレクトを307に変更し、転送先URLにも lang=ja / lang=en とバージョン番号を固定で入れた。これで、日本語版と英語版を安定して開けるようになった。
問題ごとの正答率も見られるようにした
診断は作って終わりではなく、使われた後に改善できるようにした。
診断完了時には、全体結果と各問題の回答を匿名ログとして保存する。
保存しているのは、推定IQ風スコア、正答数、タイプ、分野別スコア、各問題の回答、正解・不正解、未回答、回答時間などだ。
Xアカウント名のような個人情報は取得していない。
これで、問題ごとの正答率、未回答率、平均回答時間、誤答選択肢の偏りを確認できる。
たとえば、特定の問題だけ正答率が極端に低い場合は、単に難しいだけではなく、問題文が曖昧だったり、別解がある可能性も見えてくる。
実際、作成中にも「この問題は別の見方でも答えが成立するのでは？」というものがあった。
そういう違和感を、公開後のデータからも見つけられるようにした。
作ってみてわかったこと
AIを使えば、診断コンテンツの原型はかなり早く作れる。
ただし、完成度を上げるには細かい検証がかなり必要だった。
- 問題に別解がないか
- 正解設定が解説と一致しているか
- 問題文でヒントを出しすぎていないか
- スマホで表示が崩れないか
- 結果画像の文字が重ならないか
- X投稿文が長すぎないか
- iframeのスクロール挙動が自然か
- 結果共有URLがSNS上で自然に見えるか
- OGPカード画像が反映されるか
- 短縮URLのクリック数が正しく取れているか
- Botやカード取得のアクセスを人間のクリックと分けられるか
- 問題別の正答率を後から確認できるか
AIに作らせて終わりではなく、実際に触って、違和感を拾って、何度も直す必要がある。
ただ、その修正まで含めてAIと進められるので、個人でもかなり作れる範囲が広がっていると思う。
英語圏にも出せるように準備している
英語対応までできたので、Product Hunt、Show HN、Indie Hackers、Reddit、AIツールディレクトリのような場所にも出せるように準備している。
そのために、英語の説明文、スクリーンショット、OGP画像、投稿文、プロダクト紹介文も整理した。
ただ診断ページを作るだけなら、日本語だけでもよかった。けれど、結果画像や共有URLまで作ったことで、外部に出せる小さなWebアプリに近い形になったと思う。
思考IQ診断を試す
思考IQ診断を試す
今回作った診断はこちら。 10問版なら短時間で終わるので、まずは軽く試してみてほしい。
結果はXに投稿できる。 共有リンクを開くと、診断トップではなく、その人の診断結果ページが表示される。
正式なIQ検査ではないが、自分の考え方のクセを見るエンタメ診断としては、かなり遊べる形になったと思う。
