ChatGPTやClaudeなどのAIが普及し、AIでホームページを作れるなら制作会社に依頼しなくてもいいのでは、と考える企業も増えています。ただ、AIで作ったホームページは、公開や更新のたびに自社での作業や確認が必要になります。
この記事では、AIで作れるホームページの種類や公開までに必要な作業、制作会社に依頼したホームページとの違いを解説し、現段階で当社がAIでの制作をおすすめしない理由も紹介します。
AIで作れるのは基本的にHTMLのホームページ
AIでホームページを作るといっても、使うAIや作り方によって、できあがるホームページは変わります。会社のホームページをAIで作る場合、作れるのは基本的にHTMLのホームページです。
ChatGPTやClaudeに頼むとHTMLとCSSのホームページが作れる
ChatGPTやClaude、GeminiなどのAIに作りたいホームページの内容を伝えると、HTMLとCSSのコードが作られます。
HTMLはページの文章や画像の並びを決めるコードで、CSSは色や文字の大きさ、レイアウトなどの見た目を決めるコードです。会社名や業種、載せたい内容を伝えるだけで、トップページや会社概要などのページを数分で形にしてくれます。AIによってはその場でプレビューが表示され、できあがりのイメージを見ながら修正を頼むこともできます。
ただし、AIが作るのはあくまでコードです。ホームページとして公開するには、コードをファイルとして保存し、サーバーにアップロードするなどの作業を自社で行う必要があります。
WordPressサイトはAIに質問しながら作れるが知識がないと難しい
WordPressのホームページは、AIに質問しながら進めれば作ることはできます。レンタルサーバーにWordPressをインストールする手順や、テーマの選び方、管理画面での設定方法などをAIに聞けば、順を追って教えてくれます。AIにWordPressのテーマのコードを書いてもらうことも可能です。
一方で、AIの説明どおりに進めても実際の表示が違っていたり、AIが書いたコードを入れたら画面が真っ白になったりすることがあります。こうした場面では、エラーの内容を読み取って原因を探す知識が必要になり、WordPressやサーバーに詳しくない人はそこで作業が止まってしまいます。
AIを使えば誰でもWordPressのホームページを作れるわけではなく、知識がない状態では難しいのが実際のところです。
ホームページ作成ツールのAI機能はAIで作るホームページとは別のもの
WixやSTUDIOなどのホームページ作成ツールには、質問に答えるとAIがページのひな形や文章を作ってくれる機能があります。
AIで作るという点では同じに見えますが、仕組みはまったく違います。作成ツールのAI機能は、ツールに用意された更新システムやテンプレートをもとにページを組み立てるもので、できあがるのはそのツールの上で動くホームページです。サーバーの管理や表示の調整はツールを提供する会社が行い、コードを自社で扱う必要もありません。
この記事でAIで作るホームページと呼んでいるのは、ChatGPTやClaudeなどにコードを書かせて作るHTMLのホームページです。作成ツールのAI機能とは、公開までの作業も公開後の扱い方も変わるので、分けて考える必要があります。
AIで作ったホームページを公開するまでに必要な作業
AIがHTMLとCSSのコードを作ってくれても、そのままではホームページとして公開されません。公開までには、自社で進める作業がいくつもあります。
ドメインとレンタルサーバーを契約する
ホームページを公開するには、ホームページの住所にあたるドメインと、ホームページのファイルを置く場所にあたるレンタルサーバーが必要です。ドメインは会社名やサービス名をもとに決め、ドメインの取得サービスやレンタルサーバー会社で申し込みます。レンタルサーバーは、表示速度やサポート体制、問い合わせフォームなどの機能を比べて選びます。
ドメインとレンタルサーバーを契約したら、ドメインとサーバーをつなぐ設定も必要です。管理画面でネームサーバーなどを設定し、ドメインにアクセスするとサーバー上のファイルが表示される状態にします。AIに手順を聞きながら進めることはできますが、管理画面の項目名は契約した会社によって違うので、各社のマニュアルと見比べながら作業を進めることになります。
AIが作ったコードをファイルに保存して表示を確認する
AIが作ったコードは、チャットの画面に表示されているだけの状態です。HTMLのコードはindex.htmlのような名前でファイルに保存し、CSSを別のファイルに分けている場合はstyle.cssなどの名前で保存します。ファイル名や保存する場所がAIの書いたコードと合っていないと、デザインが反映されず文字だけが並んだページになります。
保存したファイルをパソコンのブラウザで開き、AIの画面で見た表示と同じになっているかを確認します。複数のページを作った場合は、メニューのリンクをクリックして各ページへ正しく移動できるかも1つずつ確かめる必要があります。
仮の文章や画像を自社の原稿と写真に差し替える
AIが作ったホームページには、それらしく見える仮の文章や数字、画像の代わりの色の枠などが入っています。実績の件数や料金、お客様の声なども、AIが例として作ったもので、そのまま公開すると事実と違う内容を載せることになります。
公開前には、すべての文章を自社の原稿に、画像の枠を自社で撮影した写真や用意した画像に差し替えます。画像を入れると文章の長さや画像のサイズでレイアウトが変わるので、差し替えた後に表示をもう一度確認する必要があります。会社名や住所、電話番号などの基本情報が仮のままになっていないかも、ページごとに見直します。
スマホやブラウザごとの表示崩れを直す
パソコンで問題なく見えていても、スマホで開くと文字がはみ出したり、画像が画面からはみ出して横にスクロールしてしまったりすることがあります。ChromeやSafari、Edgeなど、ブラウザによって表示が変わることもあります。
表示崩れを見つけたら、崩れている箇所と使っている端末をAIに伝えて、コードを直してもらいます。ただ、1か所を直すと別の箇所の表示が変わることがあるので、修正のたびにパソコンとスマホの両方で確認し直す必要があります。会社のホームページはスマホから見られることが多いので、スマホの表示は特に念入りに確認します。
問い合わせフォームはレンタルサーバーや外部サービスのものを設置する
AIが作るHTMLのホームページには、問い合わせフォームの見た目は作られても、入力された内容をメールで送る仕組みは入っていないことがほとんどです。HTMLだけではメールを送れず、送信にはPHPなどのプログラムが必要になります。
AIにPHPで送信の仕組みを書いてもらうこともできますが、入力内容のチェックや迷惑メールへの対策が十分でないコードになりやすく、知識がないと問題があっても気づけません。問い合わせフォームは、レンタルサーバーが用意しているメールフォームの機能や、Googleフォームなどの外部サービスを使って設置するほうが安全です。
外部サービスを使う場合は、ホームページのデザインとそろわない点を理解したうえで選びます。
FTPソフトでサーバーにアップロードする
ファイルの準備ができたら、FTPソフトを使ってレンタルサーバーにアップロードします。FTPソフトは、パソコンにあるファイルをサーバーに送るためのソフトで、FileZillaなどの無料のソフトがあります。レンタルサーバーの管理画面で確認できるFTPのアカウント情報を入力して、サーバーに接続します。
アップロードする場所を間違えると、ドメインにアクセスしてもページが表示されません。多くのレンタルサーバーでは、公開用のフォルダが決まっているので、その中にindex.htmlなどのファイルを置きます。アップロードした後は、実際のドメインでホームページを開き、画像やリンクが正しく表示されるかを確認します。
SSLを設定してhttpsで表示されるようにする
SSLを設定していないホームページは、ブラウザで開くと保護されていない通信と表示されます。会社のホームページにこの表示が出ると、ユーザーに不安を与え、内容を読まれる前にページを閉じられることにもつながります。
多くのレンタルサーバーでは、管理画面から無料のSSLを設定できます。設定が終わったら、httpで始まるURLにアクセスしたときにhttpsへ自動で切り替わるよう、リダイレクトの設定も行います。AIが作ったコードの中に画像やリンクのURLがhttpのまま書かれていると、SSLを設定しても警告が出ることがあるので、コード内のURLも確認します。
AIで作ったホームページと制作会社に依頼したホームページの違い
AIで作ったホームページと制作会社に依頼したホームページは、同じHTMLのページでも、かかる費用やできあがる内容に違いがあります。
制作にかかる費用の違い
AIで作ったホームページは、制作会社に依頼するより費用を大きく抑えられます。AIには無料のプランもありますが、使える回数や1回に作れるコードの量に上限があり、複数のページを作って修正を重ねるには有料のプランが必要になります。有料プランは月数千円から使え、かかる費用はAIの利用料とドメイン、レンタルサーバーの契約費用が中心になります。
制作会社に依頼したホームページは、ページ数や機能によって数十万円から数百万円の制作費がかかります。費用にはヒアリングや構成の検討、デザイン、コーディング、公開作業などが含まれ、ドメインやサーバーの契約、公開後の更新のサポートまで任せられるのが一般的です。
AIで作る場合は制作費を抑えられる分、コードの保存から公開までの作業をすべて自社で行うことになります。
デザインの独自性の違い
AIで作ったホームページは、短時間で整ったデザインになりますが、どのような業種でも似たレイアウトや配色になりやすい傾向があります。AIは多くのホームページで使われている形をもとにデザインを組み立てるので、同じような指示を出すと、他社のホームページと見分けがつきにくい仕上がりになります。
制作会社に依頼したホームページは、会社のロゴや雰囲気、ターゲットに合わせてデザインを作ります。写真の見せ方や色の使い方を決めた理由をデザイナーが説明できるので、会社のイメージに合っているかを社内で判断しやすく、他社と並んで比べられたときにも印象に残るデザインになります。
ターゲットや強みを踏まえたサイト構成と原稿の違い
AIで作ったホームページのサイト構成や原稿は、指示した内容の範囲でしか作られません。誰に向けたホームページなのか、他社と比べて何が強みなのかを自社で整理して伝えないと、トップページ・会社概要・サービス・お問い合わせといった一般的な構成と、どの会社にも当てはまる原稿になります。
制作会社に依頼したホームページは、ヒアリングで会社の事業やお客様の層、他社との違いを聞いたうえで、サイト構成と原稿を考えます。自社では当たり前と思っていたことが強みとして見つかることも多く、ターゲットが知りたい情報をどのページに載せるかまで決めて制作を進めます。
SEOや集客を考えた設定の違い
AIで作ったホームページには、ページタイトルやディスクリプションなど、SEOの基本的な設定が入ることはあります。ただ、どのキーワードで検索されたいのか、そのために何ページ必要なのかといった計画がないまま作られるので、公開しても検索結果に表示されにくいホームページになりがちです。
制作会社に依頼したホームページは、狙うキーワードや競合のホームページを調べたうえで、ページタイトルや見出し、ページ数を決めます。Googleアナリティクスやサーチコンソールの設定まで行い、公開後に訪問者数や検索順位を確認できる状態にするので、SEOや広告などの集客を始めやすいホームページになります。
AIで作ったホームページを使うときの注意点
AIで作ったホームページは、公開した後の文章の変更や修正も自社で行います。使い続けるうえで、気をつけておきたい点があります。
文章の差し替えは自分でHTMLを書き直す
営業時間や料金、スタッフの紹介など、公開後に文章を変えたい場面は意外と多くあります。AIで作ったHTMLのホームページには管理画面がないので、文章を変えるにはHTMLのファイルを開き、変えたい箇所を探して自分で書き直す必要があります。文章の差し替えをAIに任せると、変える必要のない箇所まで書き換えられて、レイアウトが崩れる恐れがあります。
HTMLのファイルには、文章の前後に見出しや段落を表すタグが入っています。文章だけを書き換えるつもりでタグの一部まで消してしまうと、そのページのレイアウトが崩れたり、文章が表示されなくなったりします。書き直したファイルはFTPソフトでサーバーにアップロードし直し、実際のページで表示を確認するまでが1回の作業になります。
修正を頼むときは今のコードをAIに渡す
レイアウトを変えたい、ページを追加したいといった修正をAIに頼むときは、今のHTMLとCSSのコードをAIに渡す必要があります。AIは会話が変わると前に作ったコードを覚えていないので、修正したい内容だけを伝えると、今のホームページとは別のコードが新しく作られてしまいます。
コードを渡すときは、どのページのどの部分をどう変えたいのかを具体的に伝えます。返ってきたコードは、すぐにサーバーのファイルと置き換えずに、パソコンのブラウザで表示を確認してからアップロードします。
修正前のファイルを必ずバックアップしておく
AIで作ったホームページを修正するときは、作業の前に今のファイルをバックアップしておきます。修正したファイルで表示が崩れたり、ページが開かなくなったりしても、バックアップがあれば元の状態にすぐ戻せます。
バックアップは、ファイルをコピーしてフォルダ名に日付を付けて保存しておくと、いつの状態かが分かりやすくなります。
AIが作った文章や画像が他社のものに似ていないか確認する
AIが作る文章や画像は、インターネット上にある多くの情報をもとに作られています。そのため、AIに任せて作った文章が他社のホームページの表現とよく似ていたり、画像が他の人の描いたイラストや撮影した写真に近いものになったりすることがあります。他社のものに似た内容をそのまま載せると、著作権のトラブルや、会社の信用を損なうことにつながります。
文章は、特徴のある一文を検索して、同じような表現が他のホームページにないかを確かめます。画像は、使ったAIの利用規約で商用利用が認められているかを確認したうえで、有名なキャラクターやロゴに似た部分がないかを見てから載せます。
現段階で当社はAIでホームページを作ることはおすすめしない
AIを使えばHTMLのホームページを作ることはできますが、現段階で当社はAIでホームページを作ることをおすすめしていません。
一番の理由は、できあがったホームページが正しく作られているかを、お客様自身で確認する負担が大きすぎることです。今のAIは、ホームページのコードを書くことはできても、レイアウトが完璧に仕上がっているとは言い切れません。
パソコンでは整って見えても、スマホの機種やブラウザによって文字が重なっていたり、ボタンが押しにくい位置にあったりすることがあります。こうした崩れはAIが自分で気づいて直してくれるわけではなく、すべてのページをさまざまな端末で開き、1か所ずつ確かめるのはお客様の作業になります。
ページ数が増えるほど確認する画面も増え、作り終えた後の確認だけで大きな手間がかかります。
複数のページがあるホームページでは、更新の手間も大きくなります。AIはページごとにHTMLのファイルを作ることが多く、ヘッダーやフッターなどの共通の部分を1つのテンプレートにまとめずに、それぞれのページに同じコードを書き込みます。
たとえば10ページのホームページでフッターの電話番号を変える場合、10個のファイルを1つずつ開いて書き換えることになり、1ページでも直し忘れると古い電話番号が残ったままになります。
AIを使って低コストでホームページを作りたい場合は、ホームページ作成ツールを利用するほうが現実的です。作成ツールには更新のための管理画面が用意されていて、その仕組みをもとに、AIが原稿の作成やレイアウト調整をサポートしてくれます。
動作や表示はサービスを提供する会社が整えてくれるので、HTMLのホームページのように、表示の確認や共通部分の更新をすべて自社で抱える必要がありません。
AIは進化を続けているので、今後は考えが変わる可能性もあります。ただ、会社のホームページを公開して使い続けることを考えると、現段階ではAIだけで作るより、作成ツールを使うか制作会社に依頼するほうが安心です。
まとめ
AIで作れるのは基本的にHTMLのホームページで、公開までの作業や公開後の更新、表示の確認はすべて自社で行うことになります。現段階では、会社のホームページをAIだけで作るより、ホームページ作成ツールを使うか制作会社に依頼するほうが安心です。
当社では、オリジナルデザインのホームページ制作に加えて、ホームページ作成ツールを使ったホームページの制作やサポートにも対応しています。ご予算や社内での更新の体制をお伺いしたうえで、御社に合った作り方をご提案します。
AIで作るか制作会社に依頼するかで迷っている、費用を抑えてホームページを作りたいといったお悩みがあれば、お気軽にご相談ください。
