このガイドについて
プログラミングの経験がなくても、Claude と一緒に業務アプリを作り、直せるようになるためのガイドです。
バイブコーディングとは
バイブコーディング（vibe coding）は、作りたいものを言葉で伝えて、AI にアプリを作ってもらう進め方です。このプラットフォームでは、AI として Claude Code を使います。コードを書くのも、細かい技術的な作業をするのも Claude です。
あなたの役割は、何を作りたいかを伝えることと、できあがったものを確かめることです。コードを読んだり、コマンドを覚えたりする必要はありません。
あなたがやることは3つ
- Claude に頼む — このガイドにある依頼文をコピーして、Claude Code に貼り付けます。
- 画面で確かめる — Claude が、変更したアプリをあなたのパソコンの中で開いて見せます。実際にさわって確認します。
- GitHub でマージする — 問題がなければ、ボタンを押して本番に反映します。
それ以外の作業は、Claude か管理者が行います。
登場するもの
| 名前 | 役割 |
|---|---|
| あなた | 作りたいものを伝え、できあがりを確かめ、本番に出すかどうかを決めます |
| Claude Code | あなたの依頼を受けて、アプリを作り、直します。Claude デスクトップアプリの中にあります |
| GitHub | アプリの設計図にあたるコードを保管する場所です。変更の確認とマージはここで行います |
| Claude が開く画面 | 変更を本番に出す前に、あなたのパソコンの中で試せる画面です。入っているのは、架空のテストデータです |
| プレビュー | 実際のデータで試したいとき、ほかの人に見せたいときに使う、インターネット上のお試し用の環境です。Claude に頼んだときだけ用意されます |
| App Portal | 本番のアプリの入り口です。できあがったアプリは App Portal から開きます |
| 管理者 | アカウントの発行や、アプリを開ける人の設定など、あなたや Claude にはできない設定を行う人です |
Claude に頼めること、管理者に頼むこと
Claude には、たとえば次のようなことを頼めます。
- 新しいアプリを作る
- 画面の文言、色、並び順を変える
- 入力項目や、一覧、検索、集計などの機能を足す
- 不具合を直す
次のようなことは、管理者に頼みます。
- アプリを開ける人を増やす、役割ごとに使える機能を分ける
- パスワードや API キーなど、秘密の値が必要な設定
- 本番のデータを直接直す、アプリを止める、削除する
くわしくは 管理者に頼むこと にまとめています。
5つの約束
- 1回の依頼では、1つのことだけを頼む。 いくつも混ぜると、確認が難しくなります。
- 作業の前に、Claude に計画を説明してもらう。 分からなければ、分かるまで質問します。
- 画面を自分の目で確かめてから、マージする。
- チェックに赤い × があるときは、マージしない。
- パスワードなどの秘密の値は、Claude との会話に書かない。 必要になったら管理者に頼みます。
読む順番
| やりたいこと | 読むページ |
|---|---|
| はじめて使う | セットアップ（Mac） または セットアップ（Windows） |
| 全体の流れを知りたい | 基本の流れ |
| 文言や表示を少し直したい | 小さな変更 |
| 新しいアプリを作りたい | 新しいアプリを作る |
| いくつかの画面にまたがる機能を足したい | 大きめの機能 |
| Claude が変更を作り終えた | 確認してマージする |
| うまくいかない | うまくいかないとき |
| 言葉の意味が分からない | 用語集 |
クイズ
Quiz
このプラットフォームで、あなた自身が行う作業はどれですか？
次のステップ
まだ準備ができていない場合は、セットアップ（Mac） または セットアップ（Windows） に進みます。準備が済んでいる場合は、基本の流れ に進みます。