Step 1：環境構築 — ツールをインストールしよう

上から順番に進めてください。すべてインストールが終わるとLPを作る準備が整います。

インストールするもの一覧

1. Google Chrome のインストール

Antigravity の Chrome 拡張機能を使うために必要です。すでにインストール済みの方はスキップしてください。

1. google.com/chrome にアクセス
2. 「Chrome をダウンロード」をクリック
3. ダウンロードされたファイルを実行してインストール

2. ターミナルの開き方

これから先、コマンドを入力する場面がたくさんあります。まずはターミナルの開き方を覚えましょう。

Mac の場合

以下のいずれかの方法で開けます：

• 方法1：Spotlight 検索 — Cmd + Space を押して「ターミナル」と入力 → Enter
• 方法2：Finder — アプリケーション → ユーティリティ → ターミナル.app

黒い（または白い）画面が出てきたら OK です。ここに文字を入力してコマンドを実行します。

Windows の場合

• 方法1 — スタートメニューで「PowerShell」と検索 → 「Windows PowerShell」をクリック
• 方法2 — Win + R を押して「powershell」と入力 → Enter

ターミナルは この講座中ずっと使います ので、閉じずに開いたままにしておいてください。

3. Homebrew のインストール（Mac のみ）

Homebrew とは？ Mac 用の「アプリストア」のようなものです。ターミナルからコマンド1つでさまざまなツールをインストールできます。

すでにインストール済みか確認

brew --version

バージョンが表示されればインストール済みです。次のステップへ進んでください。

インストール手順

ターミナルに以下をコピー＆ペーストして Enter：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

途中で パスワード を求められたら、Mac のログインパスワードを入力してください（入力中は画面に何も表示されませんが、入力はされています）。

パスを通す（Apple Silicon Mac の場合）

インストール完了後、ターミナルに以下の2行が表示されることがあります。その場合はそのまま実行してください：

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

インストール確認

brew --version
# 例：Homebrew 4.x.x と表示されればOK

Windows の方： Homebrew は不要です。次のステップへ進んでください。

4. Git のインストール

Git とは？ ファイルの変更履歴を管理するツールです。「いつ、何を変更したか」を記録できます。

Mac の場合

ターミナルで以下を実行：

git --version

• バージョンが表示されれば インストール済み です
• 「Xcode Command Line Tools のインストール」を促されたら 「インストール」をクリック してください（数分かかります）

Homebrew でインストールする場合：

brew install git

Windows の場合

1. git-scm.com にアクセス
2. 「Download for Windows」をクリック
3. ダウンロードされた .exe を実行
4. セットアップウィザードに従う（デフォルト設定で OK）
5. 「Git Bash Here」にチェックが入っていることを確認
6. インストール完了後、PowerShell を 開き直す

インストール確認

git --version
# 例：git version 2.x.x と表示されればOK

5. Node.js のインストール

Node.js とは？ JavaScript をパソコン上で動かすための実行環境です。一部のツールが内部で使用します。

Mac の場合（Homebrew 使用）

brew install node

Windows の場合

1. nodejs.org にアクセス
2. 「LTS」（長期サポート版）と書かれたボタンをクリック
3. ダウンロードされた .msi を実行
4. セットアップウィザードに従う：
   • 「Add to PATH」にチェックが入っていることを確認（重要！）
5. 完了したら PowerShell を 開き直す

インストール確認

node --version      # 例：v22.x.x
npm --version       # 例：10.x.x

npm は Node.js と一緒に自動でインストールされます。

6. Bun のインストール

Bun とは？ Node.js と同じく JavaScript を動かすツールですが、非常に高速 です。今日のメインで使います。

Mac / Linux の場合

curl -fsSL https://bun.sh/install | bash

インストール後、ターミナルを 一度閉じて、新しく開き直して ください。

Windows の場合

PowerShell を 管理者として 開いて以下を実行：

powershell -c "irm bun.sh/install.ps1 | iex"

インストール確認

bun --version
# 例：1.x.x と表示されればOK

7. Google Antigravity のインストール

Google Antigravity とは？ AI エージェントがコードを書いてくれる開発プラットフォームです。自然な日本語で指示を出すだけで Web サイトが作れます。今日の主役です！

Mac の場合（Homebrew 使用）

brew install --cask antigravity

brew update を先に実行しておくと確実です。

Windows の場合（WinGet 使用）

PowerShell を開いて以下を実行：

winget install Google.Antigravity

WinGet は Windows 10（1709 以降）/ Windows 11 に標準で入っています。

インストール確認

ターミナルで以下を実行：

antigravity --version
# バージョンが表示されればOK

初回セットアップ

ターミナルから起動できます：

antigravity

1. 初回は Gmail アカウント でのログインを求められます
2. ブラウザが開くので Google アカウントで認証
3. ターミナルに戻り、ホーム画面が表示されれば OK

Chrome 拡張機能のインストール

1. Antigravity のホーム画面から「Browser Extension」の案内に従う
2. Chrome ウェブストアで「Antigravity」拡張機能をインストール
3. Chrome に拡張機能のアイコンが表示されれば OK

この拡張機能は何をするの？ AI エージェントが Chrome 上で作ったサイトの動作確認を自動で行えるようになります。

8. Astro プロジェクトの作成

いよいよプロジェクトを作ります！

プロジェクト用フォルダを作成

mkdir ~/my-accomadation-lp
cd ~/my-accomadation-lp

Astro プロジェクトを初期化

bunx create-astro@latest . --template minimal

質問が出たらすべてデフォルト（Enter キー）で OK です。

Tailwind CSS をインストール

Astro に Tailwind CSS を追加します：

bunx astro add tailwind

「Continue?」と聞かれたら y を入力して Enter で OK です。

起動確認

bun run dev

ブラウザで http://localhost:4321 を開いて、Astro の初期画面が表示されれば 環境構築完了です！

完了チェックリスト

以下をすべてターミナルで実行し、バージョンが表示されることを確認してください：

brew --version            # Homebrew（Mac のみ。例：4.x.x）
git --version             # Git（例：2.x.x）
node --version            # Node.js（例：v22.x.x）
npm --version             # npm（例：10.x.x）
bun --version             # Bun（例：1.x.x）
antigravity --version     # Antigravity（例：1.x.x）

全部バージョンが表示されたら Step 1 完了！次に進みましょう。

どれか1つでもエラーが出る場合： 講師に声をかけてください。

コマンドまとめ（コピー用）

Mac

# Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Git
brew install git

# Node.js
brew install node

# Bun
curl -fsSL https://bun.sh/install | bash

# Google Antigravity
brew install --cask antigravity

# Astro プロジェクト作成
mkdir ~/my-accomadation-lp
cd ~/my-accomadation-lp
bunx create-astro@latest . --template minimal
bunx astro add tailwind
bun run dev

Windows

# Bun
powershell -c "irm bun.sh/install.ps1 | iex"

# Google Antigravity
winget install Google.Antigravity

# Astro プロジェクト作成
mkdir ~/my-accomadation-lp
cd ~/my-accomadation-lp
bunx create-astro@latest . --template minimal
bunx astro add tailwind
bun run dev

Git・Node.js は上記手順でインストーラーをダウンロードしてください。

トラブルシューティング