AIでHP更新するために全面リニューアル。Cloudflareに変えました。
自分のHP（ホームページ）を全面リニューアルしました。
デザインだけでなく、HPを管理する環境まで、丸ごと変えました。
変更前と変更後
| 項目 | 変更前 | 変更後 |
|---|---|---|
| 制作ツール | WordPress | HTML |
| サーバー | ロリポップ | Cloudflare |
| ドメイン | ムームードメイン | ムームードメイン（変更なし） |
WordPressはコードを書けなくてもOKで、テーマ（着せ替えツールのようなもの）を購入すれば、デザインもある程度作り込まれた状態から始められます。
HTMLはコードを一から書くので、デザインも含めて全て自作です。
これまで使っていたサーバー（ロリポップ）は解約します。
ドメインはそのままなので、URLは変わりません。
Cloudflare（クラウドフレア）とは何か
ひとことで言うと、「ホームページを置いておく場所」です。
サイトそのものはHTMLというファイルで作ります。
そのHTMLを世界中の方が見られるように置いておく場所です。
つまり、「Cloudflareでサイトを作った」というより、「HTMLで作ったサイトをCloudflareに置いた」というほうが正確です。
Cloudflareって、大丈夫なサービスなの？
初めて名前を聞いた方は、最近出てきたよく分からないサービスではないか、と思われるかもしれません。
Cloudflareの創業は2009年です。
2019年にはニューヨーク証券取引所に上場しています。
現在は世界125か国以上・335都市にネットワークを持ち、インターネット上の通信のおよそ20%がCloudflareを通っていると公表されています。
つまり、僕たちが普段見ているサイトの多くが、すでにCloudflare経由なのです。
導入事例として公開されている日本企業も、こういったところです。
- 日本航空
- ソニーミュージックグループ
- DeNA
- マネーフォワード
- GMOインターネットグループ
- JCB
海外では、次のような企業が掲載されています。
- Shopify
- Canva
- Discord
- Zendesk
（用途はサイトの高速化・メールのセキュリティ・社内ネットワークの保護などさまざまです）
そしてCloudflareは、もともとセキュリティの会社です。
サイトに大量のアクセスを送りつけてダウンさせる「DDoS攻撃」を防ぐサービスから始まりました。
この攻撃対策は、無料プランでも制限なく付いてきます。
サイトをCloudflareに置くということは、その防御の内側に入るということでもあります。
有名YouTuberのKEITOさんが解説動画もアップされていたので、さらに知りたい方はご覧ください。
実際使う前に、有料教材も購入して勉強しました。
Cloudflareの教科書｜Claude Codeに、最強の裏方をつける
なぜCloudflareを選んだのか？
僕は、10年以上WordPressでHPやブログを運営してきました。
ただAIを使うようになって、「サイト制作、編集、記事投稿などを、AIでできないか？」と常々思っていました。
ただ、WordPressではそれがなかなか難しい。
そんな中、YouTubeやSNSで話題になっているのが、Cloudflare。
調べてみたところ、まさに自分が求めていたものでした。
つまり、Claude Codeから、サイトを直接作れて、直接直せて、記事の投稿もできる。
「ここの文言を変えて」「この配置を直して」「このページを足して」と伝えれば、Claude Codeがファイルを直して、公開まで済ませてくれます。
僕がCloudflareの管理画面を触る必要は、ほとんどありません。
「HTMLにするだけなら、レンタルサーバーでもよかったのでは？」
書きながら、自分でもそう思いました。
たしかにHTMLのサイトなら、ロリポップでもエックスサーバーでも置けます。
なので「WordPressをやめてHTMLにした」という話だけなら、Cloudflareである必要はありません。
違いは、作り方ではなく公開と運用の仕方にあります。
- 1公開までコマンド1つで終わるレンタルサーバーだと、直したファイルを毎回手作業でアップロードする工程が入ります
- 2無料の範囲で十分使える
- 3速くて、落ちにくい世界中にコピーを置いて配信する仕組みが、最初から入っています
- 4壊しても、前の状態に戻せる公開の履歴が残ります
特に1つ目が、さきほどの「Claude Codeから直接触れる」に直結しています。
無料プランだと、セキュリティはどうなるのか
「無料の範囲で十分使える」と書きましたが、無料だとセキュリティが甘いのでは、と思われるかもしれません。
無料プランでも、次のものは付いてきます。
- DDoS攻撃対策（回数・規模の制限なし）
- SSL証明書（URLの鍵マーク）の発行と自動更新
- HTMLなどのファイル配信（表示回数の上限なし）
一方で、無料だと物足りない部分もあります。
不正なアクセスをふるい分ける「WAF」という機能は、無料だと基本のルールセットだけです。
攻撃の危険度を点数化するような細かい検知は使えず、アクセスの集中を抑えるルールも1つしか作れません。
とはいえ、僕のように会員機能も決済もない情報発信のサイトであれば、無料で足ります。
個人情報を預かる仕組みを載せるなら、有料プランを検討する。
その切り分けでいいと思います。
Cloudflareを使うデメリット
もちろん良いことばかりではありません。
まず、デザインを1から自分で考える必要があります。
WordPressには「テーマ」というデザインの土台があって、購入すればある程度きれいなサイトにしやすいです。
ところが、Cloudflareにそれはありません。
そしてAI任せにすると、AIっぽいデザインになってしまいます。
結局人間が、Claude Codeを通して、デザインの方向性を決め、修正を繰り返す必要があります。
もうひとつは、細かな修正が面倒という点です。
WordPressなら管理画面で直接修正できますが、Claude Code経由だと、1文字変えるだけでも指示を出す必要があります。
いちいちスクショを貼ったり、「ここのこの文章を、こう直して」みたいに指示するのは面倒です。
実際に作ってみて
元々あったHPを土台にしたものの、デザインを一新し、内容も適宜ブラッシュアップしました。
かかった時間は、だいたい20時間くらい。
一気に20時間ではなく、少しずつ時間を取りながらの合計です。
この20時間は、僕が修正指示を出したり、表示を確認したりしていた時間で、その裏ではもっと長い時間、Claudeがずっと動いてくれていました。
自由であることが、常に正義とは限らない
作り終えて感じたのは、これでした。
WordPressはテーマを買うことで、デザインの選択肢がある程度決まります。
裏を返せば、その範囲内なら、きれいなデザインになりやすいということ。
自由度が高いということは、その分自分で決める必要があるということでもあります。
ただ、WordPressではなかなかできないアニメーションや表現ができるのは、やはり大きいです。
そして何より、Claude Codeに指示をするだけでサイトが直っていく。
これはやっぱり、感動体験でした。
AIのおかげで触れるようになったツール
Cloudflare自体は、昔からあるものです。
ただ、これまではエンジニアでないと操作が難しいツールでした。
それがAIの登場で、非エンジニアの僕でも触れるツールになりました。
すごい時代になったと思います。
Claude Codeで全部触れるようになったので、今後はいろんな機能をつけることも考えていきます。
