AIで作ったホームページを独自ドメインで公開する方法

ChatGPTやClaudeなどのAIに頼めば、ホームページのHTMLは数分で作れる時代になりました。ところが「作ったファイルをどうやってネットに出すのか」「xxxx.vercel.app のままだと他人のサイトみたいで格好がつかない」「info@自分の名前.jp のようなメールアドレスも欲しい」といったところで手が止まる方が多いです。

この記事では、AIでホームページを作るところから、独自ドメインで公開し、独自ドメインのメールアドレスを使えるようにするまでの流れを、順番に解説します。

この記事が役に立つ人

ホームページが欲しいけれど、作り方も公開の仕方も分からない
AIでサイトは作れたが、自分のサイトとして公開する方法が分からない
Vercelなどで公開したものの、〇〇.vercel.app のアドレスのままなのが不満
info@〇〇.com のような独自ドメインのメールアドレスを持ちたい

全体像：やることは4つだけ

ホームページを独自ドメインで公開するまでの作業は、大きく分けると次の4つです。

作る：AIにホームページのファイル(HTML/CSSなど)を作ってもらう
置く：無料のホスティングサービスにファイルを置いて公開する
名前を取る：独自ドメイン(〇〇.com や 〇〇.jp)を取得する
つなぐ：DNSを設定して、ドメインとサイト(とメール)を結びつける

費用の目安は、ホスティングが無料枠で0円、ドメインが年1,000円〜数千円程度です。独自ドメインのメールを使う場合は、メールサービスの利用料が別にかかります。

1〜3は比較的とっつきやすいのですが、4の「つなぐ」がいちばんつまずきやすく、しかも失敗したときの影響が大きい部分です。この点は後半で詳しく触れます。

ステップ1：AIでホームページを作る

先に用意しておく情報

AIに丸投げしても形にはなりますが、中身はあなたにしか分かりません。次の情報をメモにまとめておくと、出来上がりの質が大きく変わります。

サイトの目的(お店の紹介、ポートフォリオ、問い合わせを増やしたい、など)
載せたいページ(トップ、サービス内容、料金、プロフィール、アクセス、問い合わせ)
各ページに載せる文章の素材(箇条書きで十分)
好みの雰囲気(落ち着いた、ポップ、高級感、など)と、参考にしたいサイト
ロゴや写真などの画像

AIへの頼み方の例

一度に完璧を目指さず、まず骨組みを作ってもらい、会話しながら直していくのがコツです。たとえば次のように依頼します。

つくば市で個人経営している整体院のホームページを作ってください。
- ページ構成: トップ / 施術メニューと料金 / アクセス / お問い合わせ
- 雰囲気: 清潔感があり、落ち着いた緑系の配色
- スマートフォンでも見やすいレスポンシブデザインにしてください
- 外部のライブラリは使わず、HTMLとCSSだけで作ってください
- ファイル構成と、それぞれのファイルの中身をすべて出力してください

出来上がったら、ファイルをパソコンの1つのフォルダにまとめて保存し、index.html をブラウザで開いて表示を確認します。ここで文章の誤りや、存在しない電話番号・住所が入っていないかを必ずチェックしてください。AIはもっともらしい架空の情報を平気で入れてきます。

最近はClaudeのArtifactsやv0、Boltのように、AIがその場でプレビューを表示してくれるサービスも増えています。どれを使っても、最終的に「ファイル一式」が手元にあれば、この後の手順は同じです。

ステップ2：無料のホスティングサービスで公開する

作ったファイルを置いて、インターネットから見えるようにする場所が「ホスティングサービス」です。個人や小規模なサイトなら、次のような無料枠で十分です。

Vercel：GitHubと連携してすぐ公開できる。AIツールとの相性が良い
Cloudflare Pages：無料枠が広く、表示も速い。ドメインとDNSもまとめて管理できる
GitHub Pages：GitHubだけで完結する。シンプルな静的サイト向け

