最近は ChatGPT や Gemini などの生成AIを使って、HTMLサイトを簡単に作れるようになりました。
例えば、
- 「家計簿アプリを作って」
- 「スマホ対応のToDoリストを作って」
- 「保存機能付きのメモ帳を作って」
のように依頼するだけで、かなり実用的なコードを生成してくれます。
ただ、実際に使ってみると分かるのですが、
「どう依頼するか（プロンプト）」で完成度がかなり変わります。
特に初心者の場合、
- 何を書けばいいか分からない
- 必要な機能を書き忘れる
- AIへの指示が曖昧になる
といった問題が起きやすいです。
そこで今回、
AIに投げるサイト作成用プロンプト(依頼文)を自動生成するツールを作成しました。
実際に使えるページ
こちらからそのまま利用できます。
このサイト自体を使用するのには、インストール不要・ログイン不要です。
サイトに訪れるだけで使用できます。
ただし、生成 AI を使う場合は、事前にブラウザでログインしておくと動作が安定しやすいため、生成 AI 側でログインする事を推奨します。Google アカウントでログイン可能だと思います。
特に Gemini は Google 検索の画面でログインしておけば、ログイン状態になるハズなので、ログインが楽です。
このツールでできること
大きく分けて、
- 新規作成
- 既存サイトの編集
の2モードがあります。
① 作成モード（新しくサイトを作る）
新しいサイトを生成したい場合に使います。
入力する内容はシンプルです。
- サイト名
- 作りたい内容
- 欲しい機能
例えば、
- カレンダーを付けたい
- データ保存したい
- スマホ対応したい
- HTML単体で動かしたい
などを入力・選択できます。
下記のようなプロンプト(依頼文)を作る事が最終目的です。
自分のアマゾンの遊戯王通販用の、商品登録．検索用のサイトを作成頂けますか？
商品登録ページがあり、商品を登録できます。
進捗はindexeddbにリアルタイム保存とJSONでのバックアップができます。
商品登録はカード名と、アマゾンURLだけ載せていきます。
順序上下移動、編集、削除などの機能があります。
アマゾンURLはベージにどうしても必要箇所だけ保存します。
検索文字列はページ到達に不要で、〇〇.jp/は共通なので、閲覧時に補助すれば問題ありません。
サイトを保存ボタンで、登録した内容の検索用サイトをダウンロードできます。
ダウンロードした検索用サイトは運営側がChatGPTで質問しながら、Githubで公開して、誰でも閲覧できる状態にする形です。
chatgptで質問しながらGithubに公開する手順は登録側で載せておいて下さい。
上記レベルのサイトは有料版でなければ一発生成は出来ないと思いますが、上記のような指示文の作成を目的にします。(例えば月3,050円の有料版ならば下記のサイトが一発生成されました)
よくある機能はチェックボックス化
初心者だと忘れやすい内容を、チェック形式で追加できるようにしています。
例えば、
- IndexedDBによる自動保存
- エクスポート / インポート
- スマホ対応
- 初心者向けUI
- HTML単体動作
などです。
チェックを入れるだけで、AIへの指示文に自動反映されます。
プロンプト(依頼文)を自動生成
入力後に「質問文をコピー」を押すと、
AIへそのまま貼り付けられるプロンプトが完成します。
あとは、
- ChatGPT や Gemini を開く
- 貼り付ける
- 送信する
だけです。
するとHTMLコードが生成されます。
② 編集モード（既存サイトを改善する）
既に作ったサイトを改善したい場合はこちらを使います。
入力するのは、
- 修正したい内容
だけです。
例えば、
- 保存機能を追加したい
- デザインを改善したい
- スマホで見やすくしたい
- バグを修正したい
などを書くだけで、修正用プロンプトを自動生成できます。
このツールのメリット
一番のポイントは、
「何を書けばいいか考えなくていい」
ことです。
このツールを使うことで、
- AIへの指示漏れを減らせる
- よく使う機能を簡単に追加できる
- 作成 → 修正 の流れが分かりやすい
というメリットがあります。
特に、
「AIでサイトを作ってみたいけど、何を入力すればいいか分からない」
という人にはかなり向いていると思います。
まとめ
生成AIを使ったサイト作成は非常に便利ですが、
「どう依頼するか」
で結果が大きく変わります。
このツールを使えば、
- プロンプト作成
- 必要機能の整理
- AIへの依頼文作成
をかなり簡単にできます。
生成AIでサイト作成を試してみたい方は、ぜひ使ってみてください。
ツールはこちら