バイブコーディングの始め方|AIツールの選び方と最初のセットアップ【入門2】

バイブコーディング

バイブコーディングの始め方|AIツールの選び方と最初のセットアップ【入門2】

「で、結局どのAIを使えばいいの?」。始めようとした人が最初に立ち止まるのが、この道具選びだ。種類が多すぎて、選ぶだけで疲れてしまう。安心してほしい。最初に必要な道具は、たった1つ。この記事の通りに5分で準備すれば、もう次の記事から“作る”側に回れる。

まず結論:最初はブラウザのAIチャット1つでいい

いきなり高機能なツールを入れる必要はない。最初の1本は、ブラウザで使えるAIチャット(Claude・ChatGPT・Gemini など)だけで作れる。インストールも、難しい設定もいらない。アカウントを作って話しかけるだけだ。

「環境構築でつまずいて、作る前に挫折する」。これが未経験者が最初に脱落する一番の原因だ。だからこそ、最初は一番ハードルの低い道具で“作る体験”をしてしまうのがいい。

4つのAIツール、どれを選ぶ?

代表的な4つを、初心者目線で比べておく。迷ったら一番上の Claude で始めれば間違いない。比較記事を読み込みすぎて最初の一歩が遅れるのは、よくある転び方だ。この4つはどれを選んでも本シリーズの手順はそのまま進められるので、道具の差より「今日アカウントを作って話しかけたかどうか」の差の方が、1か月後には遥かに大きい。

  • Claude(Anthropic) … コードを書くのが得意で、説明も丁寧。未経験者の最初の相棒として一番おすすめ。無料でも試せる。
  • ChatGPT(OpenAI) … 知名度No.1で情報も豊富。Claudeと使い心地は近い。どちらを選んでも作れる。
  • Gemini(Google) … Googleアカウントですぐ使え、無料でも高機能。普段からGoogleをよく使う人に馴染みやすい。Claude・ChatGPTと並ぶ有力な選択肢だ。
  • Cursor … AIが組み込まれた“コードエディタ”。少し本格的なので、シリーズを一周して慣れてからで十分。

「無料と有料、どっち?」の答えは、まずは無料で始めていい。物足りなくなったら、月20ドル前後の有料プランにすると、長いコードも安定して書けるようになる。最初から課金する必要はない。

「チャット」と「エディタ」は、そもそも役割が違う

上の4つは、実は2種類に分かれる。Claude・ChatGPT・Gemini は会話の道具(チャット)で、Cursor は作業机ごとAI化した道具(エディタ)だ。例えるなら、チャットは「電話で相談できる大工さん」、エディタは「大工さんが常駐している工房」。電話の大工さんには、設計図(コード)を読み上げてもらって自分でメモ(ファイル保存)する手間があるが、始めるのは一瞬。工房は手間が消える代わりに、工房そのものの使い方を覚える必要がある。

未経験者が最初に必要なのは、相談相手であって工房ではない。だからこのシリーズは「まずチャット1つ」から始める。この区別を知っておくと、ネットで「Cursorが最強」のような記事を見ても、「それは工房の話で、自分はまだ電話で足りる段階」と落ち着いて判断できる。

例えば、登録後の30分はこう使う

アカウントを作った日に、何をすればいいか。おすすめの流れを1つ示しておく。

  1. 最初の10分:仕事や趣味の質問を2〜3個、普通に聞いてみる。「AIと話す」こと自体に慣れるのが目的で、内容は何でもいい。
  2. 次の10分:「プログラミング未経験の私が、AIと一緒に小さなアプリを作ろうとしています。どんな心構えでいればいいですか?」と聞く。返ってきた答えが、あなた専用の入門ガイダンスになる。
  3. 最後の10分:作ってみたい物を思いつくまま3つ挙げて、「この中で一番かんたんなのはどれ?」と相談する。次の記事(入門3)の予行演習になる。

この30分で、「AIに話しかけるハードル」はほぼ消える。道具の準備とは、結局この心理的ハードルを下げる作業でもある。

