入門編 · プログラミング未経験でも大丈夫
はじめての AI 開発
AI に頼んで、自分の Web ページを作ろう
この講座では、AI に日本語でお願いして Web ページを作り、インターネットに公開するところまでを体験します。難しい言葉は、出てきたところで1つずつ説明します。
この講座のゴール
- AI で開発するとはどういうことか、ひとことで説明できる
- AI エディタを入れて、自己紹介ページを1枚作れる
- 失敗しても「元に戻す」方法を知っている
- やってはいけないことを5つ言える
必要なもの: パソコン（Windows か Mac）、インターネット、メールアドレス。プログラミングの知識はいりません。
1AI で開発するって、どういうこと？
ひとことで言うと、「とても手の速いアシスタントに、日本語でお願いして作ってもらう」ことです。
アシスタント（AI）は、プログラムを書くのがとても速く、知識も豊富です。でも、こんな弱点があります。
- 言われていないことは分からない（あなたの好みや事情を知らない）
- 自信満々に間違えることがある
- 「できました！」と言っても、本当にできているとは限らない
だから、あなたの役割は「現場監督」です。何を作るか決めて、お願いして、出来上がりを確かめて、OK を出します。
この「お願い → 確かめる → セーブ」を、小さく何回もくり返すのが、AI 開発の基本のリズムです。
2これだけ覚えれば OK の言葉
最初は全部覚えなくて大丈夫です。出てきたときに、このページに戻ってきてください。
プログラムを書くためのアプリ。AI に話しかけると、ファイルを作ったり書き換えたりしてくれます。
Web ページを作る言葉。HTML は「何を置くか」（文章、画像）、CSS は「どう見せるか」（色、大きさ、配置）。
AI に打ち込むお願いの文章のこと。書き方しだいで、出来上がりが大きく変わります。
作業の途中経過を保存しておく仕組み。失敗しても、前にセーブしたところに戻れます。
「ここまでの状態」を Git に保存すること。うまくいったら、こまめにコミットします。
AI が「どこを、どう変えたか」の一覧。緑が追加、赤が削除。AI の仕事を確かめるときに見ます。
黒い画面に文字を打って操作するもの。最初は AI に任せて、何をしているか見ているだけで OK です。
怖いものではありません。エラーの文章をそのまま AI に見せると、原因を教えてくれます。
AI がもっともらしい嘘をつくこと。だから、出来上がりは必ず自分の目で確かめます。
サービスを使うための秘密の文字列。人に見せたり、AI のチャットに貼ったりしてはいけません。
3道具の紹介（まず使うのは3つだけ）
AI 開発の道具はたくさんありますが、この講座で使うのはこの3つだけです。
| 道具 | 何に使う | この講座で使うもの |
|---|---|---|
| ① AI エディタ | AI にお願いして、ファイルを作ってもらう | Cursor（カーソル） |
| ② ブラウザ | 作ったページを見て確かめる | Chrome、Edge、Safari など普段のもの |
| ③ Git | セーブと、失敗したときの巻き戻し | Git（エディタのボタンで操作できます） |
どれを使っても「お願いする → 確かめる → セーブ」の基本は同じです。1つ覚えれば、ほかの道具もすぐ使えます。
AI ツール図鑑
AI 開発の道具は、ほかにもたくさんあります。全部使う必要はありません。「こんな種類があるんだな」と知っておくと、ニュースや人の話が分かるようになります。
道具は大きく6つの種類に分かれます。お店にたとえると、こんなイメージです。
| 種類 | たとえるなら | ひとことで |
|---|---|---|
| A. AI エディタ | 隣に座って一緒に作ってくれるアシスタント | いちばん使われている。この講座の Cursor もこれ |
| B. ターミナル型 | 電話で指示を受けて動く職人さん | 黒い画面で動く。慣れた人に人気 |
| C. アプリ生成型 | 注文するとすぐ出てくる「お任せ料理」 | ブラウザだけで、すぐに形になる |
| D. クラウド型エージェント | 仕事を預けておくと、終わったら届けてくれる外注さん | 任せて待つ。終わったら確認する |
| E. AI レビュー | 提出物をチェックしてくれる先生 | 作ったものの間違いを指摘してくれる |
| F. ローカル AI | 家に住み込みのアシスタント | ネットに出さずに、自分のパソコンだけで動く |
むずかしさ：★☆☆ 初心者でもすぐ使える ／ ★★☆ 少し慣れが必要 ／ ★★★ 慣れてから。料金はどれも変わりやすいので、使う前に公式サイトで確認してください。多くは無料で試せます。
A. AI エディタ ― 隣に座って一緒に作ってくれる
文章を書くアプリ（エディタ）に AI が入っているもの。あなたのフォルダの中身を AI が直接見て、ファイルを作ったり直したりします。
この講座で使うもの。AI に頼むと、ファイル作成からコマンドの実行、ブラウザでの確認まで進めてくれます。AI の種類（GPT、Claude、Gemini など）を切り替えられます。
こんな人に：はじめての人、何でも1つで済ませたい人
VS Code という無料のエディタに追加して使います。Cursor とほぼ同じことができます。GitHub と相性がよく、会社で導入されていることも多いです。
こんな人に：すでに VS Code を使っている人、会社で GitHub を使っている人
Cursor と同じタイプの AI エディタ。AI がどんどん自分で作業を進めるスタイルです。
こんな人に：Cursor 以外も試してみたい人
IntelliJ や PyCharm など、プロの現場でよく使われるエディタに入っている AI。
こんな人に：Java や Python の開発現場で、JetBrains のエディタを使っている人
B. ターミナル型 ― 黒い画面で動く職人さん
「ターミナル」という、文字で命令する黒い画面で動く AI。見た目は地味ですが、エディタを選ばず、サーバー（インターネット上のパソコン）の中でも使えるので、慣れた人に人気です。
Anthropic 社の AI。ターミナル型の代表格で、長い作業も粘り強くこなします。CLAUDE.md というファイルにルールを書いておけます。
こんな人に：ターミナルに慣れてきた人、サーバーで作業する人
ChatGPT を作っている OpenAI 社の AI。ChatGPT のアカウントで使えます。
こんな人に：ChatGPT を有料で使っている人
Google の AI。Google アカウントで始められ、中身が公開（オープンソース）されています。
こんな人に：Google のサービスをよく使う人
Cursor の AI を、ターミナルから使えるようにしたもの。
こんな人に：Cursor に慣れて、サーバーでも同じように使いたい人
C. アプリ生成型 ― ブラウザだけで、すぐ形になる
インストール不要。Web サイトを開いて「こんなアプリがほしい」と書くだけで、画面や仕組みを作り、そのまま公開までできます。
Vercel 社のサービス。おしゃれな画面づくりが得意で、そのまま公開できます。
こんな人に：画面のデザイン案をすぐ見たい人
ブラウザの中で、アプリを作って動かせます。
こんな人に：アイデアをとにかく早く形にしたい人
プログラミングをしない人向け。ログイン機能やデータの保存がある本格的なアプリも作れます。
こんな人に：会員サイトや予約サイトなどを試しに作りたい人
ブラウザ上に開発環境があり、AI に頼んで作って、そのまま公開まで行えます。
こんな人に：パソコンに何もインストールしたくない人
Google の AI を試せる場所。簡単なアプリの試作もできます。
こんな人に：Google の AI を気軽に試したい人
デザインツール Figma の中で、デザインから動く試作品を作れます。
こんな人に：デザイナー、Figma を使っている人
アプリ生成型は手軽ですが、作ったものが大きくなると、中身が分からず直せなくなりがちです。お客さんに使ってもらう本番のサービスにするなら、詳しい人に見てもらいましょう。
D. クラウド型エージェント ― 任せて、届くのを待つ
仕事を頼むと、インターネットの向こう側（クラウド）で AI が作業して、終わったら「できました、確認してください」と届けてくれます。その間、自分は別のことができます。
Cursor から仕事を投げて、クラウドで進めてもらえます。いくつも同時に頼めます。
こんな人に：Cursor に慣れて、もっと速く進めたい人
GitHub に「やることリスト」（Issue）を書いて AI に割り当てると、作業して提出してくれます。
こんな人に：GitHub でチーム開発している人
ChatGPT の画面から、作業を頼んでおけます。
こんな人に：ChatGPT をよく使う人
Jules は Google、Devin は Cognition 社のもの。どちらも、頼んだ仕事を自分で進めてくれる「AI のエンジニア」をうたっています。
こんな人に：開発チームで、細かい作業をまとめて任せたい人
届いたものは必ず確認します。届け方は多くの場合「PR（プルリクエスト）」という形で、「この変更を取り込んでいいですか？」というお伺いです。OK なら取り込み、ダメなら断るだけなので、元の作品は壊れません。
E. AI レビュー ― 提出物をチェックしてくれる先生
作ったもの（主に PR）を AI が読んで、「ここ、間違ってない？」とコメントしてくれます。
変更の中のバグ（不具合）を見つけることに特化しています。
GitHub 上で、人に頼むのと同じように AI をレビュー担当に指定できます。
変更の要約と、行ごとの細かいコメントをつけてくれます。
AI の先生も見落とします。人のチェックの代わりではなく、「もう一人の目」として使います。
F. ローカル AI ― 自分のパソコンだけで動く
AI を自分のパソコンの中で動かします。作ったものや情報がインターネットに出ていかないのが最大の特徴です。
コマンド1つで、公開されている AI をパソコンにダウンロードして動かせます。
画面の操作だけで、AI のダウンロードと実行ができます。
性能の高いパソコンが必要です。また、クラウドの最新 AI に比べると賢さは劣ります。社外に出せない情報を扱うときの選択肢です。
おまけ：AI に「道具」を持たせる MCP（エムシーピー）
A や B の AI に、ほかのサービスをつなげる仕組みです。スマホにアプリを追加するようなイメージです。
- Figma をつなぐ → デザインを見て、そのとおりのページを作ってくれる
- ブラウザをつなぐ → 作ったページを AI が自分で開いて、表示を確かめてくれる
- GitHub をつなぐ → やることリストを読んで作業してくれる
- Notion や Slack をつなぐ → 書いてある仕様や会話を読んで作業してくれる
つなぐと、AI がそのサービスを操作できるようになります。大事なアカウント（お店の本番の管理画面など）はつながないようにしましょう。
結局、どれを選べばいい？
| あなたは… | おすすめ |
|---|---|
| はじめて AI で何か作ってみたい | A の Cursor（この講座）か、C の v0 / Bolt / Lovable |
| インストールなしで、今日すぐ試したい | C の アプリ生成型 |
| 仕事で、ちゃんと長く使うものを作りたい | A の AI エディタ（Cursor か Copilot） |
| 会社で GitHub を使っている | A の GitHub Copilot |
| 黒い画面にも慣れてきた／サーバーで作業する | B の Claude Code など |
| 小さな仕事をまとめて任せたい | D の クラウド型エージェント |
| 会社の秘密の情報を扱う | F の ローカル AI、または会社向けの契約プラン |
迷ったら：まずは Cursor を1つ使えるようになれば十分です。ほかの道具は「こんなことがしたい」と思ったときに、この図鑑に戻ってきて選びましょう。
4準備しよう（インストール）
所要時間は 20〜30分です。
1Cursor を入れる
- ブラウザで cursor.com を開く
- 「Download」ボタンを押して、インストーラーをダウンロード
- ダウンロードしたファイルを開いて、画面の案内どおりに進める
- 起動したら、アカウントを作ってログイン（無料プランで始められます）
- 最初の設定画面は、基本的にそのまま「次へ」で OK。言語の設定で日本語を選べる場合は選ぶ
Cursor が起動して、空っぽの画面が表示される。
2Git を入れる
Windows の場合： git-scm.com から「Download for Windows」でダウンロードしてインストール。途中の質問は、全部そのまま「Next」で大丈夫です。
Mac の場合： アプリの「ターミナル」を開いて git --version と打って Enter。入っていなければ「インストールしますか？」と出るので、「インストール」を押します。
ターミナルで git --version と打つと、git version 2.xx.x のように表示される。
3作業用のフォルダを作る
- デスクトップなど分かりやすい場所に、
my-first-siteという名前のフォルダを作る（名前は半角英数字がおすすめ） - Cursor のメニューから「File → Open Folder」（フォルダを開く）を選び、今作ったフォルダを開く
Cursor の左側に「MY-FIRST-SITE」のようにフォルダ名が表示される。
4AI と話す画面を開く
Cursor の右側にある AI のパネルを使います。表示されていなければ、Ctrl + I（Mac は Cmd + I）で開きます。
パネルの下のほうに、モードを選ぶところがあります。
| モード | どんなとき |
|---|---|
| Agent（エージェント） | 作ってほしい・直してほしいとき。AI が実際にファイルを作ります |
| Ask（アスク） | 質問だけしたいとき。ファイルは変わりません |
| Plan（プラン） | 大きめのものを作る前に、作戦を立ててほしいとき |
パネルに文字を打ち込める状態になっている。
ボタンの名前や場所は、Cursor のバージョンによって少し変わることがあります。
5はじめてのページを作ろう
自己紹介ページを作ります。下の青い枠の文章を、そのまま（または自分用に少し変えて）AI に打ち込んでください。
1まずセーブの準備をする
Agent モードで、こう打ち込みます。
AI がターミナルでコマンドを実行してよいか聞いてきたら、内容を見て「実行（Run）」を押します。
AI から「Git を初期化して、コミットしました」のような説明が返ってくる。
初回は Git に「名前とメールアドレス」の設定が必要なことがあります。AI が聞いてきたら、自分の名前とメールアドレスを伝えて設定してもらいましょう。
2ページを作ってもらう
AI がファイルを作ると、変更された部分が色付きで表示されます。「Keep（残す）」と「Undo（取り消す）」のようなボタンが出たら、中身を見てから「Keep」を押します。
左側のファイル一覧に index.html と style.css ができている。
3ブラウザで確かめる
パソコンのフォルダ（エクスプローラーや Finder）で my-first-site を開き、index.html をダブルクリックします。ブラウザでページが開きます。
スマホでの見え方も確かめましょう： ブラウザで F12（Mac は Cmd + Option + I）を押すと開発者ツールが出ます。スマホの形のアイコンを押すと、スマホの画面幅で表示できます。
自分の名前と好きなものが、ベージュ系の色で表示されている。
4直してもらう（1回に1つずつ）
気になるところを、1つずつお願いします。
直ったらブラウザを再読み込み（F5 / Mac は Cmd + R）して確かめます。
お願いしたところだけが変わっている。
5差分を見る
Cursor の左側にある「ソース管理」（枝分かれしたようなアイコン）を開くと、前回のセーブから変わったファイルが並びます。ファイル名を押すと、変更前と変更後が並んで表示されます。
- 緑の行：追加されたところ
- 赤の行：消されたところ
全部を理解できなくても大丈夫です。「お願いしていないファイルが変わっていないか」だけは見ましょう。分からない部分は、Ask モードでこう聞けます。
6セーブする（コミット）
うまくいったら、セーブします。方法は2つあります。
ボタンでやる： ソース管理の画面で、上の入力欄に「名前を大きくした」のようにメモを書いて、「Commit（コミット）」ボタンを押す。
AI に頼む：
ソース管理の画面から、変更ファイルの一覧が消える（全部セーブされた）。
7わざと失敗して、元に戻してみる
大事な練習です。わざとあいまいなお願いをしてみましょう。
思ってもいない変更がたくさん入るはずです。気に入らなければ、元に戻します。
ブラウザを再読み込みすると、さっきセーブしたときの見た目に戻っている。
これが「こまめにセーブする」理由です。セーブしてあれば、AI がどんなに暴走しても怖くありません。
6上手なお願いのしかた
AI は、あなたの頭の中を知りません。「新しく来たアルバイトさんに、メモで仕事を頼む」つもりで書くとうまくいきます。
お願いの「型」
迷ったら、この4つを埋めてください。
| 項目 | 書くこと | 例 |
|---|---|---|
| なにを | 作るもの・直すもの | お問い合わせボタンを追加して |
| どこに | 場所・ファイル | ページのいちばん下に |
| どんなふうに | 見た目・条件 | オレンジ色で、角を丸く |
| どこまで | 変えてはいけないところ | ほかの部分は変えないで |
よくある失敗と、こう直す
「いい感じにして」
「見出しの文字を太くして、上下の余白を広げて」
「デザインを全部変えて、写真も入れて、メニューも作って」
「まずメニューだけ作って」→ 確かめてセーブ → 次をお願い
「動かない」
「ボタンを押しても何も起きない。押したときに出たエラーはこれ：（エラーの文章を貼る）」
「右のほうがなんか変」
画面のスクリーンショットを貼って「赤丸のところが、スマホで右にはみ出る」
覚えておくと便利なひとこと
| こんなとき | こう言う |
|---|---|
| 勝手に変えられたくない | 「〇〇以外は変えないで」 |
| 先に作戦を聞きたい | 「まだ作らないで。どうやって作るか、先に教えて」 |
| 中身を知りたい | 「このコードを、初心者向けに説明して」 |
| 選択肢がほしい | 「やり方を3つ出して、それぞれの良いところと悪いところを教えて」 |
| ちゃんと確かめてほしい | 「終わったら、ちゃんと動くか確認してから教えて」 |
| 話がこじれてきた | 新しいチャットを開いて「今こういう状態。次にこれをしたい」と伝え直す |
7困ったときは
クリックすると答えが開きます。
エラーが出た。英語で読めない
読めなくて大丈夫です。エラーの文章を全部コピーして、AI にこう伝えます。
画面が真っ白になった／表示がめちゃくちゃになった
直前のお願いが原因のことが多いです。まず「最後にコミットした状態に戻して」と頼みましょう。戻ったら、さっきのお願いをもっと小さく、具体的にして頼み直します。
AI が同じ失敗を何度もくり返す
3回直してもダメなら、いったん止まりましょう。
- 最後にセーブした状態に戻す
- 新しいチャットを開く（右上の「＋」など）
- 「今こういう状態で、こうしたい。前にこういうやり方で失敗した」と伝え直す
会話が長くなりすぎると、AI は最初のほうの話を忘れがちです。仕切り直すと、あっさり解決することがよくあります。
お願いしていないところまで変わった
「Undo（取り消す）」を押すか、「〇〇の変更だけ元に戻して」と頼みます。次からは「〇〇以外は変えないで」と書き添えましょう。
AI は「できました」と言うのに、できていない
よくあることです。AI の「できました」は信じすぎないのがコツ。必ずブラウザで確かめて、できていなければ「まだ〇〇が△△のままになっている」と、見たままを伝えます。
直したのに、ブラウザの表示が変わらない
- ファイルが保存されているか確認（Cursor のタブに ● が付いていたら未保存。
Ctrl + S/Cmd + Sで保存） - ブラウザを強制再読み込み（
Ctrl + Shift + R/ Mac はCmd + Shift + R） - 別のフォルダの
index.htmlを開いていないか確認
何をしたのか分からなくなった
Ask モードでこう聞きます。
AI が「このコマンドを実行していいですか？」と聞いてくる。押していいの？
何をするコマンドか分からなければ、押す前に「このコマンドは何をするの？」と聞きましょう。特に rm（削除）、sudo（管理者権限）、--force（強制）が含まれていたら要注意です。
8やってはいけない5つのこと
1パスワードや API キーを AI に貼らない
チャットに貼った時点で、外のサーバーに送られています。うっかり貼ってしまったら、そのパスワードやキーはすぐに変更しましょう。
2セーブせずに大きなお願いをしない
AI はときどき、たくさんのファイルを一気に書き換えます。セーブしていないと、元に戻せなくなります。「お願いする前にセーブ」を習慣にしましょう。
3動いているお店のサイト（本番）をいきなり AI に触らせない
練習用のコピーで試して、うまくいってから本番に反映します。お客さんが見ているページが壊れると、取り返しがつきません。
4分からないまま公開しない
特に、ログイン、お問い合わせフォーム、お金のやりとりなど「人の情報」を扱う部分は、AI が穴だらけのものを作ることがあります。詳しい人に見てもらってから公開しましょう。
5会社や他人のデータを勝手に AI に入れない
仕事で使うときは、会社のルールを先に確認します。お客さんの名前や連絡先などの個人情報は、AI に入れてはいけません。
9インターネットに公開しよう
作ったページは、今はあなたのパソコンの中にしかありません。無料のサービスを使うと、URL をつけて誰でも見られるようにできます。
| サービス | やり方のイメージ | むずかしさ |
|---|---|---|
| Netlify（ネットリファイ） | アカウントを作り、フォルダをブラウザにドラッグ＆ドロップするだけ | かんたん |
| GitHub Pages | GitHub にファイルを置いて、設定で公開をオンにする | ふつう |
| Vercel（ヴァーセル） | GitHub とつないで、更新するたびに自動で公開 | ふつう |
やり方が分からなければ、AI に聞きましょう。
公開したページは世界中の誰でも見られます。本名、住所、電話番号など、見られて困る情報は載せないでください。
10次のステップ
ここまでできたら、AI 開発の基本はばっちりです。次はこんなことに挑戦してみましょう。
- ページを増やす：「プロフィール」「作品紹介」などのページを追加して、メニューでつなぐ
- 動きをつける：ボタンを押したら何かが表示される、など（JavaScript という言葉を使います）
- ルールを書く：毎回言っていること（「色はベージュ系」「ほかは変えないで」など）を
AGENTS.mdというファイルに書いておくと、AI が毎回読んでくれます - GitHub を使う：作ったものをインターネット上に保管して、ほかの人と共有する
この講座のふりかえり
- AI は「手の速いアシスタント」、自分は「現場監督」
- お願いは「なにを・どこに・どんなふうに・どこまで」
- 1回に1つずつお願いして、必ずブラウザで確かめる
- うまくいったらセーブ（コミット）、ダメなら戻す
- パスワードや個人情報は AI に渡さない
ツールの画面やボタンの名前は、バージョンによって変わることがあります。見つからないときは、AI に「〇〇はどこにある？」と聞いてみてください。