なぜこの章があるのか：50円で心臓発作になりそうだった話
この章を書いた理由は単純です。友人が簡単な抽選ホイールのWebページを作るのに50円払ったからです。
それを聞いて、私は心臓発作になりそうでした。
50円が高いわけではありません。こんなもの、無料のAIを使えば5分で作れるのに！
本当に、もしそんなニーズがあるなら、直接私に50円をチップして、ステップバイステップで教えてもらう方が、ああいったサービスに払うよりマシです。少なくとも私のチュートリアルは無料で、各ステップを明確に説明します。
そこでこの章は特別編として、無料のAIを使ってシンプルで実用的なHTMLページを作る方法を具体的に教えます。
重要な注意：まずは無料のWeb版に慣れよう
本題に入る前に、一つ強調しておきたいことがあります。
現在のAI Web版はすでに非常に強力です。 プログラミングの知識は不要、ソフトウェアのインストールも不要、ブラウザを開くだけで使えます。
AI Web版でできること：
- チャットで質問に答える
- 画像を認識して内容を分析する
- コードを書いてWebページを作る
- PPTやレポートを作成する
- 文書を翻訳・要約する
- その他多数…
私の提案：初心者はまず無料のWeb版AIに習熟してから、APIなどの高度なツールを検討すべきです。
なぜなら、Web版は：
- 完全無料（または generous な無料枠がある）
- シンプルで学習曲線がない
- すでに十分強力
- 問題があれば直接AIに質問できる
それでは本題に入りましょう。AIを使って抽選ホイールのWebページを作るです。
AI Studioを使ってHTML Webページを作成する
ステップ1：Google AI Studioにアクセス
使用するのはGoogle AI Studio、Google公式の無料AIプラットフォームです。
なぜこれを選ぶのか？
- 完全無料
- Gemini 3 Proが強力
- Webページ作成のような複雑なタスクに適している
手順：
- https://aistudio.google.com を開く
- Googleアカウントでログイン（VPN/プロキシが必要）
- メインインターフェースに入る
ステップ2：Playgroundとモデルを選択
ログイン後、AI Studioのメインインターフェースが表示されます。
手順：
- 左側メニューの「Playground」をクリック
- 右上のモデルセレクターで Gemini 3 Pro を選択
- Flashは選ばないでください。Proの方が高性能です
- 特にコードを書くような複雑なタスクにはProが適しています
- 左側がチャットインターフェースで、下部に入力ボックスがあることを確認
これでAIとチャットする準備が整いました。
ステップ3：プロンプトを入力してAIにWebページを生成させる
このステップが鍵です。AIに何をしてほしいかを明確に伝える必要があります。
詳細であればあるほど良い！「抽選ページを作って」とだけ言うのではなく、以下の点を具体的に：
- 見た目
- 機能
- 使い方
- スタイル
完全なプロンプト例
以下のテキストをコピーしてAI Studioの入力ボックスに貼り付けてください：
Please help me generate a lottery wheel webpage.
If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.
Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again
Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop
After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability
Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again
手順：
- 上記のプロンプトをコピーして入力ボックスに貼り付ける
- 「Run」ボタンをクリックするか、Enterキーを押す
- AIが生成するのを待つ（通常10～30秒）
ステップ4：AIが完全なHTMLコードを返す
AIの生成が完了すると、大きなコードブロックが表示されます。
AIの応答には通常以下が含まれます：
- HTMLコード：完全なWebページファイル
- 使用方法：開き方や修正方法
- カスタマイズガイド：賞品の変更や確率調整方法
コードはこんな感じです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottery Wheel</title>
<style>
/* Style code here */
</style>
</head>
<body>
<!-- Webpage content here -->
<script>
// Function code here
</script>
</body>
</html>
怖がらないで！ Webページはすぐに実行できます！スクリーンショットに従ってクリックするだけです。
ステップ5：Webページの内容を修正する（賞品の変更、確率の調整）
AIが生成したWebページは通常かなり完成度が高いですが、以下のような修正をしたい場合もあるでしょう：
- 賞品名を変更
- 当選確率を調整
- 色を変更
心配しないでください。コードを理解する必要はありません。AIにどんどん質問しましょう！
会話を続けて、AIに修正を依頼する
手順：
- AI Studioのチャットウィンドウを閉じないでください
- AIは以前の会話を覚えています
- 下に続けて質問を入力できます
- 修正リクエストを入力する
例1：賞品名を変更する
入力ボックスに次のように入力：
Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.
満足するまで繰り返す
これがAIでものを作る核となるプロセスです：
- 欲しいものを明確に伝える
- AIが最初のバージョンを生成
- 試してみて、問題を見つける
- AIに問題を伝え、修正させる
- ステップ3～4を完璧になるまで繰り返す
ポイント：
- 面倒がらずに何度も試す
- 一度に一つのことだけ変更して管理しやすくする
- AIが間違った変更をしたら「いいえ、前のバージョンに戻してください」と言う
ステップ6：最終的なWebページをダウンロードする
これで完璧な抽選ホイールWebページができました。ダウンロード方法は？
ダウンロードボタンをクリックするだけで、ローカルにダウンロードされ、開いて使えます！
HTML Webページで何ができる？おすすめ実用的ミニツール10選
ここまでで、抽選以外に、AIでどんなWebページが作れるのか？ と思っているかもしれません。
答えは：ほぼすべてのシンプルなミニツール！
以下は10の実用的な例です。直接AIに作ってもらうことができます：
1. オンライン翻訳ツール
プロンプト：
Make an online translation webpage that supports Chinese-English translation with a clean interface.
2. 画像文字認識（OCR）
プロンプト：
Make a webpage that can upload an image, recognize text in the image, and allow copying.
3. ToDoリスト
プロンプト：
Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.
4. カウントダウン/タイマー
プロンプト：
Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.
5. ランダムパスワード生成
プロンプト：
Make a password generator that can set length and complexity, with one-click copy.
6. BMI計算機
プロンプト：
Make a BMI health calculator that inputs height and weight and displays health advice.
7. QRコード生成
プロンプト：
Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.
8. カラーピッカー
プロンプト：
Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.
9. Markdownエディタ
プロンプト：
Make a simple Markdown editor with input on the left and real-time preview on the right.
10. 支出管理ツール
プロンプト：
Make a simple expense tracking webpage that can record income and expenses and display statistical charts.
これらのツールの共通点：
- すべて単一のHTMLファイル
- サーバー不要
- ブラウザで開くだけ
- 完全無料
よくある質問
Q1：コードがまったくわかりませんが、本当にできますか？
A： はい、できます！必要なのは以下の3つだけです：
- コピー＆ペースト
- ファイルを保存
- ブラウザでファイルを開く
この3ステップだけで、子供でもできます。
Q2：AIが生成したコードが完璧でない場合は？
A： それは普通です！AIとの会話を続けてください：
- 「ここにバグがあります。ボタンをクリックしても何も起こりません」
- 「この色は見苦しいので、きれいな色に変えてください」
- 「効果音を追加できますか？」
AIはあなたのフィードバックに基づいて改善を続けます。
Q3：AIで作ったWebページを商用利用できますか？
A： 技術的には可能ですが、注意点があります：
- AIが生成したコードには通常、著作権制限はありません
- ただし、クライアントのプロジェクトで使用する場合は十分にテストしてください
- 複雑な商用プロジェクトでは、プロの開発者を雇うことをお勧めします
Q4：HTMLファイルが開かないのはなぜですか？
A： よくある原因：
- ファイル拡張子が間違っている：
.htmlになっていることを確認（.html.txtではない） - コードが不完全：すべてのコードをコピーしたか確認
- ブラウザの問題：別のブラウザを試す
Q5：スマートフォンでも使えますか？
A： はい！2つの方法：
- HTMLファイルをスマホに転送し、モバイルブラウザで開く
- Netlifyなどのプラットフォームにアップロードし、URLでアクセス（推奨）
Q6：コードを修正したいが、方法がわからない？
A： 自分で修正しないでください！AIに依頼しましょう：
- 「背景色を青に変更したい」
- 「タイトルのフォントを大きくしたい」
- 「BGMを追加したい」
AIに修正させてから、新しいコードをコピーしてください。
まとめ
今日学んだこと：
- Google AI Studioを使ってHTML Webページを生成する方法
- 明確なプロンプトを書いてAIにニーズを伝える方法
- HTMLファイルを保存してブラウザで開く方法
- 会話を通じてWebページを継続的に改善する方法
- Webページを共有またはデプロイする方法
核となる考え方：
- プログラミング知識は不要
- お金は不要
- AIとのコミュニケーション方法を知っていればOK
- 5分で実用的なツールを作成
次回、誰かに簡単なWebページを作ってほしいと言われたら：
- AIを使って5分で作る
- その50円を請求する（冗談です）
- または、自分で作る方法を教える
本当に、お金を無駄にするのはやめましょう！