入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
Figmaでページの配置を決め、AIで作った小さなページをVercelへデプロイすれば、URLから表示を確かめられます。ただ、公開テストに成功しただけでサイト全体が完成するわけではありません。3日目の実演でも、配置を示す下書きのワイヤーフレームとテストページは確認できましたが、統合スキルを使ったサイト全体の制作は生成待ちのまま終了しました。
2026年9月17日21時から、KEITOが非エンジニア向けのバイブコーディング講座の最終日を担当しました。前日までのデザイン素材を引き継ぎ、Figmaでレイアウトを組み、Vercelで公開環境を試した回です。前日までの内容はバイブコーディングの始め方｜写真からWebデザイン案を作るスキル実践とデザインシステムの作り方｜Claude DesignとStyle Vaultでサイトを試作につながります。
最終日の目標はレイアウトを固めてからWebサイトを公開することでした。講座ではFigmaの接続とワイヤーフレーム作成を試し、並行してVercelへ接続。小さな公開テストページを実際に開くところまで確認しています。
一方、サイト全体を仕上げる工程は生成待ちが続きました。KEITOも終了時に「全部生成しきれなかった」と話しており、テストページの公開と完成サイトの公開は分けて受け取る必要があります。
この日は前日の作業から再開するためのファイルに加え、レイアウトパターン、Webモーション、画像のみで作るLPの素材が配布されました。LPは商品の紹介や申込を一つのページにまとめるランディングページのことです。個別ファイルは画面に4つ並び、素材をまとめた統合版の「スタイルボルト」も紹介されています。
スタイルボルトでは、色やレイアウト、動きの候補を選んで「レシピ」に追加し、AIへ渡す指示文にまとめられるそうです。毎回、雰囲気を一から文章で説明する負担を減らす狙いがありました。
Figmaは配置を決める道具です。見出し、説明、申込ボタンなどの置き場所を、色や画像を加える前に確かめます。KEITOは実務でも構成要素と配置を先に固め、その後にデザインへ進むと説明しました。
Figmaのファイルを作ってから、AIとFigmaをつなぐMCPを接続します。MCPは、AIが外部のサービスを読んだり操作したりするための接続方式です。接続の確認後、AIにサンプルのワイヤーフレームを1枚作らせるところまで試しました。編集を依頼するときは、対象ファイルのURLと編集権限も確認します。
デザイン経験が少ないと、サイトの目的に合う配置を言葉だけで指定するのは難しいものです。そこで講座ではレイアウトパターンのサンプルから候補を探しました。比較や申込フォームなど、用途ごとの配置例が並んでいます。
実演ではAIが選んだ配置をFigmaに追加しました。最初は意図と違う返答になり、KEITOがFigmaのワイヤーフレームに追加するよう指示し直す場面もあります。作業先を具体的に示すと、画面上にレイアウトが追加されました。
ページの構成と配置は、色や画像を加える前に直します。KEITOはデザイン後に大きな配置変更を頼むより、ワイヤーフレームの段階で方向を決めたほうがよいと話していました。トップページ以外も作るつもりなら、下層ページを指示に含める必要があります。実演では「全体のページを作って」と頼んでもトップページだけが返り、伝え方を見直していました。
完成したワイヤーフレームは、人のデザイナーへ引き継ぐときにも使えます。Figmaを挟まずAIに直接サイトを任せる方法も紹介されましたが、配置を人が見て直したい場合は、ワイヤーフレームを残す進め方が合うとのことでした。
Vercelは作ったページをインターネット上のURLで開けるようにする公開先として使いました。AIの接続先からVercelを選び、まず小さなテストページを作ってデプロイしています。デプロイとは作ったファイルを公開環境に反映する作業です。
録画では「公開テスト」と表示されたページをブラウザで開き、ボタンも見えています。ここで確認できたのは、公開環境との接続です。Figmaで設計したサイト全体が完成し、公開されたという意味ではありません。
テストページにはVercelのURLが付き、公開後はプロジェクト画面からも確認できました。独自ドメインを使うなら、別途設定が要ります。2026年11月時点のVercel公式ドメイン案内にも、デプロイ時には .vercel.app のドメインが自動で割り当てられ、独自ドメインを購入または追加できると書かれています。
独自ドメインは有料で、講師は年間980円〜3,000円ほどのレベル感だと話していました。
講座ではXserverなどへファイルをアップロードする方法も質問されました。KEITOは可能だと答えたうえで、FTPによる手動アップロードを例に挙げています。Vercelを選んだ理由は、AIへの指示から公開までつなぎやすいことでした。
FigmaとVercelの生成を待つ間、画像を中心に組むLPと、画面に動きを足す素材も紹介されました。画像のみLPのサンプルでは、キャンプ場を題材にしたページを見せています。モーションはボタンやスクロールに合わせた動きを、一覧から選んで追加する考え方です。
ただし、画像生成を入れると待ち時間も長くなります。この回では各自の画面で生成を進めながら説明が続きました。Figmaのワイヤーフレームでレイアウトを固めてから画像や動きを足す、という順序は変わりません。
最後にKEITOは、材料集めから公開までを一つのスキルにまとめる構想を示しました。個別の作業を小さなスキルに分け、全体を進めるスキルから呼び出します。講座資料に示された流れは「聞く／組む／実装する／公開する」の4工程。「組む」では、Figmaにレイアウトを配置し、色や画像を加えます。
講師は口頭で、材料を集め、Figmaで設計し、コードにしてVercelへ公開する構想も説明しました。次の図はその説明をまとめたものです。
この流れをまとめたスキルは、講師の言う「AIディレクター」に当たります。ただし講座内で全工程の完了は確認できていません。画面ではFigmaの作業や統合スキルへの指示が続いており、KEITOは残った生成作業を各自で進めるよう案内しました。
当日は講師の Claude から、Figmaが無料プランだったためMCPのツール呼び出しの回数上限に達したという返答があり、ワイヤーフレーム作成に使った回数で打ち止めになりました。AI側でも生成待ちが続きます。2026年11月時点のFigma公式FAQでは、Starterの読み取り用MCP呼び出しは月20回までです。Figma公式の利用条件によると、キャンバスへの書き込みはProfessional、Education、Organization、Enterpriseの各プランで利用できます。講座で示された一度の指示にまとめる方法は、細かいやり取りの回数を減らすための工夫でした。
公開後の質問では自分だけで使うページには閲覧制限を付けること、問い合わせフォームにはCAPTCHAを検討することが挙がりました。CAPTCHAは、フォームへの自動送信を抑えるための仕組みです。外部に公開するWebツールなら、扱う情報や機能に応じた安全性の確認が別に必要です。講師は今回はLP制作なのでSEOを視野に入れておらず、扱わなかったと話しました。
サイト全体の公開までは確認できていません。Vercelで公開し、URLから表示を確かめたのは接続確認用の小さなテストページです。
必須ではありません。KEITOは、統合版の素材を使ってAIに直接サイト制作を任せる方法も紹介しました。配置を人が確かめたり、デザイナーへ引き継いだりするなら、Figmaにワイヤーフレームを残す進め方が合うとのことです。
接続して読み取りまでは試せますが、無料プラン（Starter）の読み取り用MCP呼び出しは月20回までで、講座では講師本人が、ワイヤーフレーム作成に使った回数で上限に達しました。2026年11月時点のFigma公式案内では、キャンバスへの書き込みはProfessional、Education、Organization、Enterpriseの各プランで利用できます。
独自ドメインがなくても公開できます。Vercelの標準ドメインでテストし、会社のサイトなどで必要になったら独自ドメインを設定できます。
置けます。講座では、作成したファイルをFTPでアップロードする従来の方法が例に挙がりました。AIから公開までつなぐ作業のしやすさから、この日はVercelを使っています。
まず公開URLでページの表示とリンクを確かめます。自分用のページなら閲覧制限、問い合わせフォームがあれば自動送信への対策を検討してください。外部向けのWebツールでは、扱う情報に合わせた安全性の確認が別途必要です。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
