AIでワークフローを構築して社内で即興LT会を開催してみた!


こんにちは、最近ハンドスピナーにハマっています。よしざわです。

Gaji-Labo では毎週「テックシェア」という技術共有の会を実施し、最新技術や業務上の知見を共有しています。しかしここ最近は話題不足や準備時間の確保が難しく、活気が失われつつありました。

そこで再びテックシェアを活性化させるために、Claude Code を活用した最低限のテーマ設定だけでスライドと台本を用意できる AI ワークフローを構築し、これを利用して即興 LT 会を開催してみました。これにより、ちょっとした話題はあるけど準備の時間が取れない…といった人でもその場でスライド作成を始め、1時間の会の中で発表者4人全員が発表まで完結させることができました。

今回は、作成した AI ワークフローと、AI ワークフローによって作成された MDX 形式のスライドを表示する自作 Web アプリケーションを組み合わせた、効率的な技術共有の仕組みについて紹介します。

AI ワークフローの全体像

ワークフローは、あらかじめ MDX 形式のスライドテンプレートと、スライドの元となるトピック記入シートというものを用意し、 Claude Code を利用して AI で対話的にトピック記入シートを埋めて、作成したトピック記入シートを元に AI がスライドを作成するという流れで作成しました。

AI ワークフローに利用したプロンプトは Claude Code の機能でカスタムコマンドとして登録し、参加者が あらかじめクローンしてきたリポジトリ内でClaude Code を利用し、 /make-slide というコマンドを打ち込むだけで作成できるようにしました。実際の make-slide コマンドのプロンプトの一部を以下で共有します。

あなたの役割は発表者から話を引き出し、 @base.md をコピーして @my-base.md を作成し、 @my-base.md を埋め、 @my-base.md を利用して発表用のスライドと台本を完成させることです。

以下の流れを厳守して発表者の LT 準備をサポートしてください。
発表者に質問をすることで @my-base.md を埋めるために必要な情報を引き出し、引き出した内容を @my-base.md に追記してください。

# 1. LT のテーマを決める

LT のテーマをどうするか引き出してください。この時、テーマが最終的に発表者が伝えたいことが明確になっていることを確認してください。
発表テーマが決定したら、 @my-base.md を更新してください。

# 2. LT で具体的に話す内容を決める

1 で決めたテーマについて、具体的な話す内容を発表者から聞き出してください。

@my-base.md のタイトルはそのままスライドのタイトルに、詳細は発表者が実際に話す内容になります。

具体的に話したい内容までは決まっていない可能性もあるので、決まっていなかったら決まっていないと言えるような質問を心がけてください。
もし発表者が具体的に話したい内容が決まっていなければ、テーマに沿って話せそうな内容を提案してください。

話したいことを聞き出したら具体的なタイトルと詳細に整理し、発表者に合意を得たら @my-base.md を更新してください。

# 2.5. 画像の収集

スライドに含める関連画像があるか発表者に質問してください。

画像がある場合は、以下の情報を収集してください:

- 画像ファイルのパスまたは提供方法
- 画像の説明(スライドのどの部分で使用するか、何を表す画像か)
- 画像のファイル名

画像がない場合は、次のステップに進んでください。

また、画像が共有された場合は、追加の画像がないか確認してください。最大で 1 スライドに 1 画像を添付できることが理想です。

# 3. slide の作成

@my-base.md と @src/slides/sample-presentation.mdx を参考にスライドを作成してください。スライドは新規ファイルとして作成し、タイトルはテーマに沿って適当につけてください。
また、ユーザー名は `git config --global user.name` コマンドで取得してください。取得できなかった場合は発表者に聞いてください。

自己紹介の章は発表者が後で埋めるのでサンプルと全く同じで構いません。

具体的に話すことの章は、タイトルは @my-base.md のタイトルを、そのほかの部分は、詳細の要素を抽出して箇条書きでうまいこと書いてください。

画像が提供されている場合は、適切な章に画像を挿入してください。画像の挿入は以下の形式を使用してください:

```
![画像の説明](/(スライド名)/ファイル名.拡張子)
```

終わりには、改めて結論を伝えつつ、発表したテーマについて、聞いた人が改めて調べたいと思ったり、すごいなぁと思えるような良い引きの文を記載してください。

# 4. 台本の作成

