はじめに

このサイト（uselect.jp）は Astro 6 で構築しています。フレームワーク選定からデプロイまで、実際のプロジェクトをベースに「なぜ Astro を選んだか」「どう設計したか」を解説します。

これからブログを立ち上げたいエンジニアの参考になれば幸いです。

なぜ Astro を選んだか

ブログ構築のフレームワーク候補は多数ありますが、以下の理由で Astro に決めました。

観点	Astro	Next.js	Hugo
出力形式	静的HTML（デフォルト）	SSR/SSG 混在	静的HTML
JS バンドル	0KB（デフォルト）	React ランタイム必須	0KB
コンテンツ管理	Content Collections	ファイルベース（自前実装）	組み込み
学習コスト	低（HTML + Markdown）	中〜高	低（Go テンプレート）
コンポーネント	.astro + React/Vue 併用可	React 必須	Go テンプレート

決め手は「JS 0KB の静的出力 + コンポーネント設計の自由度」 です。ブログはインタラクティブ性が低いので、クライアントに JS を送る必要がありません。Astro はデフォルトで JS を一切バンドルせず、必要な箇所だけ client:load で島（Island）を追加できます。

プロジェクト構成

uselect-jp/
├── src/
│   ├── content/          # Markdown/MDX 記事
│   │   ├── blog/
│   │   ├── finance/
│   │   ├── tech/
│   │   ├── life/
│   │   └── trade/
│   ├── components/       # Astro コンポーネント
│   ├── layouts/          # ページレイアウト
│   ├── pages/            # ルーティング
│   └── styles/           # tokens.css + global.css
├── public/               # 静的アセット
├── scripts/              # サムネイル生成等
└── astro.config.mjs

Content Collections でコンテンツ管理

Astro の Content Collections は、Markdown/MDX ファイルを型安全に管理できる仕組みです。

スキーマ定義

// src/content.config.ts
const postSchema = ({ image }) =>
  z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    heroImage: z.optional(image()),
    category: z.string().optional(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false),
  });

フロントマターに draft: true を書くだけで記事を非公開にでき、公開フラグの管理が簡単です。

5 カテゴリの運用

uselect.jp では blog finance tech life trade の 5 コレクションを定義しています。それぞれ独立したディレクトリに格納されるため、カテゴリ間の混乱がありません。

デザインシステム: CSS Custom Properties

Tailwind CSS v4 をベースにしつつ、CSS Custom Properties（CSS 変数）でデザイントークンを一元管理しています。

/* src/styles/tokens.css */
:root {
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --space-4: 16px;
  --radius-lg: 12px;
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

なぜ CSS 変数か

1. フレームワーク非依存: Tailwind を外しても動く
2. ランタイムで切替可能: ダークモード対応が容易
3. 一覧性: tokens.css を見れば全デザイン値がわかる

コンポーネント内でのハードコード色は禁止ルールにしており、PR レビューでチェックしています。

カテゴリ配色の仕組み

各カテゴリに 3 色セット（メイン・背景・ボーダー）を定義し、data-category 属性で CSS を切り替えます。

.card[data-category='finance'] {
  --_cat-color: var(--color-cat-finance);
  --_cat-bg: var(--color-cat-finance-bg);
}
.card[data-category='tech'] {
  --_cat-color: var(--color-cat-tech);
  --_cat-bg: var(--color-cat-tech-bg);
}

JavaScript なしで、HTML 属性だけでカテゴリごとの色分けが実現できます。

Cloudflare Pages でデプロイ

なぜ Cloudflare Pages か

観点	Cloudflare Pages	Vercel	Netlify
無料枠	500ビルド/月, 帯域無制限	100GB/月	100GB/月
CDN	グローバルエッジ	グローバルエッジ	グローバルエッジ
日本リージョン	東京・大阪	東京	東京
ビルド時間	約 1.5 秒	同等	同等

帯域無制限の無料枠が決め手です。個人ブログでは十分すぎるスペックで、コスト 0 円で運用できます。

GitHub Actions 連携

# .github/workflows/deploy.yml
- name: Build
  run: npm run build
- name: Deploy
  uses: cloudflare/pages-action@v1
  with:
    projectName: uselect-jp
    directory: dist

main ブランチにマージされると自動デプロイが走ります。PR ブランチではプレビュー URL が発行されるので、公開前に実機確認ができます。

パフォーマンス結果

Astro の静的出力 + Cloudflare エッジ配信の組み合わせで、Lighthouse スコアは以下の通りです。

指標	スコア
Performance	99
Accessibility	95+
Best Practices	100
SEO	100

JS バンドルが 0KB なので、LCP（Largest Contentful Paint）が非常に速く、CLS（Cumulative Layout Shift）もゼロに近い値を維持しています。

サムネイル自動生成

記事のサムネイル画像は Python スクリプトで自動生成しています。

python scripts/generate_thumbnails.py --all

記事タイトルからハッシュを生成し、未作成分だけを自動で出力。手動でデザインツールを開く手間が省けます。

構築にかかったコスト

項目	コスト
Astro	無料
Cloudflare Pages	無料
ドメイン (uselect.jp)	約 1,500 円/年
フォント (Atkinson Hyperlegible)	無料
サムネイル生成	無料（自作スクリプト）
CI/CD (GitHub Actions)	無料
合計	約 1,500 円/年

まとめ

Astro 6 は「コンテンツ主体のサイトを、最小限の JS で、型安全に構築する」ために最適なフレームワークです。

• JS 0KB: 圧倒的なパフォーマンス
• Content Collections: 型安全なコンテンツ管理
• Island Architecture: 必要な箇所だけインタラクティブに
• Cloudflare Pages: コスト 0 円でグローバル配信

これからブログを始めるエンジニアに、自信を持っておすすめします。

関連記事

• WordPressは古い？Astroを選ぶべき理由【2026年比較】
• AI時代の副業ロードマップ：Claudeで特化ブログ100記事量産 →
• Claude Code 活用術 — 一人会社の全プロジェクトを AI で回す方法 →
• AIコーディングツール比較 2026 — Cursor・Claude Code・GitHub Copilot →
• エンジニアが副業ブログで月1万円を目指すロードマップ →
• 知識ゼロからClaude×Astroで110記事の爆速サイトを作った全手法 →

Xサーバーでブログを始める →

お名前.comでドメインを取得 →

※ 当記事のリンクはアフィリエイトリンクを含みます。利用者に追加費用はかかりません。