Astro

Page content

シンプルに答えます！

Astro ローカル開発の基本コマンド

🚀 最初の1回だけ（プロジェクト作成）

npm create astro@latest
cd my-project
npm install

💻 毎日使うコマンド

# 開発サーバー起動（これだけ覚えればOK）
npm run dev

ブラウザで http://localhost:4321 を開くと表示されます。ファイルを保存するたびに自動でリロードされます。

その他のコマンド

# 本番用にビルド（dist/ フォルダに出力）
npm run build

# ビルド結果をローカルでプレビュー
npm run preview

# Astro CLIヘルプ
npx astro --help

Cloudflareへデプロイする場合

# Cloudflareアダプターを追加
npx astro add cloudflare

# Wranglerでローカルテスト（Workers環境をエミュレート）
npm run build
npx wrangler pages dev dist/

# 本番デプロイ
npx wrangler pages deploy dist/

よくあるトラブル

症状 解決策
npm run dev でエラー npm install を再実行
ポート4321が使用中 npm run dev -- --port 3000
Node.jsバージョンエラー Node.js 18以上が必要

npm run dev の一択で始めてみてください！

AstroWind以外の無料テンプレート一覧

📝 ブログ・コンテンツ系

AstroPaper — ブログの定番中の定番 GitHubスター4,200以上の最も信頼されているAstroブログテーマ。型安全なMarkdown、ファジー検索、下書き投稿サポートを備え、ライト/ダークモード、ページネーション、サイトマップ自動生成が含まれます。

Bookworm Light — 多著者ブログ Astro 5.5対応で、カテゴリページ・著者プロフィール・関連記事・ニュースレター統合をサポート。コンテンツ量が多いサイトに最適です。

Cactus — ドキュメント・ナレッジベース向け Astro 5 + Tailwind v4対応で、組み込みのPagefind検索がドキュメントサイトやナレッジベースに適しています。

🚀 スタートアップ・SaaS系

Astroship — スタートアップの定番 ヒーローセクション・機能グリッド・料金テーブル・テスティモニアル・ブログを含む完全なスタートアップテンプレート。GitHubスター1,900以上で実績多数。GPL-3.0ライセンスで商用利用可。

Foxi — SaaSランディングページ PageSpeed完全スコアを達成するSaaSランディングページテンプレート。2026年1月更新。ホーム・料金・機能・About・Contactページとブログ（MDXサポート）が事前構築済み。MITライセンスで商用利用可。

Mizu — プロダクトローンチ向け SaaS・デジタルローンチ・スタートアップ向けに設計された13ページ構成の無料プロダクトローンチテンプレート。

🎨 ポートフォリオ・エージェンシー系

Dante — ポートフォリオ＋ブログ ポートフォリオとブログを兼ね備えたミニマルでプロフェッショナルなデザイン。フリーランサーやコンサルタントに最適。ダーク/ライトモード、Tailwind CSS、MDXサポート付き。

Astrofy — 個人ポートフォリオの万能テンプレート ブログ・CV・プロジェクトセクション・ストア・RSSフィードを数分で構築できる無料オープンソーステンプレート。

⚡ 特殊用途

Astroplate — 汎用スターター Zeon Studio製。Astro・TailwindCSS・TypeScriptで構築されたヒーロー・機能・テスティモニアル・ブログを含む柔軟なスターターで、ブログにも完全なサイトにも対応します。

Mindful Auth（Cloudflare専用） Astro 6 + Cloudflare Workers向けの認証テンプレート。Cloudflare D1へのデータ保存、マジックリンク・TOTP 2FA・Cloudflare Turnstile対応のゼロレイテンシー認証を実現します。

テンプレート探しの主要サイト

サイト 特徴
astro.build/themes 公式ディレクトリ。最も網羅的
astrothemes.dev 1,000件以上。フリー・有料フィルター可
themefisher.com Astro v6 + Tailwind v4対応の高品質テンプレート
statichunt.com コミュニティ評価付き 
# 気に入ったテンプレートはこのコマンドで一発インストール
npm create astro@latest -- --template [テンプレート名]

# 例：AstroPaper
npm create astro@latest -- --template satnaing/astro-paper

Cloudflareへのデプロイを考えているなら、Mindful Auth（認証付き）か Foxi（SaaS向け）が特に相性が良いですよ。

まずスキルファイルを確認します。Astroでのフロントエンドデザインを、実際に動くデモ付きで解説します。—

