# Claude CodeでAstroのサイトを作る：フォルダーから公開まで

> ステップごとのガイド：プログラミングの知識がなくても、Claude Codeを使ってAstroでサイトを作る方法。インストールするもの、プロジェクト作成に使うコマンド、無料で公開する方法を紹介します。

Source: https://ailoot.ai/blog/ja/astro-site-with-claude-code/
Canonical: https://ailoot.ai/blog/ja/astro-site-with-claude-code/
Language: ja
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-149
Revision: sha256-ff29cd391b70e899e9239b6f2d52e2c32d2e296ef4ac3c196916651cefe7e466


コードを一行も書いたことがない人でも、Claude Codeを使ってAstroでサイトを作れます。私はずいぶん前から手でコードを書くのをやめ、AIに言葉で伝えて作業しています。Astroでサイトを作るのも同じです。必要なものを説明すれば、Claudeがコードを書いてくれます。

通常、問題はサイトの構築そのものではなく、その手順がいくつもの断片に分かれていることです。ある記事ではインストールを説明し、別の記事ではコマンドを扱い、さらに別の記事では公開方法を説明しています。そのため、全体の流れが頭の中でつながりません。ここでは、空のフォルダーからインターネット上のリンクで開けるサイトまで、順を追って説明します。インストールするもの、プロジェクトを始めるコマンド、Claude Codeを使ってページを作る方法、そして完成したサイトを無料で公開する方法を紹介します。Astroの公式ドキュメントを参考にしています。

