Claude Code × Astro でサイトを作る方法｜実践チュートリアル
このサイトもClaude Code × Astro で作られています
実はこのサイト（claude-code.jp）自体が、Claude CodeとAstroの組み合わせで構築されています。記事の執筆からデザインの調整、コンポーネントの作成まで、ほぼすべての工程でClaude Codeを活用しました。
この記事では、その実体験をもとに、Claude Code × Astroでサイトを作る具体的な手順を解説します。Claude Codeの基本を理解している方を対象としています。
なぜAstroを選ぶのか
Astroは2026年現在、コンテンツ重視のサイト構築において最も優れたフレームワークの一つです。
Astroの主な特徴
| 特徴 | 詳細 |
|---|---|
| ゼロJS | デフォルトでクライアントJavaScriptを出力しない |
| Islands Architecture | 必要な部分だけインタラクティブにできる |
| Content Collections | Markdownコンテンツを型安全に管理できる |
| 高速ビルド | Viteベースで高速なビルドと開発サーバー |
| SSG/SSR対応 | 静的生成とサーバーサイドレンダリングの両方に対応 |
Claude Codeとの相性が特に良い理由は、Astroのファイル構造がシンプルで予測しやすい点にあります。
ステップ1: プロジェクトの初期化
Claude Codeを起動して、Astroプロジェクトを作成します。
claude
> Astro 5のプロジェクトを作成して。
TypeScript strict モード、Tailwind CSS を含める。
プロジェクト名は「my-astro-site」。Claude Codeが npm create astro@latest を実行し、Tailwind CSSのインテグレーションも追加します。
ステップ2: CLAUDE.md でプロジェクト方針を定義
CLAUDE.mdを作成して、プロジェクトのルールを定義します。
# My Astro Site
## 技術スタック
- Astro 5
- TypeScript (strict)
- Tailwind CSS
## ディレクトリ構成
- src/pages/ - ページ（ファイルベースルーティング）
- src/layouts/ - レイアウトコンポーネント
- src/components/ - 再利用可能コンポーネント
- src/content/ - Content Collectionsのコンテンツ
- src/styles/ - グローバルスタイル
- public/ - 静的アセット
## コーディング規約
- Astroコンポーネント（.astro）を優先的に使用
- Reactコンポーネントはインタラクションが必要な場合のみ
- レスポンシブデザイン: モバイルファースト
- 画像はAstroの<Image>コンポーネントを使用ステップ3: レイアウトの作成
サイト全体のレイアウトを作成します。
> BaseLayout.astroを作成して。
- <head>にSEO用のメタタグを含める（title, description, og:image）
- ヘッダー: ロゴとナビゲーション（レスポンシブ対応、ハンバーガーメニュー）
- フッター: コピーライトとSNSリンク
- スロットでメインコンテンツを受け取るAstroのレイアウトシステムはシンプルで、Claude Codeが正確に生成しやすい構造です。
---
// src/layouts/BaseLayout.astro
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props;
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content={description} />
<title>{title}</title>
</head>
<body>
<header><!-- ナビゲーション --></header>
<main>
<slot />
</main>
<footer><!-- フッター --></footer>
</body>
</html>ステップ4: Content Collectionsの設定
ブログ記事をContent Collectionsで管理します。
> Content Collectionsを設定して。
- articlesコレクション: title, description, pubDate, tags, draft
- Zodスキーマでバリデーション
- 記事一覧ページと個別記事ページを作成Content Collectionsの型定義：
// src/content.config.ts
import { defineCollection, z } from "astro:content";
const articles = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(),
tags: z.array(z.string()),
draft: z.boolean().default(false),
}),
});
export const collections = { articles };ステップ5: ブログ機能の実装
記事一覧ページと個別記事ページを作成します。
> ブログ機能を実装して。
- /blog/ で記事一覧（カード形式、ページネーション付き）
- /blog/[slug]/ で個別記事
- タグでのフィルタリング機能
- 関連記事の表示
- 目次の自動生成ステップ6: パフォーマンス最適化
Astroの強みを活かしたパフォーマンス最適化を行います。
> パフォーマンス最適化を実施して。
- 画像の最適化（Astro Image）
- フォントの最適化（preloadとfont-display: swap）
- CSSの最小化
- sitemap.xmlの生成AstroにはビルトインのImage最適化があり、Claude Codeはこれを適切に活用するコードを生成します。
---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---
<Image src={heroImage} alt="ヒーロー画像" width={1200} height={630} />実践的なTips
Astroコンポーネントで完結させる
可能な限り .astro ファイルで完結させましょう。ReactやVueのコンポーネントを使うのは、フォームのバリデーションやアニメーションなど、クライアントサイドのインタラクションが本当に必要な場合だけです。
段階的に作る
Claude Codeに大きな機能を一度に頼むのではなく、小さな単位で段階的に作りましょう。
1. まず静的なHTMLとCSSで見た目を作る
2. Content Collectionsでデータを動的に取得する
3. フィルタリングやソートの機能を追加するビルドエラーはそのまま渡す
npm run build 2>&1 | claude "このビルドエラーを修正して"Astroのエラーメッセージは分かりやすいので、Claude Codeが正確に修正できます。
Vercelへのデプロイ
> Vercelにデプロイする設定をして。
Astro Vercelアダプターの設定も含めて。静的サイトの場合はアダプターなしで output: 'static' のままデプロイできます。SSRが必要な場合のみ @astrojs/vercel アダプターを追加します。
まとめ
Claude Code × Astroの組み合わせは、コンテンツサイトやブログの構築に最適です。Astroのシンプルな構造がClaude Codeの出力精度を高め、高速で高品質なサイトを効率的に構築できます。
動的なWebアプリケーションが必要な場合は、Claude Code × Next.jsのチュートリアルも参考にしてください。また、Astroでブログを作る詳細な手順も合わせてご覧ください。