𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽
私はコーダーではなく、ライターです。私の技術スキルは、1999年の基本的なHTMLで止まっています。
先週、私は初めての本格的なツールを構築しました。Claudeを使って、MLHのための動作するフォトブースWebアプリを「Vibe Coding」したのです。
非コーダーがいかにしてライブイベント向けの機能的なアプリを構築したのか、そのプロセスをご紹介します。
𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLHは多くのイベントを開催しています。私たちにはブラウザベースのフォトブースが必要でした。
- 参加者が自分のスマホでリンクを開く。
- 自撮りをするか、写真をアップロードする。
- ブランドロゴ入りのフレームを追加する。
- 写真をカメラロールに保存する。
- アカウント登録不要。アプリストアも不要。ただのリンク。
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 最初は複雑なフレームワークを使いたいと考えていました。しかし、Claudeに説得されて断念しました。
ライブイベントにおいては、構成要素が少ないほど有利です。私はツール全体を単一の index.html ファイルで構築しました。HTML、CSS、JavaScriptを使用しています。複雑なビルド工程はありません。GitHub Pagesで無料で公開できます。
𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 写真とフレームを合成するためにHTML canvasを使用しました。すべての処理はユーザーのブラウザ内で行われます。写真はサーバーにアップロードされることはありません。これにより、参加者にとってプライバシーが守られ、安全なものになります。
𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 静的サイトであっても、バックエンドを持つことは可能です。ストレージにはSupabaseを使用しました。
- 主催者がSupabaseのバケットにフレームをアップロードする。
- 参加者がサイトを通じてそれらのフレームを表示する。
- セキュリティは隠されたパスワードではなく、データベースポリシーによって管理されます。
𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe codingは設計（アーキテクチャ）には役立ちますが、運用上の詳細には注意を払う必要があります。
- データベースはスリープします。イベントの前日にSupabaseプロジェクトを「起こしておく」ことを学びました。
- 画像のセキュリティ。canvasがリモート画像を使用できるようにするために、特定のコードを一行追加する必要がありました。
- ユーザーエクスペリエンス。スマホでは「ダウンロード」ボタンを見つけるのが難しいことがあります。そのため、モバイル標準の共有シート（share sheet）を使用するようにコードを変更しました。これにより、写真を直接カメラロールに送ることができます。
𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂
- 境界線が明確なプロジェクトを選ぶこと。フォトブースには「ゴール」がありますが、SNSアプリにはありません。
- AIに「なぜ」と問いかけること。コードそのものよりも、その理由（ロジック）の方が重要です。
- diff（差分）を確認すること。自分のレビューなしに、AIにサイトを書き換えさせてはいけません。
- 決定権を持つこと。構文（シンタックス）はAIが扱いますが、制約条件を扱うのはあなた自身です。
Vibe codingは、作業をサボるためのものではありません。正しい問題に集中するためのものなのです。
初心者のためのバイブ・コーディング（Vibe Coding）：Claudeを使って動作するフォトブース・ウェブアプリを構築した方法
「バイブ・コーディング（vibe coding）」という言葉を聞いたことがありますか？
もしあなたが、コードの構文を一行ずつ書く代わりに、AIに「こんな感じのものが欲しい」と伝えるだけでアプリケーションを構築しているなら、あなたはすでにバイブ・コーディングを行っています。
最近、私はClaudeを使用して、完全に動作するフォトブース・ウェブアプリを作成しました。プログラミングの深い知識は必要ありませんでした。必要なのは、作りたいものの「バイブス（雰囲気）」を伝える能力だけでした。
バイブ・コーディングとは何か？
バイブ・コーディングとは、従来のプログラミング手法とは根本的に異なります。従来のプログラミングでは、構文、アルゴリズム、データ構造に集中します。しかし、バイブ・コーディングでは、**意図（Intent）と結果（Outcome）**に集中します。
あなたはコードを書くのではなく、AIに対して「指示」を与えます。AIがコードを生成し、あなたはそれを見て、動作を確認し、もし「バイブス」が違っていたら、修正を指示します。
プロジェクト：フォトブース・ウェブアプリ
私が作ろうとしたものは、ブラウザ上で動作するシンプルなフォトブースです。ユーザーはカメラにアクセスし、写真を撮り、いくつかのフィルターを適用して、その写真をダウンロードできるというものです。
ステップ 1: 最初のアプローチ
私はClaudeに次のようなプロンプトを投げました。
「ReactとTailwind CSSを使って、モダンで楽しい雰囲気のフォトブース・ウェブアプリを作って。カメラのプレビューが表示されて、シャッターボタンがあって、撮った写真を保存できる機能が必要だよ。」
数秒後、Claudeは動作するコードのセットを生成しました。
ステップ 2: 「バイブス」を調整する
最初のバージョンは機能していましたが、見た目が少し「硬い」感じでした。そこで、私はバイブスを調整することにしました。
「もっとポップでカラフルな感じにして。ボタンには丸みを持たせて、ネオンカラーのアクセントを追加して。背景には少しグラデーションを入れて。」
これで、アプリの「雰囲気」が劇的に変わりました。
ステップ 3: 機能の追加とデバッグ
次に、フィルター機能を追加したいと考えました。
「写真を撮った後に、モノクロやセピア、ヴィンテージ風のフィルターを適用できるボタンを追加して。」
ここで少し問題が発生しました。フィルターがうまく適用されなかったのです。しかし、私はコードを自分で直す代わりに、エラーメッセージをClaudeに貼り付けました。
「フィルターが機能していないみたい。このエラーが出ているよ：[エラー内容]。どうすればいい？」
Claudeは即座に原因を特定し、修正済みのコードを提供してくれました。
バイブ・コーディングから学んだこと
このプロセスを通じて、いくつかの重要な教訓を得ました。
- プロンプトは会話である: 一度の指示ですべてを完璧にしようとしないでください。小さなステップに分けて、対話を通じて形にしていきましょう。
- 「何」ではなく「どのように」を伝える: 「ボタンを大きくして」と言うよりも、「もっと目立つように、サイズを大きくして、鮮やかな青色にして」と言う方が、意図が伝わりやすくなります。
- デバッグは対話の一部である: エラーは失敗ではなく、AIとの対話を深めるための材料です。
結論
バイブ・コーディングは、プログラミングの民主化を加速させています。技術的な障壁が下がり、アイデアを形にするスピードが飛躍的に向上しました。
あなたは、コードを書く人（Coder）から、ビジョンを形にする人（Creator）へと進化しているのです。
さあ、あなたの「バイブス」を形にする準備はできましたか？