ブログ・サイト運営

WordPressのブログ175記事をClaude Codeを使ってAstroに移行した話

WordPressのブログ175記事をClaude Codeを使ってAstroに移行した話

WordPressのブログをClaude CodeでAstroに移行

これまで私のブログはずっとWordpress(サーバーはAWSのLightsail)で作っていましたが、Claude Codeを使ってAstroに移行しました。

本記事では、何故Wordpressから移行したのか、移行にはどんな作業が必要なのか、実際に移行した結果どうなったのか等について、私の体験をもとに書いていきます。


そもそもWordPressって何?

alt text まず「WordPressって何?」という方のために簡単に説明します。

WordPress(ワードプレス)は、世界中で最もよく使われているブログ・ウェブサイト作成ツールです。世界のウェブサイトの約40%がWordPressで動いていると言われるくらい、圧倒的なシェアを誇っています。

管理画面がGUIで使いやすく、プラグイン(拡張機能)を追加するだけで様々な機能を追加できるのが特徴です。一方で、サーバー上でPHP(プログラム)とデータベースが常に動いているため、サーバーの維持費がかかり、セキュリティ管理やメンテナンスの手間も発生します。


なんでWordPressをやめたの?

お金が地味に掛かる

私のブログはAWSのLightsailというサービスを使ってWordPressを動かしていました。Lightsailは裏側でEC2(AWSの仮想サーバー)を使っているので、月額費用が固定でかかります。バックアップや通信費なども合わせると、毎月だいたい1,500〜3,000円くらいが飛んでいく。

アクセスが多い月も少ない月も関係なく、ほぼ同じ金額がかかる。個人ブログとしては、ちょっと痛い出費でした。

セキュリティやプラグイン更新がストレス

WordPressって世界中で使われているぶん、攻撃のターゲットにもなりやすいんですよね。プラグインの脆弱性を突かれたとか、不審なアクセスが来てるとか、そういうニュースをたまに見るたびにちょっと不安になります。

それに、WordPressは様々な機能を使うためにはプラグインを導入する必要がありますが、プラグインを更新するたびに「Wordpressが壊れないか」「サイトのデザイン崩れたりしないか」とドキドキするのも地味にストレスでした。

実際、プラグインの更新でWordPress自体が壊れてしまって、数日サイトが落ち続けていたことも何度かあります(その度に面倒な復旧作業を裏で実施していました・・・)

ページが遅い

WordPressはページを開くたびに、サーバーがプログラムを動かしてデータベースから記事を取り出してHTMLを作って……という処理をしています。ちゃんとキャッシュの設定をすれば多少改善できるんですが、それでも限界があって、ページの表示がなんとなくもっさりしていました。

ページが遅いと、SEOの評価(Google等の検索サイトの検索評価)が低くなるため、ページの閲覧数も伸びづらくなるという致命的な影響もあります。


Astroって何?なぜ選んだの?

alt text Astro(アストロ)は、ブログやドキュメントサイトなど「コンテンツを読ませることに特化したウェブサイト」を作るためのフレームワーク(開発ツール)です。

一番の特徴は「静的サイトジェネレーター」であることです。WordPressがページを開くたびにサーバーで処理してHTMLを作るのに対し、Astroはあらかじめ全ページのHTMLファイルを作っておく(ビルドする)方式です。

静的サイト(HTML、CSS、Javascriptだけで作ったページ)なので、とにかく表示が早くSEOに強いのと、WordPressのようにプラグイン更新でサイトが壊れたりしないこと、自分でサイト状態を全てコードベースで管理できることが大きなメリットになります。

それに静的サイトで作れるということは、常に稼働させ続けるサーバーが不要のため、非常に安いコストでブログを運営することが出来ます(AWSのS3+CDNであれば実質数十円~数百円のコスト)。

移行先としてNext.js、Hugo、Astroなどいくつか候補を考えたんですが、最終的にAstroにした理由はシンプルで、「ブログを作るのに向いてる」から。記事はMarkdownファイルで管理できるのでWordPressの記事をそのまま移せますし175記事もあるコンテンツをまとめて管理できる機能も充実していました。


移行にはClaude Codeを使った

alt text 正直に言うと、今回の移行を実現できたのはClaude Code(AIコーディングアシスタント)のおかげです。と言うよりはClaude Codeを使うという選択肢が無ければ、移行をしようとすら考えなかったと思います。

