Astro

コンテンツ重視の Web サイト向け静的サイトジェネレーター。デフォルトで JavaScript をゼロに抑え、必要な箇所だけクライアント側で Hydrate する Islands アーキテクチャが特徴。

概要

Astro はドキュメントサイト・ブログ・マーケティングサイト・E コマースなどコンテンツ中心の Web サイトを高速に配信することに特化したフレームワーク。React / Vue / Svelte / Solid など複数の UI フレームワークを同一プロジェクト内で混在させられる。

本サイト（CTS-KB）・コーポレートサイト（www.cts-g.com）はともに Astro で構築されている。

主な特徴

Tailwind CSS v4 との組み合わせ

Astro 6 系は Tailwind v4 との相性が良く、@tailwindcss/vite プラグイン経由で統合する。本プロジェクトでは tailwind.config.mjs を使わず、src/styles/global.css の @theme ブロックで CSS-first にテーマ定義している。

CTS-KB での採用理由

• 高速配信: 静的生成 + CloudFront 配信で TTFB を最小化
• Markdown 執筆: src/content/articles/ に .md / .mdx を置くだけで記事が公開される
• SEO 対応: 構造化データ（JSON-LD）・OGP・canonical をレイアウトで一元管理
• コスト効率: S3 + CloudFront の静的ホスティングで月額コストを抑制

ディレクトリ構造（参考）

src/
├─ pages/         # ファイルベースのルーティング
├─ layouts/       # 共通レイアウト（ArticleLayout など）
├─ components/    # 再利用可能な .astro コンポーネント
├─ content/       # Content Collections（articles / glossary 等）
└─ styles/        # global.css（@theme でテーマ定義）

関連用語

• Islands Architecture — Astro の中核設計、極小 JS の根拠
• ハーネスエンジニアリング — .claude/ 配下の運用構成
• SSoT（Single Source of Truth） — Content Collections で実現する一元管理

関連記事

• Claude Code + Claude Design 連携ワークフロー — handoff bundle から Astro 実装への自動変換フロー

外部リソース

• Astro 公式ドキュメント
• Astro Islands Architecture 解説