Vercel v0を使ったWebアプリ開発ワークショップを企画・実施しました

2025.11.30
あしざわです。
弊社のお客様である株式会社RYODEN様の大学生向けの1DAY職業体験イベント にて、Vercel v0を使ったWebアプリケーション開発ワークショップを実施しました。
本ブログはそのイベントの開催レポートです。
 前回振り返り・企画クラスメソッドで職業体験イベントを支援したのは、今回が2回目です。
初回のワークショップではGenU (Generative AI Use Cases) を使ったチャットボットの構築を行いました。
https://dev.classmethod.jp/articles/helped-studentcareerworkshop/
初回は概ね評判は良かったものの、お客様から「体験できたことが裏側のインフラ構築なので、IT未経験者にとってはイメージが湧きづらかったのでは」というフィードバックがありました。
第1回の反省を活かし、次回は未経験者でもわかりやすく・やりがいのあるワークショップにしたいと考えました。
フロントエンドを扱うワークショップが良さそうというざっくりとしたアイデアはありました。
「Vercel v0」を使おうと思いつきました。
社内で非エンジニア向け業務効率化ツールとして、v0の周知が進んでいたこと
個人的にv0を使っており、フロントエンドの知見がなくても簡単にWebアプリが作れることを知っていた
ここで企画をある程度まとめ、お客様にご提示したところ非常に良い反応をいただいたため、v0を使ったワークショップを実施することに決まりました。
 ワークショップの概要 参加者就活生（学生）
エンジニア
参加者は全体で5名程度でした。就活生の皆さん以外にも、RYODEN社員の皆様にご協力いただいています。
 使用ツールVercel v0
投影資料（HTML）
ワークシート（テキストベース）
 実施内容生成AIとは
困りごと発見・アプリ設計
Vercel v0を使ったアプリ開発
成果物発表会
 実施内容の詳細 1. 生成AIとは今回、私と共にワークショップの講師を務めるテナーさんによる、生成AIに関するセッションです。
生成AIの歴史から活用例まで、とてもわかりやすいセッションでした


生成AIの進歩をWindows OSのメモリ数で例える説明


ビルゲイツ氏の未来予想
特に印象的だったのは、今後の世の中で一番重要な能力が「解決したい課題の設定能力」である、という一節です。
生成AIの性能以上に、利用者が生成AIを使って何をしたいのかしっかり言語化することが一番重要であるということですね。
座学はここまでで、ここからがワークショップの本編です。
 2. 困りごと発見・アプリ設計いきなり『アプリケーションを作ってみましょう！』と言っても伝わりづらいため、まずは「v0で何を作るのか」を考えてもらいました。
以下の流れで進めました。
日常生活での困りごと(課題)をいくつか書き出す
挙げたものから一番身近で解決したい課題を1つ選ぶ
課題を解決するためのアプリの要件を考える（主な機能、想定ユーザー、使用場面、画面や操作のイメージなど）
事前に紙やテキストベースのワークシートを準備しており、以下の順で言語化を進めました。
課題の列挙
日常生活で「困ったな」「めんどくさいな」「不便だな」と感じることを列挙する

課題の深掘り
列挙した課題から1つ選択し、深掘り
いつ・どんな時にこの困るか
今はどうやって対処してる？
なぜもっと良い方法が必要？


アプリの概要
アプリがあるとどう変わる？
主な機能を3つ考える
アプリを一言で説明
「〇〇な時に、〇〇ができるアプリ」


アプリの詳細
このアプリを使う人について
主に誰が使う？
どんな場面で使う？

アプリの画面や操作を想像
アプリを開いたら最初に何が見える？
メインの操作は何？
使った後どうなる？


本フェーズの最終成果物は後続の作業でv0に投げるプロンプトです。
ワークシートで検討した内容からプロンプトを作成できるように、このようなテンプレートを作りました。
【アプリの一言説明】を作ってください。

・ターゲットユーザー
【4.で決めた「主に誰が使う？」の内容】

・使用場面
【4.で決めた「どんな場面で使う？」の内容】

・主な機能
1. 【3.で考えた機能1】
2. 【3.で考えた機能2】
3. 【3.で考えた機能3】

・画面構成
【4.で想像した画面や操作の内容】

