VIBECODING
言葉で、Webを作る。
コードを一行も書かずに、プロ品質のWebサイトを作り上げる。
AIへの「伝え方」ひとつで、出来上がりは劇的に変わります。
5つの実案件に挑み、バイブコーディングの技術を体に刻みましょう。
コードを書かずに、
Webを作る。
バイブコーディングとは、AIに自然言語で指示を出し、 Webサイトやアプリケーションを作る手法です。 従来のコーディングでは、HTML・CSS・JavaScriptの文法を覚え、 一文字ずつコードを書く必要がありました。 バイブコーディングでは「何を作りたいか」を言葉で伝えるだけ。 AIがあなたの意図を汲み取り、コードを生成します。
BEFORE
HTML構文を覚える → CSSでスタイリング → JSで動きをつける → デバッグ → 完成
AFTER
要件を言葉で伝える → AIが生成 → 確認・修正指示 → 完成
なぜ今、
バイブコーディングなのか
制作スピードが圧倒的に速い
従来なら数日かかるLPが、わずか数時間で完成します。クライアントへの初稿提出が劇的に早くなり、競合との差をつけられます。スピードは、フリーランスの最強の武器です。
デザインも実装も一気通貫
デザインカンプを作って、それをコードに起こして、という二重作業が不要になります。AIに伝えれば、デザインとコードが同時に生まれる。ワンストップで完結する新しいワークフローです。
修正や調整が会話で完結
「余白をもう少し広げて」「色をもう少し暖かく」。そんな修正が、コードを書き直すことなく、会話だけで完了します。クライアントからのフィードバック対応が圧倒的に楽になります。
道具を選ぶ。
バイブコーディングを始めるための道具たちです。 それぞれに得意分野があります。まずは一つ触ってみましょう。
Cursor
エディタ統合型のAIコーディング
VS Codeベースのエディタに AI が統合。既存コードへの差分編集が得意で、プロジェクト全体を理解した提案をしてくれます。
Try it →AIに伝わる書き方
プロンプトは、AIへの「依頼書」です。 伝え方ひとつで、出力の品質は天と地ほど変わります。
目的を明確に書く
「カフェのLP」ではなく「新規オープンするカフェの、スマホ対応ランディングページ」。何を作るのか、一文で伝わるように書きましょう。
前提条件を伝える
ターゲット層、業種、ブランドの雰囲気。AIはあなたのビジネスを知りません。背景情報があるほど、的確な出力が返ってきます。
期待する出力形式を指定
「HTML/CSSで」「React/Tailwindで」「1ファイルで完結させて」。出力形式を指定しないと、AIが勝手に判断してしまいます。
具体例を添える
色コード、フォント名、メニューの品数と価格。具体的なデータがあるほど、AIは正確に動きます。曖昧さは品質の敵です。
制約や禁止事項も明示
「原色は使わない」「ビジネスっぽくしない」。やってほしくないことを書くと、手戻りが劇的に減ります。
短すぎず、長すぎず。
プロンプトの長さは、タスクの複雑さに合わせて調整します。
向いてる場面
簡単な修正、色の変更、テキスト差し替え、軽い質問
注意点
情報不足で意図と違う出力になりやすい。修正前提で使いましょう。
向いてる場面
1つのコンポーネント生成、セクション追加、機能実装
注意点
要件を箇条書きにすると伝わりやすいです。デザインの「雰囲気」も添えると精度が上がります。
向いてる場面
ページ全体の生成、複雑な要件、複数セクションの一括作成
注意点
セクション構成、配色、フォント、レスポンシブ要件まで網羅的に。「避けてほしいもの」も必ず記載しましょう。
プロンプトは、必要十分が美しい。
結果は、天と地。
同じものを頼んでも、伝え方で結果は劇的に変わります。
カフェのページ作って
カフェのランディングページを作ってください。 店名はCafe Blossom、ピンクベージュ基調、 メニュー4品とアクセス情報を含めて、 スマホ対応でお願いします。
ボタン直して
ヘッダーの「お問い合わせ」ボタンを、 朱赤の背景・白文字・角丸8pxに変更してください。 ホバー時は少し暗くなる動きを追加。
もうちょっと良くして
現在のヒーローセクションの余白を増やし、 タイトルのフォントサイズをモバイルで48pxに、 背景に薄いグラデーションを加えてください。
コピーして、使える。
実際のプロンプト例です。コピーしてそのまま AI に貼り付けてみましょう。
以下の要件で、カフェのランディングページを1枚作成してください。 店名：Cafe Blossom、配色はピンクベージュ #F5DCE0 基調。 おすすめメニュー4品、店舗情報、Googleマップを含めてください。 レスポンシブ対応必須。HTML/CSSで実装してください。
コピーして使える
用途別のプロンプトテンプレート集です。 カスタマイズして使ってください。
ヒーローセクション生成
フォーム生成
ナビゲーション生成
カードグリッド生成
フッター生成
ページ全体生成
段階的に、詰める。
いきなり完璧を狙わない。対話を重ねて、少しずつ完成形に近づけていきます。
最低限の構造だけが出力されます。色も配置もAI任せ。
ピンク系の配色が反映され、雰囲気が出てきました。
メニューセクション、地図エリアが追加されコンテンツが充実。
スマホ表示が最適化され、スクロールアニメーションが動きます。
細部の調整を経て、クライアントに見せられるクオリティに。
完璧を一発で狙うより、対話で詰めていくのがコツです。
NG行動
✕「全部一気にやって」と丸投げする
AIも人間と同じで、整理されたタスクが好きです。一度に全部を頼むと、どこかで品質が落ちます。
→セクションごと、ページごとに分けて指示を出しましょう。
✕「適当に」「いい感じに」しか言わない
AIはあなたの頭の中は読めません。「いい感じ」の定義は人それぞれです。
→配色、フォント、レイアウトなど、具体的に指定しましょう。参考URLを添えるのも効果的です。
✕出力をそのまま信じる
AIは間違えることがあります。特にリンク切れ、レスポンシブ崩れ、アクセシビリティの問題は要注意です。
→必ずブラウザで動作確認しましょう。スマホ表示も忘れずにチェックしてください。
✕同じプロンプトを連打する
同じ指示を繰り返しても、結果はほぼ同じです。AIは別のアプローチを自分では試しません。
→違う角度から指示を変えましょう。具体的なフィードバックを添えてください。
✕AIに頼り切る
AIは強力なツールですが、最終判断はあなた自身がすべきです。デザインの良し悪し、ビジネス的な判断はAIに任せられません。
→自分の判断軸を持ちましょう。AIは「道具」であり、「答え」ではありません。
AIとの対話フロー
対話はキャッチボールです。一発で完成を期待せず、やりとりを重ねましょう。
要件整理
何を作るか、誰のためか、どんなデザインか。まず自分の頭を整理しましょう。
初期プロンプト
整理した要件をプロンプトに落とし込みます。構成・配色・フォントなど具体的に。
出力確認
AIの出力をブラウザで確認します。意図通りか、崩れはないか、丁寧にチェック。
修正指示
「ここをこう変えて」と具体的にフィードバック。曖昧な指示は避けましょう。
再出力
AIが修正を反映した新しい出力を返します。再度確認しましょう。
完成
納得のいくクオリティになったら完成です。最終チェックを忘れずに。
要件整理
何を作るか、誰のためか、どんなデザインか。まず自分の頭を整理しましょう。
初期プロンプト
整理した要件をプロンプトに落とし込みます。構成・配色・フォントなど具体的に。
出力確認
AIの出力をブラウザで確認します。意図通りか、崩れはないか、丁寧にチェック。
↺ Step 3〜5 を繰り返す修正指示
「ここをこう変えて」と具体的にフィードバック。曖昧な指示は避けましょう。
再出力
AIが修正を反映した新しい出力を返します。再度確認しましょう。
完成
納得のいくクオリティになったら完成です。最終チェックを忘れずに。
対話はキャッチボール、即完成は期待しない。
知っておきたい、用語たち。
バイブコーディングを学ぶ上で、押さえておきたい基本用語です。
AIに自然言語で指示を出し、コードを書かずにWebサイトやアプリを作る手法です。「雰囲気（vibe）で伝えてコーディングする」ことからこの名がつきました。
AIに対する指示文のことです。プロンプトの質が、出力の質を決めます。具体的で構造化されたプロンプトほど、良い結果が得られます。
AIが参照する文脈情報のことです。過去の会話内容や添付ファイルなど、AIが「知っている」情報の全体を指します。
AIが事実でない情報をあたかも正しいかのように生成する現象です。存在しないURLやライブラリを提案することがあるので、必ず検証しましょう。
Large Language Modelの略。大量のテキストデータで訓練された AI モデルで、ChatGPTやClaudeの基盤技術です。
AIが自律的にタスクを実行する仕組みです。単なる質問応答ではなく、ツールを使って複数のステップを自動で進めます。
繰り返し改善のサイクルのことです。バイブコーディングでは、プロンプト→出力→修正→再出力のイテレーションを重ねて品質を上げます。
AIがテキストを処理する最小単位です。日本語の場合、1文字が1〜3トークン程度になります。入出力のトークン数が料金に影響します。
既存のAIモデルを特定のタスクやデータに合わせて追加学習させることです。特定の文体やフォーマットに特化させることができます。
Retrieval-Augmented Generationの略。外部のデータベースやドキュメントを検索して、その情報を元にAIが回答を生成する手法です。
5つの実案件
実際にクラウドワークスで見かける案件を模した5つの模擬課題に挑戦します。 難易度順に取り組んで、実案件レベルのスキルを身につけましょう。
5課題を、やり切ったら。
5つの模擬案件をすべて完成させたら、 講師に完成報告をしてください。 あなたの成長を、一緒に確認しましょう。
講師に報告する
完成したら、グループで報告してください：
- ▸各課題のサイトURL（Vercelなどでデプロイ推奨）
- ▸GitHubリポジトリURL
- ▸使用したプロンプトの要約
- ▸制作を通じて学んだこと、工夫した点
講師が確認後、フィードバックをお返しします。