無料AIツールを使いこなしてプロンプトとスクショで操作できるようになる

Google AI Studio はブラウザのみで使えるAI開発ツールです。インストール不要で、Googleアカウントがあればすぐに始められます。

▲ Google AI Studio のチャット画面。左でモデルと指示を設定し、右でやりとりする

Windows / Mac 共通

1. ブラウザで https://aistudio.google.com を開く
2. Googleアカウントでログイン（Googleアカウントがない場合は先に作成）
3. 「Try Google AI Studio」または「Get started」をクリック
4. 利用規約に同意して進む

基本画面の確認

最初のメッセージを送ってみましょう。チャット欄に以下を入力して実行します。

こんにちは。簡単なHTMLを作ってください。タイトルは「テストページ」で、
「Hello, World!」と大きく表示されるだけのシンプルなページにしてください。

API キーを取得することで、自分のアプリから AI を呼び出せるようになります。このキーはパスワードと同じです。取得後の管理を慎重に行いましょう。

▲ aistudio.google.com/app/apikey から API キーを発行・管理する

API キーの取得手順

1. Google AI Studio の左メニュー「Get API key」をクリック（または https://aistudio.google.com/app/apikey を直接開く）
2. 「Create API key」をクリック
3. 「Create API key in new project」を選択（または既存のプロジェクトを選択）
4. 表示された API キー（AIzaSy で始まる文字列）を今すぐコピー

API キーの安全な保管方法

.env ファイルの書き方（講座02A/02B で詳しく学びます）:

GEMINI_API_KEY=AIzaSy...（ここにAPIキーを貼り付ける）

System Instructions（システム指示）は、AIに「このアシスタントとしてふるまってください」という役割を与える設定です。会話の最初に毎回書く必要がなくなります。

▲ 左パネルの System instructions に役割を設定すると、毎回の指示が省略できる

System Instructions の設定手順

1. Google AI Studio で「Create new prompt」をクリック
2. 左上の「System instructions」エリアをクリック（折りたたまれている場合は展開）
3. 以下のテンプレートを貼り付けて内容を自分用にカスタマイズ

あなたはプロのウェブ開発者アシスタントです。

## 役割
- HTML / CSS / JavaScript のコードを生成・修正する
- 初心者にもわかりやすい説明を心がける
- コードを提案する際は必ず動作する完全なコードを提供する

