第5回活動：モックアップ発表会 & WSL 環境構築ハンズオン¶
第5回活動を OPTiM Club KOBE で開催しました。前半は各自が Figma Make で作ってきたモックアップの発表会、後半は Google スライドで Web アプリの仕組み・おすすめ技術スタックを共有 → WSL 環境構築ハンズオン という流れです。
基本情報¶
| 項目 | 内容 |
|---|---|
| 日時 | 2026年6月4日（木） 15:30〜18:00（2時間半） |
| 場所 | OPTiM Club KOBE |
| メイン | モックアップ発表会 / WSL 環境構築ハンズオン |
タイムスケジュール¶
| 時間（実際） | 内容 |
|---|---|
| 15:30〜16:20頃 | モックアップ発表会（チーム内発表 → 代表選定 → 全体発表・講評） |
| 16:20頃〜 | Web アプリの仕組み振り返り / おすすめ技術スタック共有 |
| 〜18:00 | WSL 環境構築ハンズオン |
各セクションの様子¶
モックアップ発表会（15:30〜16:20頃）¶
事前の宿題として、メンバー各自に Figma Make でモックアップ を作ってきてもらっていました。当日はまず、
- チーム1 内・チーム2 内でそれぞれ発表
- チームごとに 投票して代表者を1人選定
- 選ばれた代表者が コミュニティ全体に向けてチームの代表モックアップを発表
という流れで進めました。全体発表に対しては、運営・メンバーから質問を投げたり、感想を言ったり、「こういうのいいよね」と良いところを拾ったりと、フィードバックを出し合いました。ここまでが終わったのが 16:20 頃 です。
Web アプリの仕組み・おすすめ技術スタックの共有（16:20頃〜）¶
続いて Google スライドを使い、Web アプリの仕組みの振り返り と We部がおすすめする技術スタック について全体共有しました。
- スライド：Web の仕組みとおすすめ技術スタック
WSL 環境構築ハンズオン（〜18:00）¶
後半は、これからのチーム制作に向けた 開発環境の構築ハンズオン。Windows 上で順番に以下を進めました。
- WSL をインストールして起動
- WSL の中に Git と GitHub CLI（
ghコマンド）をセットアップ - バージョンマネージャー mise を導入し、Node.js をインストール
-
Antigravity CLI まで導入
次回までの宿題¶
今回は宿題を2種類出しました。
1. チーム代表者：PRD（要件定義書）の作成¶
各チームの代表者には、自分のモックアップをもとに チームでやりたいことの PRD（要件定義書） を作成してもらいます。
2. 各自：「自分が考えるアプリの最強構成（技術スタック）」を考える¶
メンバー全員に、自分が考えるアプリの最強の技術構成（技術スタック） を考えてきてもらいます。
ここで伝えたのは、「最強」の選び方の判断軸 です。一番大事なのは 「チームメンバーにその技術スタックに精通している人がいるかどうか」。どれだけ流行りの構成でも、チーム内に分かる人がいなければ制作は進みません。
この宿題の狙い¶
技術スタックを調べるうちに、自然と次のことに気づいてほしいという狙いがあります。
- 「ライブラリとフレームワークって何が違うの？」「そもそも言語って何？」 という区別を、自分の手で調べて認識できるようになる
- 世の中には いろんな技術スタックがある ことを知る（例：「Vue とか React がある」と聞いても、それが何で、どこで使われているのか分からないはず。だから各自で調べてほしい）
- AI と Web を題材に技術スタックを調べることで、関連する知識を広く持ってもらう
反省点・気づき¶
ハンズオンの「目標時刻」を決め忘れた¶
今回の反省は、ハンズオンに取り掛かるときに「何時までに終わらせる」という目標時刻を決め忘れていた ことです。
本来 40分ほどで終わる内容 だったのですが、目標を切っていなかったために、ずるずると引っ張って 18時ギリギリまで かかってしまいました。早く終わった組は雑談していて、雑談タイムとしてはそれなりに良かったものの、やはり ハンズオンをやるなら時間をしっかり決めてあげるべき だな、と改めて感じました。
実はこれは前々回（第3回）でも挙げた「ソフト締切を口頭で共有していなかった」反省と同じ系統です。タイムボックスを最初に声に出して切る ——この運用を、ハンズオン系の活動では徹底していきます。
Figma Make のトークンリミット問題¶
モックアップ作成でも気づきがありました。Figma の Education プランに入っていないと、Figma Make でモックアップを作る途中でトークンリミットに達してしまう メンバーがいたのです。
このままだと作業が止まってしまうので、次回以降は
- Figma の Education プランに入ってもらう
- もしくは Google の Stitch で対応する
のどちらかで進めるのが良さそうだと考えています。ツールの利用制限は事前に把握して、入会案内や代替手段を先に用意しておきたいところです。
まとめ¶
- 第5回は OPTiM Club KOBE で開催。前半モックアップ発表会／後半 WSL 環境構築ハンズオン
- Figma Make のモックアップをチーム内で発表 → 代表選定 → 全体発表・講評（16:20 頃まで）
- Web の仕組み・おすすめ技術スタックを共有後、WSL・Git・GitHub CLI・mise・Node.js・Antigravity CLI まで構築
- 宿題は「代表者の PRD 作成」と「各自が考える最強の技術スタック」の2本立て
- ハンズオンの目標時刻を決め忘れて 18 時ギリギリに。次回以降はタイムボックスを声に出して切る運用を徹底
- Figma Make はトークンリミット問題が発覚。Figma Education への入会か Google Stitch での代替を検討
引き続きよろしくお願いします！