技術選定の裏側

今回のプロジェクトで、私たちが最も重視した要件は2つ。

1. 圧倒的なパフォーマンス — モバイルでも瞬時に表示されること。
2. 最高の開発体験（DX） — AIとのペアプログラミングで、効率的に改善を回せること。

この2つを満たすために選ばれたのが、Astro と TailwindCSS です。

なぜ Astro なのか？

一般的なWebサイト制作では、WordPressやNext.jsなどが候補に挙がります。しかし、今回の「店舗公式サイト」のようなコンテンツ重視のサイトにおいて、Astroは最強の選択肢です。

アイランドアーキテクチャ (Islands Architecture)

Astroの最大の特徴は、必要な部分だけJavaScriptをロードする「アイランドアーキテクチャ」です。 ヘッダーやメニュー画像などの静的な部分はHTMLとして配信され、予約フォームのような動的な部分（アイランド）だけがJavaScriptを実行します。 これにより、ユーザーの通信量を最小限に抑え、爆速な表示を実現しています。

なぜ TailwindCSS なのか？

「CSSを書くためにファイルを行き来する時間をなくしたい」。 それこそがTailwindCSSを採用した理由です。

Astroコンポーネント内に直接クラスを書くことで、コンポーネントの構造と見た目を1箇所で管理できます。これはAIにコードを生成させる際にも非常に有利です。 AIに対して「青いボタンを作って」と指示するだけで、適切なユーティリティクラス（bg-blue-500 rounded px-4 py-2）を含んだHTMLを生成してくれるため、スタイリングの微調整が劇的に早くなりました。

実際の構成設定

最後に、本プロジェクトの実際の astro.config.mjs を公開します。非常にシンプルです。

// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()]
  }
});

これだけの記述で、最新のTailwindCSS v4が動作しています。複雑な設定ファイルはもう過去のものです。

Tailwind CSS実践入門

田中 太郎

Recommend: TailwindCSSの基礎から応用まで、実務で使えるテクニックが満載。v3対応ですがv4でも通じる考え方が学べます。

Amazonで見る

Antigravityへの指示例 (Prompt)

この環境を構築するために、私がAntigravityに送った実際の指示（プロンプト）のイメージです。

Project Setup Prompt: 「新しいAstroプロジェクトを作成してください。スタイリングにはTailwindCSSを使用したいです。 astro.config.mjs は最新の @tailwindcss/vite プラグインを使った構成にしてください。」

このように「使いたい技術」と「具体的な構成方法（プラグイン名など）」を伝えるだけで、AIは最適な初期設定を行ってくれます。

まとめ

Astroのパフォーマンスと、TailwindCSSの開発スピード。 この2つが合わさることで、私たちは「コンテンツの質」と「ユーザー体験」の向上に集中することができました。

次回は、開発環境である VS Code と Agentic AI の設定についてお話しします。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたは熟練のフロントエンドアーキテクトです。地方飲食店のWebサイトを新規構築するにあたり、以下の要件を満たす最適な技術スタックを選定し、その理由を説明してください。
要件:
- 予算: サーバー費用を極限まで抑える
- パフォーマンス: Core Web Vitalsですべて緑を目指す
- 運用: エンジニア不在でも更新しやすくする（ヘッドレスCMSの検討など）
推奨するフレームワーク、スタイリング、ホスティング、CMSの組み合わせを提案してください。