作成したスライドをもとに、台本.md に台本を作成してください。

実際にこのワークフローを試してみて、特に効果的だと感じたのが、2 章の LT で具体的に話す内容を決めるの章です。この章で「もし発表者が具体的に話したい内容が決まっていなければ、テーマに沿って話せそうな内容を提案してください。」というプロンプトを入れることによって、発表者が漠然と話したいと思っていた内容の肉付けを AI が手伝ってくれます。

これにより、例えば React 19 の Activity API について話したい!という漠然としたテーマであっても、 Activity API 導入による良いこと、期待できることなどを自然と、簡単に LT に組み込むことができます。

トピック記入シートの作成

このワークフローで特に重要なのが、発表者が話すトピックをスライド作成の前にドキュメントにまとめる、トピック記入シートの作成フローです。実際に使用したトピック記入シートのベースがこちらです。

# LT のベース

1. LT のテーマ(この LT で伝えたいこと)
2. LT で具体的に話す内容
   1. タイトル
      1. 詳細
   2. タイトル
      1. 詳細
   3. タイトル
      1. 詳細

とてもシンプルな内容なことがわかると思います。この最小限のシンプルなトピック記入シートを、 AI に補助してもらいながら作成することで、スライド生成前から LT の方針の確認や調整を行うことが可能になります。

私は LT の高いハードルとして細かいトピックの作成とスライド本体の作成があると考えているのですが、トピック記入シートを AI の補助付きで記入してもらうことによって、その両方の負担を大きく削減することができました。

余談ですが、今回のトピック記入シートのように、 AI に生成物を作成してもらうことはワークフローの精度と再現性を高めるために重要だと思います。ぜひみなさんのワークフローでも活用してみてください。

mdx を活用したスライド表示 web アプリケーション

LT のスライド作成といえば、 Google スライドや Microsoft PowerPoint など様々なツールが利用されていると思います。しかしそれらは AI との親和性がまだそれほど高くなく、AI を活用したワークフローに組み込むことが難しい現状がありました。

そこでこのワークフローでは、 mdx-js というライブラリを利用して markdown ファイルをスライドとして活用するアプリケーションを作成することにしました。 Markdown は構造がシンプルで AI が解析・生成しやすく、スライドのスタイルも オープンソースのものを利用したり、 AI でよしなに用意することも可能なため今回のワークフローに最適でした。

このアプリケーション自体のソースコードはほぼ Claude Code の Vide coding で業務の片手間に作成したレベルのためまだ公開が難しいのですが、最新の AI に 「mdx を利用して LT 用のスライドを表示する web アプリケーションを作って欲しい」のように指示を出すことでそこまで苦労せず作成することができると思います。

私は Vite + React で作成しました。実際に稼働させた場合このような表示です。

今後の展望

今回のこの即興 LT 作成ワークフローによって、話したいことはあるけどわざわざ話すほど肉付けできていない。といった話題を肉付けして共有することが可能になり、テックシェアでは今までより断然多くの話題で技術交流をすることが可能になりました。

このワークフローに興味を持ってくださった方は、ぜひ自分のチームでも試してみてください。

今後は、今回作成したワークフローにさらなる改良やバリエーションを用意するなどし、テックシェアをさらに盛り上げて、 Gaji-Labo 全体の交流活性化や技術力向上に繋がげていきたいと思います。

Gaji-Labo は フロントエンドのAI開発の実績と知見があります

急速に進化するAI技術、進まないUIとの統合…。 ユーザー体験を損なわずにAIを導入したいと考えながら、実装や設計に悩み、開発が停滞している。 そんな課題を抱えるプロダクトや開発チームを、私たちは数多く支援してきました。

フロントエンド開発の専門企業である Gaji-Labo は、AIチャットや自然言語処理UIなどの設計・実装において、AIの特性を踏まえた体験設計・UI開発・運用まで、フェーズに応じたサポートが可能です。

フロントエンドでのAI導入を相談する!

Gaji-Labo UIデザイナー向けご案内資料

タグ


投稿者 Asato Yoshizawa

受託会社で複数のCMS開発やtoCサービスの立ち上げ、運用を経験しGaji-Laboに参加。開発速度や保守運用、プロダクト特性などを考慮できるフロントエンドエンジニアを目指しています。ブルーライトに疲れると癒しを求めて森へ向かう傾向があります。