なぜAstroなのか

コンテンツサイトに最適化されている

Astroは「コンテンツ重視のWebサイト」を作るために設計されたフレームワーク。ポートフォリオ、ブログ、コーポレートサイトなど、静的なコンテンツが中心のサイトに向いている。

ゼロJSがデフォルト

AstroはデフォルトでクライアントサイドのJavaScriptを出力しない。HTMLとCSSだけの軽量なページが生成される。インタラクションが必要な部分だけ、明示的にJSを読み込む（Islands Architecture）。

結果として、ページの表示速度が非常に速い。Core Web Vitalsのスコアも高くなりやすい。

Markdownで記事管理

ブログ記事やポートフォリオの実績をMarkdownファイルで管理できる（Content Collections）。GitでバージョンManagementでき、ヘッドレスCMSなしでもコンテンツ管理が成立する。

好きなUIフレームワークを使える

React、Vue、Svelte、Solid、Preactなど、好きなUIフレームワークのコンポーネントを混在させて使える。ただし、ポートフォリオサイト程度ならAstro単体（.astroファイル）だけで十分。

Astroのポートフォリオサイトはどんな構成にする？

src/
├── pages/
│   ├── index.astro        # トップページ
│   ├── about.astro         # プロフィール
│   ├── work/
│   │   ├── index.astro     # 実績一覧
│   │   └── [...slug].astro # 実績詳細
│   ├── blog/
│   │   ├── index.astro     # ブログ一覧
│   │   └── [...slug].astro # ブログ詳細
│   └── contact.astro       # お問い合わせ
├── content/
│   ├── work/               # 実績のMarkdownファイル
│   └── blog/               # ブログのMarkdownファイル
├── layouts/
│   └── Layout.astro        # 共通レイアウト
├── components/             # コンポーネント
└── styles/                 # CSS

Content Collectionsで実績を管理するには？

src/content/config.tsでスキーマを定義する。

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

const work = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    date: z.date(),
    role: z.array(z.string()).optional(),
    tags: z.array(z.string()).optional(),
    url: z.string().optional(),
    thumbnail: z.string().optional(),
  }),
});

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    date: z.date(),
  }),
});

export const collections = { work, blog };

実績のMarkdownファイル例：

---
title: "株式会社〇〇 コーポレートサイト"
date: 2025-06-01
role: ["デザイン", "コーディング"]
tags: ["コーポレートサイト", "WordPress"]
url: "https://example.com"
thumbnail: "./images/example.png"
---

ここに実績の説明を書く。

画像最適化が組み込み

Astroには画像最適化が標準搭載されている。<Image />コンポーネントを使うだけで、自動的にリサイズ・フォーマット変換（WebP/AVIF）してくれる。

---
import { Image } from "astro:assets";
import heroImage from "../assets/hero.jpg";
---

<Image src={heroImage} alt="ヒーロー画像" width={1200} />

外部の画像最適化サービスやプラグインが不要なのは嬉しい。

どこにデプロイすればいい？

Astroで生成した静的サイトは、さまざまなホスティングサービスにデプロイできる。

サービス	特徴
Cloudflare Pages	無料枠が大きい。CDNが世界規模で速い
Vercel	デプロイが簡単。プレビュー機能が便利
Netlify	フォーム機能やリダイレクト設定が楽
GitHub Pages	完全無料。GitHubリポジトリと直結

このサイト（umi.design）はCloudflare Pagesを使っています。

Astroのメリット・デメリット

メリット

速い — ゼロJSで軽量なページを生成
Markdownでコンテンツ管理 — CMSなしでもいける
画像最適化が標準搭載 — プラグイン不要
学習コストが低い — HTML/CSSがわかれば始められる
ビルドが速い — Viteベースで快適

デメリット

動的な機能は得意ではない — ログイン機能やリアルタイム更新が必要ならNext.jsのほうが向いている
日本語の情報がまだ少ない — 英語ドキュメントは充実しているが、日本語記事はこれから
非エンジニアが更新しにくい — Markdownを直接編集する必要がある。CMSと組み合わせれば解決可能

まとめ

ポートフォリオサイトやブログには、Astroは最適解のひとつ。表示速度が速く、Markdownでコンテンツ管理でき、画像最適化も標準搭載。

WordPressからの移行先としてもおすすめです。実際にこのサイトもAstroで運用していて、表示速度とメンテナンス性の両方に満足しています。

Astroでポートフォリオサイトを作る — 静的サイトジェネレーターの最適解