Claude Codeとは、AnthropicのAI「Claude」をVS Codeなどの開発環境から直接使えるツールです。コードを書くだけでなく、「このエラーを直して」「この機能を追加して」「このAWSの設定コマンドを作って」といった指示をすると、自分でファイルを読み書きしながら実際に作業を進めてくれます。

ちなみにClaude CodeはCLIツールなので、そのまま使うのは少しハードルが高いです。そのため、利用する際はVSCode等のエディタに拡張機能として取り入れると、使いやすいと思います。

本来、WordPressから175以上の記事をAstroへ移行するのはかなりの労力が必要な作業ですが、Claude Codeに具体的にやってもらったことを挙げると……

  • Astroを使ったWEBサイトの基盤構築
  • サイトデザインをゼロから作り直す
  • 175記事を新しい形式(Markdown)に変換する
  • 175記事全てのSEO用説明文の自動生成
  • サイドバー・TOC・シェアボタンなどのコンポーネント実装
  • AWSのS3・CloudFront(SEO対策)を設定する
  • SEOのための構造化データを実装する
  • GitHub Actionsで自動デプロイ(CI/CDワークフロー)を構築する
  • セキュリティヘッダーポリシーの設定
  • ビルドエラーの原因調査と修正

と大きなものを挙げていくだけでも上記の作業があり、仮にエンジニアが本気でやっても、普通なら数週間〜1ヶ月以上かかるプロジェクトです。それが今回、Claude Codeを使ったことでほとんど自分でコードを書かずに作業時間としては、1~2日程度で完成しました。

私がやったことは主に「こんな機能が欲しい」「ここをこう直して」「SEO対策もして」等と指示することと、画面で本当に実装されているか確認すること。コーディングの大部分(99%以上)はClaude Codeが担当してくれました。

AI登場以前なら、これだけの規模の移行を個人でやるのはかなり難しかった (実質不可能だった)と思います。今の時代、AIと一緒に作業することで、技術的なハードルがぐっと下がったことを実感しました。

何より、WordPressはツールのため、プラグインの機能など含めてブラックボックス(自分では関与できない)な部分が非常に多くありましたが、Astroは全てコードベースで管理できるので、AIとの相性が極めて良いという点も大きいです。


実際にどんな作業をしたの?

記事データを移す(175記事!)

まずWordPressに書いていた175記事を全部Markdownファイルに変換しました。タイトル・日付・カテゴリ・タグ・アイキャッチ画像などの情報も一緒に移しています。

移す方法としては、先ずWordPressの「ツール」の「エクスポート」機能から「全てのコンテンツを」をダウンロードして、どこかのフォルダに格納してください。

alt text

後はClaude CodeにこのWordPressのフォルダのパスを付けて、Astroに移行して欲しい旨のプロンプトを発行するだけです。もちろん、一回では納得いくものにならない可能性が高いので、何度か「ここを修正して」みたいなやり取りをする必要があります。

私の場合も20~30回程度はやり取りしましたが、逆に言うとその程度の労力で移行が出来るのは凄まじい以外の感想は有りませんよね。

また、元のURLをそのまま使えるようにClaude Codeにお願いしたので、Googleなどに蓄積されたSEOの評価もなるべく引き継げるようにしました。

デザインを一から作る

WordPressのテーマやプラグインはそのまま使えないので、デザインをゼロから作り直しました。見た目だけじゃなくて、使い勝手も全部新しくしています(元々のブログにあったものを自前で実装しています)。

  • スマホ・タブレットにも対応したレスポンシブデザイン
  • カテゴリ・タグごとのページ
  • 記事のパンくずリスト
  • 目次の自動生成
  • SNSシェアボタン(X・Facebook・LINE・はてブ)
  • 関連記事・シリーズ記事ナビゲーション
  • サイドバー(最新記事・カテゴリ一覧など)
  • サイト内検索(Pagefind)

こういったものを実装するのはそれなりに大変なのですが、Claude Codeに頼めば全部簡単に作ってくれます。

SEO対応もしっかりやった

「静的サイトはSEOに不利」というイメージを持っている方もいるかもしれませんが、ちゃんと設定すれば全然大丈夫です。

