おすすめ Astro ブログテーマ 5 選｜インストール・設定チュートリアル付き

ブログを立ち上げようと思ったとき、私もかなり悩みました。テーマをゼロから作るのは時間がかかり、デザインだけで週末を何個も使ってしまいます。既存テーマを探すと候補が多すぎて、どれを選べばいいか分からない。さらに、ダウンロードしてみたら設定ドキュメントが分かりにくく、半日かけても動かない——そんな経験もあります。

そこで 2 週間かけて、十数個の Astro ブログテーマを実際に試しました。見た目は派手だけど重いもの、機能が足りないもの、設定が地獄のものもありました。ただ、その過程で本当に使えるテーマ 5 つを絞り込めました。どれも自分で使い、つまずいたポイントも整理済みです。

この記事では、5 つのテーマの特徴、向いているユーザー、詳しいインストール・設定手順をまとめます。手順どおり進めれば 30 分程度でブログを公開できます。

なぜ Astro でブログを作るのか？

具体的なテーマの話の前に、「なぜ Astro なのか」と思う方もいるでしょう。Next.js や Gatsby ではダメなのか——そう感じるのも自然です。

Astro の最大の強みは速さです。デフォルトで静的ページを生成し、不要な JavaScript を大量に載せません。その結果、ブログの読み込みが速く、PageSpeed スコア 90+ も現実的です。SEO にも有利で、検索エンジンのクローラーもシンプルな HTML 構造を好みます。

開発体験も良いです。React、Vue、Svelte のどれでコンポーネントを書いてもよく、Markdown/MDX で記事を書くこともできます。型安全性、RSS や sitemap の自動生成なども最初から揃っていて、設定の手間が少ないのも助かります。

Astro のコミュニティも活発で、公式テーマライブラリには 375 以上のテーマがあります。毎週のように新しいテーマも登場します。小さなフレームワークより情報が多く、困ったときも解決策を見つけやすいでしょう。

おすすめ Astro ブログテーマ 5 選

ここからが本題です。用途別におすすめのテーマ 5 つを紹介します。どれも実際に試して、問題なく使えました。まずは比較表をどうぞ。

AstroPaper — ミニマリストの定番

シンプルな見た目が好きなら、AstroPaper が第一候補です。GitHub で 3.5k+ スターを獲得しており、いま最も人気のある Astro ブログテーマの一つです。

特に印象的だったのはあいまい検索です。キーワードを入力するだけで記事を素早く見つけられ、操作感が滑らかです。下書き機能も実用的で、書きかけの記事を誤公開しにくくなっています。レスポンシブ対応もしっかりしており、スマホでも快適です。ライト/ダークモードの切り替えも自然で、目に優しい設計です。

技術ブログや長文執筆向きです。チュートリアルや技術解説を書くなら、派手な装飾に読者の注意を奪われにくいテーマと言えます。

主な機能：

• あいまい検索（実用性が高い）
• 下書き機能とページネーション
• RSS と sitemap の自動生成
• SEO とアクセシビリティの最適化
• 型安全な Markdown

公式サイト：https://astro-paper.pages.dev/

Astro Air Blog — 上品でシンプルな個人ブログ

Astro Air もミニマル系ですが、AstroPaper より個人の世界観を出しやすいテーマです。ページ読み込み時のアニメーションが滑らかで、うるさく感じません。

設定ファイルの設計も分かりやすいです。about.mdx、intro.mdx、links.mdx を編集するだけでページ内容をカスタマイズでき、設定項目を探し回る必要がありません。タグシステムも使いやすく、コンテンツ分類に向いています。

個人ポートフォリオや作品紹介向きです。「ニュースサイト」より「自分の部屋」に近い雰囲気を出せます。

主な機能：

Alibaba Cloud - 開発者向けクラウドの第一候補、Lighthouse サーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

• ミニマルで上品なデザイン
• 柔軟なカスタムページ（About、紹介、リンク集）
• タグ分類システム
• MDX 対応
• SNS シェア

GitHub：https://github.com/sun0225SUN/astro-air

Bookworm Light — 複数著者向けの強力テーマ

チームブログやコンテンツプラットフォームなら、Bookworm Light が機能面で最も充実していました。複数著者をネイティブにサポートし、記事ごとに著者情報を付けられ、著者別の絞り込みも可能です。

カスタマイズ性も高く、グルメ、写真、旅行など、ジャンルを問わず調整しやすいです。ダークモードにも対応しており、切り替えも自然です。

テストサイトを組んでみましたが、設定は想像より簡単で、ドキュメントも読みやすい部類でした。機能が多い分、設定項目も増えるので、初回は慣れるまで少し時間がかかる点だけ注意してください。

主な機能：

• 複数著者対応（最大の強み）
• 充実したカテゴリ・タグシステム
• 高いカスタマイズ性
• ダークモード
• グルメ、写真、旅行など多様なブログタイプに対応