Astro フロントエンドデザインの全体像

① スタイリングの3つのアプローチ

Astroでは目的によってスタイルの書き方を使い分けます。

1. Scoped CSS（コンポーネントスタイル）

Astroの<style>タグに書いたCSSはデフォルトで自動スコープ化され、他のコンポーネントに漏れません。つまりh1 {}のような低特異度セレクターを安心して使えます。

---
// src/components/Hero.astro
const { title } = Astro.props;
---
<section class="hero">
  <h1>{title}</h1>
</section>

<style>
  /* このCSSはこのコンポーネントだけに適用される */
  .hero {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 4rem 2rem;
    text-align: center;
  }
  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: white;
  }
</style>

2. Tailwind CSS v4（2026年推奨セットアップ）

古い@astrojs/tailwindインテグレーションはTailwind v4では非推奨です。代わりにViteプラグインを使います。npx astro add tailwind（Astro 5.2以降）で一発設定できます。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

/* src/styles/global.css */
@import "tailwindcss";

/* デザイントークンをCSS-firstで定義 */
@theme {
  --color-brand-500: oklch(0.72 0.12 260);
  --font-display: "Noto Serif JP", serif;
}

/* Typographyプラグイン（ブログなど）*/
@plugin "@tailwindcss/typography";

---
// src/layouts/BaseLayout.astro
import "../styles/global.css";
---
<html lang="ja">
  <head>...</head>
  <body>
    <slot />
  </body>
</html>

3. UIコンポーネントライブラリ

Flowbiteなどのライブラリを使えば、ナビバー・モーダル・ドロップダウンなどのインタラクティブなコンポーネントをコードコピペで即座に使えます。

② フォントとデザインクオリティ

日本語サイトでは特にフォント選定が重要です。

---
// src/layouts/BaseLayout.astro
---
<head>
  <!-- Google Fontsで日本語フォント -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet">
</head>

③ コンポーネント設計のベストプラクティス

src/
├── layouts/
│   └── BaseLayout.astro     ← グローバルCSS・フォント・meta
├── components/
│   ├── ui/
│   │   ├── Button.astro     ← 汎用UIパーツ
│   │   └── Card.astro
│   └── sections/
│       ├── Hero.astro       ← ページセクション
│       └── Features.astro
├── pages/
│   └── index.astro          ← レイアウトとコンポーネントを組み合わせ
└── styles/
    └── global.css           ← Tailwindインポート＋デザイントークン

④ スターターテンプレートで素早く開始

AstroWindはAstro 5.0 + Tailwind CSSを使った無料テンプレートで、シンプルさ・ベストプラクティス・高パフォーマンスを重視して設計されており、PageSpeed Insightsで本番スコアを達成しています。ダークモード・RTL・MDXブログ・サイトマップ自動生成なども同梱されています。

# AstroWindで始める
npm create astro@latest -- --template Astro-Wind

# または公式のブランクプロジェクトから
npm create astro@latest
npx astro add tailwind   # Tailwind v4を自動設定

まとめ：用途別の選択

用途 アプローチ
ランディングページ Tailwind v4 + AstroWind テンプレート
ブログ・ドキュメント Scoped CSS + @tailwindcss/typography
管理画面・ダッシュボード shadcn/ui または daisyUI + Tailwind
高度なインタラクション React/Svelte アイランドを部分的に導入

CloudflareでWebサイトのコンテンツ（ブログ、ドキュメント、マーケティングページなど）を制作する場合、2026年現在の**圧倒的な最適解は「Astro」**です。

2025年後半にCloudflareがAstroの開発チームを買収したことにより、両者の親和性は他のフレームワークを凌駕しています。

1. なぜ「Astro」が最適なのか？

  • Cloudflare公式の推し: Cloudflare自身のドキュメントやブログもAstroで構築されており、最適化（ビルド速度やエッジでの動作）が最も進んでいます。

  • 「0 JavaScript」の速さ: コンテンツ主体のページでは不要なJSを排除し、静的なHTMLとして配信するため、SEOと表示速度が極めて高いです（Lighthouse 100点が容易）。

  • アイランドアーキテクチャ: 「基本は静的、チャットUIなどのAI機能だけReactを使う」といった、部分的な動的化が非常に得意です。

  • Workers AIとの統合: Astro 6 以降、Cloudflareのインフラ（AI, D1, R2）との連携機能が標準で強化されています。

2. コンテンツ制作における主要フレームワーク比較

