AIで「診断ページ」を1日で作ってみた。使ったことはあるけど、作ったことはなかった私の記録
こんな人に読んでほしい
- ChatGPTやClaudeで文章を書いてもらったことはある
- でも「アプリを作る」「ページを作る」まではやったことがない
- 難しそうで、そこで足が止まっている
わたしも、ずっとそちら側でした。この記事は「AIに質問する」から「AIと一緒に何かを作る」に一歩踏み出した、その日の記録です。
作ったのは「3つの質問に答えると結果が出るページ」
今回作ったのは、いわゆる診断ページ。3つの質問に答えると、結果が1つ表示される、あれです。
むずかしそうに聞こえますが、やったことは意外とシンプルでした。
- パソコンにAI（Claude Code）を入れる
- 「こういうページを作って」と日本語で伝える
- できたものを見て、気になるところを直してもらう
この3ステップだけです。プログラミングの知識は使っていません。
実際に伝えた言葉（そのまま）
いきなり「診断ページを作って」だけだと、思ったものと違うものができがちです。なので、最初にこんな条件を伝えました。
診断ページを1枚作ってください。
・1つのファイルだけで完成させてください
・インターネットにつながなくても動くようにしてください
・3つの質問に答えて「結果を見る」ボタンを押すと、結果が1つ表示される形にしてください
・スマホでも読みやすい文字の大きさにしてください
「1つのファイルだけで」「インターネットなしでも動く」の2つは、あとから効いてきます。これがないと、できあがったページを開くのにも一手間かかる仕組みになってしまうことがあるからです。
うまくいかなかったところも、正直に
もちろん、一発では思い通りになりませんでした。
- ボタンを押しても結果が出ない
- 文字が小さすぎる
- 質問の並び順を変えたい
そのたびに、専門的な言葉を使わず、見たままを伝えました。
結果を見るボタンを押しても何も出ません。原因を調べて直してください。
文字が小さいので、全体的にもう少し大きくしてください。
エラーが出ても、それを直すのもAIの仕事です。「失敗した」ではなく「まだ直す前」というだけなんだ、というのが実際にやってみての一番の発見でした。
できあがったもの
数時間の作業で、3つの質問に答えると結果が出る、1枚の診断ページが完成しました。ブラウザでダブルクリックするだけで開けて、誰かに送ってそのまま見てもらうこともできます。
「AIに文章を作ってもらう」までは経験があっても、「AIと一緒に、動くものを1つ完成させる」経験は、また少し違う手応えがありました。自分の仕事や発信のために、こういうものを自分で作れるかもしれない、という感覚です。
同じことを、自分の仕事のテーマでやってみたい方へ
この記録は、実際にわたしが担当している少人数のハンズオン講座（Claude Codeを使って、自分の仕事に合わせた診断ページを一緒に作る回）がベースになっています。
- マンツーマン・2〜3時間
- モニター価格でのご案内（先着順）
- パソコン操作に不安があっても、当日は隣で一緒に進めます
「読んで終わり」ではなく「自分の手でも一度やってみたい」と思った方は、こちらの申込みフォームからどうぞ。
申込みフォームを見る気になる段階でも大丈夫です。無理な勧誘はしません。