【非エンジニア】制作60分・コスト0円で「20タイプ診断ツール」を作ってみた

「診断メーカーみたいなツール、自分でも作れたらいいのにな」

SNSでよく回ってくる、あの「◯◯診断」。名前を入れるとタイプが出てきて、思わずシェアしたくなるやつです。あれ、実は専門的なプログラミングの知識がなくても、AIに話しかけるだけで作れちゃうんです。

今回わたしは、Googleの「Gemini（ジェミニ）」というAIを使って、「AI活用タイプ診断」というオリジナルの診断ツールを作ってみました。しかも、コストは0円。制作時間は1時間ほどです。

この記事では、実際に作った手順を、つまずいたところも含めて全部お見せします。読み終わる頃には「あ、これなら私にもできそう」と思ってもらえるはずです。最後には、そのままコピーして使えるプロンプト（AIへの指示文）とツールのURLも置いておきますね。

※内容は2026年7月時点のものです。

まずは完成品を見てください

先に、できあがった診断がこちらです。

名前を入れて「診断スタート！」を押すと、その人の「AIの使い方タイプ」を判定して、こんなふうにカラフルな結果カードが表示されます。タイプは全部で20種類。しかも、タイプごとにカードの色が変わるので、何度やっても新鮮です。

「メンター依存型」「プロンプトエンジニア型」など、タイプ名もキャッチコピーもちょっとクスッとする感じに仕上げました。実際に遊べるようにネットにも公開しています（記事の最後にリンクを置いていますね）。

こういうものが、コードを1行も書かずに作れたんです。順番に、どうやって作ったかをお話ししていきます。

なぜ「Gemini」で作ったの?

AIツールはいくつかありますが、今回わたしが選んだのはGeminiの「Canvas（キャンバス）」という機能です。

理由はシンプルで、無料で使えて、しかもその場でアプリが動く形で作ってくれるから。「こういうものを作って」とお願いすると、Geminiが裏側のコードを全部書いてくれて、画面の右側でそのまま動かして確認できるんです。プログラミングの画面とにらめっこする必要がありません。

「AIにアプリを作らせる」なんて聞くと難しそうですが、やることは日本語でお願いするだけ。本当にそれだけなんです。

では、実際の手順を見ていきましょう。

STEP1：Geminiに「こんな診断を作って」とお願いする

まずGeminiを開いて、Canvasモードにします。そして、作りたい診断の中身を日本語で伝えます。

わたしはこんなふうにお願いしました。「AIの使い方タイプを診断するツールを作ってほしい」「名前を入れると結果が出るようにしたい」「SNSでシェアしたくなる、カラフルなカードで結果を表示してほしい」——こんな感じで、思っていることをそのまま言葉にするだけです。

お願いすると、Geminiが「はい、AI活用タイプ診断ツールですね！」と受け止めてくれて、裏側でせっせとコードを組み立ててくれます。この待っている時間が、なんだかワクワクしました。

ポイントは、最初から完璧を目指さないこと。 ざっくりお願いして、あとから「ここをこうしたい」と直していく方が、結果的にうまくいきます。ここは後でお話しする、わたしのつまずきポイントにもつながります。

STEP2：できあがった診断を動かしてみる

しばらくすると、画面の右側に診断ツールが表示されました。

「AI活用タイプ診断｜あなたはどのAIマスター?」というタイトルに、名前の入力欄と「診断スタート！」ボタン。色使いも、お願いした通りの明るくカラフルな雰囲気です。1回目でここまで形になるとは思わなくて、正直びっくりしました。

さっそく名前を入れて診断してみると、ちゃんとタイプが判定されて、結果カードが出てきました。特徴やおすすめのAIツールまで表示されて、「ちゃんと診断っぽい！」と嬉しくなりました。

でも、ここで問題が見つかったんです。

STEP3：つまずいたところ（ここが大事）

動かしてみて、わたしが「あれ?」と気になったのは、次の3つでした。

① 同じ名前なのに、押すたびに結果が変わる

最初の状態では、診断ボタンを押すたびに結果がランダムで変わってしまっていました。これだと「診断」というより「おみくじ」ですよね。同じ人が別の結果をシェアしたら、ちょっと変な感じになってしまいます。

② どんな入力でも診断してしまう

「aa」とか「ああ」とか、明らかに名前じゃないものを入れても、そのまま診断されてしまいました。これもちょっと気になるところ。

③ タイプの数が少ない

最初は5タイプだけだったので、もっと種類を増やして「自分だけの結果」感を出したいと思いました。

でも、慌てることはありません。気になったところは、またGeminiに話しかけて直してもらえばいいだけなんです。ここがAIで作るいちばんの良さだと思います。

STEP4：話しかけて、どんどん直していく

そこで、Geminiにこうお願いしました。

「同じ名前なら、必ず同じ結果が出るようにしてほしい」「名前じゃない適当な入力（aaや、ああなど）のときは、診断せずに『お名前を入力してください』と出してほしい」「タイプを20種類に増やして、それぞれ違う色にしてほしい」——こんなふうに、気になったところを一つずつ伝えていきます。

