AI(ChatGPT)でホームページを作成する方法とポイントを紹介！

今回は、ChatGPTを使ってホームページを作成する方法を紹介します。

ChatGPTを使ったホームページ制作に興味のある方は、ぜひ参考にしてください。

AIを使ってホームページを作成するメリット・デメリット

まず、ChatGPTをはじめとしたAIでホームページを作成するメリット・デメリットをまとめておきます。
このセクションに興味のない方は、飛ばして次のセクションに移動してください。
→ ChatGPTを使ってホームページを作成する方法

メリット

まずは、メリットから見てみましょう。

制作期間の短縮

AIに「デザイン」や「HTML・CSSのコーディング」を任せることができます。

制作にかかる時間をかなり大幅に短縮することができ、以前と比べても短い期間でホームページの公開や納品が可能です。
私の場合、小規模なWebサイトであれば1日で作成することができます。

コスト削減

AIを利用する一番のメリットが、ホームページ制作にかかる費用の大幅な削減です。

また、Web制作初心者でも少し学習すればホームページを公開でき、外注しなくても公開できます。

初心者でも可能

デザインやHTML・CSSのコーディングをAIに任せることができるため、Web制作初心者でもホームページを公開できます。

そのため、AIを使用することで誰でもホームページを公開できるようになりました。

デメリット

次は、AIを使用するデメリットをチェックしてみましょう。

ブランディングを行いにくい

AIを使ったホームページは、平均的なホームページになりやすいです。
そのため、他社ホームページと差別化を図りにくく、ブランディングが難しいです。

デザインに限界がある

AIを用いたホームページ作成において、一番のデメリットがデザインです。

もちろん、指示の出し方次第で、ある程度は洗練されたデザインのホームページに仕上げることができます。
ですが、現状では、それも限界があります。

高度な機能実装には不向き

AIだけだと、高度な機能実装が難しい場合が多いです。

この点は、いずれはAIでも対応できるようになると思いますが、現状では難しいです。

SEO対策は別途必要

AIだけだと、SEO対策が不十分な場合もあります。

SEO対策については、AI任せにせず、人間による作業も重要になります。

ホームページの公開に必要な物（初心者向け）

Web制作初心者の方向けに、ホームページの公開に最低限必要な物をまとめておきます。

サーバーとドメイン

ホームページを公開する上で必ず必要となるのが、この2つです。

おすすめのレンタルサーバーは、エックスサーバーです。
>> エックスサーバーについて詳しくチェックする

ただ、エックスサーバーは、年間で12,000円程度はかかります。
まずは費用をかけずにホームページを作成したいという方には、無料サーバーもおすすめです。

特に、おすすめなのがシンフリーサーバーです。
無料ドメインも使用できるので、費用をかけずにホームページを公開することができます。
>> シンフリーサーバーについて詳しくチェックする

画像

ホームページを作成する上で、画像がなくても作成はできます。

例えば、店舗サイトであれば、自身で撮影して利用されるのがおすすめです。
また、Canvaや写真AC（photoAC）であれば、質の高い画像を用意することもできます。

さらに、最近では画像生成AIのサービスも充実しています。
特に人気なのはCanva AIというサービスで、初心者でも比較的使いやすいです。

ChatGPTを使ってホームページを作成する方法

それでは、ChatGPTを使ってホームページを作成する方法を紹介します。

まずは、ChatGPTへアクセスしてください。
→ https://chatgpt.com/

ChatGPTの画面が開くので、ログインしておきます。

ChatGPTへログインすると、このようなプロンプトが表示されます。

このプロンプトに質問や作業内容などを入力していきます。

今回は、試しにカフェのホームページを作成してみます。
このような作業内容をプロンプトに入力して、まずはページ構成を作成してもらいます。

すると、このようにChatGPTが考えてくれたページ構成が表示されます。

もしChatGPTが提案してくれた内容で気になる点がある場合には、
「ギャラリー（Gallery）」は不要です。
「お問合せ」を追加してください。
などとプロンプトから指示を出してください。

↓

これで問題がなければ、実際にHTMLとCSSを作成してもらいます。
こんな感じでプロンプトから指示を出してみてください。

しばらくすると、ChatGPTがHTMLとCSSを作ってくれます。
このようにHTMLを作成してくれます。

CSSもこのように作成されます。

↓

次にindex.htmlとstyle.cssを作成し、ChatGPTが作成してくれたHTMLとCSSを貼り付けます。
そして、FFFTPなどを使用して、そのままサーバー上（ホームページの公開ディレクトリ）へアップロードします。

↓

それでは、実際にアップロード先のURLへアクセスして、作成されたホームページの画面を確認してみましょう。
ファーストビューはこのようなデザインで作成してくれました。

コンテンツ部分はこのようなデザインになりました。

レイアウト崩れも起こさず綺麗に表示されていますね。

↓

このあとは、作成されたHTMLとCSSの中身を詳しく確認して、画像を設定されている部分を探します。
※画像がホームページ内に設定されていれば、別途用意してサーバー上へアップロードします。

まずは、CSSをチェックしてみましょう。
このように「images/hero.jpg」というパスでファーストビューにメイン画像が設定されています。

サーバー上にimagesディレクトリを作成してhero.jpgという画像を保存します。

これで、再度ホームページへアクセスして、実際にファーストビューを確認してみます。

綺麗に表示されていますね。

つづいて、HTMLのコードを確認してみると、このようにメインコンテンツ部分に画像が設定されています。

これらの画像を作成してサーバー上にアップし、ホームページのコンテンツ部分を確認してみます。

こちらも綺麗に設置されていますね。
ざっくりですが、これでホームページのトップページが完成です。

↓

このあとは、同様の手順でChatGPTに下層ページも作成してもらいましょう。
同じプロンプトを開いたまま、例えば
■メニューページを作成してください。
■店舗情報ページを作成してください。
・
・
と指示を出すと、下層ページも順番に作成していくことができます。

スマートフォンで画面を開いて、どのように表示されるかも見てみます。

そこそこ綺麗には表示されています。

ですが、ヘッダー部分のメニューの表示が気になりますね。
この場合は、例えば「スマートフォンではヘッダーのメニューをハンバーガーにして見やすいデザインにして」とChatGPTに再度お願いしてみてください。

ハンバーガーメニューに対応した修正コードを提示してくれます。
※ハンバーガーメニューに対応する場合はJavaScriptのコードも作成されるので、そちらも忘れずに設定してください。

他にも、例えば、「フッターにもメニューを追加して」「ヘッダーにインスタのリンクを設定して」「インスタのリンクにはWebフォントを使って」など、細かく指示を追加してみてください。
そうすることで、徐々に自分の理想とするホームページに仕上がっていくはずです。

ChatGPTを利用する際のポイント

今ではChatGPTを利用して簡単にホームページを作成できるようになりました。
ですが、以下のような点を意識することで、より自分のイメージしたホームページに仕上げることができます。

例えば、前のセクションで説明したような指示の出し方だと、少しざっくりとしています。
そのため、以下のような指示の出し方だとより明確になります。

他にも、店舗カラーがある場合には、その色を指定することもできます。
また、「SEOに強い内部構造にして」「下層ページにはパンくずを設定して」「構造化データを作成して」「ユーザビリティを意識した作りにして」など、具体的な指示を付け加えることも大切です。

あとから何度も修正内容を指示することで、徐々に完成形へと近づけることができます。

最後に

今回は、AI（ChatGPT）を使ってホームページを作成する方法をまとめました。

ChatGPTを使ったホームページ制作に興味をお持ちの方は、参考にしていただけると幸いです。