アカウントを作ったら、2つだけ守る

  • パスワードを使い回さない … AIチャットには、あなたの相談内容が蓄積されていく。他サービスと同じパスワードにしない。ブラウザのパスワード保存機能に任せれば、覚える必要もない。
  • 仕事の秘密や個人情報を貼らない … 会社の内部情報や他人の個人情報は、チャットに貼らないのが原則だ。このシリーズで作る「自分用の小さな道具」の範囲なら、心配する場面はほぼ無い。

5分でできる、最初のセットアップ

やることは本当にこれだけだ。

  1. claude.ai を開き、メールアドレス(またはGoogleアカウント)で登録する。
  2. ログインしたら、チャット欄が出る。ここがあなたの“作業場”になる。
  3. 試しに「プログラミング未経験です。これからあなたと一緒に小さなアプリを作りたいです。よろしくお願いします」と打ってみる。
  4. AIが優しく応えてくれたら、準備完了だ。

これで道具はそろった。インストールも、黒い画面も、まだ一切いらない。5分で終わった人は、そのまま最初のひと言まで打ってしまうのがおすすめだ。

登録でつまずきやすい2か所

  1. 確認メールが届かない … まず迷惑メールフォルダを見る。無ければ登録画面の「再送信」を1回だけ押して数分待つ。連打すると、かえって届きにくくなることがある。
  2. 電話番号の認証(SMS) … サービスによっては携帯番号の確認を求められる。届いた数字を入力するだけで、電話がかかってくるわけではない。自分の番号で登録すれば数十秒で終わる。

登録後にもう1つだけ。無料プランには利用回数の上限があり、混み合う時間帯は制限が厳しくなることもある。上限に当たっても翌日には回復するので、「今日はここまで」と割り切ればいい。気になるなら Claude・ChatGPT・Gemini を全部登録しておくと、片方が止まってももう片方で続きができる。登録は全部無料だ。

スマホだけでも始められる?

AIとの会話だけなら、スマホで十分できる。作りたい物の相談(入門3)までは、通勤中や寝る前のスマホで進めて構わない。ただし、この先の「コードをファイルに保存してダブルクリックで動かす」(入門4)は、画面の広さとファイル操作のしやすさでパソコンの方が圧倒的に楽だ。相談はスマホ、作る作業はパソコン、と分担するのが現実的な落としどころになる。

2つ目の道具を足すタイミング

Cursor のようなAIエディタは強力だが、最初に入れると設定の壁で止まりがちだ。目安は「ブラウザのチャットで2〜3本作って、コードのコピペの往復が面倒になってきたとき」。物足りなさを感じてから足せば、道具の価値も体感で分かる。道具選びに正解を求めすぎなくていい。どれで始めても、作りながら乗り換えられる。

環境まわりの、よくある質問

  • 「MacとWindows、どっちがいい?」 … どちらでもいい。AIチャットはブラウザで動くので、OSの差はほぼ出ない。このシリーズの手順で違うのは「メモ帳」か「テキストエディット」かくらいだ。
  • 「会社のパソコンでやっていい?」 … 私物の学習なら自宅のパソコンを勧める。会社の端末はソフトやサイトの利用ルールがあることが多く、仕事の情報をAIに貼る事故も起きやすい。切り分けておくのが無難だ。
  • 「子どもと一緒にやれる?」 … やれる。日本語で頼んで動く物が出てくる体験は、子どもにこそ刺さる。ただしAIサービスには年齢の利用条件がある(各社の規約で最低年齢や保護者の同意が定められている)。アカウントは大人の物を使い、操作も大人が行って、子どもは隣で画面を見ながらアイデアを出す役に回ってもらう形が安全だ。使う前に各サービスの現行規約を確認してほしい。
  • 「タブレットは?」 … スマホと同じ扱いになる。AIとの会話は快適だが、ファイルの保存・ダブルクリックの工程はパソコンの方が楽だ。

「作ったものを動かす場所」は、後で考えればいい