## 出力ルール
- コードはコードブロック（```）で囲んで出力する
- 説明は箇条書きで簡潔にまとめる
- エラーへの対処法も合わせて説明する
- 日本語で回答する

4. 「Save」または任意の名前を付けて保存

開発では「フォルダを開く」が基本です。単一ファイルではなくフォルダ単位で開くことで、プロジェクト全体の構成が見えます。

▲ フォルダを開いた状態。左のファイルツリーで全体構成を把握できる

Windowsの場合

1. Cursor を起動
2. 「File」メニュー → 「Open Folder」をクリック（または Ctrl+K Ctrl+O）
3. 作業したいフォルダを選択して「フォルダーの選択」をクリック

または、エクスプローラーでフォルダを右クリック → 「Open with Cursor」でも開けます（インストール後に自動追加）。

Macの場合

1. Cursor を起動
2. 「File」メニュー → 「Open Folder」（または Cmd+O）
3. 作業したいフォルダを選択

新しいフォルダを作って開く場合（GitBASH / ターミナルで）

mkdir my-project

その後、上記の手順でフォルダを選択します。

Cursor の Agent モードは、ファイルの作成・編集・コマンド実行まで AI が自動で行ってくれる高機能モードです。学習中は基本的に Agent モードを使います。

起動手順

または右上のチャットアイコンをクリックします。

モードの切り替え

チャットパネルの上部にモード選択があります。

チャットで @ を入力すると、プロジェクト内のファイルを指定して「このファイルを見て修正して」と指示できます。ファイルを指定しないと、AI はどのファイルを修正すればよいか判断しにくくなります。

使い方

チャットに入力中に @ を打つとファイル候補が表示されます。

# ファイルを指定して変更を依頼
@index.html の背景色を白から水色に変えてください

# 複数ファイルを参照して一括修正
@src/App.tsx と @src/styles.css を参照して、ボタンのデザインを統一してください

@で指定できるもの

「画面のこの部分がおかしい」と視覚的に伝えられるのが強力なポイントです。スクショ + テキストの組み合わせが最も伝わりやすいです。

スクリーンショットの取り方と貼り付け方

Windowsでの詳細手順

1. Win + Shift + S を押す（画面が薄暗くなる）
2. マウスでスクリーンショットを取りたい範囲をドラッグして選択
3. 自動的にクリップボードにコピーされる
4. Cursor のチャット入力欄をクリックして Ctrl + V で貼り付け

Macでの詳細手順

1. Cmd + Shift + 4 を押す（カーソルが十字に変わる）
2. スクリーンショットを取りたい範囲をドラッグして選択
3. 自動的にクリップボードにコピーされる（またはデスクトップにファイルが保存される）
4. Cursor のチャット入力欄で Cmd + V で貼り付け

指示の例

画像を貼り付けた後、以下のように指示します。

# スクショ貼り付け後の指示例
この画面を見てください。ヘッダーのナビゲーションリンクが縦並びになっています。横並びに修正してください。

スクショの通り、ボタンが画面からはみ出しています。@index.html を修正して収まるようにしてください。

Agent モードで変更が提案されると、コードに色付きのマーカーが表示されます。変更内容を理解してから Accept しましょう。

▲ 緑（追加）と赤（削除）で変更箇所が可視化される。内容を確認してから Accept を押す

変更を承認する（Accept）

変更を拒否する（Reject）

Google Antigravity は、複数ファイルにまたがる変更を AI が自動で行ってくれるツールです。instructions.md と rules.md を読み込んで AI の動作をカスタマイズできます。

Windowsの場合

1. ブラウザで https://antigravity.dev を開く（または Google で「Google Antigravity」と検索）
2. 「Download for Windows」をクリック
3. ダウンロードした .exe を実行してインストール
4. インストール完了後、Antigravity を起動
5. 初回起動時のセットアップウィザードで以下を設定

Macの場合

1. https://antigravity.dev を開く
2. 「Download for Mac」をクリック
3. .dmg をマウントして Applications フォルダにドラッグ
4. 起動後、同様のセットアップウィザードを進める

Antigravity は instructions.md と rules.md を読み込んで AI の動作をカスタマイズします。instructions.md は「このプロジェクトは何か」を AI に伝えるファイルで、rules.md は「AIにどう動いてほしいか」のルールを書くファイルです。

instructions.md の作成

プロジェクトのルートフォルダに instructions.md を新規作成します（Cursor のエディタで作成可）。

# プロジェクト概要

このプロジェクトは○○（プロジェクトの説明）です。

## 技術スタック

- HTML / CSS / JavaScript（またはReact / TypeScriptなど使用技術を記載）

## ファイル構成

- index.html: メインページ
- style.css: スタイルシート
- script.js: JavaScript

## 開発ルール

- コメントは日本語で書く
- 変数名は英語のキャメルケースを使う
- インデントはスペース2つ

## AI へのお願い

- 変更時は変更箇所とその理由を説明してください
- 既存のコードスタイルを維持してください
- エラーが起きる可能性がある変更は事前に警告してください

rules.md の作成

同じフォルダに rules.md を作成します。

# AI 動作ルール

## 必須ルール

1. 日本語で回答する
2. コードを変更する前に「何を変えるか」を必ず説明する
3. 既存のファイルを削除する前に確認を求める
4. コードブロックは必ず言語指定付きで出力する（例: ```html）

## 禁止事項

- APIキーやパスワードをコードに直書きしない
- .env ファイルを変更しない
- package.json の dependencies を無断で変更しない

## 出力フォーマット

- 変更後のコード全体を出力する（差分だけではなく）
- 変更した箇所にコメントで「// 変更: 理由」を追記する

Antigravity はファイルへの直接書き込みまで行います。変更後はブラウザで確認する習慣を付けましょう。

Windows / Mac 共通

1. Antigravity を起動
2. 左上の「Open Project」または「+」ボタンをクリック
3. instructions.md と rules.md を置いたフォルダを選択
4. Agent Manager が起動し、AI がプロジェクトを認識する

指示の出し方

# 新しいファイルを作成する場合
index.html を作成してください。タイトルは「My App」で、ヘッダーとメインコンテンツエリアを持つ基本的なレイアウトにしてください。

# ファイルを指定して修正する場合
[index.html] の背景色を #f0f0f0 に変更してください。また、h1 タグのフォントサイズを 2rem にしてください。

Antigravity（および Google AI Studio）には無料利用の上限（クォータ）があります。クォータが切れること自体は問題ありません。3つのツールを組み合わせると実質1日中作業できます。

クォータ制限が発生したときのメッセージ例

▲ 429 エラーはクォータ超過のサイン。焦らず別のツールに切り替えよう

対処法

3つのツールはそれぞれ得意な場面が異なります。以下の表を参考に使い分けましょう。