おおまかな流れはどのサービスでも共通です。

GitHubのアカウントを作り、新しいリポジトリにファイル一式をアップロードする
ホスティングサービスにGitHubアカウントでログインし、そのリポジトリを選ぶ
「Deploy」を押すと、数十秒〜数分で公開される

公開されると、〇〇.vercel.app や 〇〇.pages.dev のようなアドレスが割り当てられます。この時点で世界中から見られる状態になっていますが、アドレスはサービスのものを間借りしている状態です。名刺やチラシに載せるには少し心許ないですし、サービスを乗り換えるとアドレスも変わってしまいます。

そこで、次のステップで「自分の名前」のアドレスを用意します。

ステップ3：独自ドメインを取得する

ドメインは、ドメイン登録サービス(レジストラ)で購入します。お名前.com、Cloudflare Registrar、ムームードメインなどが代表的です。

ドメインを選ぶときのポイントは次のとおりです。

短く、覚えやすく、口頭で伝えやすいものにする
日本向けの事業なら .jp / .co.jp、汎用的に使うなら .com が無難
初年度の価格だけで選ばない。初年度1円でも、2年目以降の更新料が高いことがある
自動更新を有効にする。更新を忘れると、ドメインが失効してサイトもメールも止まり、最悪の場合は第三者に取られる
登録者情報の公開代行(WHOIS情報公開代行)を設定しておく

ステップ4：DNSでドメインとサイトをつなぐ

ドメインを買っただけでは、まだサイトとは結びついていません。「このドメインにアクセスが来たら、あのホスティングサービスに案内してね」という設定が必要です。これを行うのがDNSです。

手順の流れ

ホスティングサービスの管理画面で「Domains」「カスタムドメイン」などのメニューを開き、取得したドメインを追加する
画面に「このDNSレコードを設定してください」という指示が表示される
レジストラ(またはDNSを管理しているサービス)の管理画面を開き、指示どおりのレコードを追加する
反映を待つ(数分〜長いと数十時間)
ホスティング側で認証が通ると、HTTPS(鍵マーク)の証明書も自動で発行される

設定するレコードのイメージ

よく使うのは次の2種類です。実際に入力する値はサービスやプロジェクトごとに異なるので、必ずホスティングサービスの管理画面に表示された値を使ってください。

種類    名前(ホスト)   値
A       @              (サービスが指定するIPアドレス)
CNAME   www            (サービスが指定するホスト名)

@ はドメインそのもの(example.com)を表す
www は www.example.com を表す
A レコードは「IPアドレスで行き先を指定」、CNAME レコードは「別のホスト名に転送」というイメージ

example.com と www.example.com のどちらを正式なアドレスにするかを決め、もう一方からは転送(リダイレクト)するように設定しておくと、検索エンジンからの評価が分散しません。

ステップ5：独自ドメインのメールアドレスを使う

info@example.com のようなメールアドレスを使うには、メールサービスを契約し、DNSにメール用のレコードを追加します。メールサービスには、Google Workspace、Microsoft 365、レンタルサーバー付属のメールなどがあります。

メールでは、最低でも次のレコードを設定します。

種類    名前              値の例
MX      @                 (メールサービスが指定するメールサーバー)
TXT     @                 v=spf1 include:(メールサービスが指定する値) ~all
TXT     (指定されたもの)  (DKIMの公開鍵)
TXT     _dmarc            v=DMARC1; p=none; rua=mailto:(レポートの送り先)

MX：このドメイン宛てのメールをどこで受け取るか
SPF：このドメインからメールを送ってよいサーバーはどれか
DKIM：メールが改ざんされていないことを示す電子署名
DMARC：SPFやDKIMの確認に失敗したメールをどう扱うかの方針

2024年以降、GmailやYahoo!メールは送信元の認証を厳しくチェックするようになりました。SPF・DKIM・DMARCが正しく設定されていないと、送ったメールが相手の迷惑メールフォルダに入る、あるいは届かないということが普通に起こります。

