XServerドメインをCloudflare Pagesへ接続する手順【実例】

XServerドメインで取得した独自ドメインは、XServerのレンタルサーバーを契約しなくてもCloudflare Pagesで使えました。必要なのは、Cloudflareへドメインを追加し、XServerドメイン側のネームサーバーをCloudflare指定値へ変更してから、Pagesのカスタムドメインに登録する作業です。

この記事では、pocket-ai-lab.comを実際に接続した2026年8月9〜11日時点の画面と確認結果を使います。設定後は独自ドメインでHTTP 200、HTTPからHTTPSへの301転送、Cloudflare Pages側の「アクティブ」を確認できました。

この記事は連載の3段階目です。先にCloudflare Pagesの料金と無料枠とGitHubからの自動デプロイで、pages.devでの表示まで完了していることを確認してください。接続後はCloudflare DNSでSearch Consoleを設定へ進みます。

先に注意点：ネームサーバーを変えると、Webだけでなくメールを含むDNS管理がCloudflare側へ移ります。独自ドメインのメールをすでに使っている場合は、MX・SPF・DKIM・DMARCなど必要なレコードを確認してから切り替えてください。本サイトの公開DNS観測と保存チェックリストはカスタムドメインとメールDNSの観測記録に分けて記載しています（メール配信の検証は行っていません）。

今回の構成と、3サービスの役割

「ドメインを買った会社」と「サイトを置く場所」は同じでなくても構いません。今回の役割分担は次のとおりです。

XServerドメインが契約とネームサーバーを管理し、Cloudflare DNSが接続先を案内し、Cloudflare Pagesがサイトを配信する構成 — XServerドメインは契約管理、CloudflareはDNSとサイト配信を担当します。

サービス	今回担当すること	担当しないこと
XServerドメイン	ドメイン契約・更新、ネームサーバー指定	サイトの配信、切替後のDNSレコード管理
Cloudflare DNS	独自ドメインのDNSレコード管理	ドメイン契約・更新
Cloudflare Pages	GitHubからビルドした静的サイトの配信	WordPressなど、常時動くサーバー処理

この構成が向くのは、AstroやHugoなどで作った静的サイトを公開したい人です。WordPressを管理画面から簡単に始めたい人や、XServerのメール機能をそのまま使いたい人は、レンタルサーバーを含む別の構成も比較した方が安全です。

費用は専用記事で確認する

この接続手順で利用したのは、XServerドメインの.com、Cloudflare Free、Cloudflare Pagesです。今回の初年度カード請求額、更新料金の公式掲載値、未計測の費用は、XServerドメインの料金を実例で確認した記事へまとめました。価格や条件は変わるため、申し込み前にはXServerドメインの公式料金表も確認してください。

接続前にそろえるもの

作業前に、次の4点を用意します。

XServerドメインで取得済みの独自ドメイン
Cloudflareアカウント
Cloudflare Pagesで公開済みの*.pages.devサイト
XServerとCloudflareの両方を操作できる環境

今回は、GitHubのmainブランチからCloudflare Pagesへのデプロイが成功し、pocket-ai-lab.pages.devで表示できることを先に確認しました。手順の詳細はGitHubからCloudflare Pagesへ自動デプロイを参照してください。独自ドメインとビルド不具合を同時に調べずに済むため、Pagesの仮URLを先に動かす順番がおすすめです。

手順1：Cloudflareへ独自ドメインを追加する

Cloudflareのダッシュボードで「ドメインを追加」からpocket-ai-lab.comを登録し、Freeプランを選びました。登録後、Cloudflareから2つのネームサーバーが割り当てられます。

Cloudflareの公式手順では、example.comのようにサブドメインを含まないapexドメインをPagesで使う場合、対象ドメインをCloudflareのゾーンとして追加し、ネームサーバーをCloudflareへ向けます。画面に表示された値はドメインごとに確認し、別サイトの値をコピーしないでください。

