こんにちは！

アールグレイです。

前回までの記事で、SanityとVercelについて詳しくお話してきました。

そして、実はこのブログも、まさにその組み合わせで作られています。

最初の記事「脱WordPress！SanityとClaude Codeで実現する、AI駆動型ブログ構築革命」で紹介したブログシステムの構築ですが、実は最後の仕上げとして「独自ドメインの設定」を行いました。

今回は、Xサーバーで取得したドメインをVercelにデプロイしたサイトに設定する手順を、実体験を交えて詳しく解説します。

実際にちょっとしたトラブルもありましたが、最終的には問題なく完了しました！

なぜ独自ドメインが必要なの？

Vercelでデプロイすると、最初は「プロジェクト名.vercel.app」というURLが割り当てられます。

でも、これだと、

• URLが長くて覚えにくい
• プロフェッショナルな印象に欠ける
• SEO的にも不利

だから、独自ドメインの設定は必須なんです。

事前準備：必要なものを確認

独自ドメインを設定する前に、以下の2つが準備できているか確認しましょう。

Xサーバーで独自ドメインを取得済み

私の場合は、このブログ用のドメイン「aiblockchainnexuslab.tech」を取得していました

ドメインは Xサーバー以外でも取得できますし、Vercel のダッシュボードから ワンクリックで購入することも可能です。

Xサーバー以外で取得している場合でも、本記事の手順はどのパターンでも応用できると思います。

Vercelでサイトをデプロイ済み

前回までの記事で作ったブログシステムがすでに公開されている状態

Step 1: Vercelでカスタムドメインを追加

1-1. Vercelのダッシュボードにアクセス

まず、Vercelにログインして、対象のプロジェクトを開きます。

1-2. ドメイン設定画面へ

「Settings」タブをクリック

左側のメニューから「Domains」を選択

1-3. ドメインを追加

プロジェクトページで、「Add」ボタンをクリックして、Xサーバーで取得したドメインを入力します。

例

• example.com（ルートドメイン）
• www.example.com（wwwサブドメイン）

両方設定しておくことをおすすめします！

1-4. DNS設定情報をメモ

Vercelで表示されるルートドメインとwwwサブドメインのDNSレコードの情報を控えます。

例

76.76.21.21

cname.vercel-dns.com

Step 2: XサーバーでDNSレコードを設定

設定する必要なのは、Aレコード（ルートドメイン用） とCNAMEレコード（wwwサブドメイン用）の2つです。

2-1. Xサーバーのサーバーパネルにログイン

Xサーバーのサーバーパネルにアクセスします。

2-2. DNSレコード設定画面へ

「ドメイン設定」をクリックして、対象ドメインの「DNSレコード設定」を選択後に、「DNSレコード追加」タブを開きます。

2-3. レコードを追加

以下の2つのレコードを追加します。

Aレコード（ルートドメイン用）

• ホスト名：空欄
• 種別：A
• 内容：76.76.21.21（例）
• TTL：3600（変更不要）
• 優先度：0（変更不要）

CNAMEレコード（wwwサブドメイン用）

• ホスト名：www
• 種別：CNAME
• 内容：cname.vercel-dns.com（例）
• TTL：3600（変更不要）
• 優先度：0（変更不要）

なお、TTLはDNSキャッシュの保持時間を示し、通常はデフォルトの3600秒のままで問題ありません。

また、優先度（Priority）はMXレコードなどメール用でのみ必要で、A／CNAMEレコードには設定不要です。

2-4. 設定を保存

ルートドメイン用（Aレコード） wwwサブドメイン用（CNAMEレコード）を追加したら、「確認画面へ進む」→「追加する」で設定を保存します。

Step 3: 反映確認と最終チェック

3-1. DNS反映を待つ

DNS設定の反映には時間がかかります。

• 早ければ数分、通常は数時間、最大48時間かかるみたいです。

私の場合は、約30分で反映されました。

（待っている間は、バイブコーディングで記事作成していました！）

3-2. Vercelで確認

Vercelのダッシュボードで、ドメインのステータスが「Valid」になっているか確認します。

緑色のチェックマークが表示されれば成功です！

3-3. SSL証明書の自動発行

素晴らしいことに、VercelはLet's Encryptを使って自動的にSSL証明書を発行してくれます。

特別な設定は不要です。

3-4. ブラウザで確認

最後に、実際にブラウザでアクセスしてみます。

両方でサイトが表示されれば完璧です！

• https://example.com
• https://www.example.com

トラブルシューティング：よくある問題と対処法

サイトが表示されない場合

DNS反映待ち

もう少し時間を置いてから再度確認

DNSレコードの設定ミス

Xサーバーの設定を再確認

VercelのDNS情報と一致しているか確認

キャッシュの問題

ブラウザのキャッシュをクリア

シークレットモードで確認

実際に遭遇したトラブルと解決方法

実は、私も設定時にちょっとしたトラブルに遭遇しました。

発生した問題

Xサーバーで取得したドメインを Vercel に紐付けた際、DNS レコードを正しく入力したのに、Vercel ダッシュボードには真っ赤な “Invalid Configuration” エラーが出続けました。

解決方法

設定をなん度も確認すると値は合っていたので、思い切ってドメインを 一度削除→再追加。

すると数秒で “✔ Completed” に変わり、SSL 証明書も即発行されました。

どうやらDNS の情報が世界中に行き渡るまで少し時間がかかる “伝播待ち” と、Vercel ダッシュボードが古い情報を見せたままになっていた “画面の更新遅れ” が重なり、本当は設定が済んでいるのにエラーに見えていただけみたいです。　　

まとめ：独自ドメインで本格的なブログ運営へ

Xサーバーで取得したドメインをVercelに設定する作業、最初は少し戸惑うかもしれません。

私も実際にCNAMEレコードのエラーで少し焦りました。

でも、落ち着いて一つずつ設定していけば、必ず成功します。

そして一度設定してしまえば、あとは自動更新されるので手間いらずです。

これで、以下の組み合わせが完成しました。

• Sanity：コンテンツ管理
• Next.js：フロントエンド
• Vercel：ホスティング
• 独自ドメイン：プロフェッショナルなURL

すべて無料プラン（ドメイン代除く）で始められて、本格的なブログシステムが構築できました。

分からないことがあったら、AIに聞きながら進めればOK。

それがバイブコーディングの良さですから。