九州大学様向けに Claude Code の開発演習を実施しました
こんにちは。Zennチームの和田です。
この記事は、九州大学様向けに特別講義として実施した「Claude Code を用いた開発演習」について記録したものです。本講義のプレスリリースについてはこちらをご参照ください。
記事を通して伝えたいことのまとめ
- 動くものはAIですぐに作れてしまう時代。手を動かしてもらう意味、講義として何を持ち帰ってもらうかの設計が大事だと感じました
- 今回は、座学を少なめにし、動くものベースで自分の考えやこれからやりたいことを言語化してもらう道筋となるように構成しました。また、このためのレールとして Claude Code のスキルを活用しました。スキルの使い方の幅が広がりました
- 現場でのヘルプ・サポート（チューター）の存在が必要不可欠です
講義のあと、受講者の方からこのようなフィードバックをいただきました。
振り返りのところでClaude Codeから痛い質問をたくさんされました。あまりわかっていないまま作ってしまったのだと痛感しました。あの時間があってよかったです。
「動くものを作る」だけで終わらせたくなかったので、いただけて嬉しかった一言です。以下、講義の方向性について考えたことと、当日の流れをご紹介します。
どんな講義か
2026年の4月25日（土）と4月26日（日）の2日間、九州大学QREC 大学院生向け集中講義「社会変革スタジオ(特論)」が合同特別授業として開催されました。社会変革スタジオ(特論）については九州大学の大学院生、そして経済学府産業マネジメント専攻（九州大学ビジネス・スクール：QBS）の皆さまが受講可能な科目です。おおよそ60名の方に受講いただき、大学院生とQBSとでちょうど半々くらいの構成でした。
- 1日目：主に社会課題解決のアイデア創出に取り組む（講師：関西大学 松井克文先生）
- 2日目：1日目で準備したアイデアに対して、Claude Codeで動くアプリを作る（講師：クラスメソッドメンバー）
- 総括：金子先生からのメッセージ
参考情報： QREC提供科目の履修について
QREC と金子先生、松井先生について
QREC とは
米国で起業家として大成功をおさめた九州大学の卒業生、ロバート・ファン博士の百周年記念寄附をきっかけとして設立されたアントレプレナーシップに関する総合的教育・研究センターです。QRECでは多種多様なプログラムを網羅的、総合的に提供することを目指しています。本講義「社会変革スタジオ(特論）」についても例外ではなく、未来社会のあるべき姿からバックキャスティングし、地域課題を多角的に捉え、解決策を構想する力を養うとともに、大学院生自身の研究テーマや研究室の技術を社会実装へと接続する方法を探索することに役立てます。
参考情報： 3分でわかるQREC
松井克文先生について
京都大学文学部卒業後、株式会社電通を経て、東京大学大学院学際情報学府博士課程修了。2019年から東京大学産学協創推進本部スタートアップ推進部ディレクター（本郷テックガレージ／アントレプレナーシップ教育担当）を務め、2025年よりQBSの准教授としてさまざまな起業プログラムを展開。その後、2026年4月より関西大学商学部の准教授に着任されました。お名前で検索すると、多数の実績が確認できます。
金子晃介先生について
金子先生は、情報科学の専門的な知見（情報科学博士）を基盤とし、「テクノロジー（ICT）を活用して、いかに社会の役に立つプロダクトや新しい価値を創り出すか」という実践的なモノづくりを重視されています。ゲーム開発ハッカソン「Global Game Jam Fukuoka」を開催する等の実績が多数あります。
講義の方向性について考えたこと
QRECの意義と社会変革スタジオの内容を踏まえ、クラスメソッドとして提供することは「考えたアイデアから動くものを作れる体験」と逆算しました。特別講義の限られた時間でなにかつくるのは本来難しいですが、いまのClaude Codeの能力であれば十分可能です（Claude Sonnet 4.6を使用）。
方向性としては、1日目で松井先生の講義を通して言語化したアイデアを、2日目で形にしてみるというものです。こうしてみるとシンプルでいいじゃないと見えますが、一人ひとりアイデアが異なるため、何を体験のコアにするかを定めておくことが肝要です。多くの準備、当日の対応、そしてなにより学生の皆さま、チューターの方々、先生方と三位一体のパワーのもと成立したと振り返ります。
講義のコア体験を何にするか
アイデアを形にするところまでは決まりましたが、講義として行う以上、コア体験の設定が必要だと考えました。もちろん Claude Code の威力を知ってもらうというのはひとつありますが、それだけではクラスメソッドとして一緒にやらせていただく意味が薄れます。IT技術を活用する現場で手を動かしているからこそ、なにか伝えられないかと考えました。
Webアプリ座学: 今回は見送り
創造活動のサポートを生業としている弊社としては、使う技術の中身を座学として伝えるのはどうだろう、と考えました。具体的には、Next.jsなどのフレームワークの話から、HTML、CSS、JavaScriptといった要素技術の話です。しかし、
- 受講する皆さまの属性にばらつきがある
- 集中講義としてまとまった時間をもらうことを考えると、やや非効率
という理由から、座学は少なめにする、という方針にしました。実際のところ、Webアプリについて知識にバラツキがあっても、Claude Codeなら作れるだろうという目論見もありました。
動くものをつくって学ぶ
そこで、まずは動くものをClaude Codeと作ってもらい、できたものを触ってみて、こだわりたいこと、知識として身につけたいこと、自分が得意なことなどを言語化・持ち帰ってもらう方向に舵を切りました。この時点で、おそらく Claude Code のスキルをフル活用することになりそう、と考えていました。以降では実際やったことを振り返りながら、どのようなスキルを用意したかを紹介します。
Claude Code 環境の準備（深澤俊さんによる）
Claude Code の利用環境については、 ECS Fargate で code-server を起動し、Bedrock経由でClaude Codeを使う という構成で進めることに。これには以前深澤俊さんが Claude Code ハンズオンセミナーで活用したCDKを流用させていただく形で用意いただきました。
受講生のみなさまには、ECS Task 上に起動したcode-serverエディタにブラウザでアクセスし、開発してもらいます。利用するClaude Codeのモデルも、Amazon Bedrock経由で利用します。こうすることで、以下のメリットがあります。
- 受講生のみなさまのPCに左右されにくい環境が提供できる
- 意図しないソフトウェアインストール等を回避できる（捨てられる環境で作業できる）
- 課金をAWS請求にまとめられる
社会変革スタジオの講義にあたっては、最大100名規模の受講生がアクセスすることを考慮し、深澤俊さんが上記構成をさらに発展させて「4つのAWSアカウントに25ずつのECS Taskを展開しアカウント単位で負荷分散する」ということをやってくださいました。結果的にどれかが急遽使えなくなった場合の予備としても考えられましたし、この拡張はやってよかったとおもいます。
ブラウザ経由でcode-serverにアクセスし、開発を進めます
1日目：Claude Code の環境セットアップ
1日目は松井先生の講義がメインで、さまざまなワークを通して最終的に「解決したい課題」と「その解決策」を受講者の方それぞれで言語化していただきました。しかもWebアプリで解決できそうなものをピックアップしていただくというおまけつき。最高の形でバトンタッチしていただきました。そして、1日目の最後にクラスメソッドが講義の時間をもらい、受講者のみなさまにClaude Code環境へアクセスしていただくことに。 結果として修正するべき設定項目がいくつか見つかったため、2日目の前に触ってもらってよかったと振り返ります。
Claude Code が呼び出せない
- クラスメソッド側で Amazon Bedrock から Claude Code を呼び出すための情報登録済み 参考ブログ
- クラスメソッド側で code-server から Claude Code が呼び出せることを確認済み
この状況で受講者の方に Claude Code を呼び出してもらいました。
- code-server へはアクセスできた
- Claude Code で呼び出そうとすると以下のエラーが発生
403 Model access is denied due to IAM user or service role is not authorized to perform the required AWS Marketplace actions (aws-marketplace:ViewSubscriptions, aws-marketplace:Subscribe) to enable access to this model. Refer to the Amazon Bedrock documentation for further details.Your AWS Marketplace subscription for this model cannot be completed at this time. If you recently fixed this issue, try again after 2 minutes.
すぐには解消できなかったのでその日はいったん講義は終わりにし、クラスメソッドのメンバーで対策を講じました。
QREC のコワーキングスペースを貸していただいた
クラメソで集まって作業するにあたり、金子先生より快くQRECのコワーキングスペースを貸していただきました。感謝です。
サブスクリプションプロセスが必要だった
Amazon Bedrock経由で Anthropic のモデルを呼び出す時、最初にサブスクリプションプロセスが必要なのだそうです。
私たちが試した時はたまたま成功しただけで、本来はこの処理が必要のようでした。結局、AWSマネジメントコンソールで、Amazon Bedrock > Playground > 講義で使う予定のモデルを選択し、適当にやりとりをしました。これで、裏でサブスクリプションが実行され、code-serverからも実行できるようになりました。
ついでに、Webアプリを作るなら、ということで Claude Code の CLAUDE_CODE_MAX_OUTPUT_TOKENS も1024から 46000 に増やしました。このあたりは酒井さんに主導してもらい解決に進みました。
2日目
Bedrock から Claude Sonnet4.6 が呼び出せることを確認し、2日目へ。この日はまず受講生の方にあらためて code-server へアクセスし、Claude Code を起動してもらいました（内心ドキドキ）。無事にClaude Codeとやりとりできたようで、昨日の対策が実を結んだようです。
2日目のアウトライン
先述のとおり、「まずは動くものをClaude Codeと作ってもらい、できたものを触ってみて、こだわりたいこと、知識として身につけたいこと、自分が得意なことなどを言語化・持ち帰ってもらう方向」としました。これを実現するための2日目のアウトラインは以下です。
- 10:00 - 12:00 スコープ設計（
/scope-designスキル） - 13:00 - 14:30 実装を続ける、もしくは LPを作成する（
/landing-pageスキル） - 15:00 - 16:00 評価とふりかえり（
/verify-projectスキル、/study-planningスキル） - 16:00 - 16:30 ペアフィードバック
- 16:30 - 17:10 希望者によるピッチ発表
- 17:10 - 17:30 クラスメソッドからのお知らせ
- 17:30 - 18:00 金子先生による総括
〜12:00 スコープ設計
2日目の最初の90分は 「何をどこまで作るか」を Claude Code との対話で具体化する 時間にあてました。
イキナリ Claude Code に「作って」と投げると、受講者の方の意図とずれた方向に実装が走り出してしまうことがあります。また、後戻りも難しいです。集中講義のように手を動かせる時間が限られている場面では、最初に作るものの輪郭、人間が立ち返れる場所をしっかり言語化しておくことが大事だと考えました。そこで、スコープ設計を独立したフェーズとして切り出しました。
スキルの概要
スコープ設計は、Claude Code の スキル として /scope-design を用意し、これを呼び出してもらう形にしました。スキルの中身としてはおおむね次の役割を担っています。
- 受講者の「課題」「解決策」を Claude Code 側からヒアリングする（1日目のアウトプット）
- 集中講義の残り時間で実装可能な粒度かどうかを Claude Code 側に判断させ、必要に応じてスコープを縮小提案する
- 使う技術スタックを、受講者のバックグラウンドや作りたいものの性質に応じて Claude Code 側から提案する
- 最終的に scope.md というファイルにまとめさせる
スキル化することで、受講者の方は「/scope-design と打ってあとは対話するだけ」の状態からスタートできます。Claude Code に何をどう聞けばよいかという最初のハードルを、スキル側に閉じ込めてしまう狙いです。
実際にやってみて
一番心配だったフェーズですが、みなさまスムーズに scope.md を作成できていた、というのが正直な感想です。1日目の松井先生の講義によって「課題」と「解決策」が言語化されていたことがよかったのと、 /scope-design スキルで対話ベースにしたのがみなさまの言語化の助けになったのかなと振り返ります。
このフェーズのアウトプットは scope.md という1ファイルです。具体的には次の要素を含めることをゴールにしました。
- 作るものの概要
- 解決したい課題と、対応する解決策
- 今日（2日目）の時間内に実装する範囲
- 使う技術スタック（Claude Code が提案、今回は Next.js がメイン）
サンプル出力を GitHub に公開していますので、ご参照ください。
〜13:30 お昼休み / LPも作れたほうがいいか…？
この日は日曜日で、九大の学食の多くがお休みでした。みなさんと相談して、少し歩いてレストランまで足を伸ばせるよう、お昼休みは90分とることに。
それで、この時間で少し考えたいことがありました。「順調すぎる」という懸念です。スキルである程度対話するように仕掛けをひいたとはいえ、素直に回答していくと1時間かかるものではありません。午後はスコープに従って実装を進めていくところですが、実装についても同じことがいえるかも、とおもいました。一応、
- UIをブラッシュアップする
- 機能を追加する
- 他のアイデアについても同じようにスコープを決めて実装する
といった拡張をガイドする予定ではありました。しかしもうひとつなにか、せっかくなので共通の体験を持って帰ってほしいと思いました。私からクラスメソッドのメンバーに相談して、 作ったもののLPを用意する フェーズを追加することに。昼休みの90分でスキルを構築しました。皆さまと交流したかったところですが、やむなし。
/landing-page-design スキルでは例えば以下のようなやりとりをして MarkdownファイルとHTML、CSSファイルを生成します。
1. 誰に売る？その人が一番イラっとする瞬間は？
2. 3 秒で伝える一文と、補強するサブコピーは？ ヒーローの絵は？
3. 一番"おっ"となる体験は？ 使うと 1 日がどう変わる？（ベネフィット3つ）
4. 結果に辿り着く3ステップは？ 既存サービスと何が違う？
5. いくらで誰から取る？ ボタンを押したら何が起きる？
6. このコピーでHTML化していいか？
7. frontend-design を自動起動
スキル自体はリポジトリで公開していますので必要に応じてご参照ください。
〜15:00 実装の継続 と LPの生成
午後の時間を開始するとき、受講者のみなさまに改めて「LP作りたいか」確認したところ、ほぼ全会一致で作りたいとのことだったのでLP作成の手順を追加しました。開発演習でまさか時間が余ることを気にするようになるとは思いませんでした…時代を感じます…。
ということでscope.mdをベースに継続してWebアプリを作成してもらいつつ、LPを作成する時間を設けました。13:30〜15:00くらいまででちょうどよかったとおもいます。
サンプルプロジェクトを対象にしたLPはこんな感じでできました。
皆さまもいい感じできたのか、各所から「おお〜」という声が。やっぱり目に見えていい感じのものが出来上がるってのがわかりやすくていいですね。ビジュアル大事。
〜15:30 評価とふりかえり
動くものとLPが出来上がり、アイデアが形にできたという手応えをみなさまから感じました。このフェーズのねらいは、 動くものを起点に「自分の考え」と「これから身につけたい技術要素」を言語化してもらうこと です。Claude Codeで一度は形になったプロダクトを目の前にして、「この機能はなぜ効いていそうか」「自分はここを作りこめなかった」「もし本当にデリバリーするなら何が足りないのか」を自分の言葉に落としてもらいます。これがそのまま、後ろのペアフィードバックやピッチ発表の素材になります。
このフェーズには2つのスキルを用意しました。
/verify-project：作ったものを 自分のピッチ素材 としてふりかえる/study-plan：作ったものを デリバリー前提 で棚卸しし、持ち帰る学習計画に落とす
/verify-project: 作ったものを自分の言葉で語れるようにする
/verify-projectでは、おおよそ以下のような質問が投げかけられます。
1. 30秒で説明するなら？（ワンライナー）
2. 作ってみて想定とずれたところ・特に効いた機能は？
3. 想定ユーザー1人を思い浮かべて、その人がアプリを使う流れは？
4. なぜこの技術を選んだ？ 代替案と比べた強みは？（今回はWebアプリ前提だったので不要だったかも）
5. 今このプロダクトでできていないこと・次に足すなら？
6. 書き出した内容を声に出して読んでみて（ピッチ予行演習）
「実装してみたら最初の想定とずれた」「動的なWebアプリではなく、静的HTMLで充足できる」のような 作ってみてはじめて言語化できること を引き出すのが狙いです。
/study-plan: もし本当にデリバリーするなら、何が足りないか
集中講義のスコープはローカルで動く範囲ですが、もし社内ツールとして公開したり、誰かに配布したりするなら何が必要になるかを一緒に棚卸ししていきます。
1. アプリで使っている技術のうち、中身を自分の言葉で説明しきれないものは？
2. 明日これを社内ツールとして公開するとしたら、レビュアーから真っ先に突っ込まれそうな点を3つ
3. ユーザーごとに見せていい/いけない情報の区別はある？（認証・認可）
4. ユーザー入力で画面が崩れたりしない？（XSS・バリデーション）
5. 使っているデータ・APIの利用規約は？（OSSライセンス・出典）
6. 個人情報を扱う想定はある？（個人情報保護法・プライバシーポリシー）
7. 想定外アクセスで請求が跳ねたりしない？（従量課金・レートリミット）
8. もし運用中に落ちたら誰が気付く？（監視・バックアップ）
9. これは押さえておきたい、と感じた領域を1〜3個
…と、いったことを聞くようにしたのですが、いまこうして振り返りブログを書いていて少々エンジニアリング側に寄りすぎているなあと反省しています。いったんローンチまでに絞ればよかったかもしれません。とはいえ、作ったものをサービスとして展開するにあたり、考えることがあるという点は伝わったと信じています。
実際にやってみて
このフェーズは、直接なにかを作っているわけではないため、人によってはこれまでと比べて手応えがないと感じる方もいらっしゃったかもしれません。しかし講義の後、「振り返りのところで痛い質問をたくさんされました。あまりわかっていないまま作ってしまったのだと痛感しました。あの時間があってよかったです」という嬉しいお言葉を直接いただきました。この点を肌で感じ取ってもらうことが狙いとしてあったため嬉しかったです。
〜16:00 ペアフィードバック
ここまでで各受講者の手元には「動くアプリ」「LP」「verification.md（ピッチ素材）」「study-plan.md（学習計画）」という4つのアウトプットが揃った状態になります。せっかく60名の方に集まっていただいたので、自分の作ったものを誰かに紹介する時間を必ずつくりたいと考えました。そこで、近くの席の方とペアになっていただき、相互にピッチを聞き合う時間を設けました。
皆さま楽しそうに紹介しあい、盛り上がっていました。私はこれを見に来ました。イイナァ…と。
〜17:00 ピッチ発表
有志をつのり、結果的に7組の方に皆さまの前でピッチ発表していただきました。持ち時間は2分です。キッチリ時間を守り、すばらしいピッチ大会になりました。抽選で3名の方に持参したZennのノベルティを贈呈しました。
ピッチ発表でもLPが活用されていたため、結果的にはつくってよかったなと振り返ります。
〜17:45 お知らせと総括
さいごに、
- クラスメソッドからのお知らせ
- 金子先生よりQRECと関連プログラムの紹介、総括
という形で演習は終了しました。 /archive-project スキルで 皆さまの作成したものを code-server からローカルPCにダウンロードし、講義は終わりです。お疲れ様でした。
利用したスキルのまとめ
今回の演習で受講者の方に使っていただいた Claude Code のスキルを、登場順にまとめておきます。
/scope-design：1日目に言語化した「課題」「解決策」を Claude Code が対話でヒアリングし、講義時間内に作りきれる粒度に絞ったscope.mdを作成する/landing-page-design：作ったアプリを「商品として売り出す」視点で見直し、ターゲット・ヒーローコピー・ベネフィット・価格・CTA まで対話で固めてMarkdownとHTMLに落とす/verify-project：作ったプロダクトを「自分のピッチ素材」としてふりかえり、想定とのずれ・特に効いた機能・限界などをverification.mdに言語化する/study-plan：作ったプロダクトを「もし本当にデリバリーするなら」の前提で棚卸しし、認証・利用規約・コスト・運用などの観点から学習計画study-plan.mdを作成する/archive-project：プロジェクト配下のファイルを ZIP にまとめ、node_modulesや.venvなどの再生成可能な成果物を除外したうえで持ち帰り用の成果物として書き出す
スキル本体はリポジトリで公開しています。
改めて、スキルにした狙いとしては以下です。
- Claude Code のほうから問いを投げかけることで、何を聞けばよいかという最初のハードルをスキル側に閉じ込める
- 受講者の方の言葉で説明してもらう箇所を設置し、AI時代でも言語化することの必要性を実感してもらう
運営面振り返り：よかった点
Discord を用意して情報を共有した
事前に専用の Discord サーバを立て、受講者の皆さま・チューター・講師全員に入っていただきました。code-server の URL や AWS アカウントの割り当てなど テキストでしか共有できない情報 を一発でばらまけるのが特に便利で、「URL長くて打てません」のような事故をゼロに抑えられました。質問もチャンネルに書き込んでもらう形にしたことで、近くにチューターがいなくてもサポートが届く状態を作れました。Discordは主にquiver さんに準備していただきました。
ブラウザからアクセスしてもらった
code-server をブラウザで開く方式にしたおかげで、受講者の方の手元にあるのが Mac か Windows か、開発ツールが入っているか、といった条件にほとんど左右されずスタートを揃えられました。「Claude Code をインストールしてください」「Node.js のバージョンを揃えてください」といった事前準備のお願いも不要で、当日の進行が楽になりました。ただし、Webアプリの動作確認はポートフォワーディングが必要なため、皆さまに動作確認してもらうためにサポートが必要でした。
閉じた環境で実施してよかった
ECS Fargate 上の code-server は受講者ごとに独立しており、講義が終われば破棄される前提です。これにより、ファイルシステムの破壊やパッケージインストールを過度に心配する必要がなく、Claude Code の自動実行（Auto-accept）も気持ちよく使ってもらえました。受講者の方のローカル環境を汚さない、というのも安心材料として大きかったです。
運営面振り返り：改善ポイント
Bedrock のモデルアクセスで403が出た
詳細は本文の「サブスクリプションプロセスが必要だった」に書いたとおりです。クラスメソッド側の検証環境ではたまたま成功していたため気づけませんでした。次回以降は、講義前日までに Playground で1往復させてサブスクリプションを発火させておくようにします。ただ、このあたり、Bedrock もサブスクリプション手順の変更が入るケースもあるため、事前に講義をドライランできるならばそれが一番よさそうです。
キーボードが必要なことを明記していなかった
code-server の操作・Claude Code との対話・コードの確認、いずれもキーボード入力が中心になります。タブレットでは操作しにくいケースもあるため、 「文字入力ができるノートPC」 という形で具体的に書くべきでした。
チューターの方の負担が大きかった
LP作成フェーズを当日になって追加で組み込んだことで、事前に共有していた内容から外れる作業をその場でお願いする形になりました。ほかにも主にアプリの動作確認について質問が集中し、チューターの方には会場を走り回っていただく結果になりました。チューターを引き受けてくださった皆さま、本当にありがとうございました。
ECS Task のスペック不足で code-server が落ちるケースがあった
Next.js のビルドや開発サーバ起動が重なるタイミングで、ECS Task のリソース（主にメモリ）が不足して code-server ごと落ちる事象が散発しました。 Webアプリのライブラリインストール量とビルド負荷を読み切れていなかったのが反省点です。当日、メモリ容量を 2GBから4GBにスケールアップして ECS Task をつくりなおし、code-server が落ちてしまった方に再配布して対応しました。
次回機会をいただけた際には、本記事を起点にさらに洗練された演習として提供したいと考えています。
おわりに
貴重な機会をいただいた九州大学QRECの金子先生、関西大学の松井先生、そして2日間ご一緒いただいた受講生の皆さまに、心より御礼申し上げます。チューターとして現場を支えてくださった皆さま、運営に協力いただいたクラスメソッドのメンバーにも改めて感謝いたします。本記事が、これから同様の演習を企画される方や、Claude Code を活用した学びの場づくりを検討されている方の参考になれば幸いです。ありがとうございました。
