ChatGPTでWebサイトを制作してみた

最近話題のChatGPT。AIの登場によって、さまざまなサービスが自動化され、非常に便利な世の中になりつつあります。

もしかすると、現在のお仕事にChatGPTをご利用の方も多いのではないでしょうか。今回は、現在話題となっているChatGPTとはいったいどのようなAIサービスなのか、Webサイトはどこまで制作できるのかについてわかりやすく解説していきます。

ChatGPTとは

OpenAIが開発した大規模な自然言語処理モデルの1つで、人工知能を利用して人間と自然な会話を行うことができます。ChatGPTは、様々なトピックに関する質問や会話に対して、自然言語で回答するのはもちろん、文章作成や自動翻訳などの機能も持っており、さまざまな分野で個人や企業など、多くの人々に利用されています。

ChatGPTは、自然言語処理モデルであるため、Webサイトを直接作成することはできませんが、Webサイトの作成に必要な情報を収集したり、Webサイトの掲載内容に関する質問に答えたりすることができます。

ChatGPTでWebサイトを作る

実際に、現在無料で利用できるChatGPT3.5に質問しながら、Webサイト制作に必要な情報を集めていきます。

必要なコンテンツの確認

まずはWebサイトにどのような内容を記載するかを決めていくために、どのようなコンテンツが必要か尋ねました。

このように、必要なコンテンツが一覧で得られました。

TOPページの構成を固める

TOPページに記載するコンテンツや順番を決めるためにTOPページの構成を質問しました。

ChatGPTは画像での回答ができないため一般的なワイヤーフレームとはいきませんでしたが、レイアウトの順番からどのような情報を載せるかというところまで提案してくれました。

HTML・CSSを組む

では実際にHTMLとCSSを組んでいきます。まずは、様子見も兼ねてヘッダーとフッターから作成してもらいましょう。

HTMLとCSSの小文字表記まで修正してくれました。できあがったものがこちらです。

うーん、1,2で提案してくれた会社情報が入っていません。しかし、フッターに色をつけてくれたり、メニューを太字にしてくれたりと指示していないところまで良い感じにしてくれています。

次にメインの要素を作成してもらいます。ChatGPTは、長文の送信・受信ができないため途中で切れてしまいますが、「続けて」と促すと続きから書いてくれます。

できあがったメイン部分がこちらです。

構成にあった会社情報・ブログが無い上に、無かった訴求が上部にあります。しかし料金やお問合せフォームの仮のテキストやリンクボタンもしっかり作成してくれています。ただ、このままでは全体的に左詰めになっており、余白が無いのでここから整えていきます。

レイアウトを整える

まずは、制作実績を横並びにしてもらいます。

なぜか突然Bootstrapを使い始めるChatGPT。私はBootstrapを利用していないのでCSSで再度提案します。

調整してもらったのがこちらです。

先ほどよりもWebサイトっぽくなってきましたね。他にもメインコンテンツの幅や体裁を整えてもらい、キービジュアルを追加し、できあがったのがこちらです。

「すごい！」Webサイトができています。
指示していないにも関わらず、右上のグローバルナビからのページ内リンクの設置や、ボタン上をマウスオーバーした際のアニメーションの設定をしてくれています。

ここからは人の手で軽く手直しし、レイアウトを整えます。デザインは、今回は省略として、できあがったのがこちらです。

レイアウト・余白の崩れや料金プランのコンテンツ幅とタイトルの位置が気になりますが、非コーダーが作成したにしては上出来ではないでしょうか。

まとめ

最後にChatGPTに新宿にあるWebサイト制作会社を5件きいてみました。
ウェブラボは入っているでしょうか？
回答はこちらでした。

新宿 Web制作
新宿 Webデザイン
新宿 Web開発

これらのキーワードで検索すると、多数のWebサイト制作会社が表示されます。それぞれのWebサイト制作会社の評判や実績を確認し、自分に合った会社を選ぶことをおすすめします。）

今回利用した無料版であるChatGpt3.5は2021年9月までのデータを基に学習しているためそれ以降の情報や、リアルタイムの情報を得ることが出来ず、上記のように検索エンジンの利用を勧められたり、真実でない回答をすることもあります。
例として新宿でおいしいカレー屋さんを教えてと聞いてみると、4件の店舗を挙げてくれましたが、なんとその全ての店舗が存在しませんでした。

このように情報検索として利用するには不向きであり、注意が必要です。

一方でプログラム作成の精度は高く、デバックやコードレビューで修正・検証することも可能です。

プログラムの場合は実行することで正誤を確かめやすいという点もあります。

また、Web版のChatGptは会話から学習しているわけではありませんが、今後サービスの改善のために情報を利用される可能性があり、企業によっては禁止されています。

しかし一方でChatGptの利用を推奨している企業もあります。GMOインターネットグループの場合は積極的な業務活用を推奨しており、業務効率化や新サービスの展開検証に利用しています。
セキュリティ面について、入力したデータを使用されたくない場合は「オプトアウト」の申請が可能です。法人で利用する際はオプトアウト申請しておくことをお勧めします。

オプトアウトの手続きをする、企業情報・個人情報は送らない等セキュリティ面に注意し、事実に基づく情報なのか精査しながら利用しましょう。