「AIに言葉で指示するだけで、本当にWebアプリなんて作れるの？」

そんな疑問にお答えする前に、まずは百聞は一見に如かず。前回の記事で作った「神プロンプト」をAIに投げ込み、プログラミング知識ゼロ（手入力のコード一切なし）で完成した実際の診断ツールの画面をご覧ください！

🚀 いきなり公開！これが完成した診断アプリです

出力されたコードをWordPressに貼り付けただけで、ブラウザ上でサクサク動くこんなツールが完成しました。

12問・約5分でわかる

IQ目安つき
思考タイプ診断

言語理解・図形推理・数的処理・記憶力・注意力・抽象思考の6領域から、あなたの認知傾向と思考タイプを簡易診断します。

6領域を測定 各領域2問ずつ、合計12問でバランスよく確認します。

IQ目安レンジ表示 正答数から、あくまで参考値として目安レンジを表示します。

解説つき 各問題の正解・不正解と考え方を最後に確認できます。

注意： この診断は娯楽・自己理解を目的とした簡易テストです。医療機関や専門機関で実施される正式なIQ検査、知能検査、心理検査ではありません。表示されるIQ目安は参考値であり、能力や人格を決定するものではありません。

1. スタート画面（LP画面）

ページを開くと、ユーザーを優しく誘導するスッキリとした画面が表示されます。

【3分でわかる！IQ目安つき思考タイプ診断】 この診断は、あなたの得意な考え方や、ミスしやすい場面を客観的に分析するセルフチェックツールです。 ※医療機関の正式な知能検査ではありません。

[ 診断をはじめる ] ←ぽってりとして押しやすいネイビーのボタン

2. 診断画面（サクサク進む12問）

スタートボタンを押すと、画面がフワッと切り替わりテストが始まります。

進捗：[====　　　　] 3/12問

Q. 次の言葉の中で、仲間外れはどれですか？ [ リンゴ ] [ みかん ] [ キャベツ ] [ バナナ ]

スマホでの操作を前提に作ってもらったため、選択肢はタップしやすい大きめのカード型。選んだ瞬間に次の問題へ自動で進む、心地よい操作感です。

3. 結果画面（あなただけの詳細な診断書）

12問すべてに答えると、自動採点されてすぐに結果が出ます。単なる点数ではなく、AIが「実生活でのアドバイス」まで言語化してくれます。

📊 あなたの診断結果

総合認知スコア： 75 / 100

IQ目安レンジ： 105 〜 115

思考タイプ： 『石橋を叩いて渡る、精密アナリスト』

領域別スコア： 言語理解（高）／処理速度（中）／注意力（非常に高）

💡 あなたの強み 細かいルールの変化や、文章の矛盾に気づく能力に長けています。複雑な資料の読み込みや、ミスが許されないチェック業務で高いパフォーマンスを発揮します。

⚠️ ミスしやすい場面 「とにかく早く出して」とスピードだけを求められる場面では、確認不足への不安から焦りが生じ、本来の力が出せないことがあります。

🌱 改善アドバイス スピードが求められるタスクでは、あらかじめ「今回は60点の完成度でOK」と自分の中で基準を下げるマイルールを作ると、スムーズに動き出せます。

魔法の正体は「バイブコーディング」

いかがでしょうか？たった12問の簡易テストでも、ここまで本格的で温かみのあるフィードバックを返すことができます。

信じられないかもしれませんが、このアプリを作るのに私はプログラミング言語を1行も書いていません。

やったことは、AIに対して「こういうツールを作って」と自然言語（日本語）で対話しながら指示を出しただけ。今話題の「バイブコーディング（対話型開発）」という手法です。

WordPressの「カスタムHTML」に貼るだけ

AI（今回はフルスタックエンジニア兼UI/UXデザイナーという設定）に出力してもらったHTML、CSS、JavaScriptのコードをコピーし、WordPressの固定ページにある「カスタムHTML」ブロックにペーストしただけです。

データベースの構築や、面倒なサーバー設定、ユーザー登録機能などは一切省き、「1ページの中で画面が切り替わるだけ」のシンプルな作りにしたのが成功のポイントです。

でここまで実用的なものができたのか？

作例を見ていただければわかる通り、AIはただシステムを作るだけでなく、「文字のトーン＆マナー」や「UIの使いやすさ」まで反映してくれます。

これが実現できたのは、前回の記事でお伝えした「要件定義（何をどう作りたいか）の解像度」が高かったからです。

AIに「いい感じのデザインにして」と丸投げするのではなく、

色は白、薄グレー、ネイビーを使って知的に
スマホでタップしやすいように選択肢はカード型で
結果はユーザーが傷つかない、前向きな表現で

と、具体的な言葉（バイブス）でAIと完成イメージを共有できたからこそ、一発でこれだけ精度の高いツールが出力されました。

詳しい作り方・プロンプトは前回の記事をチェック！

作例を見て、「自分もこんなツールを作ってみたい！」「AIにどんな指示を出したのか具体的に知りたい！」と思った方も多いのではないでしょうか。

AIへの上手な質問のコツや、実用的なコードを一発で出力させるための「神プロンプト」が完成するまでの具体的手順は、以下の記事で詳しく紹介しています！

ブログを持っていなくても、手元のパソコンで今すぐアプリの動きを確認できる裏技も解説しているので、ぜひあわせて読んでみてください。

👇 あわせて読みたい

IT素人が「IQ目安つき思考タイプ診断」を作った具体的手順【プログラミング不要】
プログラミング知識ゼロでも大丈夫！IT素人がAIを活用して、ブラウザで動く「IQ目安つき思考タイプ診断」Webアプリを作成した具体的手順を公開。AIへの上手な質問のコツからWordPressへの実装方法まで、非エンジニア向けのツール開発術を徹底解説します。