向いている用途：チームブログ、コンテンツプラットフォーム、垂直領域のブログ

AstroWind — 機能が最も揃った選択肢

「とにかく早くブログを公開したい」なら AstroWind が向いています。Tailwind CSS ベースなので、Tailwind に慣れている人はすぐ馴染めます。最大の利点は、最適化が最初から組み込まれており、PageSpeed スコアが高く出やすいことです。

画像最適化、自動 RSS、SNS シェアなども標準装備で、プラグインを足す必要がありません。RTL（右から左）言語にも対応しており、海外向けブログにも使えます。

企業ブログや、短期間で立ち上げたいプロジェクト向きです。必要な機能が揃っているので、コンテンツ作成に集中できます。

主な機能：

• Astro 4.0 + Tailwind CSS
• PageSpeed 向けの最適化
• 組み込みの画像最適化
• 自動 RSS 配信
• RTL 言語対応
• ダークモード

向いている用途：企業ブログ、素早い立ち上げ、国際化対応

Astro Cactus — シンプルで「決め打ち」のテーマ

Astro Cactus は「意見がはっきりした」テーマです。配色やレイアウトなど、多くのデザイン判断をすでにテーマ側が決めてくれているので、選択に悩む時間を減らせます。

Astro 4.0 と Tailwind CSS を使い、コードも読みやすく、セマンティック HTML も意識されています。二次開発のベースとしても使いやすいでしょう。

デザインに時間をかけたくない個人ブログ向きです。すぐ使えて、手間が少ないのが魅力です。

主な機能：

• Astro 4.0 + Tailwind CSS
• セマンティック HTML
• SEO フレンドリーな設計
• レスポンシブレイアウト
• ライト/ダークモード
• 決め打ちデザイン（判断コストを下げる）

向いている用途：個人ブログ、クイックスタート、デザイン詳細に悩みたくない人

詳しいインストール・設定手順（AstroPaper を例に）

特徴の説明が終わったので、実際の導入手順に入ります。ここでは AstroPaper を例にしますが、他のテーマも大筋は同じです。

ステップ 1：テーマをインストール

最も簡単なのはパッケージマネージャーを使う方法です。私は pnpm をおすすめします。速く、ディスクも節約できます。npm や yarn でも問題ありません。

# pnpm（推奨）
pnpm create astro@latest --template satnaing/astro-paper

# npm
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

コマンド実行後、プロジェクト名を聞かれるので、好きな名前を付ければ OK です。依存関係のインストールは、コーヒーを一口飲む間に終わることも多いです。

Docker を使う場合は次のようにもできます。

docker build -t astropaper .
docker run -p 4321:80 astropaper

ただ、開発環境が特殊でない限り、Docker までは不要なことがほとんどです。

ステップ 2：開発サーバーを起動

インストール後、プロジェクトディレクトリに入って開発サーバーを起動します。

# 依存関係のインストール（自動で入らなかった場合）
pnpm install

# 開発サーバー起動
pnpm run dev

ブラウザで http://localhost:4321 を開けば、ブログが表示されます。思ったより早く完成します。

ステップ 3：コア設定

主要な設定は src/config.ts にあります。エディタで開くと、SITE オブジェクトが次のような形で定義されています。

export const SITE = {
  website: "https://your-domain.com", // 本番では必須。開発中は空でも可
  title: "ブログ名",
  desc: "ブログの説明。何について書くサイトかを 1〜2 文で",
  author: "あなたの名前",
  // その他の設定...
}

開発中は website を空のままでも構いません。デプロイ前に本番ドメインへ変更してください。サイトマップや OGP カードの URL 生成に使われます。

astro.config.mjs は Astro 本体の設定ファイルです。通常はデフォルトのままで十分です。プラグイン追加やポート変更が必要なときだけ触ります。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

ステップ 4：最初の記事を作成

記事は src/content/posts/ に置きます。例えば my-first-post.md を新規作成し、frontmatter を書きます。

---

title: "はじめての記事"
description: "この記事で何を書くかを簡単に紹介"
pubDate: 2025-12-02
tags: ["Astro", "ブログ"]

---

# 本文開始

ここから Markdown で本文を書きます。

保存するとページが自動更新され、トップページに記事が表示されます。シンプルです。

注意点は次のとおりです。

• pubDate は必須。形式は YYYY-MM-DD
• tags は任意ですが、分類のために入れることをおすすめします
• ogImage で SNS シェア時の画像を指定できます。未指定ならデフォルト画像が使われます

テーマカラーの変更（任意）

配色を変えたい場合は、公式のカラーカスタマイズドキュメントが参考になります。AstroPaper は複数の配色方案に対応しており、変更も難しくありません。

正直、デフォルトの配色でも十分きれいなので、私自身はあまり触っていません。

よくあるトラブルと解決法

私が実際に踏んだ坑を共有します。同じところでつまずかないように。

