Astro入門ガイド2026｜高速静的サイトの作り方

「Next.jsやGatsbyは高機能すぎて、シンプルなWebサイトを作るにはオーバースペックだ」——そう感じたことはありませんか？Astroは2026年、コンテンツ中心のWebサイトを圧倒的に高速に構築できるフレームワークとして急速にシェアを伸ばしています。

筆者はフロントエンドエンジニアとして、過去2年間でAstroを使ったブログ、ドキュメントサイト、コーポレートサイトなど15以上のプロジェクトを本番運用してきました。本記事では、2026年最新のAstro 5系をベースに、環境構築からデプロイまでの全工程を実践的に解説します。

Astroとは？Next.js・Gatsbyとの違いを3つの軸で比較
Astroの環境構築手順——5分でプロジェクトを立ち上げる
Astroのファイル構成——知っておくべき5つのディレクトリ
Astroコンポーネントの書き方——HTML経験者なら即理解できる
ReactやVueのコンポーネントをAstroで使う方法【アイランドアーキテクチャ】
コンテンツコレクションでブログを構築する
Astroサイトのデプロイ方法——無料で高速に公開する3つの選択肢
まとめ：Astroはコンテンツサイト構築の最適解

Astroとは？Next.js・Gatsbyとの違いを3つの軸で比較

Astroは、2021年にFred K. Schott氏を中心に開発が始まったコンテンツ駆動型のWebフレームワークです。最大の特徴は「アイランドアーキテクチャ」と呼ばれる設計で、ページ全体をJavaScriptで制御するのではなく、インタラクティブな部分だけにJavaScriptを限定することで、圧倒的な表示速度を実現します。

比較軸	Astro	Next.js	Gatsby
設計思想	コンテンツ中心・MPA	アプリケーション中心・ハイブリッド	静的サイト生成・GraphQL
デフォルトのJS量	ほぼゼロ	大（React全体が読み込まれる）	大（React + GraphQL層）
Lighthouse平均スコア	95〜100	70〜90	75〜90
UIフレームワーク	React/Vue/Svelte等を混在可能	React固定	React固定
最適な用途	ブログ・ドキュメント・LP	Webアプリ全般	静的ブログ・マーケティングサイト
学習コスト	低（HTML/CSS経験があれば即戦力）	中〜高	中（GraphQL必須）

結論として、ブログ、ドキュメントサイト、コーポレートサイト、LPなどコンテンツ中心のサイトにはAstroが最適です。ダッシュボードやSaaSのような高度なインタラクションが必要なアプリにはNext.jsの方が適しています。

Astroの環境構築手順——5分でプロジェクトを立ち上げる

Astroのセットアップは非常にシンプルです。Node.js 18以上がインストールされていれば、以下のコマンドだけで始められます。

# プロジェクト作成（対話形式で設定）
npm create astro@latest my-astro-site

# プロジェクトフォルダに移動
cd my-astro-site

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

npm create astro@latestを実行すると、テンプレート選択・TypeScript使用・Git初期化などを対話形式で設定できます。初心者は「Blog」テンプレートを選ぶと、記事の管理方法まで含めたサンプルが生成されるのでおすすめです。

Astroのファイル構成——知っておくべき5つのディレクトリ

my-astro-site/
├── src/
│   ├── pages/        # ファイルベースルーティング（.astro, .md）
│   ├── layouts/      # 共通レイアウトコンポーネント
│   ├── components/   # 再利用可能なUIコンポーネント
│   ├── content/      # コンテンツコレクション（ブログ記事等）
│   └── styles/       # グローバルCSS
├── public/           # 静的アセット（画像、favicon等）
├── astro.config.mjs  # Astro設定ファイル
└── package.json

Astroの最大の特徴はファイルベースルーティングです。src/pages/about.astroを作成するだけで/aboutというURLが自動的に生成されます。Next.jsのApp Routerと似た概念ですが、Astroの方がよりシンプルで直感的です。

Astroコンポーネントの書き方——HTML経験者なら即理解できる

Astroコンポーネント（.astroファイル）は、フロントマターとHTMLテンプレートの2部構成です。Reactのようなバーチャル DOMの概念は不要で、HTMLとCSSの知識があればすぐに書き始められるのが最大の強みです。

---
// フロントマター（サーバーサイドで実行されるJavaScript）
const pageTitle = "Astro入門";
const features = ["高速表示", "UIフレームワーク混在", "ゼロJS"];
---

<!-- テンプレート部分（HTMLライク） -->
<h1>{pageTitle}</h1>
<ul>
  {features.map((f) => <li>{f}</li>)}
</ul>

<style>
  h1 { color: #333; font-size: 2rem; }
  li { margin: 0.5rem 0; }
</style>

---で囲まれたフロントマター部分はビルド時にサーバーサイドで実行され、クライアントに送られるのは純粋なHTMLだけです。これがAstroのゼロ JavaScript戦略の核心であり、Lighthouseスコア100を達成できる理由です。

ReactやVueのコンポーネントをAstroで使う方法【アイランドアーキテクチャ】

Astroの革新的な機能がアイランドアーキテクチャです。ページ全体は静的HTMLとして配信しつつ、カウンター・検索バー・カルーセルなどインタラクティブな部分だけをReactやVueの「アイランド」として動かせます。

---
// React/Vue/Svelteの統合をインストール
// npx astro add react
import Counter from '../components/Counter.jsx';
---

<h1>静的なコンテンツ部分</h1>
<p>この部分はゼロJavaScript。</p>

<!-- client:visible でビューポートに入った時だけハイドレート -->
<Counter client:visible />

client:visibleディレクティブを付けると、そのコンポーネントがビューポートに入った瞬間にJavaScriptが読み込まれます。他にもclient:load（即時）、client:idle（アイドル時）、client:media（メディアクエリ一致時）など、ハイドレーションのタイミングを細かく制御できるのがAstroの強みです。

コンテンツコレクションでブログを構築する

Astro 5系では、ブログ記事やドキュメントを管理するためのコンテンツコレクション機能が強化されています。Markdownファイルに型安全なスキーマを定義でき、フロントマターの検証もビルド時に自動実行されます。

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

この設定により、src/content/blog/配下のMarkdownファイルのフロントマターが型チェックされます。titleが未入力のまま記事を公開しようとするとビルドエラーになるため、コンテンツの品質管理が仕組みとして担保されます。

Astroサイトのデプロイ方法——無料で高速に公開する3つの選択肢

サービス	無料枠	特徴	デプロイコマンド
Vercel	月100GBまで	Git連携で自動デプロイ、プレビューURL	vercel deploy
Cloudflare Pages	月500回ビルド	グローバルCDN、最速のレスポンス	npx wrangler pages deploy dist
Netlify	月100GBまで	フォーム処理、A/Bテスト内蔵	netlify deploy –prod

筆者のおすすめはCloudflare Pagesです。世界300以上のデータセンターからの配信により、日本国内からのアクセスでもTTFB（Time to First Byte）が50ms以下を安定して達成できます。Astroの静的出力との相性が抜群で、Lighthouseパフォーマンススコア100を安定的に維持できています。