🚀

WordPressからAstroへ移行して爆速サイトを実現した話

2025/10/28に公開

 3秒まとめWordPressで運用していた写真ポートフォリオサイトをAstroに移行した

移行作業は数時間で完了し、専用ツールでサクッと移行できた
Lighthouseスコアが大幅改善し、めちゃくちゃ速いサイトになった
開発サーバの起動やビルドも高速で、開発体験も良好

 どんな人向けの記事？WordPressから静的サイトへの移行を検討している方
Astroに興味があり、実際の移行事例を知りたい方
写真やポートフォリオサイトを高速化したい方
静的サイトジェネレーターの導入を考えている方

 背景業務でAstroを調査していたら、Astroで作ったウェブサイトの表示速度がめちゃくちゃ速くて驚愕しました。開発サーバの起動やビルドも爆速です。
!Astroって何？

Astroは、コンテンツ重視の高速なウェブサイトを構築するための静的サイトジェネレーター（SSG）です。デフォルトでJavaScriptをクライアントに送信せず、必要な部分だけをハイドレーション（動的に機能を追加）する「アイランドアーキテクチャ」を採用しています。
WordPressからの移行ツールも充実しているので、重い腰を上げてWordPressで運用していた写真ポートフォリオサイトをAstroに移行してみました。
そもそも、なぜ自分でサイトを構築したのかというと、

Flickrや500pxといった写真共有サービスだと1ファイルあたりの最大容量制限があって、高画質なファイルをフル解像度でアップロードできる場所がなかったんです。だから自分でホスティングする方針にしました。

 概要まずは見た目の変化

 Before

 After
https://portfolio.teraren.com/

 移行手順の概要WordPressからAstroへの移行手順を以下にまとめます。各ステップの詳細はこの後に説明します。
Astroのテンプレート探し
Astroプロジェクトの初期化
WordPressからのフルバックアップ取得
バックアップデータのAstroへの復元
Astro上での各種調整
Cloudflare Pagesへのデプロイ

 1. Astroのテンプレート探しAstro公式サイトのテーマライブラリから、Freeのフラグをオンにしてサクッと探します。
今回見つけたのがこちらのPhotography Portfolio Template。トップページと一覧ページだけのシンプルな構成です。


もともと写真を掲載しているだけのサイトだし、Astro初心者だったのでシンプルな方が良いと思ってこれを選びました。

 2. Astroプロジェクトの初期化Astro公式のテンプレートであれば、コマンド1発で初期化できます。
npm create astro@latest -- --template blog
でも今回は公式提供のテーマじゃないので、GitHubリポジトリをcloneして使います。MITライセンスなので安心。
git clone git@github.com:rockem/astro-photography-portfolio.git
完成品をcloneしてるので、あとは自分好みにパパっと変更していくだけ。デモ用の写真データがそのまま入ってるので、それをサンプルとして参照しながら置き換えていく感じです。元データがサンプルとして使えるので学習が捗りました。
リポジトリをcloneしただけだとパッケージが古い可能性があるので、最新版にアップデートしておきます。
npm update

 3. WordPressからのフルバックアップ取得まず、WordPressの管理画面から「ツール」→「エクスポート」を選択してフルバックアップを取得します。
!ここで取得できるのはテキストデータ（投稿内容、メタデータなど）だけです。アップロードされている画像などのアセットはURL形式のリンクとして記録されてます。
でも大丈夫！後述するAstroインポートツールが、XMLファイル内のアセットURLを検知して自動的にローカルにダウンロードしてくれます。優秀！
エクスポートファイルは portfolio.WordPress.2025-10-23.xml みたいなファイル名で保存されます。

 4. バックアップデータのAstroへの復元wordpress-export-to-markdownというツールを使います。
このツールを実行すると、エクスポートファイルの場所や展開方法について対話形式で質問されるので、サクッと答えていきます。
今回は投稿のタイトルやカテゴリ、画像ファイルが整理された状態で取得できれば十分だったので、そのように選択しました。
npx wordpress-export-to-markdown

Starting wizard...
✓ Path to WordPress export file? photoportfolio-yukimatsukura.WordPress.2025-10-24.xml
✓ Put each post into its own folder? No
✓ Add date prefix to posts? No
✓ Organize posts into date folders? No
✓ Save images? All Images

Parsing...
54 normal posts found.
1 pages found.
81 attached images found.
55 images scraped from post body content.

Saving posts...
55 posts to save.
✓ [post] shou-ren-in
✓ [post] umbrella
✓ [post] maple-on-the-moss
✓ [post] tanuki-ko
✓ [post] skytree
✓ [post] skytree-2
✓ [post] tokyo-tower
✓ [post] summer-morning
✓ [post] relais-la-suvera
✓ [post] ginza
✓ [post] relais-la-suvera
✓ [post] colosseo
✓ [post] grotta-azzurra
✓ [post] venetia
✓ [post] positano
✓ [post] eiffel-tower

 5. Astro上での各種調整今回選択したテンプレートでは、src/gallery/gallery.ymlファイルで画像とそのメタ情報を管理してます。
collections:
  - id: kyoto
    name: Kyoto
  - id: japan
    name: Japan
