静的サイトを作りたいけれど、

  • Next.js は少し重く感じる
  • WordPress は管理が大変そう
  • できれば表示は速くしたい

そんなときに、かなり気持ちよくハマるのが Astro です。

個人的に Astro の良いところは、「凝ったこともできるのに、最初の一歩はすごく軽い」ことです。ブログ、ポートフォリオ、会社案内、ランディングページみたいなコンテンツ主体のサイトなら、本当に相性が良いです。

この記事では、Astro が何者なのか、なぜ人気なのか、どうやって始めるのかを、初心者向けに整理していきます。

Astroとは？

Astro は、コンテンツ中心の Web サイトを作るために設計されたモダンなフレームワークです。

一番わかりやすい特徴は、必要な場所だけ JavaScript を使うという考え方にあります。

普通のフレームワークでは、ページ全体に JavaScript がかなり載ることがあります。でも Astro は、まず HTML をしっかり出して、動きが必要な部分だけを後から読み込む設計です。これが、いわゆるアイランドアーキテクチャです。

難しそうに聞こえるかもしれませんが、使う側としてはかなり単純で、

  • テキスト中心のページは軽い
  • ブログ記事が速く表示される
  • 必要なら一部だけ React や Vue を混ぜられる

という、おいしいところ取りができます。

Astroが向いているサイト

Astro は万能というより、向いている分野がかなりはっきりしているタイプです。

特に相性が良いのは、次のようなサイトです。

  • ブログ
  • メディアサイト
  • ポートフォリオ
  • 会社紹介サイト
  • 商品紹介ページ
  • ドキュメントサイト

逆に、管理画面が重かったり、画面全体がアプリのように頻繁に動くサービスでは、React や Next.js のほうが自然な場合もあります。

だから Astro を選ぶときの判断軸はシンプルで、「このサイトの主役はコンテンツか？」 です。主役が文章や画像なら、かなり有力候補になります。

Astroの主な特徴

1. とにかく表示が軽い

Astro はデフォルトで余計な JavaScript をあまり出さないので、初回表示がかなり軽いです。

この差は、記事サイトでは体感にも効きます。

読者からすると、

  • クリックしてすぐ本文が見える
  • スマホでももたつきにくい
  • 広告や計測を載せてもベースが軽い

という形で効いてきます。

見た目が同じでも、表示が遅いだけで離脱されることは本当に多いので、ここは地味に大きいです。

2. 好きな UI フレームワークを混ぜられる

Astro の面白いところは、React、Vue、Svelte、Solid などのコンポーネントを同じプロジェクト内で使えることです。

たとえば、

  • 普通のページは Astro で軽く作る
  • 検索ボックスだけ React にする
  • 料金シミュレーターだけ Vue にする

みたいな使い方ができます。

「全部を React で組み切るほどではないけれど、一部だけ動かしたい」という場面にすごく強いです。

3. コンテンツ管理が気持ちいい

src/content/ に Markdown や MDX を置いて、config.ts でスキーマを定義する形はかなり扱いやすいです。

特にブログでは、

  • タイトルを書き忘れた
  • 日付の形式がバラバラ
  • category の値が崩れた

みたいな事故が減ります。型で守られながら記事を積めるのは、長く運営するほどありがたいです。

4. MDX が使いやすい

記事内にコンポーネントを差し込めるので、ブログと UI パーツの距離が近いです。

たとえばこのサイトでも、記事の流れの中に PR ブロックや関連記事導線を自然に差し込みやすくなります。単なる Markdown より、収益導線や比較ブロックを入れやすいのはかなり便利です。

インストール方法

まずは Node.js 18 以上が入っていることを確認します。

node -v

問題なければ、以下で Astro プロジェクトを作れます。

npm create astro@latest

# 質問に答えながらセットアップ
cd my-blog
npm install
npm run dev

開発サーバーが立ち上がったら、http://localhost:4321 で確認できます。

最初の感想としては、「あ、もう見えるんだ」という軽さがあると思います。ここで難しい設定に引っかかりにくいのも Astro の良いところです。

プロジェクト構造をざっくり理解する

