「AIを使えば、いろいろなことができるらしい」 最近、ニュースやSNSで本当によく聞きますよね。
でも、正直なところ、こんなふうに感じていませんか？
- 「で、結局自分は何をすればいいの？」
- 「プログラミングができないと無理なんじゃない？」
- 「ITに詳しい一部の人だけが得する話でしょ？」
実は、私も最初はまったく同じように思っていました。AIに興味はあるけれど、Webアプリ開発なんて自分には無縁の世界だと。
しかし、実際にAIとやり取りしてみると、「プログラミング知識ゼロのIT素人でも、聞き方次第でブラウザ上で動くツールを作れる」ことがわかりました。
この記事では、私がAIを活用して「IQ目安つき思考タイプ診断」というWebアプリを作った具体的な手順と、AIを思い通りに動かすための「質問のコツ」を余すところなくお伝えします。
1. いきなり作らせない。「材料」を分解してもらう
今回作ろうとしたのは、ユーザーがブラウザ上で12問のテストに答えると、「IQ目安」や「得意・不得意な考え方」がわかる簡易診断ツールです。
ここでやりがちな失敗が、いきなりAIに「IQテストを作って」とお願いしてしまうこと。こちら側の作りたいものが整理されていない状態で丸投げしても、微妙なものしか出てきません。
家を建てる前に設計図が必要なように、まずはAIと一緒に「要素の分解」から始めました。
Q. IQテストでは何を測るの？
まずはAIに、「IQテストではどういった要素を測るのですか？」と質問しました。すると、主に以下の6つの能力を見ていることがわかりました。
- 言語理解
- 図形・知覚推理
- ワーキングメモリ
- 処理速度
- 注意力・集中安定性
- 数的・論理推理
Q. それぞれの評価基準は？
次に、「これらの要素を測るためには、具体的にどういう評価基準があるのですか？」と深掘りします。
たとえば「言語理解」なら「共通点を見つけられるか」、「注意力」なら「問題文の条件を見落とさないか」といった、具体的な問題作成のヒント（客観的な評価基準）を引き出すことができました。
2. 「単なる数値」ではなく「プロフィール」にする
要素が見えてきたところで、結果の見せ方を考えました。「あなたのIQは〇〇です」と単なる数字を出すだけでは、実生活で役に立ちませんし、正式な医療検査ではないため誤解を招くリスクもあります。
そこでAIに、「IQだけでなく、6つの要素の個別数値や思考傾向も測れますか？」と相談しました。
結果として、「本格的なIQ検査」ではなく、「IQ目安つき思考タイプ診断」というコンセプトが固まりました。
「言葉で考えるのは得意ですが、時間制限があると焦りやすいタイプです」といった具体的なアドバイスが出るほうが、利用者にとって圧倒的に有益だからです。
💡 ポイント：結果は「傷つかない言い方」に調整する 「あなたは注意力が低いです」と突き放すのではなく、「急かされる場面ではミスが増えやすいかもしれません。メモを活用しましょう」と、前向きなアドバイスになるようAIにニュアンスの調整を指示しました。こうした「読者への配慮」もAIと一緒に考えることができます。
3. WordPressで動く「1ページ完結型」アプリにする設計
診断の構成は、読者が離脱しないよう「12問・3分で終わる簡易診断」に設定しました。では、これをどうやってWeb上で動かすのか？
IT素人にとって、データベースやログイン機能が必要な本格的なシステム開発はハードルが高すぎます。そこで狙ったのが、「HTML / CSS / JavaScriptだけで動く1ページ完結型のアプリ」です(これもAIに質問して教えてもらってます)。
1つのページの中で、以下のように画面が切り替わる仕組みです。
- LP（説明）画面：「診断スタート」ボタンを配置
- テスト画面：ブラウザ上で12問に回答
- 結果画面：「回答終了」を押すとその場で結果表示
これなら、完成したコードをWordPressの「カスタムHTML」ブロックにコピペするだけで動かせます。
4. 実際にAIへ投げた「神プロンプト」
準備が整ったところで、最終的にAIにツールを作らせたプロンプト（指示文）がこちらです。かなり細かく条件を指定しています。
あなたは、優秀なフルスタックエンジニア兼UI/UXデザイナーです。 HTML/CSS/JavaScriptのみで動く、WordPress固定ページに埋め込み可能な「IQ目安つき 思考タイプ診断アプリ」を作ってください。
【要件】
- 1ページ完結型（LP画面、診断画面、結果画面をJavaScriptで切り替える）
- 12問の選択式テスト（言語理解、図形推理など6領域を各2問ずつ測定）
- 回答終了ボタンで自動採点
- 結果画面に以下を表示（総合認知スコア、IQ目安レンジ、6領域スコア、思考タイプ、強み、ミスしやすい場面、改善アドバイス、各問題の正解・解説）
- 正式なIQ検査ではないという注意書きを必ず表示
- スマホ対応、外部ライブラリなし、データ保存なし
- コピペで動く完成コードを出力
【デザイン】
- シンプルで知的、かつやさしい印象（白、薄グレー、ネイビー、薄紫系）
- カード型UI、進捗バーあり、選択肢はタップしやすく
【出力形式】 最後に、WordPress固定ページへの貼り付け方も初心者向けに説明してください。
「診断アプリを作って」の一言で済ませず、問題数、測る項目、デザインの色合い、注意書きの有無、そして「WordPressへの貼り付け方」まで指定するのが、一発で使えるツールを出力させる最大のコツです。
5. ブログがなくても大丈夫！手元のパソコンで動きを確認する方法
「WordPressのブログなんて持ってないよ…」という方も安心してください。AIが出力してくれたコードは、ブログがなくても、あなたがお使いのパソコン上で今すぐ動かして遊ぶことができます。
用意するのは「テキストエディタ（メモ帳）」と「Webブラウザ（ChromeやSafariなど）」だけ。以下の3ステップで、自分だけのアプリが画面に表示されます。
ステップ①：メモ帳にコードを貼り付ける
AIが出力したHTML/CSS/JavaScriptのコードをすべてコピーします。次に、パソコンに入っているテキストエディタを開き、コピーしたコードをそのまま貼り付けます。
- Windowsの場合： 「メモ帳」アプリを使用
- Macの場合： 「テキストエディット」アプリを使用（※必ず上部メニューの「フォーマット」から「標準テキストにする」を選んでください）
ステップ②：拡張子を「.html」にして保存する
ファイルを保存する際、ファイル名を「test.html」や「shindan.html」のように、最後を必ず「.html」にして保存します。（保存場所はデスクトップなど、わかりやすい場所でOKです）。
ステップ③：ブラウザで開く
保存したHTMLファイルをダブルクリックするだけで、普段インターネットを見ているブラウザ（Google ChromeやEdge、Safariなど）が立ち上がり、完成した診断アプリの画面が表示されます！ボタンを押せば、きちんと次の問題へ進むはずです。
誰かに公開することはできませんが、「プログラミングなしでアプリが動く感動」を味わうには、この方法が一番早くてカンタンです。
まとめ：AIツール開発は「聞き方」が9割
今回一番の発見は、ブラウザ上で動く簡単なツールなら、IT素人でも十分に作れるということでした。
プログラミングの知識がなくても、以下のステップを踏めばアイデアは形になります。
- いきなり完成品を頼まず、まずは「要素を分解」させる
- 「何を測り、どう伝えるか」の目的とターゲットを明確にする
- WordPressで使えるよう、シンプルな仕様（HTML/JSのみ）で出力させる
- コピペ方法や修正方法までAIにサポートしてもらう
一度この作り方を覚えてしまえば、「仕事のミス傾向診断」や「文章力タイプ診断」など、様々なツールに応用が可能です。 「AIを使って何かしてみたい」と思っている方は、ぜひ小さな診断ツール作りから挑戦してみてください。
👇 実際にプログラミング知識ゼロで作った「IQ目安つき思考タイプ診断」はこちら！
（※自己理解のためのセルフチェックです。3分であなたの強みやミスしやすい場面がわかります）
【作例公開】バイブコーディングで作った「IQ目安つき思考タイプ診断」
「AIに言葉で指示するだけで本当にアプリが動くの？」その疑問にお答えします！プログラミング知識ゼロで完成させた診断ツールの実際の画面と動きを大公開。あなたのアイデアを言葉だけで形にする「バイブコーディング」の実力を、ぜひその目で確かめてみてください。