images:
  - path: japan/dsc_7137.jpg
    meta:
      title: calm moss and water
      description: Calm pound and stone with moss.
      collections:
        - japan
      tags:
        - Koishikawa Korakuen Garden
        - Japan
        - Tokyo
    exif:
      captureDate: 2015-11-28T10:40:21.000Z
      fNumber: 8
      focalLength: 70
      iso: 125
      model: NIKON D800
      shutterSpeed: 15
      lensModel: 24.0-70.0 mm f/2.8
先ほど展開したWordPressのデータを、このYAML形式にコンバートします。ファイルの変換はCline（AIコーディングアシスタント）経由でClaude 3.5 Sonnetに実行させました。めちゃくちゃ便利。
その他、以下のようなカスタマイズを実施：
UIの調整
写真1枚ごとにpermalinkを持つ個別ページの追加
Sitemap XMLの追加
トップページにHeroセクションの追加
レスポンシブ対応のためのサムネイル画像を複数サイズで生成
dark mode対応
footerの追加
prefetchの追加
robots.txtの追加

 6. Cloudflare PagesへのデプロイCloudflare PagesでGitHubと連携して、今回作ったリポジトリを指定。リポジトリのタイプをAstroと選んでデプロイボタンをポチッと押したら、約2分後にデプロイ完了しました。速い！
!使ってるドメインはCloudflareで管理してるので、ProxyモードをオンにするだけでCDN経由での高速配信が実現できてます。

 パフォーマンスベンチマーク!Lighthouseって何？

Googleが提供するWebサイトの品質測定ツールです。パフォーマンス、アクセシビリティ、SEOなどを100点満点で評価してくれます。
カスタムフォントの読み込みと、画像拡大表示用のLightBoxライブラリのJavaScriptロードがあるので、スコアはやや抑えめです。でも、特別な最適化を施さずにこれだけリッチな見た目と機能があるのに、このスコアは優秀！

 トップページのLighthouseスコア

 写真個別ページのLighthouseスコア

 Coverage TreemapJavaScript/CSSの使用状況を可視化したTreemapも超シンプル。無駄なコードがほぼないですね。下の方のチャンクはGoogle Tag Managerです。
比較用にNext.jsのTreemapも貼っておきます。

こちらのサイトです。
アセットのサイズは、Next.jsでは162KiB、では24.5KiBなのでAstroは約15％のサイズです。（さいとが違うのでなんとも言えませんが、概算だけ掴んでもらえればと思います）

 実際に使ってみた感想
 良かった点めちゃくちゃ速い！
プロダクション環境でのレンダリングが爆速。静的HTMLを生成するからサーバーサイドの処理が不要
開発サーバの起動も速いし、ファイル変更時のホットリロードもサクサク
自動最適化が優秀
画像の遅延読み込み、CSSの最小化など、Webパフォーマンスに必要な最適化を勝手にやってくれる
何も考えずにデプロイしてもそこそこ速いサイトになる
モダンな開発体験
React/Next.jsなどのUI構築が主流の昨今、Astroは生のHTMLに近い形でレンダリングを高速化しつつ、開発体験はReactっぽい
必要な部分だけJavaScriptを使う「アイランドアーキテクチャ」で、パフォーマンスと開発効率を両立してる
ホスティングコストが安い
Cloudflareの無料プランで運用できるので、コストゼロ！

 正直なところ、ここは微妙Astro専用の構文を覚える必要がある

.astroファイルの書き方を新しく学ぶ必要があります
とはいえ、HTMLとJavaScriptの知識があれば割とすぐ慣れました

 まとめWordPressからAstroへの移行、想像以上にスムーズでした。
専用の移行ツールが充実してるので、技術的なハードルは低いです。数時間程度の作業で移行完了しました。
結果として得られた成果：

圧倒的なパフォーマンス向上 - Lighthouseスコアが大幅改善

保守性の向上 - Git管理で変更履歴を追跡できるように

運用コストの削減 - サーバーレスで無料ホスティング（Cloudflare Pages最高）

開発体験の向上 - 開発サーバもビルドも爆速
WordPressみたいな動的CMSから静的サイトジェネレーターへの移行を検討してる方、Astroはかなり有力な選択肢だと思います。
次のステップとしては、さらなるパフォーマンス最適化（画像の最適化、フォントのサブセット化など）にも挑戦してみたいですね。
https://portfolio.teraren.com/

 参考リンクAstro公式サイト
Astroドキュメント（日本語）
wordpress-export-to-markdown
Cloudflare Pages
完成したポートフォリオサイト

3秒まとめ

どんな人向けの記事？

背景

概要

Before

After

移行手順の概要

1. Astroのテンプレート探し

2. Astroプロジェクトの初期化

3. WordPressからのフルバックアップ取得

4. バックアップデータのAstroへの復元

5. Astro上での各種調整

6. Cloudflare Pagesへのデプロイ

パフォーマンスベンチマーク

トップページのLighthouseスコア

写真個別ページのLighthouseスコア

Coverage Treemap

実際に使ってみた感想

良かった点

正直なところ、ここは微妙

まとめ

参考リンク

Discussion