ChatGPTを実際に色々使ってみようシリーズを続けていきたいと思います。
今回は「WEBサイトの作成」にチャレンジしてみましょう。
なぜChatGPTでWEBサイトを作るのか？
WEBサイトを作成するとなると、業者に頼めばそれなりにお金がかかりますし、自分で作るのも知識や時間が必要です。
そんな時こそChatGPTを活用すれば、簡単にサイトを作ることができます。
一度練習を兼ねて作ってしまえば、更新や別のWEBサイトも簡単にできるようになるので、ぜひ試してみてください。
まずはビジネスアイデアを出してみる
せっかくなので、ページの題材もChatGPTに考えてもらいましょう。
最初に次のようなプロンプトを入力しました。
——————
あなたはマーケティングの専門家です。
現代のトレンドや消費者ニーズ、そして「東京都浅草」の地域特性・現状をふまえて、
個人〜中小企業が「東京都浅草」で新たに展開できるビジネスアイデアを5つ提案してください。
内訳として、サービス・事業を2案、商品を2案、IT関連を1案含めてください。
各案には以下の情報を明示してください。
・仮の社名（会社規模含む）
・商品／サービス名
・コンセプト（主旨・特徴）
・ターゲット層（年齢・性別・ライフスタイルなど）
・価格帯または価格設定の考え方
——————
この結果、5つのビジネスアイデアを提案してくれました。
その中から、今回は「④ 商品案2 商品名：ヴィーガン雷おこし＆抹茶クッキー」を選び、深掘りを依頼しましょう。
商品アイデアを深掘りしてみる
次に出したプロンプトがこちらです。
——————
最終的に出して貰ったアイデアについて、WEBページの作成まで行いたいと思います。
「④ 商品案2 商品名：ヴィーガン雷おこし＆抹茶クッキー」について、事業アイデアの深掘りを行ってください。
WEBページに記載すべき、コンセプト、イメージカラー、商品種類の設定など、
詳細の企画書・商品仕様書を作ってください。
——————
すると、かなり細かい企画書や商品仕様書を生成してくれました。（上記画像は冒頭部分だけです）
これをベースに、実際のWEBサイト作成を依頼してみましょう。
実際にWEBページを作ってもらう
続けて以下のように指示しました。
——————
作成してくれた仕様書を元に、商品のWEBページを作ってください。
商品、会社の説明サイトなので、WEB購入ボタンなどの機能は一旦不要です。
イメージカラーもしっかりと反映して、まずはコンセプトをアピールした上で、商品の詳細がわかるようなページにしてください。
htmlファイルと、CSSファイルをダウンロードできるように出力してください。
——————
結果として、しっかりとしたHTMLとCSSファイルが生成されました。
実際にページを開いてみると、上部メニューのリンクやFAQの展開なども機能しており、驚くほど完成度の高いWEBページができました。
※作成されたファイルをリンク貼っておきますので、よろしければこちらからダウンロードして実際に開いてみてください。
（ダウンロードが始まらない場合は「こちらから」を右クリック→リンク先を保存をお試しください）
※htmlファイルとCSSファイルとか勉強しないと結局は難しくない？って人もいるかも知れませんが、基礎だけわかれば一旦は大丈夫です。
「htmlファイルには実際のWEBサイトの内容文（コード）が記載されていて、CSSにはデザイン（配置等含む）情報が入っている」程度の認識があって、同じフォルダ内にファイルを入れて、htmlファイルを開く。 って流れだけ覚えればとりあえずOKです。
ここまでのまとめ
写真や画像を入れる場所もほしいし、コンセプトカラーをしっかり反映してねと指示したせいで、実際の商品ページには必要のないカラー情報などが入っているのでそれを削除したりと、次回、詳細の修正を進めていきたいと思います。
ちなみに実際に私が書いたプロンプト部分を見てみてください。
数行のプロンプトを数回繰り返すだけで、ここまでしっかりしたWEBサイトを作ってくれるのは本当に凄いですよね。
例えば、今回は浅草でアイデア出しからしましたが、例えば皆様の地域で試してみる。
または、今、実際に商品や事業を行っていれば、その概要を記載して、WEBの元になるような提案書を作ってもらう。などご自身にあった内容で実際に進めてみると更にわかりやすいと思いますので、是非試してみてください。
コメント