すると、ちゃんと直してくれました。今度は「aa」や「ああ」を入れると、やさしく「お名前を入力してください」と表示されるように。ちゃんとした名前を入れたときだけ診断されるようになって、ぐっと本格的になりました。

修正のコツは、「どこを・どうしたいか」を具体的に伝えること。 「なんかいい感じにして」だと、思っていたのと違う方向に直ってしまうことがあります。「同じ名前なら同じ結果に」「20種類に増やして」と具体的に言うと、一発でイメージ通りになりました。

そして、タイプが20種類・20色に増えたことで、名前を変えるたびにカードの色も内容もガラッと変わる、楽しい診断になりました。冒頭でお見せした赤や紫のカードも、この修正で生まれたものです。

STEP5：ネットに公開して、みんなが遊べるようにする

診断が完成したら、最後は「公開」です。せっかく作ったので、自分だけでなく、みんなが遊べるようにしたいですよね。

わたしは「Cloudflare（クラウドフレア）」という無料のサービスを使って公開しました。

やり方は、Geminiが作ってくれたコードを取り出して、Cloudflareにアップロードするだけ。難しそうに聞こえますが、ファイルをドラッグ&ドロップするくらいの感覚でできました。

これで、URLさえ知っていれば、誰でもスマホやパソコンから診断で遊べるようになりました。しかも、遊ぶ人はログインもアプリのインストールも必要ありません。リンクをタップするだけです。

自分が作ったものが、こうして本当にネット上で動いているのを見ると、じわじわ感動しました。

作ってみて感じたこと

正直に言うと、作り始める前は「わたしにできるのかな」と不安でした。でも、実際にやってみて一番感じたのは、「AIに話しかけるだけで、こんなものまで作れる時代なんだ」という驚きです。

コードは1行も書いていません。やったことは、日本語でお願いして、気になったところを「ここ直して」と伝えただけ。それだけで、SNSでシェアできる診断ツールが、コスト0円で、1時間ほどで形になりました。

しかも、これは「診断」だから遊びっぽく見えますが、同じやり方で仕事に使えるツールも作れるはずです。たとえば社内向けの簡単なチェックツールや、お客様向けのミニアプリなど。アイデア次第で、いろいろ広がりそうだなと感じています。

そのまま使えるプロンプトを置いておきます

「自分も作ってみたい!」という方のために、わたしが最終的に使ったプロンプト（AIへの指示文）を置いておきます。これをGeminiのCanvasモードに貼り付けるだけで、同じような診断が作れます。

AI活用タイプ診断ツールを作ってください。名前を入力すると、その人のAIの使い方タイプを判定して、シェアしたくなるカラフルな結果カードを表示するWebアプリです。

【基本の流れ】
1. 「お名前（ニックネーム可）」の入力欄と「診断スタート！」ボタンを表示
2. 名前を入力してボタンを押すと、20タイプの中から1つを判定
3. 結果をカード形式で表示（タイプ名・キャッチコピー・特徴3つ・おすすめAIツール）
4. 「結果をシェア」ボタン（Twitter/X）と「もう一度診断する」ボタンを表示

【判定ロジック】
- 診断結果は毎回ランダムではなく、同じ名前なら必ず同じ結果が出るようにする
- 名前の各文字の文字コードを合計し、その数値を20で割った余りでタイプを決定する

【20タイプ】
AIの使い方の傾向で、20通りの個性が出るように分ける。それぞれに
「タイプ名」「ひとことキャッチコピー」「あなたの特徴（3つ）」「おすすめのAIツール」を設定。

【20色】
20タイプそれぞれに、全部違う色を1つずつ割り当てる。白背景に映える明るい色で、
色相をバランスよく散らす。結果カードの見出し帯にその色を使い、色が濃いときは白文字にする。

【入力チェック】
「診断スタート」を押したとき、以下は診断せず「お名前を入力してください」と表示する。
・空欄／スペースだけ／記号だけ／数字だけ／1文字だけ
・同じ文字だけの繰り返し（aa、ああ など）／キーボードを適当に打った並び（asdf など）
日本語または英字が2文字以上あるときだけ診断を実行する。

【デザイン】
白背景ベースのカラフルで明るいデザイン。タイトルは「AI活用タイプ診断」、
サブタイトルは「あなたはどのAIマスター？」。すべて日本語。スマホでもきれいに表示。

一度で完璧に出なくても大丈夫。わたしみたいに「ここ直して」と話しかけながら、少しずつ育てていってくださいね。タイプの内容やキャッチコピーは、自由にアレンジしてOKです。

実際に遊んでみてください

最後に、今回作った診断を置いておきます。あなたは20タイプのうち、どの「AIマスター」でしょうか?

▼ AI活用タイプ診断（無料・ログイン不要） https://ai-type-shindan.dxnova.workers.dev/

名前を入れるだけで、あなたのAI活用タイプがわかります。結果はSNSでシェアできるので、よかったら「私はこのタイプだった!」と教えてもらえたら嬉しいです。お友達ともぜひ、やってみてくださいね。

AIって、使うだけじゃなくて「作る」のも、こんなに簡単で楽しいんだ——そんなふうに感じてもらえたら嬉しいです。

「AIでゲームを作る」が気になった方には、こちらの記事もおすすめです