独自ドメインのサイトを年1,600円で公開する手順
Cloudflareで作った、このサイトの構築記録
／ 新田 雄三
このページを含む nitta-ai.com は、年1,600円で運用しています。 内訳はドメイン代だけで、サーバー代もSSLの費用も、独自ドメインのメールも0円です。
この記事は、そのサイトを実際に構築したときの手順をそのまま残したものです。 費用の内訳、どこで詰まったか、この作り方が向かないのはどういう場合かまで書いています。 私は非エンジニアで、普段は販促物の内製化支援をしています。専門家向けではなく、 自社のサイトをどうするか判断したい方に向けて書きました。
1. かかった費用の全部
実際に支払った額です。制作会社の相場との比較は載せません。見積もりを取っていないので、 書けるのは自分が払った額だけです。
| 項目 | 使ったもの | 費用 |
|---|---|---|
| ドメイン | Cloudflare Registrar | 年10.44ドル |
| サーバー・配信 | Cloudflare Pages | 0円 |
| SSL（https） | Cloudflare（自動） | 0円 |
| 独自ドメインのメール | Cloudflare Email Routing | 0円 |
| 問い合わせフォーム | Formspree（無料枠） | 0円 |
| デザインの土台 | Tailwind CSS | 0円 |
| 合計 | 年10.44ドル（約1,600円） | |
月あたり130円ほどです。有料プランには一度も切り替えていません。 無料プランで足りなくなって渋々払った、という費用もありません。
この表に入れていないもの
中身を書くのに生成AI（Claude）を使っています。ただし、これはサイトのために契約したものではなく、 普段の資料作成や販促物の制作で使っているものです。サイトの実費として数えているのはドメイン代だけだという点は、 誤解のないように書いておきます。
2. なぜサーバー代が0円になるのか
安いプランを選んだ、という話ではありません。仕組みが違います。
レンタルサーバーは、借りた場所にプログラムを置いて、アクセスのたびにその場でページを組み立てます。 置き場所と計算する力の両方を借りるので、月額が発生します。
いま使っている Cloudflare Pages は、完成済みのファイルを世界中の配信網に置いて、そのまま配るだけの仕組みです。 その場で組み立てる処理が要らないので、配る側の負担が小さい。だから無料の枠が広く取られています。 表示にかかる通信量に上限はなく、小さな会社や個人のサイトで無料枠を使い切ることは、まず起きません。
その代わり、この作り方では「ページをその場で組み立てる」ことができません。 会員ログインや在庫連動のような仕組みは載せられない、という制約とセットです。詳しくは 8章に書きます。
ドメインを同じ会社で取ったのにも理由があります。Cloudflare は、ドメインを原価で売る方針を掲げています。 1年目だけ数百円で、2年目から数千円に跳ね上がる、という値段の付け方をしません。 毎年いくらかかるかが読めるので、事業の経費として扱いやすくなります。
3. 用意するもの
① Cloudflareのアカウント
無料で作れます。ドメイン購入のときだけカード情報を登録します。
② GitHubのアカウント
サイトのファイルを置く場所です。無料で使えます。ここに置いたファイルを Cloudflare が自動で取りに来る、という関係になります。
③ サイトの中身（HTMLとCSS）
当サイトは生成AIと一緒に書きました。テンプレートを買ってもかまいません。ここは費用のかけどころが人によって変わる部分です。
デザインソフトの契約も、サーバーの契約も要りません。
4. 公開までの手順
画面の文言は変わることがあるので、ボタン名ではなく何をする工程かで書いています。
-
STEP 1 ｜ ドメインを取る
Cloudflareの管理画面にあるドメイン登録の項目から、使いたい名前を検索して購入します。 支払いはカードで、当サイトの .com は年10.44ドルでした。
すでに他社で取ってあるドメインを移すこともできますが、 取得や更新から60日間は他社へ移せないというルール（ICANNの規定）があります。 先週ドメインを取ったばかりなら、移すのは2か月後になります。
-
STEP 2 ｜ ファイルをGitHubに置く
リポジトリ（保管庫）を1つ作り、HTMLと画像を入れます。 ここが原本になり、あとで直すときもここを更新します。
-
STEP 3 ｜ Cloudflare Pagesにつなぐ
Cloudflareの管理画面でPagesのプロジェクトを作り、さきほどのGitHubリポジトリを選びます。 この時点で ◯◯.pages.dev という仮のURLで公開され、以降は GitHubを更新するたびに自動でサイトが差し替わります。
当サイトは、ここでビルド（変換処理）を何も設定していません。 Tailwind CSSは使っていますが、CSSは手元で書き出してからGitHubに入れています。 Cloudflare側に処理をさせないぶん、表示が崩れたときに疑う場所が1つ減ります。 非エンジニアが自分で運用するなら、この判断はおすすめできます。
-
STEP 4 ｜ 独自ドメインをつなぐ
Pagesのプロジェクト設定で、STEP 1 で取ったドメインを指定します。 ドメインも同じ Cloudflare にあるので、接続に必要な設定は自動で入ります。 httpsの鍵（SSL証明書）も自動で用意され、こちらで作業することはありませんでした。
-
STEP 5 ｜ 404ページを置く
最初に飛ばしてしまった工程です。ここは 7章で詳しく書きます。 先に言っておくと、404.html を置かないと、存在しないURLでもトップページが表示されます。
5. 独自ドメインのメールを0円にする
当サイトの問い合わせ先は [email protected] です。これも Cloudflare の機能（Email Routing）で、費用は0円です。 仕組みは単純で、このアドレス宛に届いたメールを、普段使っているGmailに転送しているだけです。 設定は管理画面で転送先を登録し、転送先のメールで承認するだけで終わります。
注意：これは受信の転送だけです
この機能で無料になるのは受信です。contact@ のアドレスから送信するには、 別途メールの送信サービスをGmail側に設定する必要があります。 まず受信だけ独自ドメインにして、返信は普段のアドレスから出す、という運用でも実務は回ります。
なお、サイト内に書いたメールアドレスは、Cloudflareが自動で読み取りにくい形に変換して配信しています。 人が見るブラウザでは普通のアドレスとして表示され、アドレスを収集して回るプログラムからは見えません。 これは設定した記憶がなく、あとから確認して気づいた機能でした。
6. 問い合わせフォームをつける
ここだけは Cloudflare の外を使いました。Formspree という無料のサービスです。
理由は2章に書いた制約そのものです。この作り方のサイトは、完成したページを配ることしかできません。 送信ボタンを押したあとの受け取り役がいないので、受け取りだけを外部に任せています。 作業としては、フォームの送信先に発行されたURLを書き込むだけです。
無料枠でできること（2026年8月時点）
- ●送信は月50件まで
- ●フォームの数に制限なし
- ●通知の宛先は2件まで
- ●送信内容の保存は30日まで
気をつけているのは最後の1つです。管理画面をあとから見に行っても、30日を過ぎた問い合わせは残っていません。 届いた通知メールのほうが本体だと考えて、そちらを消さないようにしています。
7. つまずいた3つ
① 404ページが無いと、間違ったURLでトップが表示される
Cloudflare Pages は、404.html を自分で置いておかないと、存在しないURLに対してもトップページを「正常に見つかった」という扱いで返します。 実在しない /case/kkga/ も、でたらめな /case/zzz/ も、まったく同じ画面になります。
実害が出ました。クライアントが存在しないURLを開き、そこが事例ページだと思い込んだまま修正依頼を書いてきたのです。 指摘された箇所は、実際にはすべて別のページのものでした。
検索エンジンから見ても具合がよくありません。実在しないURLが全部「中身のあるページ」として扱われるため、 巡回の手間を無駄に使わせることになります。noindexを指定した404.htmlを1枚置いて解決しました。
② ビルドをCloudflare側で回すか、手元でやるか
Cloudflare側に変換処理をさせる設定もできます。便利ですが、失敗したときに 「書き方が悪いのか、変換の設定が悪いのか」の切り分けが増えます。 当サイトは手元でCSSを書き出してからGitHubに入れる形にしました。 置いたものがそのまま出るので、原因が1か所に絞れます。
③ 公開してからの直しが本番だった
公開してからの3日間で、31回直しています。数字の書き方がページごとにばらついていたのをそろえる、 実績のうちどこまでが自分の担当かを書き分ける、クライアントからの指摘で表現を全ページ変える。作業はどれも地味です。
作る費用より、この直しを自分でできる状態のほうが効いています。 1回直すたびに制作会社へ連絡していたら、この3日間は成立していません。
8. この作り方が向く場合・向かない場合
向いている
- ✓会社案内・サービス紹介・事例のサイト
- ✓店舗や教室の案内ページ
- ✓問い合わせフォームがあれば足りる場合
- ✓更新が月に数回まで
- ✓自分か社内の誰かが手を動かせる
向かない
- ●会員登録やログインが要るもの
- ●ネットショップ（決済・在庫）
- ●予約システムを自前で持ちたい場合
- ●毎日更新する情報を載せる場合
- ●複数人が管理画面から更新したい場合
判断の分かれ目は「文章を書ける人以外も更新するか」です。 複数人で回すなら、管理画面のあるWordPressのほうが結局は続きます。 実際、支援しているゴルフスクールのサイトはWordPressで運用していて、 その使い分けの理由は事例ページに書きました。
9. 公開したあとに必要なこと
いいことばかり書くのはフェアではないので、この構成で引き受けたことも書きます。
① 運用担当は自分になる
サーバー代が0円なのは、間に立って面倒を見る人がいないからです。 表示が崩れても、誰も気づいて直してはくれません。年1,600円は、この担当を自分でやる前提の値段です。
② ドメインの更新を止めない
更新が切れると、サイトとメールが同時に止まります。登録したカードが期限切れでも同じです。 自動更新の設定と、カードの有効期限だけは年に一度見ておく価値があります。
③ 直す人を先に決めておく
作る前に決めるべきなのは、デザインでもツールでもなく 「公開したあと、誰が直すのか」です。 ここが決まっていないサイトは、無料でも有料でも同じように古びます。
関連記事
CONTACT
自社で直せるサイトに、作り替えます
いまのサイトをこの構成に移せるかの見極めから、公開後に自社で更新できる状態にするまで対応します。 更新のたびに費用と日数がかかる状態を止めたい方はご相談ください。初回のご相談は無料です。