特徴 Astro (推奨) Next.js Nuxt (Vue)
主な用途 ブログ、メディア、公式HP 複雑なWebアプリ、SaaS 柔軟なWebアプリ、ダッシュボード
パフォーマンス 最高（JS最小化） 高い（SSR/ISR） 高い（Nitroエンジン）
Cloudflare親和性 最高 (公式サポート) 良い (要変換設定) 良い (Nitro連携)
学習コスト 低（HTMLに近い） 中〜高 中

3. Astro × Cloudflare でコンテンツを作る手順

ステップ1: プロジェクト作成

Bash

# Astroの最新プロジェクトを作成
npm create astro@latest

ステップ2: Cloudflareアダプターの追加

CloudflareのエッジでAI機能などを動かすために、アダプターを導入します。

Bash

npx astro add cloudflare

ステップ3: AIコンテンツ生成の実装 (例)

Astroの「Content Collections」とWorkers AIを組み合わせれば、下書きをAIに校正させたり、自動でタグ付けしたりするシステムも構築可能です。

TypeScript

// src/pages/api/generate.ts (エッジで動くAIエンドポイント)
export const runtime = 'edge';

export async function POST({ request }) {
  const { prompt } = await request.json();
  const env = (request as any).locals.runtime.env; // Cloudflare環境変数へアクセス

  const result = await env.AI.run('@cf/meta/llama-3-8b-instruct', {
    prompt: `以下の内容をブログ記事として構成して: ${prompt}`
  });

  return new Response(JSON.stringify(result));
}

4. 運用のアドバイス

  • Markdown / MDX の活用: 記事コンテンツは src/content/ フォルダにMarkdown形式で保存するだけで、型安全なデータとして扱えます。

  • Cloudflare AI Gateway: AI機能を多用する場合、プロンプトのキャッシュやコスト管理のために AI Gateway を通す設定を忘れずに行ってください。

WordPressからCloudflare（特にAstroやNext.jsなどのモダンな構成）へ移行するのは、表示速度の劇的な向上、セキュリティの強化（管理画面への攻撃がなくなる）、そして運用コストの削減において最高の選択です。

移行には主に「完全に静的なサイトにする方法」と「ヘッドレス構成にする方法」の2パターンがあります。

1. 移行の2つのルート

ルートA：完全な静的化（SSG）

WordPressの内容をMarkdownやJSONとして書き出し、Astroなどで再構築します。

  • メリット: サーバー費用がほぼ0円。ハッキングのリスクがゼロ。爆速。

  • 向いている人: 更新頻度がそれほど高くなく、シンプルなブログや企業サイト。

ルートB：ヘッドレス構成（Headless CMS）

WordPressを「管理画面（API）」としてだけ残し、表示側をCloudflare上のモダンフレームワークで作ります。

  • メリット: 慣れ親しんだWordPressの投稿画面を使い続けられる。

  • 向いている人: 頻繁に記事を更新し、ライターなどが複数いる場合。

2. 具体的な移行ステップ（ルートA：Astroへの完全移行）

もっとも推奨される「爆速・低コスト」な手順です。

ステップ1: データの書き出し

WordPressプラグインの「WP All Export」や「JSON Basic Auth」を使用して、記事データをXML/JSON/Markdown形式でエクスポートします。

ステップ2: 画像の最適化と保存

WordPressの wp-content/uploads にある画像を、Cloudflare R2（オブジェクトストレージ）にアップロードします。

  • Cloudflareの Image Optimization を通すことで、デバイスに合わせてWebPやAVIF形式に自動変換され、さらに高速化します。

ステップ3: Astroでの構築

書き出したデータを src/content/ フォルダに配置します。

Markdown

---
title: "移行した記事のタイトル"
date: "2026-03-15"
image: "https://r2.example.com/photo.jpg"
---
記事の本文がここに入ります...

ステップ4: AI検索（RAG）の追加

移行のタイミングで、WordPressの標準検索を Cloudflare Workers AI + Vectorize による「AIチャット検索」に置き換えるのがトレンドです。過去記事の内容をAIが理解して回答してくれるようになります。

3. WordPress特有の機能の代替案

移行時に「あれはどうするの？」となりがちな機能の代替品です。

WordPress機能 Cloudflareでの代替案
お問い合わせフォーム Cloudflare Pages Plugins (Turnstile) + Formspark など
コメント欄 Giscus (GitHub連携) や Cusdis
サイト内検索 Workers AI + Vectorize で作るAIセマンティック検索
SEO設定 Astroの astro-seo ライブラリ（手動制御でより細かく設定可能）

