こんにちは！
Shinari DesignではWebを中心にデザインや実装をしている花江です。

今回は2023年3月14日に公開された「GPT-4」を使ってWebサイトを作れるのか？を検証してみた体験レポになります。

Chat GPTが登場してから時間を経て、一度は使ってみた方も多いのではないでしょうか？
使ったことはないけど、AIにお願いしたら簡単にウェブサイトもできるんじゃないか？と考えたことがある方もいるのではないでしょうか？

今回はそんな方々の参考になれば良いなと思いながら記事を書いていきます。

レスポンシブ対応のサイトが完成

結論から言うと、Chat GPTでWebサイトは作れました。
では、どのようにしてWEBサイトを作っていったのかを実際にご紹介いたします。

Chat GPTの利用方法

まず、Chat GPTってどうやって使うの？登録が必要なの？という方へ。
2024年6月現在、登録することなくなく使用することが可能です。

また、登録しないで利用できるGPTのバージョンは「3.5」までのバージョンで、提供される情報は2022年1月までの情報から構成されるということでした。

登録する場合は、メールアドレス1つで登録することができ、ログイン後はGPTのバージョンGPT4を利用することができます。このバージョンでは、2023年10月までの情報から構成されるようです。

まずは、ChatGPTのサイトへアクセスして初めてみましょう。

「WEBサイトを作ってくれませんか？」

まず、今度お店を開店させるパン屋の店主として、相談をしてみました。

「今度オープンする私のパン屋「pantaberu」のWEBサイトを作ってくれませんか？」

すると、とても具体的な内容を提案してくれました。

メインビジュアル？セクション？

親切丁寧で具体的な提案をしてくれたのですが、

いかがでしょう。。。そもそもWebサイト制作経験がなくてどこから始めたら良いのか。。。と言う人には、提案が多くてよくわからない！と言う状態になりますよね。。

ではこうしてみましょう。

1ページの中に以下の情報が入っていれば良いと考えています。

・メイン画像
・営業時間
・パンの画像をタイルで8個くらい並べる
・お問い合わせ先はInstagramのアカウント@pantaberuへリンクを付ける

すると、改めて提案をしてくれました！

HTMLもCSSも書いてくれた

具体的にどこにどんな情報を入れればいいかまで提案してくれたので、そのまま使っていきます。

提案の次に実際にどんなふうに実装するのか？についてもコードを書いてくれたので、コードもコピーして使ってみました。

さらに、画像についても以下のようにアドバイスしてくれました。

画像のパスと内容の調整

• 画像のパス（main-image.jpg、logo.png、bread1.jpg など）を実際の画像ファイルのパスに変更してください。
• 必要に応じて、CSSのスタイルやHTMLのテキストを調整してください。

これで、1ページに必要な情報をコンパクトにまとめたパン屋「pantaberu」のWEBページが完成します。

画像も作って欲しい

自分で画像を用意するのも、画像を編集するのも正直よくわからない。

と言う方もいるかと思い、お願いしてみました。

画像を生成してもらうことは可能ですか？

すると

申し訳ありませんが、私は画像を生成することができません。

はい、そうです。

Chat GPTでは画像の生成はできないんです。

しかし、できません！で終わらないのが彼らの素晴らしいところ（仕事ができる人👏って感じです）

以下のように提案と、その後の対応方法まで教えてくれました。

今回pixabayでパンの画像を適当にチョイスして、パスや画像名などを変更して画像を読み込めるようにしてみました。

最終形態

1つのフォルダの中に、生成されたHTML、CSSのコードをコピペしたテキストファイルを「index.html」として保存。

生成されたHTMLコードの中の、画像などを読み込んでいるパスを「path/to/bread1.jpg」などから「bread1.jpg」へそれぞれ変更。

こんな感じにして、とりあえずこのindex.htmlをダブルクリックすると概ね実装は完了した状態になりました！

これが作ってもらったサイト

どう伝えるかが大事

Chat GPTを活用したことがある人なら「プロンプト」と言う言葉を聞いたことがあるかと思いますが、AIに何か求めることがあるのならより具体的で明確な指示（プロンプト）をすることが大切です。

今回は実際に公開するところにまでは至っていませんが、どのように伝えるとどのような答えが返ってくるのか？を実際に触ってみて、また、Webサイトを作るのにはどのような準備（素材）があると良いのか？など、1人で模索するよりもずっと手軽に知ることができるのではないかと感じました。

そして、ChatGPTを使って理想のサイトを制作するには、AIも使う「人」ももう少し熟練を要するのかもしれません。もし、今すぐ魅力的なサイト制作をご希望の場合は、わたし達が全力でサポートさせていただきます。

Shinari Designでは、事業の規模やフェーズ、予算に合わせて、その時にできることを提案させていただいております。会社の1メンバーのような存在になれるよう、寄り添い目標実現に伴奏させていただきますので、お気軽にご相談ください。