blog.example.comのようなサブドメインだけをPagesで使う場合は、元のDNS事業者にCNAMEを追加する方法もあります。この記事はpocket-ai-lab.comそのものを使うapexドメインの手順に限定します。

手順2：XServerドメインのネームサーバーを変更する

XServerアカウントで「サービス管理」→「ドメイン」→対象ドメインの順に開きます。「ネームサーバー設定」の「設定変更」から「その他のサービスで利用する」を選び、Cloudflareが指定した2件を入力します。

今回設定された値は次の2件でした。

leah.ns.cloudflare.com
aiden.ns.cloudflare.com

XServerドメインで、適用先をその他のサービスにしてCloudflareの2つのネームサーバーを設定した画面 — XServerの画面キャプチャ規定に従い、氏名・IDなどの契約情報が写らない範囲だけを掲載しています。タップまたはクリックで拡大できます。

大文字・小文字はDNS上では区別されません。入力後は確認画面を経て確定します。XServerの公式マニュアルでは、ネームサーバー変更の完全な反映目安を数時間〜24時間程度としています。今回は開始時刻を記録していなかったため、実際に何分かかったとは書けません。

手順3：Cloudflareで有効化を待つ

ネームサーバー変更後、Cloudflare側でゾーンが有効になるのを待ちます。確認にはターミナルのdigも使えます。

dig +short NS pocket-ai-lab.com

2026年8月11日に再確認した結果は次のとおりでした。

leah.ns.cloudflare.com.
aiden.ns.cloudflare.com.

以前のネームサーバーが返る場合は、設定を何度も変更せず、まずXServer側の入力値とCloudflare側の指定値が一致しているか確認します。

手順4：Pagesへカスタムドメインを登録する

Cloudflareの「Workers & Pages」から対象プロジェクトを開き、「カスタムドメイン」→「カスタムドメインを設定」を選びます。pocket-ai-lab.comを入力し、案内に沿って確定します。

Cloudflare Pagesのカスタムドメイン一覧でpocket-ai-lab.comがアクティブになった画面 — Pages側で独自ドメインが「アクティブ」になった状態です。タップまたはクリックで拡大できます。

Cloudflare公式ドキュメントは、Pagesの設定画面でカスタムドメインを関連付けず、DNSへCNAMEだけを手動追加すると522エラーになる場合があると説明しています。DNSレコードだけで済ませず、Pages側の「カスタムドメインを設定」まで完了させます。

手順5：HTTPSとcanonicalを確認する

画面が「アクティブ」になったら、ブラウザ表示だけでなくHTTPヘッダーも確認します。

curl -I https://pocket-ai-lab.com/
curl -I http://pocket-ai-lab.com/

今回の確認結果は次のとおりです。

https://pocket-ai-lab.com/：HTTP 200
http://pocket-ai-lab.com/：HTTP 301でHTTPSへ転送
HTMLのcanonical：https://pocket-ai-lab.com/
https://www.pocket-ai-lab.com/：DNS未設定のため名前解決できない
https://pocket-ai-lab.pages.dev/：表示可能だが、canonicalは独自ドメイン

wwwを使うなら、Cloudflare Pagesにwwwもカスタムドメインとして追加し、apexドメインへ統一する転送を別途設定します。今回は最初からwwwなしを正規URLにしたため、記事公開時点ではwwwを設定していません。

つながらないときの確認順

Cloudflareが有効にならない

XServer側のネームサーバーとCloudflareの指定値を1文字ずつ比較し、dig NSの結果も確認します。反映目安内に何度も値を変更すると、原因の切り分けが難しくなります。

Pagesで522になる

DNSにCNAMEを追加しただけで、Pages側のカスタムドメイン登録が終わっていない可能性があります。Cloudflare公式の手順どおり、Pagesプロジェクトからドメインを追加します。

SSLが保留のままになる