シンプルで使いやすいデザインで、スマホでも見やすいように作ってください。
言語は日本語としてください。
設計フェーズは以上です。
要件定義も生成AIを使って壁打ちしたらいいんじゃないの？と思った方もいるかもしれません。
確かに、v0は充実したプロンプトや固まった要件がなくても、適当なプロンプトを投げるだけでそれなりのアプリが作成できるようになっています。
ですが今回はそうしませんでした。
すべてv0の機能や生成AIに任せてしまうことで、「AIがアプリを作ってくれた」「よくわからないけどなんかできた」という感想になることを危惧したからです。
「何を作りたいのか / なぜ作りたいのか」を自力で言語化してもらいことを意識しました。
※そこまでやる余裕がなかった、というのもあります.......
 2. Vercel v0を使ったアプリ開発この開発フェーズでは、v0を使うことであまり考えなくてもアプリが作成できることを感じてもらうことを意識しました。
ここまでに作成したプロンプトをv0に入力して、Webアプリを作っていきます。
基本的にv0に1回指示するだけで、数分程度待てば動くアプリが生成されます。
追加の指示で機能を追加したり、デザインを変えることが可能です。


画像は例です
一方で、最初作ったアプリからの大幅な変更は難しいため、思うような方向性の成果物に仕上がらなかった場合は最初から作り直すことを推奨しました。
ある程度アプリが完成したら、v0のPublish機能を使ってアプリをVercelにデプロイしました。この後実施する成果物発表会で、各自のスマートフォンから発表者の作成したアプリに触れながら参加してもらうためです。


画像は例です
 3. 成果物発表会最後に、参加者の皆さんが作成したアプリを全体の前で発表してもらいました。


RYODEN社員 熊谷さんによる「感謝の記録」アプリの発表
個性豊かなアプリの一例がこちら。どれもとても興味深かったです！
駅の出口案内太郎
大きな駅で出口が分からず迷ってしまう。そんな貴方に

メンタルヘルス 〜感謝の記録〜
企業のエンゲージメントを高め、社員の自己肯定感を高めるアプリ

 感想 参加者の反応参加者の皆さんからいただいたアンケート結果がこちら。どれもとても嬉しいフィードバックをいただきました。
ワークショップで印象に残ったこと
AIに打ち込む内容やデザイン決めが印象に残った
デザインの変更が難しいなと感じました。
生成AIが思ったよりもずっと優秀でびっくりしました
AIにアプリを作ってもらえるサイトがあることを知らなかったので、面白かった
AIの凄さをとても感じる事が出来ました。
非常に簡単にアプリ開発が出来ることを学べた、UIも優れていた。外部講師の方の説明は本格的でトレンドが興味深かった

進行や運営について
全てが良かったです。
担当してくださった方と自由に話せる座談会的なものが欲しかった
ツールを使うとこんなに簡単にアプリ開発が出来るのだと実感して、非常に興味深かった。

 運営としての感想運営としてよかったことは、皆さんにとても楽しんでいただいたこと、成果物が素晴らしかったこと、v0の素晴らしさに気づけたことです。
一方で、もちろん改善したい点もあります。
まず、時間配分が難しかったです。

事前にドライランは実施しましたが、オンラインかつ小規模だったため本番がオフラインかつ複数名の実施となると同じようにはいきませんでした。
また困りごと発見・アプリ設計で利用したワークシートも改善の余地があります。より良いプロンプトに仕上げるため、もう少し改善できるはずです。
 最後に今回、株式会社RYODEN様の大学生向け職業体験イベントでワークショップを実施させていただきました。参加してくださった就活生の皆さん、ご協力いただいたRYODEN社員の皆様、そして共に講師を務めたテナーさん、本当にありがとうございました。
皆さんが真剣にアプリ開発に取り組む姿や、発表会での個性豊かなアプリを見て、運営側としても多くの刺激をいただきました。
生成AIの進化によって、Vercel v0のようなツールを使えば専門知識がなくてもアイデアを形にできる時代になりました。ただ、どんなにツールが便利になっても「何を作りたいのか」「誰のどんな課題を解決したいのか」を考える力は変わらず重要です。今回のワークショップで体験してもらった課題の言語化は、生成AIを使う上でも、今後のキャリアでも役立つはずです。
この記事を読んでくださった方も、ぜひv0を使ってみてください。日常の小さな困りごとから始めて、自分なりのアプリを作ってみる体験は新しい発見につながると思います。
それでは、また次回のワークショップでお会いできることを楽しみにしています！