Googleが好む構造化データ(JSON-LD)や、SNSでシェアしたときの見た目を整えるOGPタグ、サイトマップの自動生成なども全部Claude Codeを使って実装しているので、WordPressの時よりもSEOは向上していると思います。

AWSの設定(これが一番面倒)

本来一番面倒な移行作業はすべてClaude Codeで対応できましたが、唯一Claude Codeだけで対応が難しいのが、AWSというインフラ側の設定です。

実際、AwSのインフラ設定もCICDパイプラインを作成することで、インフラリソースも作成できるため大幅に作業は減っているのですが、それでも一部手動で設定しなければいけないものもあります。

具体的には、CICDパイプライン用のアカウント作成(IAMの設定)と証明書の発行(ACMの設定)、CloudFront(CDN)の設定などですね。

今回、ブログの置き場所としてAWSのS3というストレージサービスを使い、CloudFrontというCDN(世界中のサーバーからコンテンツを配信するサービス)と組み合わせています。

S3は言ってしまえば単なるファイル置き場でしか無いので、動的サイトであるWordPressブログを動かすことは出来ませんが、Astroを使った新しいブログは静的サイト(HTML、CSS、JavaScript)のため、S3だけで動かすことが出来るのです。

また、CDNを使うことでユーザーのページ表示速度が圧倒的に向上するので、今回の移行にあわせて設定しました。証明書はHTTPS接続には必須なので、必ず発行する必要があります。

記事を書く → GitHubにアップロード
  ↓ 自動でビルド&デプロイ(GitHub Actions)
AWS S3にファイルが保存される

CloudFrontが世界中に高速配信

読者のブラウザに届く

一度設定してしまえば、あとは記事を書くだけで自動でサイトが更新されます。

ここら辺の手順は詳しく解説することも出来ますが、どうせならClaudeに質問しながら自分で作業して設定する方が良いと思います(始めての人は結構手間取ると思いますが、これくらい出来ないと今後AIとの共同作業は難しいでしょう)。


移行してどう変わった?

費用がざっくり1/10になった

移行前(WordPress+Lightsail)移行後(Astro+S3+CDN)
サーバー費用約2,000円/月約100〜300円/月

S3へのファイルアップロード頻度やアクセス数等で変わりますが、月のコストが大幅に下がりました。年間で見ると2万円近くの節約になる見込みです。これは素直に嬉しいですね。

ページが明らかに速くなった

静的ファイルをCloudFrontで配信しているので、開くのがとにかく速いです。WordPressのときはサーバーがいろいろ処理していたぶんの時間がゼロになったので、体感でも違いがわかるくらい変わりました。

セキュリティの心配がほぼなくなった

静的サイトって、実は構造的にとても安全です。そもそも単なるHTMLやJavaScriptでしか無く、サーバー(バックエンド)が存在しないので、攻撃しようが無いとも言えます。

  • データベースがない → データを盗まれるリスクがほぼない
  • サーバーでプログラムが動かない → 不正なコードを実行されるリスクがない
  • S3は非公開設定 → 直接ファイルにアクセスできない

WordPressやプラグインの脆弱性にも一切影響されなくなったので、結果的にセキュリティは非常に強固となりました。

尚、S3が非公開なのに何でブログが表示できるの?と疑問に思う人がいるかも知れませんが、これは閲覧者にはCDNに上がっている静的サイトしか見せていない設定のためです。そのため、本丸であるS3にアクセスできるのは運営である私だけです。

まぁ、そもそもS3にアクセスされたところで、ただの静的サイトなのでダメージも無いのですが。

運用がとにかくラクになった

記事を書いてGitHubにアップロードするだけで、CICDパイプラインによって自動でビルドされてサイトが更新されます。WordPressのときにやっていたプラグイン更新やバックアップ管理等が全部不要になりました。

それに全てコードベースで管理できているので、こういった機能が欲しいと思ったらClaude Codeに頼めば簡単に実装できてしまうので非常に便利です。

ローカル環境でもブログを動かして確認できるようになったので、気軽に執筆して確認できるのがとにかく楽ですね。


正直、これは不便になった

良いことばかり書いてきましたが、デメリットも隠さず書きます。

コメント機能がなくなった

WordPressにはコメント機能がありましたが、静的サイトでは基本的に使えません。Disqusなどの外部サービスを使えば追加できますが、少し手間がかかります。

