※この記事にはプロモーションが含まれています
公開したあと、誰が守りますか。
Claude CodeやCodexで3Dホームページを作れても、公開先や運用方法で手が止まることがあります。この記事では、公開から運用までの準備を順に説明します。
僕は、ホームページを事業に役立つところまで整えることを大切にしています。お客さんが興味を持ったときに、ページが開き、問い合わせが届く。その当たり前も、公開後に守っていきたいんです。
そこでおすすめしたいのが、Cloudflareです。WordPressを置くサーバーと組み合わせ、ファイルの配信を助け、不審な通信を制限できます。無料から始められますが、日々の管理まで不要になるわけではありません。
この記事でわかること
- サーバー・WordPress・Cloudflareの役割
- 無料でできることと、残る費用・管理
- 既存サイトを確認しながら導入する順番
- AIに作業を頼むときの注意点
『3Dホームページの教科書』第8章を補う一般公開のガイドです。公式資料は2026年9月10日に確認しました。操作時は、リンク先の最新の案内も確認してください。
目次
まず、サーバー・WordPress・Cloudflareの役割を分けよう
名前が似て見えても、それぞれ担当する仕事が違います。まずは「何を任せるものか」を、この表で分けてみましょう。
| 名前 | 何をするものか | 用意するときのポイント |
|---|---|---|
| ドメイン | example.com のようなホームページの名前 |
自分や自社で管理し、更新期限を把握する |
| サーバー | ホームページのファイルやデータを置き、配信する場所 | WordPressを使うなら、その動作に対応したものを選ぶ |
| WordPress | ページやブログを編集・管理する仕組み | 通常はサーバーに設置して使う |
| Cloudflare | 通信を中継し、配信を助けたり、不審なアクセスを制限したりするサービス | 既存のサーバーと組み合わせる使い方がある |
ここが少し紛らわしいのですが、Cloudflareには、ファイルを置いてホームページを公開する別のサービスもあります。「今のサーバーに組み合わせる話」と「Cloudflareにファイルを置く話」の両方があるんです。
整理すると、主な選択肢は次の2つです。
| 公開方法 | 向いている使い方 | 基本の構成 |
|---|---|---|
| WordPressで公開する | ブログを更新する、既存サイトに3Dページを足す、お客さんが管理画面で編集する | お客さんのブラウザ → Cloudflare → WordPressを置いたサーバー |
| 静的なサイトとして公開する | 作品紹介、期間限定ページ、更新の少ない3D体験ページ | お客さんのブラウザ → Cloudflareの静的サイト配信サービス |
教材に沿って進める方は、まず第8章のWordPress公開で進めてください。静的公開は、別の公開方法を検討する方向けの補足です。
静的とは、画面が動かないという意味ではありません。HTML・CSS・JavaScriptなど、用意したファイルを配信する方式です。
ブラウザ内で動く3D表現も使えます。一方、会員ログイン、決済、問い合わせの保存などは、別途それぞれの仕組みが必要です。
ここは、先に押さえておきましょう。WordPressのサーバー契約は、そのまま残ります。通常のWordPressは、PHPというプログラムの実行環境と、記事などを保存するデータベースを必要とするためです。WordPress公式「Requirements」（2026年9月10日確認）、Cloudflare公式「Traffic flow」（2026年9月10日確認）
既にWordPressがある方は、その環境に3Dページを追加する方法から考えてみてください。今までブログを書いていた管理画面を使い続けられるなら、管理する場所を増やさずに済みます。
Cloudflareをすすめる理由と、無料でできる範囲
お店の自動ドアは、お客さんが入りやすいように設けます。でも、取り付けたからといって、閉店後の戸締まりや店内の管理まで済むわけではありません。
Cloudflareも、担当する範囲を知って使いたいサービスです。ファイルを届ける途中の負担や、不審な通信への対処を手伝ってくれます。スモールビジネスで使うなら、まず次の役割を押さえれば大丈夫です。
配信を助け、不審なアクセスを減らす
| 機能 | 読者に関係すること | 気をつけたい点 |
|---|---|---|
| CDN・キャッシュ | 画像などのコピーを配信拠点から届け、元サーバーへの負荷を減らす | 実際の速さは素材の重さやキャッシュの効き方にも左右される |
| DDoS対策 | 大量の通信でサイトを使えなくしようとする攻撃への対策 | サイトが絶対に止まらなくなる保証ではない |
| WAF | Webへの通信を調べ、既知の攻撃パターンなどを制限する | 無料プランと有料プランでは防御ルールの範囲が異なる |
| HTTPS・証明書 | 通信を暗号化する設定を支える | WordPressを置く元サーバー側にも適切な設定が必要 |
| ボットの管理 | 自動でアクセスするプログラムの動きを確認・制限する | 検索や外部連携に必要なアクセスまで止めないようにする |
FreeプランにもDNS、CDN、DDoS対策、SSL、限定的なWAFルールセットがあります。有料プランと同じ防御範囲ではありませんが、既存のWordPressに基本的な配信・保護を追加する入り口になります。Cloudflare公式「Plans」（2026年9月10日確認）、Cloudflare公式「Managed rules」（2026年9月10日確認）
ここは、費用と管理を分けて考えてください。ドメイン代とWordPress用サーバー代は別にかかります。Cloudflareでも、動画配信、ファイル保存、プログラム実行などは、サービスや利用量に応じて料金が発生します。
無料プランで始めても、運用は続きます。更新やバックアップを誰が担当するかまで決めておくと、導入後に慌てずに済みます。
3Dの動きが重い原因は、別に調べる
たとえば、3Dの立体が出るまで長く待たされる場合と、立体は出たのに触るとカクカクする場合。同じ「重い」でも、調べる場所が違います。
Cloudflareが助けるのは、主にファイルを届ける部分です。読み込んだ後にスマートフォンの処理能力が足りなくなる問題は、配信設定だけでは直りません。
モデルの細かさ、画像の解像度、動画の長さ、同時に動かす演出を見直しましょう。動きを減らした表示も用意します。教材で行ったスマートフォンの確認は、公開後も必要です。
WordPressで公開するなら、この順番で用意する
教材の第8章には、サーバー契約からWordPress公開までの手順があります。これから公開する方は、まずこの順番で進めましょう。既に公開して正常に動いている方は、次のCloudflare導入手順へ進めます。
1．使うサーバーと、管理する人を決める
WordPressが使えること、HTTPSで通信を暗号化できること、自動バックアップと復元方法、日本語で相談できる窓口を確認します。月々の料金を見るときに、「困ったら、どうやって戻すのか」も一緒に確かめてください。
ドメインとサーバーの契約者、更新費用を払う人、管理画面に入れる人も決めておきます。お客さんのホームページなら、納品後にお客さんが契約状況を把握できる状態にしておきたいですね。
2．WordPressを設置し、HTTPSで表示する
サーバー会社の公式手順に沿ってWordPressを設置します。まず通常のページを表示し、https:// で正常に開けることを確認してください。
この時点で、管理画面へのログイン、記事の保存、画像の追加も確認します。Cloudflareを加える前に、元の環境が正常に動く状態をつくります。
3．3Dページを公開できる形にする
AIが生成したHTMLを貼り付けるだけで、必ずWordPressのページになるとは限りません。画像や3D素材への参照先、JavaScriptの読み込み、テーマの表示との重なりを調整する必要があります。
ここでは、本番と練習用のWordPressを分けることが大切です。テーマ・プラグイン・データベースを本番と分け、教材の公開スキルを使って確認しましょう。
記事を下書きにするだけでは、練習環境の代わりにはなりません。同じWordPressのテーマを変更すれば、公開中のページにも影響することがあるからです。
既存サイトへ追加するときは、新しい3Dページに加えて、今までのページと管理画面も動くか確かめます。
4．公開用ファイルと、接続情報を分ける
教材で使う .env やアプリケーションパスワードは、AIとWordPressを接続するための情報です。公開するファイルの一式に入れないでください。
アプリケーションパスワードは通常のログイン用パスワードと分け、用途ごとに発行します。役目が終わったものや不要になったものは失効させます。WordPress公式「Application Passwords」（2026年9月10日確認）
5．公開後の動作を一通り試す
スマートフォンとパソコンで3Dページを開き、リンク、戻る操作、問い合わせフォームを試します。フォームは完了表示だけでなく、送信した内容の保存先と通知メールの到着まで確認してください。
テストの送り先には、自分で受け取れるメールアドレスを使います。お客さんへ確認用メールを送ってしまわないように、先に送り先を見ておきましょう。
ここまで正常に動いたら、Cloudflareを追加する準備に進めます。順番を分けると、問題が起きたときに原因を探しやすくなります。
既存のWordPressにCloudflareを導入する手順
ここからは、自分で管理するドメインを、Cloudflareの通常のDNS設定へ切り替える場合の手順です。サーバー会社経由の連携サービスなど、契約に専用の設定手順がある場合は、その案内を確認してください。
DNSとは、ドメインにアクセスしたときに「どのサーバーへつなぐか」を決める設定です。メールの配送先も含まれます。
なので、ホームページが表示されるかだけを見て終わらないでください。メールの設定も、忘れずに引き継ぐ。これが今回の切り替えで、先に押さえておきたい点です。
1．変更前の状態と、戻し方を残す
WordPressのファイルとデータベースをバックアップし、復元方法を確認します。ドメイン管理会社、現在のネームサーバー、DNS設定も記録してください。
Cloudflareのアカウントには、パスワードに加えて別の方法でも本人確認する「二要素認証」を設定します。
ネームサーバーは、DNS設定を管理するサーバーです。後の手順で、その参照先をCloudflareへ切り替えます。
2．ドメインを追加し、取り込まれたDNS設定を照合する
Cloudflareにドメインを追加し、プランを選びます。取り込み結果と、変更前の設定を見比べてください。自動スキャンで全部見つかるとは限りません。
| 確認する設定 | 用途 |
|---|---|
| A・AAAA・CNAME | ホームページやサブドメインの接続先 |
| MX | メールの配送先 |
| SPF・DKIM・DMARCに関係するTXTなど | 正しい送信元かを確認するためのメール設定 |
| その他のTXT・CNAMEなど | 外部サービスの所有者確認や接続 |
www 付きのアドレス、予約システム、メール配信サービスなども確認対象です。意味が分からない設定を消したり、値を推測で埋めたりせず、契約先の記録と照合しましょう。Cloudflare公式「Full setup」（2026年9月10日確認）
3．Web用とメール用で、通信の通し方を分ける
Cloudflareの画面では、Web用のA・AAAA・CNAMEレコードに「Proxied」と「DNS only」という選択肢が出ます。
「Proxied」は、通信をCloudflareで中継する設定です。オレンジ色の雲で表示され、CDNやWAFなどが働く経路になります。「DNS only」は、接続先を案内する設定で、Web通信の保護・配信機能を同じように利用するものではありません。
この段階では、Web用のレコードも「DNS only」にしておきます。実際に「Proxied」へ変えるのは、手順5で証明書などの準備を確認した後です。まずDNSの管理先を移し、その後に通信の中継を始める順番です。Cloudflare公式「Minimize downtime」（2026年9月10日確認）
メール用ホストのA・AAAA・CNAMEは原則「DNS only」にします。MXやTXTそのものに、Webと同じプロキシ設定を付けるわけではありません。画面に出る雲を全部オレンジにしようとしないことです。Cloudflare公式「Proxy status」（2026年9月10日確認）
4．DNSSECの状態を確認してから、ネームサーバーを切り替える
DNSSECは、DNSの応答が正しいものかを検証する仕組みです。
既に有効なら、公式移行手順に従って、ドメイン管理会社側に残る古い署名情報であるDSレコードを解除します。解除が反映されたことを確認してから、ネームサーバーをCloudflareが指定した値に変更します。古い情報を残したまま切り替えると、ドメインにアクセスできなくなることがあります。
Cloudflare側で有効化を確認した後、Cloudflare用のDNSSECを設定し直します。変更は行き渡るまで時間がかかるため、切り替え直後だけで判断しないでください。Cloudflare公式「Full setup」のDNSSECとネームサーバー変更手順（2026年9月10日確認）
5．HTTPSと証明書を確認し、Full (strict)を使う
ここでは、サーバー会社が提供する、ブラウザで警告なく接続できる証明書を使う前提で進めます。公開認証局が発行したもので、有効期限内であり、アクセスするホスト名と一致することを確認してください。元サーバーへHTTPSで接続できる状態にして、Cloudflareの暗号化モードに「Full (strict)」を使います。
HTTPSでアクセスした場合、ブラウザとCloudflareの間、Cloudflareと元サーバーの間の両方を暗号化し、元サーバー側の証明書も検証します。証明書の条件を満たさないまま設定すると、526エラーになる場合があります。Cloudflare公式「Full (strict)」（2026年9月10日確認）
元サーバーとCloudflare、両方を確かめるのがポイントです。Cloudflare側の証明書が利用可能な状態かも確認してください。
両方の準備が整ったら、対象のWeb用レコードを「Proxied」に変更します。メール用は「DNS only」のままです。
「Full (strict)」を選ぶだけでは、HTTPからHTTPSへの転送設定にはなりません。暗号化されたURLで正常に表示できることを確かめたうえで、HTTPで開いた場合もHTTPSへ転送されるか確認します。Cloudflare公式「Always Use HTTPS」（2026年9月10日確認）
「Flexible」は、名前だけで簡単そうだからと選ばないでください。元サーバーへは暗号化されない通信になり、WordPress側がHTTPSへ転送する構成では、転送が繰り返されてページが開けなくなることもあります。Cloudflare公式「Too many redirects」（2026年9月10日確認）
6．まず標準設定で動かし、キャッシュを広げすぎない
キャッシュは、ファイルのコピーを再利用する仕組みです。Cloudflareの標準設定では、HTMLやJSONは通常キャッシュされません。Cloudflare公式「Default cache behavior」（2026年9月10日確認）
初心者の最初の設定として、サイト全体を「Cache Everything」にすることはすすめません。ログイン中の画面、会員情報、カート、決済などは、利用者ごとに内容が変わるためです。古い表示が残ったり、個別の内容を誤って配信したりしないよう、動的なページの扱いを理解してから調整します。Cloudflare公式「Dynamic content and login issues」（2026年9月10日確認）
7．表示・編集・問い合わせ・メールを確認する
導入前と同じ操作をもう一度試します。トップページ、3D素材、WordPressへのログインと保存、問い合わせの受信、業務メールの送受信を確認してください。
AIからWordPressへ接続する操作も試します。画面上のチェックを求める強い制限が、自動接続を止める場合があるためです。
問題があれば記録を見て対象を特定し、必要な範囲だけ調整します。プログラム同士が接続する窓口であるAPIを、まとめて無条件に許可する設定は避けましょう。
うまく動かなくなったら、いつ何を変えたかを見返します。直前に追加したルールやキャッシュの設定を、一つずつ戻して確かめましょう。
通信の中継だけが原因なら、条件を確認して「DNS only」へ戻す方法もあります。ただし、その間はCloudflareによるWeb保護を外れます。
ネームサーバーの差し戻しにも反映待ちがあります。「元の値に戻せば、その瞬間に元通り」とは考えないでください。
WordPressを使わず、静的な3Dサイトを公開する場合
ブログ更新やWordPressの管理画面が不要なら、Cloudflareにファイルを置く方法も候補です。現在の公式案内では、新規プロジェクトにはWorkersが推奨されており、静的ファイルの配信には「Workers Static Assets」が使えます。既にPagesを使っている場合は、その方式もあります。Cloudflare公式「Pages」（2026年9月10日確認）、Cloudflare公式「Static Assets」（2026年9月10日確認）
この方式では、公開するフォルダに、秘密の情報を入れないことを先に確認します。進める順番は次のとおりです。
- AIに、サイトが静的配信できる構成か、フォームなどに別の処理が必要かを確認してもらう。
- 公開用フォルダを作る。ビルドが必要な構成なら、ソースコードではなく、生成された公開用ファイルを用意する。
.env、認証情報、顧客データ、不要なバックアップが入っていないことを確認する。- Workers Static Assetsなどに配置し、発行されたURLで表示・素材の読み込み・画面遷移を確認する。
- 独自ドメインを設定し、HTTPSと実際のURLでの動作をもう一度確認する。
具体的な操作は、Workers Static Assetsの開始手順（2026年9月10日確認）に沿って進めてください。作った構成によってアップロードするフォルダや設定が異なるため、AIには「このプロジェクトに必要な公開手順を、公式資料を確認して示して」と依頼するとよいです。
WordPressのテーマZIPを、そのままこの方法でアップロードしても、通常のWordPressとしては動きません。WordPressを静的化する方法もありますが、編集・フォーム・動的機能の扱いが変わる別の構成です。Cloudflare公式「Deploy a WordPress site」（2026年9月10日確認）
大きな3D素材と動画は、公開前にサイズを見る
Workers Static AssetsとPagesは、どちらも1ファイル25 MiBまでという制限があります。大きな3Dモデルや長い動画は、そのまま置けないことがあります。Workersの制限（2026年9月10日確認）、Pagesの制限（2026年9月10日確認）
まず素材を圧縮し、それでも大きいものはファイル保存サービスのR2、動画はStreamや他社の動画配信サービスなど、用途に合う置き場を検討します。無料CDNを、大容量の動画を無制限に配る場所として使うことはすすめません。動画・大容量配信にはサービスごとの利用条件があります。Cloudflare公式「Delivering videos with Cloudflare」（2026年9月10日確認）
静的アセットへのリクエストと、プログラムの実行は料金区分も異なります。R2の容量・操作回数や、Streamの保存・配信時間にも料金体系があります。利用するサービスを決めてから、無料枠と費用を確認しましょう。静的アセットの料金（2026年9月10日確認）、R2の料金（2026年9月10日確認）、Streamの料金（2026年9月10日確認）
AI時代の運用では、守る対象と、通したいアクセスを決める
僕は、ホームページを何のために使うかを決めてから、機能を選ぶことを大切にしています。Cloudflareの設定も同じです。
たとえば、AI検索からお店を見つけてもらいたいなら、そのために必要なアクセスまで止めては困ります。守りたい情報と、通したいアクセスを決めるところから考えてみてください。
AIのアクセスを、ひとまとめに止めない
AIに関連するアクセスにも、学習用の収集、検索のための収集、ユーザーの依頼を受けた閲覧などがあります。Cloudflareの「AI Crawl Control」では、クローラーと呼ばれる自動巡回プログラムのアクセスを確認し、許可・遮断を管理できます。Cloudflare公式「Get started with AI Crawl Control」（2026年9月10日確認）
たとえば、自社の情報をAI検索から見つけてもらいたいなら、何も確認せず全部遮断する設定は、その目的と合わない場合があります。一方、大量の収集で負荷がかかっているなら、制限を検討したいところです。
どのクローラーを、何のために制限するのか。ここを決めてから設定してください。
学習と検索を兼ねるものもあるため、「学習だけ止めれば、検索には一切影響しない」とは言い切れません。許可すれば検索掲載やAIからの引用が保証されるわけでもありません。Cloudflare公式「Block AI bots」（2026年9月10日確認）
robots.txt に方針を書くことと、通信を技術的に遮断することも別です。方針を守らないプログラムまで、ファイルの記述だけで止められるわけではありません。Cloudflare公式「Managed robots.txt」（2026年9月10日確認）
更新・認証・バックアップは続ける
Cloudflareを導入しても、WordPress本体、テーマ、プラグインの更新は必要です。使わないプラグインの整理、強いパスワード、二要素認証、必要な人だけに権限を渡す運用も続けます。
バックアップは「取っている」だけで終わらず、「そこから戻せる」ことまで確認しましょう。更新前の状態を残し、問題が出たらどこまで戻すか分かる状態が大切です。WordPress公式「Hardening WordPress」（2026年9月10日確認）
AIが書いたプログラムのログイン判定の不備や、公開フォルダに入れた秘密情報が、Cloudflareを入れただけで直ることもありません。そもそも公開してはいけない情報は、公開用ファイルに置かない。フォームや会員機能の処理は、実装側でも確認する必要があります。
また、元サーバーへ直接アクセスできる状態では、Cloudflareを経由しない通信が残る場合があります。必要に応じてサーバー会社へ、Cloudflare経由に制限できるかを相談してください。共有サーバーなどで、設定できる範囲は異なります。Cloudflare公式「Cloudflare IP addresses」（2026年9月10日確認）
AIに頼むときは、変更する前に現状を説明してもらう
僕なら、最初は次のように依頼します。
このホームページにCloudflareを導入する準備をしたいです。まず現在の構成を読み取りだけで確認してください。
公開先、WordPressの有無、ドメインとDNSの管理先、メール利用、HTTPSの状態、公開ファイルに含めてはいけない情報を整理してください。認証情報は表示せず、分からない設定は推測で変更しないでください。
そのうえで、公式資料を確認し、変更順、確認方法、元へ戻す方法を示してください。実際の設定変更は、内容を確認してから依頼します。
いきなり「全部設定して」と渡すより、自分のサイトがどう動いているかを把握できます。AIに作業を手伝ってもらうときも、何を変えたかの記録は残しておきたいですね。
次のアクションは、公開前後の確認から
Cloudflareを使うか考えるときは、次の3つを押さえてください。
- WordPressを使うなら、サーバーの用意と公開後の管理は続きます。
- DNSの切り替えでは、ホームページとメールの設定を引き継ぎます。
- 導入後も、3Dの表示、問い合わせ、管理画面、AIからの接続を確認します。
僕が大切にしたいのは、お客さんが興味を持ったときに、ちゃんと役に立つホームページです。3Dの体験が楽しくても、問い合わせが届かなければ、せっかく生まれた接点を受け止められません。
配信や保護をCloudflareに手伝ってもらいながら、更新する人、費用を管理する人、不具合に対応する人を決めておく。その運用まで含めて、公開する準備だと考えています。
困ったときに戻せる状態を、先に用意する。今日すべてを設定する必要はありません。
これから公開する方は、WordPressの公開先を用意するところから。既に公開している方は、バックアップとDNS設定を確認し、変更前の状態を記録するところから始めてみてください。