九州大学での Claude Code ハンズオンを、一人でもプロダクトを作れるワークショップキットとして公開しました
こんにちは、和田です。
2026年4月に九州大学 QREC さまの特別講義「社会変革スタジオ」で Claude Code のハンズオンを担当しました。その様子は以下の記事に書いています。
このたび、その取り組みが事例として公開されました。
2026年8月現在、クラスメソッド社内でAI活用コンテストが行われており、講義で利用したスキル群を再整理して提出しようとおもいました。講義でいただいたアンケートや運営メンバーの振り返りフィードバックをもとにブラッシュアップし、誰でも開催できる「ワークショップキット」として GitHub に公開しました。
この記事では、講義後に何を直したのか、キットで何ができるのか、そしてどう使えばよいかを書きます。1人でも体験できますので、「Claude Code でアイデアを形にする」を一度通しでやってみたい方にも読んでいただければと思います。
講義でどうなったか（事例より）
事例ページに数字が出ているので、そこから引用します。
- 情報系・非情報系が混在した約60名の大学院生が、2日間の集中講義に参加
- 受講生の8〜9割が2日間でプロトタイプを完成
- 事後アンケートの満足度は 5点満点中 4.59
参加者の属性はかなりばらばらで、社会人の方もいらっしゃいました。それでも大半の方が動くものを実装し、相互フィードバックまで到達できたのは、Claude Code に「次に何をすればよいか」を1問ずつ聞かせるスキルの設計が有効に働いたと思っています。振り返り会でも「Skills でレールを敷いたことで、少ないスタッフでも講義を円滑に進められた」という声が運営メンバーから出ました。ただし、後述のとおり課題もたくさんあります。
フィードバックの反映
講義の翌月に運営メンバーで振り返り会をやりました。
フィードバック:
動作確認の案内が大変だった。生成したアプリをどう起動して確認すればよいか、参加者ごとに案内する必要があったのでカバーできていると嬉しい。
対応したこと:
実装スキル /build-app を用意し、生成後に起動コマンドと URL をスキルが案内、起動確認が取れてから次の質問に進むようにしました
フィードバック:
アプリの柔軟性がありすぎたので、フレームワークをもっと絞るべきだったかも。
対応したこと:
標準構成を Next.js（App Router / TypeScript）+ pnpm に固定しました。
フィードバック:
参加者がカレントディレクトリの意識を持てず躓くケースが多々あった。
対応したこと:
設計ドキュメントとアプリ本体の置き場所を固定し、スキルが常に絶対パスで案内するようにしました。
もうひとつ、講義当日に急遽追加した「ランディングページを作る」が好評だったので、LP 作成を本線に組み込みました。「動くもの」で終わらず「これを誰にどう訴求するか」まで言語化してもらうのが狙いです。発表のタイミングでも活用していただきました。
ハンズオンの進め方
参加者は「課題を一言」「解決策を一言」を持ち込んで、6本のスキルを順番に呼ぶだけです。
/scope-design: 課題と解決策を一言ずつ答え、実装アプローチを複数案から選び、MVP を絞る/build-app: MVP を一括生成し、想定ユーザー1人になりきって触りながら1つずつ体験を磨く/verify-project: 課題を本当に解けているかを触って確かめ、ピッチの骨子にする/landing-page-design: 買い手目線でコピーを練り、LP の HTML まで生成する/study-plan: 「実際にデリバリーするなら」何が足りないかを棚卸しし、持ち帰りの学習計画にする
1人で体験する（5分で始まります）
前提としてローカルPCに必要なのは Claude Code、Node.js 20 以上、pnpm です。
git clone https://github.com/cm-wada-yusuke/claude-code-product-workshop-kit.git
cd claude-code-product-workshop-kit
claude
Claude Code が起動したら、LP 生成に使うプラグインを入れて最初のスキルを呼びます。
/plugin install frontend-design@claude-plugins-official
/scope-design
プロジェクト名を聞かれたら準備完了です。「解きたい課題を一言で」から対話が始まり、成果物は projects/<プロジェクト名>/ に溜まっていきます。
1人でやるときのおすすめは、ピッチ発表までやるつもりで進めることです。/verify-project が書き出す verification.md は、そのまま3分ピッチの原稿になります。誰にも発表しないとしても、「この課題を本当に解けているか」「誰にどう訴求か」を自分の言葉で言えるところまで行くと、持ち帰れるものがまったく違います。講義でも、ここで一番手が止まり、一番学びがあったパートでした。
やってみた
手元で一巡してみました。課題と解決策は、以下のようにしました。
- 課題を一言: プロダクトを開発したあと、フィードバックを集めるのが大変
- 解決策を一言: 使っている画面からその場で一言フィードバックを送れるボタンを埋め込み、届いた声を一覧で見られる Web アプリ
Webアプリの画面
LP
やってみると、「ログインしたいな」「JSで配布することになるが、セキュリティ的に厳しいご時世にそれは難しいかもな」「できるだけ目立たせたいけど、本来の体験を阻害したら意味ないよな」など、触ってみて初めて出てくる感想もありました。
大人数で開催するにはチューターの力が必要
ピッチ発表とペアフィードバックが組み込まれているので、参加者が多いほどハッカソン形式に近づき、「自分では気づけないことを他の人の目で見つけてもらう」機会が増えます。学びとしてはそのほうが明らかに効果的です。
ただし、人数が増えると必ず出てくるのが、PC 環境固有の違いによるトラブルと、動作確認のやり方でつまづくケースです。Node.js のバージョン、パッケージマネージャ、ブラウザの挙動。ドキュメントを充実させてもここはゼロにはなりません。九州大学で実施したときも、この部分でチューターの方に本当に助けられました。
…ということで、規模を大きくしようと思ったら、チューターの力が必要です。
おわりに
動くものは AI ですぐに作れてしまう時代になりました。わたしは、プロダクト開発において、人が時間を使うべきなのは
- 誰に届けるべきか
- どこまでやるべきか
- 実際どうだったか
- 次、どうするか
これらを考え、試すことだとおもいます。だからこそ、考えていることを形にする部分は、最短かつ再現性高く遂行できるようにしたい。ワークショップキットが、その一助となれば幸いです。
社内外でハンズオンや研修を企画されている方、まずはご自身で試してみてください。もちろんクラスメソッドとして開催を企画することもできます。ご相談ください。