サービスの使い方については、[Ailootのドキュメント](https://ailoot.ai/docs/)をご覧ください。



## 始める前に必要なものは？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

パソコンに必要なのは3つです。新しいバージョンのNode.js、コードエディター、そしてターミナルです。Node.jsはこれらのツールを動かす環境です。この記事の執筆時点で、Astroのドキュメントではバージョン22.12.0以降が必要とされ、23のような奇数バージョンはサポートされないと注意されています。エディターとしては通常VS Codeを使い、Claude Codeもその中で動作します。ターミナルはコマンドを入力する黒い画面で、VS Codeに標準搭載されています。Astroのためにこれらを別々にすべてインストールする必要はありません。Claude Codeで何かを作ったことがあれば、環境はすでに整っています。

</div>

Astro自体は事前にダウンロードする必要がありません。次の手順で実行するコマンドが取得してくれます。ただし、それらを動かす環境は必要です。Astroは、始めるために次の3つが必要だと説明しています。

<figure>
<blockquote>
<p>Node.js — バージョンv22.12.0以降。v23のような奇数バージョンはサポートされていません。テキストエディター — Astro公式拡張機能を追加したVS Codeを推奨します。ターミナル — Astroはコマンドラインで操作します。</p>
</blockquote>
<figcaption>— Astroの公式ドキュメント「インストール」セクション、https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

それぞれが実際には何を意味するのか、見ていきましょう。

1. **Node.js** — Astroや、ほとんどのバイブコーディング用ツールを動かすために必要なプログラムです。nodejs.orgからダウンロードし、通常のアプリケーションと同じようにインストールします。ドキュメントに記載されたバージョン番号は時間とともに変わるため、始める前にAstroのインストールページを開いて要件を確認してください。必要なのは偶数バージョン（22、24）です。奇数バージョン（23、25）は避けるのが無難です。
2. **VS Code** — Microsoftの無料エディターです。ここでプロジェクトフォルダーを開き、Claude Codeも起動します。Claude Codeがコードを書いてくれます。
3. **ターミナル** — コマンドを入力するウィンドウです。別途インストールする必要はありません。VS Codeのメニューから開き、以下のコマンドをすべてそこで実行します。

Claude Codeをすでにインストールして何かを作ったことがあれば、必要なものはすべてそろっているので、この手順は飛ばせます。まだの場合は、[Claude Codeのインストール方法](https://ailoot.ai/blog/ja/install-claude-code/)を別のガイドで説明しています。

## 1つのコマンドでAstroプロジェクトを作る方法

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

新しいプロジェクトは、ターミナルで`npm create astro@latest`コマンドを実行して作成します。ウィザードが起動し、インストール先や使用するテンプレート、依存関係をインストールするかどうかなど、いくつか質問します。その後、プロジェクトのひな型を作成してくれます。プロジェクトフォルダーがまだ存在しない場合は、ウィザードが作成します。その後、`cd`コマンドでプロジェクトフォルダーに移動すれば、作業を始められます。事前に空のフォルダーを作る必要はありません。

</div>

ここからプロジェクト作成に入ります。必要なコマンドは1つだけです。ターミナルを開き、次を入力します。

```bash
npm create astro@latest
```

インストールウィザードが起動します。ドキュメントには次のように書かれています。

<figure>
<blockquote>
<p>create astroコマンドはパソコン上のどこからでも実行できるため、事前に空のプロジェクトフォルダーを作成する必要はありません。フォルダーがまだ存在しない場合は、ウィザードが自動作成を案内します。</p>
</blockquote>
<figcaption>— Astroの公式ドキュメント「インストール」セクション、https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

ウィザードの案内に従っていくつか質問に答えます。プロジェクトフォルダーの名前、最初に使うテンプレート、依存関係をすぐにインストールするかどうかなどです。最初のサイトなら、すべての質問に既定の選択肢を選んでかまいません。空のテンプレートや最小限のテンプレートで十分です。依存関係のインストールについて「いいえ」と答えた場合は、後でプロジェクトフォルダー内で`npm install`コマンドを実行して手動で追加してください。

ウィザードが終わると、プロジェクトが作成されたことが表示され、次の手順としてプロジェクトフォルダーへの移動を提案されます。

```bash
cd your-project-name
```

これだけでプロジェクトを作成できます。中には、ページを作るためのファイルやフォルダーがすでにいくつか用意されています。手作業で編集する必要はありませんが、何がどこにあるか知っておくと便利です。Astroが必須としているフォルダーは1つだけです。

<figure>
<blockquote>
<p>src/pages — プロジェクト内に必須のサブフォルダーです。これがないと、サイトにページもルートも存在しません。</p>
</blockquote>
<figcaption>— Astroの公式ドキュメント「プロジェクト構造」セクション、https://docs.astro.build/en/basics/project-structure/</figcaption>
</figure>

つまり、`src/pages`はサイトの各ページを置くフォルダーです。ホームページ、「私たちについて」、お問い合わせページなどがここに入ります。通常、その近くには`src/components`（ヘッダーやボタンなど再利用できる部品）、`src/layouts`（ページ共通の枠組み）、画像やファイルを置く`public`フォルダーもあります。構成を暗記する必要はありません。ページは`src/pages`にあると覚えておき、Claudeに「お問い合わせページを追加して」と頼むときに参照すれば十分です。

## Claude Codeを使ってサイトを作る方法

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

VS Codeでプロジェクトフォルダーを開き、Claude Codeを起動して、サイトに何が必要かを言葉で説明します。Claudeが`src/pages`や隣接するフォルダーのファイルを編集します。小さく明確な作業を頼むとうまく進みます。たとえば、「見出し、短い説明、ボタンがあるホームページを作って」と頼み、次に「サービスページを追加して」、その次に「色を暗くして」と伝えます。依頼するたびにブラウザーで結果を確認し、必要に応じて指示を補足します。ここでプログラミングは必要ありません。あなたの役割は、明確な指示を出し、結果を確認することです。

</div>

ひな型の準備ができたら、そこからサイトを作ります。ここからはClaude Codeの出番です。VS Codeでプロジェクトフォルダーを開き、Claude Codeを起動して、必要なものを言葉で説明します。Claudeが`src/pages`やその近くにあるフォルダーのファイルを編集するので、あなたは作業を頼み、結果を確認するだけです。

私の経験では、小さな手順に分けて進めるのが最もうまくいきます。「会社のウェブサイトを作って」といった巨大な依頼は、修正しにくい雑然とした結果になりがちです。そこで、短く明確な作業に分けて、1つずつ頼みましょう。

1. 「ホームページを作って。大きな見出し、私の仕事についての短い説明、問い合わせページへのリンク付きボタンを入れて。」
2. 「3つのセクションからなるサービスページを追加して。」
3. 「電話番号とTelegramへのリンクがある問い合わせページを追加して。」
4. 「スタイルを変更して。明るい背景にして、読みやすい大きなフォントを使って。」

次に進む前に各手順を確認してください。問題に気づきやすく、必要なら前に戻りやすくなります。小さな作業がより確実な理由や、AIの作業を軌道に乗せる方法は、コンテキストエンジニアリングの考え方の一部です。指示とプロジェクト構成が明確であるほど、結果も予測しやすくなります。

Astroはこの作業に適した構造をAIに与えます。ページの内容とスタイルが分かれており、ページは共通のルールに沿って作られます。この構造により、Claudeが混乱することが減り、ある箇所を編集したときに近くの別のものを壊す可能性も低くなります。Claudeが突然ファイルを認識しなくなったり、的外れな返答をしたりする場合は、[Claude Codeがプロジェクトファイルを参照できない理由](https://ailoot.ai/blog/ja/claude-code-cant-see-project-files/)のガイドをご覧ください。

AstroはAIを使った作業を支える要素の1つにすぎません。もっともらしい推測に頼らず、Claudeが必要なものを一貫して作れるようにするには、プロジェクトに必要なセットアップとして、**AIクローン + セカンドブレイン + コンテキストエンジニアリング**があります。



## 公開前にサイトをプレビューする方法

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

サイトをオンラインに公開する前に確認するには、Astroの開発サーバーを使います。プロジェクトフォルダー内のターミナルで`npm run dev`コマンドを実行すると、通常はポート4321のlocalhostでローカルプレビューが始まります。ブラウザーでこのアドレスを開けば、サイトをリアルタイムで確認できます。Claudeがファイルを変更すると、その内容は作業中に反映されます。テキストを変更すれば、ページも自動で更新されます。このサーバーはあなたのパソコン上でだけ見えるもので、サイトをインターネットに公開するものではありません。

</div>

サイトを公開する前に、まず自分のパソコンでプレビューします。そのためにAstroの開発サーバーを使います。サイトをパソコン上でリアルタイムに表示できます。プロジェクトフォルダー内のターミナルで、次のコマンドを実行してください。

```bash
npm run dev
```

Astroがローカルプレビューを起動し、ターミナルにアドレスを表示します。既定では`localhost:4321`です。このアドレスをコピーしてブラウザーで開けば、サイトを確認できます。今のところ、このアドレスを開けるのはあなただけです。外部の人はアクセスできません。これは下書きです。

便利なのはプレビューがリアルタイムで更新されることです。Claudeがファイルを編集すると、ブラウザー上のページも自動的に更新されます。手動で再読み込みする必要はありません。すばやく進められます。Claudeに頼み、ブラウザーで確認し、修正を加えて、もう一度確認します。この段階でサイトを仕上げます。結果に満足したら、オンラインで公開しましょう。

## Astroのサイトを無料でオンライン公開する方法

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

最も簡単な無料公開方法はGitHubを使うことです。まずプロジェクトをGitHubのリポジトリ（オンライン上のコード保管場所）にアップロードします。次に、Astroをビルドできるホスティングサービスを接続します。Netlify、Vercel、またはGitHub Pagesを利用できます。ホスティングサービスはAstroを認識し、ビルドコマンドでサイトをビルドして、自社のアドレスで公開します。リポジトリに新しい変更を送るたびに、サイトは自動で再ビルドされ、更新されます。Claude Codeに言葉で頼んで、この設定を手伝ってもらうこともできます。

</div>

完成したサイトを、ほかの人がリンクから開ける場所に置く必要があります。最も簡単な無料ルートはGitHubです。まずプロジェクトのコードをリポジトリにアップロードし、次にサイトをビルドして公開するホスティングサービスを接続します。手順は次のとおりです。

1. **GitHubにリポジトリを作成する。** リポジトリとは、プロジェクトファイルを送るオンラインのコード保管場所です。自然な言葉で指示すれば、Claude Codeが手伝ってくれます。「プロジェクトを新しいGitHubリポジトリにアップロードして」と頼むと、コマンドを提案してくれます。GitHubを使うのが初めてなら、登録とサインインの手順も手元に用意しておきましょう。
2. **ホスティングを接続する。** NetlifyやVercelなどのサービスを開き、GitHubアカウントでサインインして、リポジトリを選びます。Astroのドキュメントでは、この方法を次のように説明しています。ホスティングサービスがリポジトリを監視し、サイトをビルドして公開します。
3. **ビルド設定を確認する。** 通常、ホスティングサービスはAstroを認識し、必要な設定を入力してくれます。手動入力を求められた場合、ドキュメントに記載されているビルドコマンドは`astro build`（または`npm run build`）で、完成したサイトは`dist`フォルダーに配置されます。
4. **「公開」をクリックする。** サービスがサイトをビルドし、`site-name.netlify.app`のようなリンクを発行します。このアドレスから誰でもサイトを開けます。

リポジトリをホスティングサービスに接続する方法について、ドキュメントには次のように書かれています。

<figure>
<blockquote>
<p>多くの人気ホスティングサービスは、プロジェクトがAstroサイトであることを認識し、適切なビルド設定とデプロイ設定を自動的に選択します。ホスティングサービスはリポジトリのメインブランチを監視し、新しい変更があるたびにサイトを再ビルドして再デプロイします。</p>
</blockquote>
<figcaption>— Astroの公式ドキュメント「デプロイ」セクション、https://docs.astro.build/en/guides/deploy/</figcaption>
</figure>

その後は公開が自動化されます。リポジトリに新しい変更を送ると、サイトが自動で再ビルドされ、更新されます。ほかにクリックするものはありません。

もう1つの無料オプションは**GitHub Pages**です。GitHub独自のツールを使って、リポジトリから直接サイトを公開できます。Astroには公式のスターターがあります。

<figure>
<blockquote>
<p>Astroは、ほとんど設定せずにプロジェクトをGitHub Pagesへデプロイできる公式GitHub Actionをサポートしており、GitHub Pagesへのデプロイにはこの方法が推奨されています。</p>
</blockquote>
<figcaption>— Astroの公式ドキュメント「GitHub Pagesへのデプロイ」セクション、https://docs.astro.build/en/guides/deploy/github/</figcaption>
</figure>

この方法では、`your-name.github.io/repository-name`のようなアドレスでサイトを開けます。後から独自ドメインを接続することもできます。ここでもClaude Codeに設定を任せられます。作業を言葉で説明すれば、必要なファイルを用意してくれます。

## Astroのサイトを作る費用はいくら？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

Astroは無料のオープンソースソフトウェアで、利用料はかかりません。基本的なホスティングも無料で利用できます。GitHub Pagesのほか、NetlifyやVercelのスタータープランがあり、軽量なAstroサイトには十分です。実際にかかる費用は、サイト作成に使うAIツール（Claude）と、ホスティングサービスの無料アドレスの代わりに独自ドメインを使う場合の料金です。つまり、ホスティング料金を払わずにサイトを作って公開でき、AIの利用料だけがかかる方法があります。

</div>

費用について説明しましょう。Astroは無料のオープンソースツールで、別途料金はかかりません。基本的なホスティングサービスにも無料プランがあります。GitHub Pagesのほか、NetlifyやVercelのスタータープランがあり、軽量なAstroサイトには通常十分です（無料プランにはトラフィック制限がありますが、名刺代わりのサイトやランディングページなら通常は足ります）。

実際に費用がかかる可能性があるのは2つで、どちらも必ず必要というわけではありません。1つ目は、サイト作成に使うAIツールです。2つ目は、`name.netlify.app`のようなアドレスの代わりに使う独自ドメインです。これは任意で、年間費用もわずかです。「サイトを作ってオンラインで公開する」まで、Claudeの利用料だけで済ませることもできます。

## AstroのサイトとClaude Codeについて、ほかによくある質問

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重要なポイント

よくある質問への簡潔な回答です。プログラミングの知識は必要ありません。Claudeがコードを書き、あなたは言葉で作業を頼んで結果を確認します。完成したサイトは自分のファイルとして残り、どのホスティングサービスにも置けます。特定の誰かのプラットフォームに縛られることはありません。Astroはコンテンツを中心としたサイト、たとえば名刺代わりのサイト、ランディングページ、ブログ、ショーケースに適しています。複雑な会員ページを作るなら、ほかのツールを検討したほうがよいでしょう。完成したサイトはGitHub経由で無料公開できます。

</div>

<div class="section">

### よくある質問

Claude Codeを使ってAstroでサイトを作るには、プログラミングの知識が必要ですか？

いいえ。私はずいぶん前から手でコードを書くのをやめ、すべてAIを通して作業しています。「こんな見出しのホームページを作って」と言葉で依頼すれば、Claude Codeがファイルを書き、編集してくれます。構文を知っている必要はありません。どんなサイトにしたいかを理解し、ブラウザーで結果を確認できれば十分です。

事前にプロジェクトフォルダーを作る必要がありますか？

いいえ。`npm create astro@latest`コマンドを実行するとウィザードが起動し、フォルダーがまだなければ作成してくれます。コマンドはパソコン上のどこからでも実行できます。作成後、`cd`コマンドでプロジェクトフォルダーに移動して作業します。

オンライン公開前にサイトをプレビューするにはどうすればよいですか？

プロジェクトフォルダー内で`npm run dev`コマンドを実行します。Astroが通常localhost:4321でローカルプレビューを起動するので、自分のパソコンのブラウザーでサイトを開けます。このプレビューを見られるのはあなただけです。変更は作業中に反映され、手動でページを再読み込みする必要はありません。

Astroのサイトは無料で公開できますか？

はい。最も簡単な方法は、プロジェクトをGitHubリポジトリにアップロードし、GitHub Pages、Netlify、Vercelの無料ホスティングに接続することです。ホスティングサービスがサイトをビルドし、自社のアドレスで公開します。軽量なサイトならホスティング料金を別途払う必要はありません。独自ドメインが必要な場合に費用が発生します。

Astroはどんな種類のサイトにも適していますか？

Astroはコンテンツを中心とするサイト向けに設計されています。名刺代わりのサイト、ランディングページ、ブログ、ポートフォリオ、オンラインストアのショーケースなどです。こうした用途に向いています。プロジェクトの中心が、会員ページやボタンごとの多くの操作を備えた複雑なウェブアプリケーションなら、その部分は通常、別のツールで作ります。Astroの長所と短所については、Astroとは何かを説明する記事で詳しく紹介しています。

バイブコーディングで、Tildaのようなサイト作成ツールよりAstroが優れている点は何ですか？

違いは、最終的に何が手元に残るかです。Astroのサイトは自分のファイルで構成され、自分で保管でき、どのホスティングサービスでも公開できます。第三者のサービスにファイルを預ける必要はありません。移行したいときや半年後に変更したいときも、どのツールでもすべてを開けます。Astroとほかのツールのどちらを選ぶかは、バイブコーディング全般の考え方に沿って、作業に合ったツールを選ぶことです。ツールの一覧は[Claude Codeの代替ツールガイド](https://ailoot.ai/blog/ja/claude-code-alternatives/)にあります。

</div>

<div class="section" role="doc-bibliography" aria-label="Sources">

### 出典

- [Astroの公式ドキュメント「インストールと要件」](https://docs.astro.build/en/install-and-setup/)
- [Astroの公式ドキュメント「コマンドラインインターフェース」](https://docs.astro.build/en/reference/cli-reference/)
- [Astroの公式ドキュメント「プロジェクト構造」](https://docs.astro.build/en/basics/project-structure/)
- [Astroの公式ドキュメント「サイトのデプロイ」](https://docs.astro.build/en/guides/deploy/)
- [Astroの公式ドキュメント「GitHub Pagesへのデプロイ」](https://docs.astro.build/en/guides/deploy/github/)
- [Astroの公式ドキュメント「Astroを選ぶ理由」](https://docs.astro.build/en/concepts/why-astro/)

</div>

バイブコーディングの完全なセットアップ：**AIクローン + セカンドブレイン + コンテキストエンジニアリング**。





[Ailoot](https://ailoot.ai/)について知る。

## Claude CodeでAstroのサイトを作る：フォルダーから公開まで：よくある質問

### Astroのローカルプレビューで、サイトはオンラインに公開されますか？

いいえ。npm run devはローカル開発用のプレビューを起動し、通常localhost:4321のようなアドレスを表示します。公開はホスティングサービスやGitHub Pagesのデプロイ手順で行う別の工程です。

### Astroをホストする際、どのビルド設定を確認しますか？

ここで紹介する静的サイトでは、astro buildまたはnpm run buildを実行し、distディレクトリを公開する設定を確認します。デプロイ後は公開URLを開いてページを検証してください。ローカルプレビューだけでは公開を確認できません。


## Ailoot · 企業とそのプロジェクト群

Ailootは、蓄積した運営経験、幅広い顧客基盤、安定したサービス、継続的なKPI管理を基盤としています。

企業とそのプロジェクト群：数百万の顧客、毎月数十億規模の売上。

Ailootはこの運営経験を、お客様の製品、エージェント、アプリケーション、自動化でAI機能を利用するためのAPIアクセスに活かしています。