Astro で始めるオウンドメディア構築
はじめに
Astro はコンテンツ駆動の Web サイトに最適化されたフレームワークです。デフォルトで JavaScript をクライアントに送らないため、ページの読み込みが高速になります。
ポイント: Astro は「アイランドアーキテクチャ」を採用しています。ページの大部分は静的 HTML として配信され、インタラクティブな部分だけが JavaScript で動作します。
なぜ Astro + Pico.css なのか
以下の理由から、この組み合わせはオウンドメディアに最適です。
| 観点 | Astro | Pico.css |
|---|---|---|
| パフォーマンス | ゼロ JS がデフォルト | 軽量（約 10KB gzip） |
| 学習コスト | HTML/Markdown ベース | クラス名不要 |
| SEO | 静的 HTML 出力 | セマンティック HTML |
| メンテナンス | Content Collections | スタイル自動適用 |
セットアップ手順
1. プロジェクトの作成
npm create astro@latest my-media -- --template minimal
cd my-media
npm install @picocss/pico2. Content Collection の設定
Content Collection を使うことで、Markdown 記事に型安全なフロントマターを定義できます。
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
const posts = defineCollection({
loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
tags: z.array(z.string()).default([]),
}),
});
export const collections = { posts };3. レイアウトの作成
Pico.css は semantic HTML 要素にスタイルを自動適用するため、<article>、<header>、<nav> などの要素をそのまま使うだけで整ったデザインになります。
記事の書き方
Markdown ファイルにフロントマターを書いて src/content/posts/ に置くだけです。
---
title: "記事タイトル"
description: "記事の説明"
pubDate: 2026-01-15
tags: ["tag1", "tag2"]
---
本文をここに書きます。Markdown を書くだけで、CSS を一切触ることなく記事を公開できます。これがこのアーキテクチャの最大の利点です。
まとめ
- Astro はコンテンツサイトに最適
- Pico.css でクラス名を書かずにスタイリング
- Content Collections で型安全な記事管理
- 100 記事追加しても CSS 変更ゼロ
