はじめに
最近、「AIで何ができるのか？」という話題はかなり一般的になってきました。
ChatGPTを使って文章を書いたり、調べ物をしたり、ちょっとしたアイデア出しに使っている方も多いと思います。
そこで今回は「ChatGPTを使って、実際に“WEBサイト”を作ってみる」を実際に試してみたいと思います。
しかも専門知識ゼロの状態から、
指示を出すだけでどこまで作れるのか？を検証していきます。
今回の検証の流れ
今回やることは、できるだけ実務に近い形にしています。
・シンプルな企業サイトを作成
・FAQ（よくある質問）ページを作成
・FAQを自分で増やす方法を確認
・日本語⇔英語の切り替え機能を追加
「なんとなくすごい」ではなく、
👉「実際に使えるかどうか」にフォーカスしています。
まずはシンプルな企業サイトを作ってみる
最初に試すのは、いわゆるよくある企業サイトの作成です。
・会社概要
・サービス紹介
・お問い合わせ
このあたりの基本構成を、ChatGPTにそのまま指示して作ってもらいます。
プロンプトは結構短めにして以下の通りです。
—
シンプルな企業サイトのトップページをHTMLとCSSで作ってください。
含める要素：
・ヘッダー（ロゴとナビゲーション）
・メインビジュアル（大きな見出しと背景画像）
・サービス紹介（3カラム）
・フッター（会社情報）
配色は白背景に抹茶グリーンを基調にしてください。
＃出力
htmlファイルと必要であればCSSファイルを纏めてzipファイルのダウンロードリンクを提示してください
—
正直、この時点では「HTMLの雛形が出てくるぐらいかな」という印象でした。
しかし実際に出てきたのは、このようなサイトです。 実際にファイルをアップしておくので「こちら」からよろしければダウンロードしてください。
かなりそれっぽいサイトが短時間できあがりました。
ここで感じたのは、
👉「文章生成」ではなく「構成＋設計」までやってくる
という点です。
これまでのAIのイメージだと「文章を補助するツール」でしたが、
このレベルになると、
👉「たたき台を一瞬で作るツール」
という位置づけに変わってきます。
FAQ（よくある質問）のページを作ってみる
次に、「FAQページ」を作成してみます。
プロンプトは以下のように書いてみます。
少し専門用語も書いてあるようにも見えますが実際は「Qをクリックすると下にAが出るようにして欲しい」ということを軽い感じで記載している程度です。
—
HTMLとCSSで「AI店長が答えるFAQページ」を作ってください。
＃仕様
ユーザーとAI店長（吹き出しアイコン付き）の会話形式
- ただし最初は質問（Q）だけを表示し、クリックするとそのQに対応する回答（A）が開く仕組み
- JavaScriptで開閉を実装（クリックでトグル動作）
- デザインは「春×花見」をイメージした優しいトーン
- 背景に淡い和柄、丸みのあるカード調デザイン
- 質問の上に検索バーを設置し、キーワードでFAQを絞り込める構成
- FAQは10個以上 FAQ例が無い場合は製品から想定して作成
＃扱い商品情報
添付のテキストファイルを参照
FAQ例も入れてあります。
＃出力
htmlファイルと必要であればCSSファイルを纏めてzipファイルのダウンロードリンクを提示してください
—
今回は元々ある商品の概要と想定FAQをテキストファイルで添付します。
※ここは皆様もご自身の扱い商品やサービスなどに差し替えて是非試してみてください。
作成されたページがこちらです。
しっかりと要望通りのサイトが、ものの数分で作成されました。
作成されたサイトも「こちら」にアップしておくので是非ダウンロードして開いてみてください。
今回はここまで
このようにChatGPTを利用すれば、WEBサイトもあっさりと作成が可能です。
今回作ったようなサイトも、自分でいちから作ろうとすると結構手間が掛かりますのでChatGPTでまずはさくっと作ってもらうのはとても楽ですね。
次回はFAQに追加する場合や結構自分で作ると相当手間が掛かる英語サイトの作成も試してみますので、
是非今回のサイト作成をプロンプトを使って皆様も試してみてください。