Astro プロジェクトは、最初に全部を覚えなくても大丈夫です。まずはこのくらいで十分です。

my-blog/
├── public/          # 画像やfaviconなど、そのまま配信するファイル
├── src/
│   ├── components/  # 使い回す部品
│   ├── content/     # 記事コンテンツ
│   ├── layouts/     # 共通レイアウト
│   ├── pages/       # URLになるページ
│   └── styles/      # CSS
├── astro.config.mjs
└── package.json

初心者のうちは、

  • ページは src/pages
  • 記事は src/content
  • 共通デザインは src/layouts

この3つだけ意識しておけばかなり進められます。

pages ディレクトリの考え方

src/pages/ に置いたファイルは、そのまま URL に近い形で公開されます。

src/pages/
├── index.astro        → /
├── about.astro        → /about
└── articles/
    ├── index.astro    → /articles
    └── [slug].astro   → /articles/任意のスラッグ

このルールが素直なので、後から見返しても迷いにくいです。

「なぜこの URL になるのか分からない」というフレームワーク特有の混乱が少ないのは、学習コストの低さにつながっています。

Astroコンポーネントの書き方

.astro ファイルは、フロントマターとテンプレートが1つのファイルにまとまっています。

---
const greeting = "Hello, World!";
---

<h1>{greeting}</h1>

<style>
  h1 { color: blue; }
</style>

最初は「HTMLに少しだけサーバー側の処理が入るもの」と思うと分かりやすいです。

React の JSX より、静的ページ用途ではかなり素直に読めます。デザイナー寄りの人や、HTML/CSS に慣れている人でも入りやすいです。

コンテンツコレクションは早めに触ると楽になる

ブログを作るなら、コンテンツコレクションは早めに使うのがおすすめです。

import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishedAt: z.coerce.date(),
    category: z.enum(['tech', 'lifestyle', 'review']),
  }),
});

export const collections = { articles };

この仕組みのおかげで、記事が増えても構造が壊れにくくなります。

「個人ブログなんだから雑でもいい」と思いがちですが、10本を超えたあたりから雑さのツケが来ます。Astro はそこを最初から軽く防いでくれるのが嬉しいです。

Astroを使っていて気持ちいいポイント

実際に触ると、スペック表だけでは伝わりにくい良さがあります。

作る側が疲れにくい

大げさな初期設定をしなくても進めやすく、構造も比較的読みやすいです。1週間後に戻ってきても「何をしていたか」が分かりやすいのは大きいです。

記事追加の心理的ハードルが低い

MDX で1本増やすだけ、という感覚で記事を積みやすいので、更新が止まりにくいです。ブログ運営って、この「止まりにくさ」が本当に大事なんですよね。

後から育てやすい

最初は静的サイトとして始めて、後から検索、絞り込み、ランキング、広告ブロックなどを足していく流れが作りやすいです。最初から重装備で始めなくていいのが楽です。

つまずきやすいところ

もちろん、良いことばかりではありません。

動的アプリを作る感覚で入ると少しズレる

Astro は「何でも React 的にやる」世界観とは違います。ページ全体をクライアント側でゴリゴリ動かしたいなら、別の選択肢のほうが自然なことがあります。

記事構造を後から変えると意外と面倒

これは Astro が悪いというより、ブログ全般の話ですが、カテゴリや frontmatter の設計は早めに決めたほうが楽です。

UI フレームワークを混ぜすぎると複雑になる

React も Vue も Svelte も使えるからといって、全部混ぜると普通に管理コストが上がります。最初は1つに絞るか、そもそも Astro だけで進めるのがおすすめです。

まとめ

Astro は、コンテンツを速く、気持ちよく届けたい人にかなり向いているフレームワークです。

特に、

  • ブログを作りたい
  • 表示速度を大事にしたい
  • Markdown / MDX で記事を書きたい
  • 重すぎる構成は避けたい

という人には、本当に相性が良いです。

最初の一歩が軽くて、後からちゃんと育てられる。このバランスの良さが Astro の魅力だと思っています。

次の記事では、作った Astro サイトを Cloudflare Pages で無料デプロイする方法 を紹介します。公開まで一気に進めたい方は、あわせて読んでみてください。