ホームページを自分で作るとなると、「HTMLやCSSのマークアップ言語知識が必要なのでは？」と感じる方もいるかもしれません。
この記事では、実際にChatGPTを使って架空のカフェのホームページを作り、どこまで作れるのか試してみます。
AIを使えば初心者でもホームページを作れる？
結論からいうと、AIを使えばHTMLやCSSを一から書けなくても、ホームページの形を作ることはできます。
ただし、AIに任せるだけでホームページが完成するわけではありません。
掲載する情報や写真を用意し、内容を確認して公開する作業は人が行います。
実際にAIを使ってホームページを作ってみた
では、実際にAIを使うとどこまでホームページを作れるのでしょうか。
今回は、ChatGPTを使って簡単なホームページを実際に作ってみます。
作るのは、架空の小さなカフェのホームページです。
最初から自分でHTMLやCSSを書くのではなく、ホームページの構成を考えるところからChatGPTに手伝ってもらいます。
まずはホームページの構成を考えてもらう
最初に、どんなホームページにするのかChatGPTへ相談します。
今回は、次のように質問してみます。
小さなカフェのホームページを作りたいです。
ホームページ制作の知識がない初心者でも作れるように、トップページに必要な内容と構成を考えてください。
ChatGPTから提案された内容を確認し、必要な部分を残しながらホームページの構成を決めていきます。
最初から自分ですべて考えなくても、AIに候補を出してもらってから「これは必要」「これはいらない」と選べるのは便利です。
ホームページに載せる文章を作ってもらう
構成が決まったら、次は実際に掲載する文章を考えてもらいます。
例えば、
先ほど考えたカフェのホームページに掲載する文章を作ってください。
初めて訪れる人にもお店の雰囲気が伝わるように、短く分かりやすい文章にしてください。
とお願いしてみます。
キャッチコピーやお店の紹介文など、自分で一から考えると時間がかかる部分の下書きを作ってもらえます。
ただし、実際のお店で使う場合は、営業時間や住所、料金などの情報を必ず自分で確認する必要があります。
HTMLとCSSを作ってもらう
構成と文章が決まったら、実際にブラウザで表示できるようにします。
今回はChatGPTに、
ここまで考えた内容を使って、初心者向けのシンプルなカフェのホームページをHTMLとCSSで作ってください。
スマートフォンでも見やすいデザインにしてください。
とお願いして、コードを作ってもらいます。
生成されたコードを保存して、実際にブラウザで開いてみます。
コードの内容が分からなくてもホームページの形を作れるのはAIの便利なところですが、生成されたコードが必ず正しく動くとは限りません。
表示がおかしい場合は、その部分をChatGPTに伝えて修正してもらいます。
実際に完成したホームページ
ChatGPTとやり取りしながら作ったホームページがこちらです。
実際に作ってみて分かったこと
正直、ここまで簡単に形になるとは思っていませんでした。
デザインや文章について細かく指定したわけではありませんが、3つのプロンプトだけでカフェのホームページらしい見た目まで作ることができました。
一方で、実際に作ってみて感じたのは、「見た目のページを作ること」と「実際に運用できるホームページを作ること」は別だということです。
今回の状態でもホームページとして形にはなっていますが、スマホ表示で使うハンバーガーメニューや、画面幅に応じてテキストと画像を縦に並べるレイアウトなど、実際のサイトで必要になる細かな調整まではできていませんでした。
こうした部分まで作り込むには、
- スマホ表示への対応
- メニューの動き
- レイアウトの調整
- ブログ機能
- 予約機能
- Instagramなど外部サービスとの連携
といった内容を、さらに具体的に指示していく必要があります。
そのため、AIだけで最初から完成度の高いホームページを作るのは、まだ簡単とは言えません。
ただ、簡単な自己紹介ページを作りたいときや、お店のホームページのたたき台を急いで用意したいときには十分活用できそうだと感じました。
また、Web制作の仕事でも、クライアントに完成イメージを見せるための簡単なサンプルページを短時間で作る、といった使い方は便利そうです。
今回試してみて、AIは「ホームページをすべて任せて作ってもらうもの」というより、最初の形を素早く作るための補助として使うと便利だと感じました。
AIでホームページを作るときの注意点
AIを利用するときは、次の点を確認しておきましょう。
- AIが作った文章に間違いがないか確認する
- 会社名・住所・料金など重要な情報は必ず確認する
- AI生成画像を使う場合は内容や利用条件を確認する
- AIが作ったコードは動作確認してから使用する
- 公開前にパソコンとスマホの両方で表示を確認する
特に、AIが生成した内容をそのまま公開しないことが大切です。
ホームページは実際のお客様が見るものなので、最後は自分で確認してから公開しましょう。
まとめ
今回、実際にChatGPTを使って架空のカフェのホームページを作ってみました。
細かなデザイン指定をしなくても、3つのプロンプトでホームページらしい形まで作れたのは予想以上でした。
一方で、スマホ表示への対応やメニューの動き、予約・ブログなどの機能まで含めると、追加の調整や知識が必要になります。
実際に試してみて、AIだけですべてを完成させるというより、ホームページの最初の形を短時間で作るための補助として使うのが便利だと感じました。
まずは自己紹介ページや簡単なサンプルサイトなど、小さなページから試してみるとAIを使ったホームページ制作をイメージしやすいと思います。
