初心者向け vibe coding 入門：始め方をステップごとに解説

初心者の vibe coding は、5つのステップに集約されます。アプリを動かしてくれるツールを選ぶ、小さなアプリを普通の言葉で説明する、ユーザーとして試す、修正は一度に一つずつ頼む、動いたら公開する。コードが書けなくても大丈夫です。このチュートリアルでは、実際の最初のプロジェクトを使って各ステップを順に説明し、入力するプロンプトそのものと、ほぼすべての初心者が最初の1週間でやってしまう失敗も紹介します。

先に背景を知りたい方、つまりこの言葉がどこから来たのか、なぜ議論になっているのかを知りたい方は、vibe coding とはをお読みください。このページは実践編です。

始める前に必要なもの

思ったより少なくて済みます。

• vibe coding ツールのブラウザとアカウント。初心者は、ファイルやサーバーを自分で管理することを前提としたコーディングアシスタントではなく、コードの作成、実行、ホスティングまで行ってくれるAIアプリビルダーを選びましょう。
• **小さなアイデア1つ。**あなたの起業アイデアではなく、1人（自分）のためのツールで、画面は1〜2枚です。
• **邪魔されない1〜2時間。**最初のセッションで、進め方のリズムがつかめます。

これだけです。インストールも、プログラミングの講座も、ターミナルも要りません。

初心者はどのツールを選ぶか

ツールそのものより習慣のほうが大事ですが、次の3つはできる必要があります。作りながらライブプレビューを見せてくれること、悪い変更を元に戻せること、共有できるリンクに公開できることです。主な選択肢は、おすすめの vibe coding ツールで率直に比較しています。Mythexもその一つです。チャットでアプリを説明すると、ライブプレビュー付きの本物のフルスタックアプリを作り、アプリが記憶を必要とするときはデータベースを追加し、ワンクリックで公開します。Freeプランはカード不要です。

ステップ1：完成できる最初のプロジェクトを選ぶ

初心者がつまずく原因は、たいてい大きなものを狙いすぎることです。良い最初のプロジェクトは次のようなものです。

• 自分の役に立つので、きちんとテストする気になる。
• 画面が1〜2枚に収まる。
• 自分のデータを少しだけ保存する。
• 決済も、チームも、機微な個人情報もない。

最初のプロジェクトに向くもの：

このチュートリアルの残りでは、読書リストを使います。

ステップ2：最初のプロンプトを書く

最初のメッセージが、すべての土台になります。誰のためのもので、何をして、どんな見た目にするかを書きましょう。短い1段落で十分です。

弱い最初のプロンプト：

本のアプリを作って。

良い最初のプロンプト：

私用の読書リストアプリを作ってください。タイトル、著者、状態（読みたい、読書中、読了）を入力して本を追加できます。本は状態ごとにグループ分けしたカードで、新しいものを先頭に表示してください。本の状態の変更と削除もできます。白い背景とアクセントカラー1色の、すっきりシンプルなデザインにして、スマホでも使えるようにしてください。更新しても本が残るように、データを保存してください。

2つ目が何をしているか見てください。項目、操作、レイアウトを挙げ、初心者がいつも忘れる1つのルール、更新してもデータが残るように保存するを入れています。この一文がないと、多くのツールは完成したように見えても、再読み込みするとすべて忘れてしまうページを作ります。

ほかの出発点は、vibe coding プロンプト集をご覧ください。

迷ったら計画を頼む

どう説明すればいいか分からないときは、作る前にAIに計画を立ててもらいましょう。

何かを作る前に、どんな画面を作り、どんなデータを保存し、私が決めるべきことは何かを、普通の言葉で教えてください。

Mythexでは、これがPlanモードの役割です。エージェントが進め方を示し、ファイルが変更される前にあなたが承認します。

ステップ3：作った人ではなく、ユーザーとしてテストする

プレビューが表示されても、ただ眺めないでください。使ってみましょう。

1. 本を3冊追加します。1冊はとても長いタイトルにします。
2. 状態を変更します。カードは正しいグループに移りますか？
3. ページを更新します。本は残っていますか？
4. タイトルを空にして本を追加してみます。何が起きますか？
5. プレビューをスマホで開くか、ブラウザの幅を狭くします。

おかしい点は、普通の言葉で書き留めましょう。「長いタイトルでカードのレイアウトが崩れる」は完璧なバグ報告です。「壊れてる」ではだめです。

ステップ4：1メッセージにつき1つ直す

やり遂げる人と諦める人を分けるのが、この習慣です。変更を1つ送って確認し、それから次を送ります。