ここが落とし穴：DNSは「間違えるとサイトもメールも止まる」

ここまで読んで「意外と簡単そう」と感じたかもしれません。実際、手順そのものはシンプルです。ただし、DNSは1つの設定ミスで、サイトとメールがまとめて止まる領域でもあります。よくある典型的なトラブルを挙げます。

よくあるトラブル

ネームサーバーを切り替えたら、メールが届かなくなった
1. ホスティングサービスの案内に従ってネームサーバーを変更した結果、旧DNSに登録してあったMXレコードが引き継がれず、メールが受信できなくなる
2. 送った側にもエラーが返らないことがあり、数日気づかないことも
SPFレコードを2つ作ってしまった
1. メールサービスとフォーム送信サービスのために、SPFのTXTレコードを別々に追加すると、SPFの判定がエラーになり、両方のメールが迷惑メール扱いされる
2. SPFは1つのレコードにまとめる必要がある
CNAMEと他のレコードがぶつかった
1. 同じ名前にCNAMEとMXやTXTを同時に置くことはできない。ドメイン直下(@)にCNAMEを設定しようとして、メールの設定ごと壊れる
ドメインの更新を忘れた
1. クレジットカードの期限切れで自動更新に失敗し、サイトもメールも停止。失効後は取り戻すのに高額な費用がかかるか、他人に取得されてしまう
反映待ちの間にあれこれいじって、状態が分からなくなった
1. DNSの変更は反映に時間がかかる。「反映されない」と焦って設定を何度も変えると、どれが原因か切り分けられなくなる

AIに聞きながら設定すればいい？

AIはDNSの仕組みを説明するのは得意ですし、私も日常的に使っています。それでも、DNSの設定作業そのものをAI任せにするのはおすすめしません。

AIはあなたのDNSの現状を知らない。既存のメール設定や他サービスとの連携など、見えていないレコードを前提にした回答は、既存の設定を壊す原因になる
管理画面はしょっちゅう変わる。AIが説明する画面やメニュー名、指定値が、今の画面と一致しないことがある
もっともらしく間違える。レコードの値や書式をそれらしく提示してくるが、1文字違えば動かない。しかも、間違いはすぐには表面化しない
壊れたときに戻せない。変更前の状態を記録していないと、何を戻せばいいのか分からなくなる

ホームページ作りは、失敗しても作り直せば済みます。一方でドメインとDNSは、会社やお店の「住所」と「郵便受け」そのものです。止まっている間は、お客様からの問い合わせメールが届かず、サイトも表示されません。そして、その状態に自分では気づけないことが多いのが怖いところです。

だからこそ、サイトの中身はAIで作って費用を抑えつつ、ドメインとDNSの設定・管理は、経験のあるエンジニアに任せるのがいちばん安全で、結果的に安上がりです。

まとめ

ホームページの中身は、AIを使えば短時間・低コストで作れる
Vercel・Cloudflare Pages・GitHub Pagesなどの無料ホスティングで公開できる
独自ドメインを取得し、DNSを設定すれば「自分のアドレス」で公開できる
独自ドメインのメールには、MX・SPF・DKIM・DMARCの正しい設定が欠かせない
DNSは設定ミスでサイトとメールがまとめて止まる領域。ここはプロに任せるのが安全

ドメイン・DNS・メールの設定はご相談ください

juge6では、AIや各種ツールで作ったホームページの独自ドメインでの公開、DNSの設定、独自ドメインメールの導入(SPF・DKIM・DMARCを含む)、既存の設定の見直しやトラブル対応を承っています。

「AIでサイトは作れたけれど、ここから先が不安」「メールが届かない原因が分からない」「今の設定が正しいのか確認してほしい」といった段階からでもお気軽にどうぞ。

juge6 のサービス内容・ご相談はこちら