まずネームサーバーの反映を確認します。既存のCAAレコードで証明書を発行できる認証局を制限している場合も、Cloudflare公式の「Known issues」に従って許可内容を確認します。意味が分からないCAAを推測で追加・削除しないでください。

ドメインメールが届かなくなった

ネームサーバー変更前に使っていたMX・SPF・DKIM・DMARCと同等のレコードが、Cloudflare側に存在するか確認します。DNS設定を誤るとWeb表示だけでなくメール受信にも影響するため、メール利用中のドメインは先にレコード一覧を保存しておくのが安全です。

apexと`www`の正規URLを決めていない

wwwと非wwwの両方を公開すると、重複URLの原因になります。最初に正規ホストを1つ決め、必要ならリダイレクトを設定します。

接続後チェックリスト（2026-08-24版）

カスタムドメインがアクティブになったら、次を記録します。

dig NSでCloudflareのネームサーバーが返る
curl -IでHTTPS 200とHTTP→HTTPS 301を確認した
HTMLのcanonicalが独自ドメインを指している
pages.devはQA用として本番KPIと分離している
メール利用がある場合はMX等をCloudflare側へ移行済み

よくある質問

XServerのレンタルサーバー契約は必要ですか？ いいえ。今回の構成ではXServerドメインだけを契約し、サイトはCloudflare Pagesから配信しています。WordPressやXServerのメールを使う場合は条件が変わります。

記事に載せたネームサーバーをそのまま使えますか？ 使わないでください。Cloudflareが自分のドメインに対して表示した値を設定します。

Androidスマホだけで設定できますか？ 今回の初期設定はmacOS版Chromeで行ったため、Androidだけでの完結は未検証です。画面が操作できることと、全工程を再現できることは分けて判断します。

実際に使って分かった利点と注意点

良かった点は、ドメイン契約とサイト公開を分けられ、XServerのレンタルサーバーを追加契約せずに独自ドメインを公開できたことです。GitHubへの更新がCloudflare Pagesへ自動デプロイされ、HTTPSも有効になりました。

一方で、管理画面がXServer・Cloudflare・GitHubに分かれます。障害時には「契約」「DNS」「ビルド」のどこで止まっているかを自分で切り分ける必要があります。WordPressを始めたい人にとって、常にこの構成が簡単とは限りません。

また、今回の初期設定はmacOS版Chromeで行いました。設定後の記事更新はAndroid中心にする予定ですが、この接続作業をAndroidだけで完了できるかは未検証です。未検証の範囲を「スマホだけでできた」とは扱いません。

まとめ：最初にPagesを動かし、DNSは最後に切り替える

安全に進めやすかった順番は、次の5段階です。

pages.devでサイトを先に表示する
Cloudflareへ独自ドメインを追加する
XServerドメインのネームサーバーを変更する
Pagesのカスタムドメインに登録する
DNS、HTTPS、canonicalを別々に確認する

この記事の公開時点ではアフィリエイトリンクを置いていません。掲載する場合は、広告・アフィリエイト方針に従い、実契約で確認した機能、利用期間、未検証事項を明記します。契約30日後には、更新条件、困った点、向かない人を再確認します。

この構成で始めた理由や売上0円の基準値は、ポケットAIラボの開始宣言と2026年8月の準備期間レポートに記録しています。2026-08-11 初回公開時点では、週5時間運営シートは「販売前の需要検証中」でした。2026-09-05時点では新規販売を保留し、購入受付・ウェイトリストは設けていません。過去の条件と現在の状態は商品ページに残しています。

前の記事：GitHubからCloudflare Pagesへ自動デプロイ
次の記事：Cloudflare DNSでSearch Consoleを設定

公開前の確認を担当・証拠・ロールバックまで1枚ずつ記録したい場合は、XServer Domain → Cloudflare Pages 公開前チェックリストにPDF版と編集可能版の内容、現在の販売状態を掲載しています。