診断フォームを自作|コードも書けない僕でもできた①

web5開発

WebやAIの話って、どこか自分には関係ない世界に感じませんか?

僕もそうでした。

専門用語も分からないし、プログラミングなんて一度も触ったことがない。
カタカナや英語を見るだけでめまいがする。

でもある日、かずくんとの話の中で出た「これ作れたら面白いかも」と思ったことを、AIに聞いてみててみたところ、できてしまいました。

技術ゼロの僕でも、「診断アプリ」を作れる時代。

どう踏み出したかのリアルをお伝えします。

あったらいいなを形にしてみたかった

診断アプリつくれないかな。

そんな話を、ふとした雑談の中でしていた時でした。

昔から、占いや性格診断って、なぜか盛り上がりますよね。特に、生年月日や血液型など、誰もが持っている情報で気軽に楽しめるものは、会話のきっかけにもなります。

僕自身、特にスピリチュアルとかには詳しくないけれど、「ちょっと当たってるかも?」って診断に出会うと、ついシェアしたくなる。

でも今までは、そういう診断される側として楽しむだけでした。

「作る側」に回れたら、もっと面白いんじゃないか?

ある日、かずくんと話していたとき、

「自分の名前や生年月日で診断コンテンツが作れたらいいよね」という話題になりました。

当初は思いました。

「いくら何でまだAIはその域まで達していない。」
「コードも書けないし、診断の仕組みなんて分からない」

まずChatGPTに聞いてみました。
「占い学や統計学的に生年月日と血液型で診断するようなフォームって作れる?」と。

答えは「Yes」
HTMLとJavaScriptのコードを生成してくれました。

もちろん、最初は動かなくて、エラーも出まくりでした。
けれども、わからないところはまたChatGPTに聞いて、少しずつ動く形にできました。

「わからない→聞く→試す→直す」

この繰り返しで、気づけば簡単な診断アプリの“原型”が完成しました。

僕が作った診断は、正直シンプルです。
でも「仕組みを知る→自分で動かす→反応を得る」って、この流れがとにかく面白くて、クセになります。

まずは「自分が面白いと思ったものを、形にしてみる」
この体験そのものが、今の時代の“武器”になると感じました。

一度やってみると、他にも応用できるんじゃ?という発想が湧いてきます。
生年月日×血液型の診断ができたなら、

・価値観診断
・働き方タイプ診断
・エネルギーカラー診断

など、いろんな切り口で作れる気がしてくる。

コードが分からなくても「つくる側」になれる。

自分の欲しいと思ったものが自由に生成することができる。
そんな時代に生きているって、めちゃくちゃワクワクしませんか?

ChatGPTと一緒にゼロから設計

HTMLもJavaScriptも、最初はまるで呪文のように見えました。

コードエディタを開いても、どこに何を書けばいいのかすら分からない。
そんな僕でも、作成に取りかかれたのはChatGPTのおかげです。

「診断アプリを作りたい」と伝えると、入力フォームや送信ボタン、出力結果の表示エリアといった基本の構成を提案してくれました。

そのコードを、Macにある自分のローカル環境にコピーして貼り付けるところからスタート。

最初はうまく動かないこともありましたが、エラーが出たらChatGPTにそのまま貼って質問。
すると、どう修正すればいいのか具体的に教えてくれる。

これを繰り返していく中で、少しずつ構造や意味も理解できるようになっていきました。

「ここを少し変えたい」と思った部分を、ChatGPTに伝えて修正していくたびに、実際の画面が変化していく。

自分が手を動かしたことでページが動いた瞬間、たったそれだけのことがものすごく嬉しかったです。

ある程度できるようになるとバージョン管理のためにGitHubも使い始めることもできます。

コードを保存・管理できるだけでなく、他の人に見せたり共有したりもできる仕組みがあることを知り、開発していると密かにテンションが上がったのも事実です。

ChatGPTがいなければ、絶対に始められなかった。
だけど、AIの進化により本来専門的なコミュニティで学んで仕事にするものが、
始めてみたら“ゼロ”の自分でも、ちゃんと作れる世界があることを体感しました。

AI×性格パターンの組み合わせ

最初は質問と答えが単純に表示されるだけの構成でしたが、性格パターンを分析して、結果に合わせたコメントやアドバイスが出せるものも作成できました。

例として

  • Aが多い人は「直感型リーダー」

  • Bが多い人は「サポート型の安心設計者」

  • Cが多い人は「アイデア豊富な創造者」

  • Dが多い人は「堅実で慎重なバランサー」

といったように、回答傾向からタイプを判定する仕組み。

ChatGPTに「4択×10問の診断で、選択肢ごとにポイントをカウントして、最も多かったタイプを表示するようにしたい」と伝えると、それに沿ったJavaScriptのコードを即座に提示してくれました。

まるで隣にエンジニアの相棒がいるような感覚でした。

しかも、こちらのレベルに合わせて何度でも聞けるし、間違っても怒られない。笑

「これで合ってる?」と聞きながら、少しずつロジックを調整し、徐々に診断としての形が整っていきました。

技術ゼロの僕でも、「性格タイプ診断」というコンテンツを作れたことは、大きな実験体験になりました。

完成品をシェアしたら反応が変わった

最初はまずは実験くらいの気持ちで作り始めた診断フォームで、AIで作ったものが機能するかも疑っていました。

「ChatGPTと一緒に作った診断フォームです。よかったら試してみてください!」と、簡単な紹介とURLを添えた投稿です。

すると、思った以上に反応がありました。

「診断結果あってるかも!」「無料で作れるの?」
たくさんのリアクションをいただきました。

技術的にはシンプルなコードでも、「楽しい体験」を生み出すことができる。

これまで大きなお金を支払っていたフォームやアプリが、
AIを使うことで自分で開発できたり、開発費用を抑えて導入できるようになりました。

まとめ

AIの進化によって、かつては有料のツールを購入するしかなかった診断や分析システムを、自分の手で“つくる”ことができる時代がやってきました。HTMLやJavaScriptの知識がなくても、ChatGPTと対話することで、必要なコードや仕組みをゼロから組み立てられるようになったのです。

さらに、ChatGPTは世界中の情報や統計、心理学のパターンに精通しており、その知識を活かしてオリジナルの性格診断や価値観テスト、さらには占いコンテンツまで、自分好みに自由に設計できます。

こんなの、あったらいいな

そう思ったものを、待つのではなく、つくる側へ。

そしてそれを届けることで、人との新しいつながりや反応が生まれ、自分自身の世界も広がっていく。

今は、“想像”を“実装”できる時代。

新卒後に理学療法士の仕事を約8年勤務。副収入を得ようとMLMや投資を自己実践するも全て失敗。コロナ禍で職を失いホームレスへ転落。ある方からweb収入の手法を伝授し7日で生活再建。awabotaに参加し web3を学び肉体労働での収入から完全web収入へ。現在はawabotaでかずくんの構造を現実化する開発部門を担当。構造変換士/meiha seed トレーナー

話したいことがあれば、XのDMへ

ホームへ
web5開発
ホームへ
タイトルとURLをコピーしました