フリ校 voicy　2025年6月30日　【AI活用】30分で「セミナーWebページ」を作った方法。しゅうへいさん

バイブコーディングとは？
バイブコーディングとは、コードを一切書かずに、
自然言語（普通の会話）でWebサイトを作成できる技術です。
ChatGPTに話しかけるような感覚で、プログラミングが可能になります。



実際の事例：広島セミナーのWebページ制作
セミナー概要
・イベント名: ゼロからのフリーランス講座in広島
・参加者: 17名
・特徴: セミナー中にリアルタイムでWebページを制作し、
終了時には完成したサイトを公開




制作手順（ステップバイステップ）
Step 1: 音声データの収集
・セミナー中にXスペース（Twitter）で音声配信を実施
・「Xスペースダウンローダー」を使用してアーカイブ音声をダウンロード

Step 2: 音声のテキスト化
・GoogleのNotebook LMに音声ファイルをアップロード
・自動的にテキスト化を実行
・5000字のレポートを生成

Step 3: Webページの生成
・使用ツール: Claude Code（Windsurf エディター）
・テキスト化されたレポートをペースト
・「この内容でWebページを作って」と指示するだけでページが完成

Step 4: 画像の追加
・セミナー参加者のTwitter投稿（写真付き）をスクリーンショット
・画像をフォルダに保存
・Claude Codeに「セミナー写真を組み込んで」と指示
・自動的にデザインを整えて画像を配置

Step 5: デプロイ（公開）
・使用サービス: Vercel
・ローカル環境から本番環境へのアップロード
・簡易ドメインを自動取得
・誰でもアクセス可能なWebサイトとして公開




デザインの改善テクニック
モダンなデザインの適用
・参考サイトのデザイン画像を保存
・Claude Codeに画像を読み込ませて「こんな感じのモダンなサイトにして」と指示
・自動的にデザインを改善

アイコンの活用
・Googleのアイコン素材サイトのリンクをClaude Codeに渡す
・「いい感じのアイコンにして」と指示
・絵文字からプロフェッショナルなピクトグラムに変更
・動きのあるアニメーションも自動追加

カラーリングの統一
・ブランドカラーやトーンを指定
・全体的なデザインの統一感を自動調整




バイブコーディングの可能性
活用シーン
・セミナー主催者: 各回のまとめページを簡単作成
・メルマガ配信: HTMLデザインメルマガの自動生成
・イベント記録: フロー情報をストック化

メリット
・時間短縮: 従来数時間かかる作業が30分で完了
・技術不要: プログラミング知識ゼロでも制作可能
・量産可能: 一度作成したコードは再利用可能
・高品質: プロレベルのデザインを自動生成

学習リソース
・バイブコーディング部: 無料のメルマガ・動画講座
・初期設定動画: 実演付きの詳細解説
・実践的な使い方: 具体的な活用事例を紹介

まとめ
バイブコーディングは、2025年のWeb制作に革命をもたらす技術です。
特に：
・非エンジニアでも本格的なWebサイト制作が可能
・リアルタイム制作でイベントの価値を最大化
・継続的な改善が簡単に実現可能