長いタイトル「The Hitchhiker's Guide to the Galaxy: The Complete Trilogy」がカードからはみ出します。長いタイトルは2行に折り返し、それを超える部分は「…」で省略してください。

次に：

タイトルを空のままフォームを送信しても、何も起きずメッセージも出ません。フィールドの下に「タイトルを入力してください」と表示し、本は保存しないでください。

なぜ1つずつなのでしょうか。1つのメッセージで5つの変更を頼むと、AIは4つをうまくこなしても、静かに別の部分を壊すことがあり、どの変更が原因か分かりません。小さなステップなら、元に戻す機能も役に立ちます。変更が1つうまくいかなかったら、その直前のバージョンに戻して、より明確な依頼でやり直せます。

何かが壊れたとき

必ず壊れます。どのビルダーでもエラーは起きます。エラーの文言をそのままコピーするか、何をクリックして何が見えたかを正確に書いて、貼り付けて返しましょう。

カードの削除をクリックすると「問題が発生しました」と表示され、本が残ります。原因を調べて直してください。原因が何だったかも教えてください。

原因を聞くことが大切です。アプリの仕組みが分かるようになり、AIが推測で直すのを防げます。AIで作ったアプリのデバッグ方法でさらに詳しく解説しています。

ステップ5：自分のものにする

動いたら、同じ小さなステップで改良していきます。

• 「読了した本に表示される、1〜5の星評価を追加して。」
• 「カードの上に、タイトルや著者で絞り込める検索ボックスを追加して。」
• 「温かみのあるオフホワイトの背景と、濃い緑のアクセントにして。」
• 「上部に、今年読み終えた本の数のカウンターを追加して。」

どれも、1つで、テストできる変更です。

ステップ6：公開して共有する

必要なことができたら、公開します。Mythexならワンクリックで、どのデバイスでも開ける公開URLが手に入り、友達に送ることもできます。あとで独自ドメインを使いたくなったら、それはProの機能です。独自ドメインの接続方法のガイドで説明しています。

数人の友達を超えて共有する前に、vibe coding は安全？をお読みください。個人の読書リストならリスクは低いです。見知らぬ人が登録してデータを保存するアプリには、先に行うべき確認があります。

初心者が避けたい失敗

• 一度にすべてを頼む。「Goodreadsを作って」と頼むと、見た目は立派でも動作の悪いものができます。まず、役に立つ最小のバージョンから始めましょう。
• **更新してのテストをしない。**再読み込みでデータが消えるのは、初心者が最もよく驚くことです。
• **毎回依頼を一から書き直す。**変えるものと残すものを伝えましょう。「レイアウトはそのままで、色だけ変えて。」
• **「直しました」を信じる。**AIはバグを直したとよく言います。毎回、自分で確認してください。
• **パスワードやAPIキーをチャットに貼る。**アプリが外部サービスのキーを必要とするなら、メッセージやコードではなく、ツールのシークレット設定に入れてください。APIキーを安全に管理する方法をご覧ください。
• **最初のエラーで諦める。**エラーは普通のことです。貼り付けて、原因を聞きましょう。

作りながら学ぶこと

講座は要りませんが、いくつかの考え方を知っておくと、どの依頼も鋭くなります。自分のアプリに当てはめて、AIに説明してもらいましょう。

• **フロントエンドとバックエンド：**訪問者のブラウザで動くものと、サーバーで動くものの違い。（フロントエンドとバックエンド）
• **データベース：**アプリがデータを保管する場所。（データベースとは？）
• **認証：**アプリが相手を誰だと判断する仕組み。
• **シークレット：**アプリが使う、訪問者に絶対に見せてはいけない秘密のキー。

そのためのよいプロンプトは、「私の読書リストが、追加をクリックしてからデータが保存されるまで、どう本を保存するのかを説明して。普通の言葉で、実際のファイルを参照しながら」です。

2つ目と3つ目のプロジェクト

最初のアプリのあとは、少しだけ難しいものを選びましょう。週間グラフ付きの習慣トラッカー。メールが届く予約フォーム。Googleスプレッドシートを読み込む小さなダッシュボードなどです。vibe coding 事例では、実際のアプリの種類とそのプロンプト、うまくいかなかった点を紹介しています。vibe coding でアプリを作る方法では、さらに大きなプロジェクトを、アイデアからユーザーのいる公開アプリまで進めます。

始める準備ができたら、AIアプリビルダーを開き、上の読書リストのプロンプトを貼り付けて、自分のアイデアに合わせて変えてみてください。

よくある質問