4. 移行の最大のメリット：AIとの親和性

WordPressのままだと、AI機能を導入する際にPHPの重い処理やプラグイン同士の干渉がネックになります。Cloudflare上のモダンフレームワークに移行すると、**「記事を書く → 自動でベクトル化される → AIチャットボットが学習する」**というパイプラインをWorkersで簡単に構築できるようになります。

Cloudflareに最適なフレームワークを調べます。2026年の最新情報をもとに、詳細な比較をお伝えします。

Cloudflare向けフレームワーク完全比較（2026年版）

🏆 フレームワーク選択のポイント

用途別の最適解はシンプルで、APIのみ → Hono、Reactフルアプリ → Next.js (OpenNext) または Remix、Vue → Nuxt、Svelte → SvelteKit、コンテンツ重視 → Astroというデシジョンツリーで整理できます。

📊 フレームワーク比較表

フレームワーク 対象 Cloudflare対応 特徴
Astro ⭐ コンテンツサイト ネイティブ（GA） Cloudflareが買収。Workers AI完全統合
Hono API・軽量アプリ ネイティブ（GA） 最速・最小バンドル
SvelteKit SaaSダッシュボード GA JS最小量・高パフォーマンス
Next.js Reactフルアプリ Beta（OpenNext） 最大エコシステム
Remix / React Router v7 Reactフルアプリ GA Shopify製・安定運用向き
Nuxt Vueアプリ GA（Nitro） マルチブランド向き

🌟 2026年の最大トピック：CloudflareがAstroを買収

2026年1月16日、CloudflareがAstro Technology Companyの買収を発表しました。AstroはエッジデプロイのためのフレームワークとしてCloudflare Workersとの完璧な相性を持ち、CDNとの連携でコンテンツ配信に大きなアドバンテージがあります。

Astro 6では、Viteの Environment APIを活用した全面刷新の開発サーバーと、Cloudflare Workersへのファーストクラスサポートが導入されました。ライブコンテンツコレクションやCSPサポートも安定版として追加されています。

🔍 主要フレームワーク詳細

① Astro — コンテンツサイトの最適解

ブログ、ドキュメント、マーケティングサイト、ポートフォリオ、ECストアフロントなどのほぼ静的ページでは、Astroが他を大きく凌ぐパフォーマンスを発揮します。Cloudflareのバックアップにより、将来性も安心です。

---
// Workers AIとの統合例
const db = Astro.locals.runtime.env.DB;
const ai = Astro.locals.runtime.env.AI;
const response = await ai.run("@cf/meta/llama-3-8b-instruct", {
  messages: [{ role: "user", content: query }]
});
---
<article>{response.response}</article>

② Hono — APIと軽量アプリの最速解

Honoは最速・最小のフレームワークで、APIのみが必要なケースでは迷わず第一候補になります。

import { Hono } from 'hono'
const app = new Hono<{ Bindings: Env }>()

app.get('/api/chat', async (c) => {
  const response = await c.env.AI.run(
    "@cf/meta/llama-3-8b-instruct",
    { messages: [{ role: "user", content: "Hello" }] }
  )
  return c.json(response)
})
export default app

③ SvelteKit — ダッシュボード・SaaSの最適解

SvelteKitはNext.jsと比べてJavaScriptの送信量を50%以上削減し、認証済みSaaSアプリのインタラクティビティの遅延を半分にします。

SvelteKit用Svelte CLIはCloudflareエッジバインディングのワンクリックスキャフォールディングと自動型検出を提供し、開発の文脈切り替えを減らします。

④ Next.js (OpenNext) — Reactエコシステム最優先の場合

Next.jsは@opennextjs/cloudflare経由でv1.0-betaとしてサポートされており、本番GA対応はまもなくの予定です。

✅ 用途別おすすめまとめ

用途 推奨フレームワーク 理由
ブログ・ドキュメント・LP Astro Cloudflare買収で完全統合、超高速
REST API・マイクロサービス Hono 最軽量、Workers最適化
SaaS・管理画面 SvelteKit JS最小量、Workers AI対応
大規模Reactアプリ Next.js (OpenNext) 最大エコシステム（beta注意）
Vueチーム Nuxt Nitro経由でエッジ完全対応

特定の用途や詳しい実装例が知りたい場合はお知らせください！