まぁ、その気になれば実装は出来るので、致命的なデメリットと言うほどではありませんが。

お問い合わせフォームが別途必要

フォームを送信して返信するような動的な処理は静的サイトではできないので、外部サービスかAWS Lambdaなどで別途作る必要があります。今のところ未対応なのが正直なところ。

これもコメント機能と同じく、その気になれば実装はそこまで難しくありません。

公開まで数分かかる

記事を書いてからサイトに反映されるまで、ビルドの時間(3〜4分)が必要です。WordPressなら「保存」した瞬間に公開できるので、そこは少し不便になりました。速報系の記事には向かないですね。

とは言っても、たかが数分の話なので、これも誤差レベルと言えばそれだけの話しです。

移行と運営にはそれなりに知識が必要

AIのサポートがあったとはいえ、移行作業にはそれなりに開発系の知識を求められます。

そもそもWordPressを使ってブログを実装している層というのは、開発系の知識があまりない人が多いと思もうので、静的サイトと動的サイトの違いや、AstroやS3とCDNを使ったサイト構築というのは少し難しいかもしれません。

もちろん、Claude Codeに任せれば実装は簡単にしてくれますが、そのClaude Codeの実装が本当に正しいのか、サイト運営するうえで適切なのかを使う側が一定理解しておかないと、その後の運営が出来ない可能性が高いです。

CICDパイプラインなども同様ですが、こういったものを作ったほうが運営が楽になるという知識を持っていないと、そもそも作ろうという発想に至らないので、AIに指示も出来ないんですよね。

そのため、こういったサイト構築のアーキテクチャ等が全くわからない方には少しハードルが高いと思います。ただ、実装するだけならClaude Codeが全部やってくれるので本当に簡単です。

実際の開発画面は以下のようなイメージです。こんな感じでVSCodeにClaude Codeを入れて、実際にサイトをコードベースで管理しながら、ローカル環境で動作を確認したうえでGitHubにプッシュするだけで、本番サイトに反映される仕組みを私は構築しています。

alt text


こんな人にはオススメ

ここまでの内容を踏まえて、Claude Codeを使ったWordPressの移行を考えている人で向いている人と向いていない人の特徴を挙げます。

向いてる人

  • 毎月のサーバー代を節約したい
  • ページの表示速度を上げたい
  • WordPressのメンテナンス作業に疲れた
  • GitHubやMarkdownを使ったことがある
  • セキュリティをしっかりしたい

ちょっと向いてないかも…という人

  • WordPressの管理画面に慣れていてMarkdownは使いたくない
  • コメント機能や複雑なフォームなど動的な機能が必要
  • プログラミングの経験がほとんどない
  • AIを使いたくない(もしくはAIの回答を理解できる知識が無い)

まとめ

正直に言うと、WordPressからの移行はやって良かったです。

費用は大幅に下がって、サイトは速くなって、セキュリティの心配もほぼなくなった。何より「ブログを書くこと以外のメンテナンス作業」から解放されたのが一番大きかったです。

WordPressをどうにかしたい」と思っているなら、一度Astro等を使った静的サイトへの移行を検討してみてください。

私自身、AIを使えば個人でもこういった移行作業ができるんだなという発見もありました。全部自分でゼロから調べながらやっていたら、きっと途中で挫折していたと思います。

今後のAIネイティブ時代になってくると、WordPressのようなGUIベースの管理よりも、今回作ったようなコードベースでの管理のほうが逆に楽になるというのはある意味衝撃かもしれません。

これまでは、誰も面倒なコードを書きたく無かったからこそ、GUIベースのツールが世の中に溢れたのに、AI時代は逆にコードベースに回帰するような流れとなる可能性が高そうなのが、時代の転換期ということを強く感じます。

今回はブログの移行でしたが、WEBアプリ開発もAIを使うとコストがほぼ無く、非常に簡単に出来る(例えばS3+Lambdaの構成等)ので、今後暇があればアプリもまた作ってみようと考えています。

この記事が少しでも参考になれば幸いです。


今回使った技術まとめ

項目使ったもの
フレームワークAstro v6.1.1
デザインTailwind CSS v4
記事管理Front Matter CMS(VS Code拡張)
ホスティングAWS S3 + CloudFront
自動デプロイGitHub Actions
サイト内検索Pagefind
AIサポートClaude Code(Anthropic)