もう少し本格的に作り込む段階になると、自分のパソコンに開発環境(Python など)を入れたり、作ったものをネットに公開するサーバードメインが必要になる。でもそれはこのシリーズの最後(公開編)で扱う話。今は気にしなくていい。「最初の1本を動かすまで」は、ブラウザのAIチャットだけで完結する。


👉 前へ: 【入門1】バイブコーディングとは ・ 次へ: 【入門3】AIに「作りたい」を伝える3つのコツ記事一覧

バイブコーディングとは?プログラミング未経験が最初に知っておきたい全体像【入門1】バイブコーディングとは?プログラミング未経験が最初に知っておきたい全体像【入門1】前のページ

AIに「作りたい」を正しく伝える3つのコツ|プロンプト入門【入門3】次のページAIに「作りたい」を正しく伝える3つのコツ|プロンプト入門【入門3】

ピックアップ記事

  1. 競艇予想AIの作り方 — LightGBMで「当たる順位」を学習させる実装ガイド…

  2. Claude Mission Control の作り方 — Tauri+Pyth…

  3. 高精度OCRデスクトップアプリの作り方 — PaddleOCR-VLとPyIns…

  4. New Eden Intelligence Hub の作り方 — EVE Onl…

関連記事

  1. バイブコーディングとは?プログラミング未経験が最初に知っておきたい全体像【入門1】

    バイブコーディング

    バイブコーディングとは?プログラミング未経験が最初に知っておきたい全体像【入門1】

    コードを1行も書けなくても、日本語でAIに頼むだけで“動くアプリ”が作…

  2. 都市開発シミュを作る⑤|「面白くない」を目標・施設・イベント・音の4軸で解消【Aurum City制作】

    アプリの作り方

    都市開発シミュを作る⑤|「面白くない」を目標・施設・イベント・音の4軸で解消【Aurum City制…

    「面白くない」を4軸(目標・打ち手・変化・音)で解消する。都市ランクと…

  3. 都市開発シミュを作る③|需要・成長・経済の決定論シミュレーション(MVP完成)【Aurum City制作】

    アプリの作り方

    都市開発シミュを作る③|需要・成長・経済の決定論シミュレーション(MVP完成)【Aurum City…

    需要・成長・経済で街を動かす決定論シミュレーションの作り方。種から回す…

  4. ブラウザで動く都市開発シミュを作る①|React+TypeScript+Canvasの土台と3レイヤ設計【Aurum City制作】
  5. はじめての“動くアプリ”を1本作る|メモ帳をステップバイステップで【入門4】

    バイブコーディング

    はじめての“動くアプリ”を1本作る|メモ帳をステップバイステップで【入門4】

    コードを1行も書かず、AIに頼んで出てきたHTMLを保存・ダブルクリッ…

  6. 背景除去アプリを作る⑥|QGraphicsViewズーム・スポイト・QThread非同期・D&D一括処理【背景除去Studio制作】

注目

AIで、ここまで作れる

AIで作った2D RPGを、ブラウザでそのまま遊べます。その「作り方=最後まで完成させる進め方」も実例つきで公開中。

▶ ゲームを遊ぶやり方を読む

PR

お名前.com 独自ドメイン取得(PR)

独自ドメイン:お名前.com(本サイトで使用・PR)

  1. AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレクトまで

    アプリの作り方

    AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレク…
  2. JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(localStorage)【Archipelago Saga制作】

    アプリの作り方

    JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(loc…
  3. AI・テック動向

    Claude Code 2.1.219 でサブエージェントが深さ3までネスト可能…
  4. WorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束ねる Electron 製の開発司令塔

    アプリの作り方

    WorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束…
  5. Dependabot が既定3日のクールダウンを導入 — 「切る前に読む」設定と自動マージの組み合わせ方

    AI・テック動向

    Dependabot が既定3日のクールダウンを導入 — 「切る前に読む」設定と…
PAGE TOP

TAG CLOUD

ドラッグで回転・クリックでそのタグの記事一覧へ