インストール関連

問題 1：yarn でインストール後、sharp モジュールが見つからない

yarn 1 の既知の問題です。手動で sharp を入れれば解決します。

yarn add sharp

インストール後、開発サーバーを再起動してください。

問題 2：Windows PowerShell で診断コマンドが失敗する

PowerShell で astro check --watch & astro dev を実行するとエラーになることがあります。PowerShell は & によるバックグラウンド実行構文をサポートしていないためです。

concurrently を入れるか、2 つのコマンドを別々に実行するのが確実です。

問題 3：ポート 4321 が使用中

他のプロセスがポートを使っていると起動に失敗します。astro.config.mjs でポートを変更できます。

export default defineConfig({
  server: {
    port: 3000 // 好きなポート番号に変更
  }
})

設定関連

問題 1：設定を変えても反映されない

設定ファイル変更後は、開発サーバーの再起動が必要です。再起動を忘れて 30 分ほど悩んだ経験があります。

Ctrl+C で停止し、pnpm run dev を再実行すれば OK です。

問題 2：画像が表示されない

画像は public フォルダに置き、参照パスは /image-name.jpg のように先頭スラッシュ付きで書きます。スラッシュを忘れがちなので注意してください。

src/assets に置いて Markdown から相対パスで参照する方法もあります。好みの運用を選んでください。

問題 3：ダークモード切り替えでスタイルが崩れる

カスタム CSS を追加したとき、ダークモード用の変数を考慮していないと崩れやすいです。テーマの配色設定ファイルにはライト/ダーク両方の変数があるので、変更時は両方を確認してください。

デプロイ関連

問題 1：Vercel や Netlify へのデプロイが失敗する

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

ビルドコマンドが astro build、出力ディレクトリが dist になっているか確認してください。この 2 つが違うと必ず失敗します。

Node.js のバージョンも確認を。Astro 4.0 は Node 18 以上が必要です。古いとエラーになります。

問題 2：デプロイ後に CSS が効かない

多くは base パスの設定ミスです。ルート以外（例：your-domain.com/blog/）に配置する場合、astro.config.mjs で base を設定します。

export default defineConfig({
  base: '/blog'
})

設定しないと CSS や JS のパスがずれて読み込めません。

発展的なカスタマイズのヒント

基本設定が終わったら、次は個性を足していきましょう。代表的な方向性をいくつか紹介します。

コメント機能を追加

コメントがあると読者との距離が縮まります。Giscus（GitHub Discussions ベース）や Waline（軽量な独立型コメント）がおすすめです。どちらも公式ドキュメントに沿えば、それほど難しくありません。

Giscus は無料で、データが GitHub 上に残るのが安心です。Waline は機能が豊富ですが、サーバーを自分で用意する必要があります。

アクセス解析を追加

訪問者数を知りたいなら Google Analytics が定番です。プライバシーを重視するなら Plausible や Umami も選択肢です。どちらもプライバシー配慮型の解析ツールです。

HTML テンプレートに計測コードを 1 段追加するだけで、比較的簡単に導入できます。

画像読み込みの最適化

記事内の画像が多いなら、遅延読み込みを有効にしましょう。Astro には画像最適化機能があり、通常の <img> の代わりに <Image> コンポーネントを使うと自動最適化されます。

Cloudinary や Cloudflare Images など CDN に画像を置く方法もあり、表示速度をさらに上げられます。

多言語対応

海外ユーザー向けなら、言語切り替え機能を足すのも有効です。Astro は i18n に対応しており、設定自体はそれほど難しくありません。ただ、記事を各言語分用意する必要があり、翻訳の作業量は増えます。

まとめ

ここまで読んでくださった方へ、テーマ選びの要点を整理します。

• ミニマルで読みやすさ重視 → AstroPaper。検索と下書き機能が特に便利です。
• 個人の世界観を出したい → Astro Air Blog。設定もシンプルで上品です。
• チームブログ・コンテンツプラットフォーム → Bookworm Light。複数著者対応が強みです。
• とにかく早く公開したい → AstroWind。機能が揃っていて手間が少ないです。
• デザインで悩みたくない → Astro Cactus。決め打ち設計で迷いが減ります。

まずはニーズに最も近いテーマを 1 つ選び、動かしてみるのがおすすめです。公開後に少しずつ調整すれば十分です。最初から完璧を目指す必要はありません。ブログで一番大事なのはコンテンツで、テーマはその土台にすぎません。

30 分あればブログの骨組みは完成します。残りの時間は、最初の 1 記事を書くのに使ってください。困ったらドキュメントや GitHub Issues を確認すれば、多くの問題は解決できます。

Astro 公式テーマライブラリ（https://astro.build/themes/）も定期的に更新されるので、ブックマークしておくと、より合うテーマが見つかるかもしれません。

さあ、テーマを 1 つ選んで、今日から始めてみましょう。