ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
Table of Contents
はじめに
このたびブログ「ShunNote」をリニューアルしました。
見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro + WordPress headless という構成に移行しました。
この記事では、なぜその構成を選んだのか、どんな技術スタックで動いているのかを紹介します。
以前のサイト構成と課題
以前はWordPressの既存テーマを使った構成でした。導入が簡単で最初は快適だったのですが、使い続けるうちにいくつか気になる点が出てきました。
- 表示が遅い — PHPでHTMLを毎回生成するため、特に初回表示が遅かった
- デザインの自由度に限界を感じた — テーマの構造に縛られ、自分の好みのUIを実現しにくかった
- フロントエンドの技術を活かしたかった — せっかくフロントエンドを勉強しているのに、テーマのカスタマイズに時間を使うだけで終わっていた
既存テーマ自体の完成度は高く、記事を書くことに集中できる良さはありました。
しかし、ブログを開設して4,5年経ちましたが「フロントエンドを自分で書きたい」という気持ちが強くなり、思い切って構成ごと変えることにしました。
なぜ Astro + WordPress headless にしたのか
リニューアルにあたり、以下の選択肢を検討しました。
| 構成 | メリット | デメリット |
|---|---|---|
| Astro + Markdown | シンプル、管理が楽 | 画像管理やエディタが貧弱 |
| Next.js + Contentful | 豊富なエコシステム | 費用がかかる、学習コストが高い |
| Astro + WordPress headless | 慣れたWordPressで記事管理、高速な静的配信 | ビルドが必要 |
最終的に Astro + WordPress headless を選んだ理由は主に3つです。
1. WordPressの使いやすさはそのまま残せる 記事を書くのはWordPressの管理画面です。慣れているエディタ（Gutenberg）を捨てる必要がなく、画像管理もこれまで通りできます。
2. フロントエンドを完全に自作できる 表示部分はAstroで1から書くので、デザインもコンポーネント構成も自由自在です。CSSも自分で管理でき、余分なスタイルが一切混入しません。
3. Astroの静的生成による高速化 AstroはビルドでHTMLを生成するため、ページの表示が非常に高速です。WordPressのPHPサーバーにアクセスする必要がなく、ホスティングコストも抑えられます。
技術スタック
| 役割 | 技術 |
|---|---|
| フロントエンド | Astro 5 |
| UIライブラリ | React 19 |
| コンテンツ管理 | WordPress（ローカル環境 + REST API） |
| スタイリング | CSS（カスタムプロパティ） |
| RSS | @astrojs/rss |
WordPress REST API でコンテンツを取得
フロントエンドからWordPressのデータを取得するには、WordPressが標準で提供する REST API を使います。たとえば記事一覧はこのようなURLで取得できます。
GET /?rest_route=/wp/v2/posts&_embed&per_page=100_embed パラメータを付けることで、アイキャッチ画像・カテゴリ・タグ・著者情報を1リクエストでまとめて取得できます。
今後やりたいこと
現状のブログはまだまだ未完成な部分もあります。
- OGP画像の自動生成 — 記事ごとに画像を用意するのが手間なので、タイトルから自動生成する仕組みを入れたい
- パフォーマンスの計測 — 旧テーマと比べてどれだけ速くなったか、Lighthouseで数値を出してみたい
完璧な状態のブログを作ってから記事を書くのではなく、動くものを公開しながら少しずつ改善していければと考えています。
まとめ
Astro + WordPress headlessに移行して、「書く体験はそのまま、見せる部分は完全自作」 というブログが実現できました。
自分で作ることで、技術的な学びにもなりました。これからもコーディングやWebデザインの記事を発信していきますので、よろしくお願いします！
