【デザインセンスがない人必見】Cline × Marpのスライド自動作成が快適すぎた
はじめに
「社内MTGでチームに報告するためのスライド作成が面倒...」
「わかりやすく伝えたいけど、自分はデザインセンスがないから諦めてる...」
「勉強会やLTで発表したいけど、周りの人みたいに綺麗なスライドが作れない...」
こんな悩みを持つ方はいませんか？
せっかくいい情報を持っていて、それを共有することで喜ぶ人がいるはずなのに、上手く伝えられずに困っている方は多いのではないでしょうか？
相手に価値を届けるには、「情報の質」と「情報の伝え方」の両方が大事です。『何の情報(What)をどのように伝えるか(How)』です。
生成AIの登場で、情報収集や情報の加工が以前と比較して格段に行いやすくなりました。今回はその恩恵を情報の加工（伝達）に特化して具体的な方法を交えて解説できればと思います。
具体的にはClineという生成AIツールと、Marpというマークダウン形式からスライドを自動生成できるツールを組み合わせて、自動でおしゃれなスライドを自動で生成する方法をハンズオン形式で紹介します。
これらのツールを使いこなすことで、デザインセンスがなくても、見やすいスライドを作成することが可能です。そのため、ご自身は質の高い情報を届けることに集中できるようになります。
LTや勉強会などで発表をしようとしているエンジニアの方から、生成AIを使って業務効率化に興味のあるビジネスマンの方まで幅広く役立つ内容を記事にまとめました。
ぜひ読んでいただけると幸いです。
対象読者
- 自動化に興味がある全ての方
- 生成AIのトレンドを逃したくない方
- 社内でAI活用してさらに活躍をしたい方
本編の構成
１｜Marpの概要
２｜Clineの概要
３｜スライド自動生成ハンズオン
筆者の紹介
東京大学で機械学習の研究、AIスタートアップでMLエンジニアを経験、コンサル会社で戦略立案を行った経験を持つ経営者。
省庁への生成AI活用紹介や、高校の全教師向けに生成AI研修を行うなど、生成AIリスキリングや人材育成、サービス開発に取り組んでいる。
それでは順番に解説をしていきます！
スライド自動生成ハンズオン
１｜Marpとは？
Marpとは、マークダウン（Markdown） 形式でスライドを作成できるツールです。
テキストでの指示でデザインを含めたスライド作成を制御できるのがポイントです。
Webデザインのスライド作成版のようなイメージを持っておくと大枠はOKだと思います。
社内外での発表資料の作成などで活用している人も一定数いる印象です。
VSCodeの拡張機能として提供されています。
※ CLIとしても利用可能です。
もしVSCode（CursorでもOK）をインストールしていない方は、公式サイトや以前私が解説した記事などを参考にしてインストールすればすぐに利用可能になります。
１-１｜具体的な使い方
例えば、下記のような情報をマークダウン形式(.md)のファイルに記載すると、その内容を次のようなスライドに変換して表示可能です。
上記のようなスライドを、下記のような形式の文章を記載することで作成できます。
---
marp: true
theme: gaia
paginate: true
style: |
section {
background-color: #f0f2f5;
color: #2c3e50;
font-family: 'Arial', sans-serif;
}
h1, h2 {
color: #2980b9;
}
ul {
line-height: 1.6;
}
img {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
---
## ★ 例えばこんなスライドが作れます！
- 生成AIはツール
- 適切な活用が重要
- 倫理的な使用
- 人間の創造性が重要
- AIを補完する役割
- 価値判断と意思決定
- 継続的な学習が鍵
- 技術の進化に対応
- 新しいスキルの獲得
- 新しい可能性への挑戦
- イノベーションの促進
- 社会課題の解決
Marp独特の記載方法を使う必要はありますが、今回紹介するClineやChatGPTなどの生成AIツールを活用することで、最低限の知識だけでスライド作成を行うことが可能です。
ぜひ手元で試してみて、手軽にスライドを作る体験を実感してもらえれば幸いです。次の章では、XでCursorなどAIツールと並んで話題になっているClineについて紹介します。
２｜Clineとは？
Clineはオープンソースのコーディングエージェントです。
GitHub上で全てのコードが公開されています。
ユーザーの指示に従ってAIが自律的に目標達成のためにコーディングを行います。実装の提案だけでなく、ファイルの読み書きやコマンドラインの実行なども行うことができます。
そのため、設定によっては最初から最後まで一切手を加えずにClineが実装しきってしまうことも可能です。
また開発視点だと、コード数は2万行程度で一つのアプリケーション的にはそこまで大規模なものではありません。
開発言語は全てTypeScriptを使って開発されているので、コードリーディングもしやすいのが特徴です。
そのため、Clineをベースに派生サービスも複数登場している状況です。
下記の記事で、Clineの解説や実際に手を動かしながらアプリ開発を体験してもらうことができるので、気になる方はご覧ください。
３｜スライド自動生成ハンズオン
最終的に目指すのは、『作りたいスライドの概要を入力すれば自動的にスライド作成が完了する』仕組みです。
また、工夫次第でより詳細な内容を詰めた上で提案することも可能です
３-１｜まずは試してみよう
まずは、Clineに指示を出してどこまで生成できるのかを確かめてみましょう。
「大学や社内で生成AI時代に必要となるスキルについて勉強会を開くことになった」という想定でスライド作成を試みます。
Clineのテキスト入力欄に
生成AI時代に必要となるスキルについての講義 / 勉強会公開スライドを作成したい。Marp形式で作成してください。
というプロンプトを入力して送信しましょう。
結果の確認
実際に作成されたファイルのプレビューを確認してみましょう。
VSCodeやCursorをお使いの方は⌘ + Shift + vでマークダウンファイルのプレビュー画面を表示できます。
私の手元で作成されたファイルでは下記結果になりました。
ClineによるMarp形式スライドの出力内容
---
marp: true
theme: gaia
paginate: true
style: |
section {
background-color: #f0f2f5;
color: #2c3e50;
font-family: 'Arial', sans-serif;
}
h1, h2 {
color: #2980b9;
}
ul {
line-height: 1.6;
}
img {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
---
<!-- _class: lead -->
# 生成AI時代に必要となるスキル
---
## 目次
1. はじめに
2. 生成AIの現状
3. 求められるスキル
4. 具体的な学習方法
5. まとめ
---
## 1. はじめに
- 生成AIの急速な進化
- ビジネスや社会への影響
- 求められる人材像の変化
---
## 2. 生成AIの現状
### 主要な生成AI技術
- 大規模言語モデル
- ChatGPT, Gemini, Claude
- 自然言語処理
- コード生成
- 画像生成AI
- DALL·E, Midjourney, Stable Diffusion
- テキストから画像生成
- 画像編集
- 音声生成AI
- ElevenLabs, Resemble AI
- テキスト読み上げ
- 音声合成
### ビジネス活用事例
- コンテンツ作成
- カスタマーサポート
- ソフトウェア開発
- マーケティング
### 今後の展望
- マルチモーダルAI
- リアルタイム生成
- パーソナライゼーション
---
## 3. 求められるスキル
### 技術的スキル
- プロンプトエンジニアリング
- 効果的な指示の作成
- コンテキストの管理
- 出力の評価と改善
- AIリテラシー
- モデルの仕組み理解
- 限界とバイアスの認識
- 倫理的考慮事項
### ビジネススキル
- データ分析能力
- データの解釈と活用
- 意思決定支援
- ビジネスインパクトの定量化
- クリティカルシンキング
- AI出力の検証
- バイアスの特定
- 代替案の検討
- 創造的問題解決
- AIを活用したイノベーション
- 新しい価値の創出
- 複雑な課題への対応
---
## 4. 具体的な学習方法
### 体系的学習
- オンラインコース
- Coursera, edX, Udemy
- 大学の公開講座
- 企業研修プログラム
- ハンズオン実践
- Google Colabでの実験
- オープンソースプロジェクト
- 個人プロジェクト
### 実践的学習
- コミュニティ参加
- Meetup, Discordグループ
- カンファレンス参加
- ハッカソン参加
- プロジェクトベース学習
- 実務でのAI活用
- 社内勉強会主催
- オープンイノベーション
### 継続的学習
- 最新情報のフォロー
- 研究論文の追跡
- 技術ブログの購読
- ニュースレターの購読
- スキルのアップデート
- 定期的なスキル評価
- 新しいツールの試用
- ピアレビューの実施
---
## 5. まとめ
- 生成AIはツール
- 適切な活用が重要
- 倫理的な使用
- 人間の創造性が重要
- AIを補完する役割
- 価値判断と意思決定
- 継続的な学習が鍵
- 技術の進化に対応
- 新しいスキルの獲得
- 新しい可能性への挑戦
- イノベーションの促進
- 社会課題の解決
実際に作成されたスライドの一部も下記に紹介します。
それっぽい出力は出ましたね。このように、Marpを使うと、マークダウン形式で記載したファイルからスライドを作成することができます。
しかし、デザインや記載内容が思っていたものとズレていたりしませんか？
Clineには「『生成AI時代に必要な能力』というテーマで講義スライドを作成して」としか指示をしていないので、デザインや構成を制御できないのは当然です。
これを要望通りに近づけるためにはどうするといいでしょうか？
次の章では、具体的にこの方法について解説します。
Clineによる自動生成の問題点
それっぽいスライドの自動生成はできましたが、以下のような課題があると思います。
- スライドに載せる情報の細かな制御が難しい
- スライドのデザインやフォーマット
例えば「この章の情報は〇〇という情報源を引用して記載しよう」「アクセントカラーはピンク色にしよう」という要望があっても、中々反映してもらうことが難しいです。
また、仮に反映できたとしても後から一部の情報を修正する時に反映した情報が消えてしまうなどの不具合も発生しやすいです。
このようにざっくり指示しただけでは項目が安定しないため、実運用の視点では難しいものがあります。
次の章では、この問題を解決するために、スライドの記載内容とデザインを安定させるための仕組みを紹介指定いきます。
要件定義型の自動スライド生成です。
３-２｜要件定義型自動スライド生成
ここでは目的を入力していきなりスライド生成を始めさせるのではなく、ユーザーが入力した目的から、「要件定義書」「基本設計書」「実装手順書」を作成した上で執筆してもらいます。
例えるなら、新卒社員に指示を出してスライドの作成までを実行してもらうための手順書を作成してあげるイメージです。
要件定義書から作成すると、スライドの全体像を決めてから生成が可能なため、『要望を忠実にスライドに落とし込める』、『細かな修正を行いやすい』というメリットがあります。
実際の業務でもスライドの全体像（骨子）を決めた上で中身（Body）の記載を行うと手戻りが少なく作業が進む状況と構造的には同じです。
また、AIに作業をしてもらうので「どのような順番で作業を進めるべきか？」という指示書も同時に作成します。
今回は、要件定義書の情報をもとに、実装内容を落とし込んだ「基本設計書」を参照させつつTODOを1個ずつ消化しながら作業を進めてもらう形式を紹介します。
まずは要件定義書の部分から順番に解説していきます。
要件定義書の作成
要件定義書の構成自体も、ClineやChatGPTなどに設計させてもいいですが、より出力を安定させるために要件定義書のフォーマットをプロンプト内に含めて作成します。
▼ 要件定義書作成のプロンプト：
# 「生成AI時代に必要な能力」の講義スライド作成の要件定義書
## ゴール：
- 生成AI時代に必要なスキル・能力に関する解説を行う講義のスライドを作成
- 大学での講義1コマを想定して、スライドを準備する
- ブラウンを基調としたデザインで、おしゃれで視認性の高いレイアウトを意識する
- 座学を中心に行い、講義スライドの最後の方で課題の提示も行う
- スライドはMarp形式で作成する
上記の要望を達成するための要件定義書を作成してください。
要件定義書は、`要件定義.md`というファイル名で作成してください。
また、以下の要件（要件定義書フォーマット）に従って作成しましょう。
要件定義書は、コードフェンスの中にmd形式のファイルを出力してください。
## 1. 背景・目的
- 全体の目的を説明する。
## 2. 要件
- 必須要件を記載。
- スライド要件を記載。
- Marp形式
- スライド枚数
- デザイン、レイアウトガイド
このプロンプトをClineに入力して実行した結果がこちらです（トグル形式になっています）
Clineによる要件定義書の出力結果
# 要件定義書
## 1. 背景・目的
生成AIの急速な発展に伴い、今後の社会で必要とされるスキル・能力が大きく変化している。本講義では、生成AI時代を生き抜くために必要な能力を解説し、学生が今後のキャリアを考える上での指針を提供することを目的とする。
## 2. 要件
### 必須要件
- 大学の講義1コマ（90分）を想定した内容
- 座学形式を基本とし、最後に課題を提示する構成
- ブラウンを基調としたおしゃれで視認性の高いデザイン
### スライド要件
- 形式: Marp形式（Markdownベースのスライド作成ツール）
- スライド枚数: 30枚程度
- 導入: 5枚
- 本編: 20枚
- 課題提示・まとめ: 5枚
- デザイン・レイアウトガイド
- カラーテーマ:
- 背景: #F5F5F5（明るいグレー）
- 文字: #333333（濃いグレー）
- 見出し: #8B4513（ブラウン）
- リンク: #D2B48C（タン）
- フォント: 視認性の高いサンセリフ体を使用
- レイアウト:
- 1スライド1メッセージを基本とする
- 図表や箇条書きを効果的に活用
- 余白を適度に取り、見やすいデザインを心がける
これで要件定義書の作成が完了しました。このまま次の基本設計に進んでもいいですし、一部要件定義書を手動で修正してから次に進んでも大丈夫です。
続いて、基本設計書の作成について解説します。
基本設計書の作成
先ほど作成した要件定義書（要件定義.yaml）を使って、より具体的な情報を付加した基本設計書（基本設計.yaml）を作成します。
基本設計では、要件定義書で決定した情報をもとに、より具体的なスライド作成につながる情報を記載します。
例えば、具体的なカラーコードやスライド構成、各スライドに記載すべき内容などが該当します。
要件定義書の作成の時と同様に、Clineに自動で作成してもらうためのプロンプトを準備します。
下記に基本設計書のフォーマットとプロンプトを用意しているので、実際にコピペして手元で実行結果を確認してみましょう。
基本設計書作成プロンプト
# 基本設計書の作成
- 要件定義書の情報をもとに、スライド作成に必要な情報を全て用意して、yaml形式でまとめる。
- スライド別に記載するメッセージとボディの内容をそれぞれについて設計する。
下記の要件定義書（md形式）と基本設計書のフォーマットの情報をもとに、基本設計書を作成してください。
フォーマットは、足りない部分や補足すべき部分を補いながら作成してください。
## 要件定義書（md形式）：
要件定義書
1. 背景・目的
生成AIの急速な発展に伴い、今後の社会で必要とされるスキル・能力が大きく変化している。本講義では、生成AI時代を生き抜くために必要な能力を解説し、学生が今後のキャリアを考える上での指針を提供することを目的とする。
2. 要件
必須要件
- 大学の講義1コマ（90分）を想定した内容
- 座学形式を基本とし、最後に課題を提示する構成
- ブラウンを基調としたおしゃれで視認性の高いデザイン
スライド要件
- 形式: Marp形式（Markdownベースのスライド作成ツール）
- スライド枚数: 30枚程度
- 導入: 5枚
- 本編: 20枚
- 課題提示・まとめ: 5枚
- デザイン・レイアウトガイド
- カラーテーマ:
- 背景: #F5F5F5（明るいグレー）
- 文字: #333333（濃いグレー）
- 見出し: #8B4513（ブラウン）
- リンク: #D2B48C（タン）
- フォント: 視認性の高いサンセリフ体を使用
- レイアウト:
- 1スライド1メッセージを基本とする
- 図表や箇条書きを効果的に活用
- 余白を適度に取り、見やすいデザインを心がける
## 基本設計書フォーマット：
```yaml
- 講義名
- 対象
- ゴール
- 講義構成
- 講義の各種内容の構成を記載
- デザインレイアウト
- メインカラー、サブカラー、フォント、スライド構成
- その他必要時な情報を記載
- 上記以外で必要となる情報を付加する
実際にClineに上記のプロンプトを渡して作成してもらった基本設計書は下記です。
Clineが作成した基本設計書
- 講義名: 生成AI時代を生き抜くためのキャリアデザイン
- 対象: 大学生
- ゴール: 生成AI時代に必要なスキル・能力を理解し、今後のキャリアを考える指針を得る
- 講義構成:
- 導入: 5枚
- 1. 講義の目的と背景
- 2. 生成AIの現状とトレンド
- 3. 社会の変化と求められるスキルの変化
- 4. 本講義の構成説明
- 5. 学習目標の提示
- 本編: 20枚
- 1. 生成AIが変える仕事の未来
- 2. 人間に求められる新しい能力
- 3. クリエイティブ思考の重要性
- 4. 問題解決能力の再定義
- 5. データリテラシーの必要性
- 6. コミュニケーション能力の進化
- 7. 倫理的判断力の重要性
- 8. 生涯学習の必要性
- 9. 新しい働き方の可能性
- 10. キャリアデザインの新しい考え方
- 課題提示・まとめ: 5枚
- 1. 講義内容の振り返り
- 2. 今後のアクションプラン
- 3. 課題の提示
- 4. 参考資料・参考文献
- 5. 質疑応答
- デザインレイアウト:
- 背景色: #F5F5F5 (明るいグレー)
- 文字色: #333333 (濃いグレー)
- 見出し色: #8B4513 (ブラウン)
- リンク色: #D2B48C (タン)
- フォント: Noto Sans JP（サンセリフ体）
- スライド構成:
- 1スライド1メッセージを基本
- 図表や箇条書きを効果的に活用
- 余白を適度に取り、見やすいデザイン
- その他:
- スライド枚数: 30枚
- 形式: Marp形式（Markdownベース）
- 講義時間: 90分
各スライドの概要やデザインのレイアウトについて設計をしてもらいました。もしもう一歩踏み込んで、スライド別のメッセージとそれをサポートする情報を加えたスライドにしたいときは、「詳細設計書」を作ってみることをお勧めします。
スライド単位で載せるべき情報を絞れたり、AIに追記修正をしてもらう時の情報の抜け漏れやズレが少なくなります。
ここまでで要件定義書と基本設計書を作成しました。これらの情報を使って実際にスライド作成に移っていきます。
スライド作成に必要な実装は今回全てClineに行ってもらうので、Clineが作業しやすい形で情報を渡してあげる必要があります。
特に、設計書に対して抜け漏れを確認しながら実装を進めていくことは非常に重要です。
実際にスライド作成してもらうために、「作業手順書」の共有をしましょう。
実装手順書の設計
ClineなどのAIがユーザーの指示に従って作業をしてもらうための指示と設計書を準備しましょう。
特に、膨大な量の資料を作成する場合は、LLMは細かい部分を忘れたり省略して実装してしまう可能性があります。
これを、作業の進捗チェックをLLMに行わせることで目的達成のために漏れなくタスク実行をしてもらえるようにします。
下記のようなプロンプトをClineやChatGPTなどに入力して、作成してもらいましょう。
実装手順書作成プロンプト
▼ 実装手順書作成プロンプト：
# 実装手順書（実装手順.md）の作成
## ゴール：
要件定義書、基本設計書の情報を元に、具体的な実装の順番やTODOリストを作成して。
TODOリストはチェックリスト（"- [ ]"）で作成すること。
開発時に常時AI Agentがタスクの進捗を管理できるための作業シートとしても活用します。
環境構築などの情報は必要ないです。
## 要件定義書（md形式）：
要件定義書
1. 背景・目的
生成AIの急速な発展に伴い、今後の社会で必要とされるスキル・能力が大きく変化している。本講義では、生成AI時代を生き抜くために必要な能力を解説し、学生が今後のキャリアを考える上での指針を提供することを目的とする。
2. 要件
必須要件
- 大学の講義1コマ（90分）を想定した内容
- 座学形式を基本とし、最後に課題を提示する構成
- ブラウンを基調としたおしゃれで視認性の高いデザイン
スライド要件
- 形式: Marp形式（Markdownベースのスライド作成ツール）
- スライド枚数: 30枚程度
- 導入: 5枚
- 本編: 20枚
- 課題提示・まとめ: 5枚
- デザイン・レイアウトガイド
- カラーテーマ:
- 背景: #F5F5F5（明るいグレー）
- 文字: #333333（濃いグレー）
- 見出し: #8B4513（ブラウン）
- リンク: #D2B48C（タン）
- フォント: 視認性の高いサンセリフ体を使用
- レイアウト:
- 1スライド1メッセージを基本とする
- 図表や箇条書きを効果的に活用
- 余白を適度に取り、見やすいデザインを心がける
## 基本設計書（yaml形式）
- 講義名: 生成AI時代を生き抜くためのキャリアデザイン
- 対象: 大学生
- ゴール: 生成AI時代に必要なスキル・能力を理解し、今後のキャリアを考える指針を得る
- 講義構成:
- 導入: 5枚
-
- 講義の目的と背景
-
- 生成AIの現状とトレンド
-
- 社会の変化と求められるスキルの変化
-
- 本講義の構成説明
-
- 学習目標の提示
-
- 本編: 20枚
-
- 生成AIが変える仕事の未来
-
- 人間に求められる新しい能力
-
- クリエイティブ思考の重要性
-
- 問題解決能力の再定義
-
- データリテラシーの必要性
-
- コミュニケーション能力の進化
-
- 倫理的判断力の重要性
-
- 生涯学習の必要性
-
- 新しい働き方の可能性
-
- キャリアデザインの新しい考え方
-
- 課題提示・まとめ: 5枚
-
- 講義内容の振り返り
-
- 今後のアクションプラン
-
- 課題の提示
-
- 参考資料・参考文献
-
- 質疑応答
-
- 導入: 5枚
- デザインレイアウト:
- 背景色: #F5F5F5 (明るいグレー)
- 文字色: #333333 (濃いグレー)
- 見出し色: #8B4513 (ブラウン)
- リンク色: #D2B48C (タン)
- フォント: Noto Sans JP（サンセリフ体）
- スライド構成:
- 1スライド1メッセージを基本
- 図表や箇条書きを効果的に活用
- 余白を適度に取り、見やすいデザイン
- その他:
- スライド枚数: 30枚
- 形式: Marp形式（Markdownベース）
- 講義時間: 90分
これらの情報をもとに、下記のフォーマットを参考にして作業手順書（作業手順.md）を作成して。
## 目的
- タスクの全体像を把握, 記載する
## TODOリスト
- スライド作成のためにステップ分割してタスクを記載
## 各ステップの詳細情報
- 上記で設定したTODOリストのタスクを順番に処理するための情報をブレイクダウンし、TODOリスト形式で整理する。
## 参考資料
下記の情報を参照にしてください。
- `要件定義.md`
- どのような内容が記載されているのか補足
- `基本設計.yaml`
- どのような内容が記載されているのか補足
要件定義書の内容や基本設計書の内容は自身が手元で作成した内容に置き換えていただいてOKです。
実際に結果を出力させてみましょう。
私の手元でClineが作成した実装手順書は下記です。
Clineが作成した実装手順書
# 実装手順書
## 目的
- スライド作成の全体像を把握し、タスクを明確化する
- AI Agentがタスクの進捗を管理できる作業シートとして活用する
## TODOリスト
- [ ] 導入部分のスライド作成（5枚）
- [ ] 本編部分のスライド作成（20枚）
- [ ] 課題提示・まとめ部分のスライド作成（5枚）
- [ ] デザインの統一性チェック
- [ ] 全体のレビューと修正
## 各ステップの詳細情報
### 導入部分のスライド作成（5枚）
- [ ] 1. 講義の目的と背景
- 生成AIの急速な発展と社会の変化を簡潔に説明
- 本講義の目的を明確に記載
- [ ] 2. 生成AIの現状とトレンド
- 最新の生成AI技術の動向を図表で説明
- 具体的な事例を紹介
- [ ] 3. 社会の変化と求められるスキルの変化
- 過去10年間のスキル変化をグラフ化
- 今後の予測を提示
- [ ] 4. 本講義の構成説明
- 講義の流れをフローチャートで説明
- [ ] 5. 学習目標の提示
- 具体的な学習目標を3点程度に絞って記載
### 本編部分のスライド作成（20枚）
- [ ] 1. 生成AIが変える仕事の未来
- 各業界の変化を具体例で説明
- [ ] 2. 人間に求められる新しい能力
- 必要な能力をリスト化
- [ ] 3. クリエイティブ思考の重要性
- クリエイティブ思考の定義と具体例
- [ ] 4. 問題解決能力の再定義
- 新しい問題解決のアプローチを説明
- [ ] 5. データリテラシーの必要性
- データの扱い方の基本を解説
- [ ] 6. コミュニケーション能力の進化
- AI時代のコミュニケーションの変化
- [ ] 7. 倫理的判断力の重要性
- AI利用における倫理的問題を提示
- [ ] 8. 生涯学習の必要性
- 継続的な学習の重要性を説明
- [ ] 9. 新しい働き方の可能性
- リモートワークやフリーランスの増加
- [ ] 10. キャリアデザインの新しい考え方
- キャリアパスの多様化を説明
### 課題提示・まとめ部分のスライド作成（5枚）
- [ ] 1. 講義内容の振り返り
- 主要ポイントを箇条書きで整理
- [ ] 2. 今後のアクションプラン
- 具体的な行動指針を提示
- [ ] 3. 課題の提示
- 学生が取り組むべき課題を設定
- [ ] 4. 参考資料・参考文献
- 参考になる資料をリスト化
- [ ] 5. 質疑応答
- 質疑応答の時間を確保
### デザインの統一性チェック
- [ ] カラーテーマの確認（#8B4513, #D2B48C）
- [ ] フォントの統一（Noto Sans JP）
- [ ] レイアウトの一貫性確認
- [ ] 図表のスタイル統一
### 全体のレビューと修正
- [ ] 内容の整合性チェック
- [ ] 誤字脱字の確認
- [ ] スライド枚数の確認（30枚）
- [ ] 講義時間の確認（90分）
## 参考資料
### 要件定義.md
- 講義の背景・目的
- 必須要件（講義形式、デザイン要件）
- スライド要件（形式、枚数、デザインガイド）
### 基本設計.yaml
- 講義名、対象、ゴール
- 講義構成（導入、本編、課題提示・まとめ）
- デザインレイアウト（カラー、フォント、スライド構成）
TODOリスト形式で作業手順を確認できる形式で作成してくれました。
Clineを使ってスライド作成する時は、上記のTODOリストにチェックを入れながら作業を進めてもらう想定です。
以上で、「要件定義書」「基本設計書」「実装手順書」の作成が完了しました。
要望をより確実にスライド作成に反映させるために指示内容を工夫したり、詳細な設計書を作成することも可能です。
ぜひチャレンジして、ノウハウを会得してもらえればと思います。
次の章では、実際にClineを使って全自動でスライドを作成させてみます。
目的だけ入力して実装したケースとの差分に注目すると違いが見えてくるかと思います。
結果を確認しよう
要件定義から設計したスライド作成をやってみましょう。
事前準備として、スライド作成を行うディレクトリの中で/docsというフォルダを追加で作成し、その中に先ほど準備した要件定義.md、基本設計.yaml、実装手順.mdを格納してください。下記のようなフォルダ構成になっているとOKです。
├── article.md
└── docs/
├── 基本設計.yaml
├── 実装手順.md
└── 要件定義.md
ディレクトリのセットアップが完了したら、下記のプロンプトを作成して、Clienに入力して実行しましょう。
▼ スライド作成プロンプト
# 基本の作業方法
Marp形式のスライドを作成するプロジェクトです。
- 全ての執筆作業は、`main.md`に記載する
- `docs/実装手順.md`に記載されている作業リストを確認する。チェックボックスがついている内容があなたが作業すべき項目です
- `/docs`に記載されている「要件定義.md」、「基本設計.yaml」「実装手順.md」を参考にして作業する
- `実装手順.md`にやるべき手順とチェックリストが付いているので、その内容に従って進める。
- チェックリスト単位で作業が完了したら、ユーザーに作業が完了した旨を通知して、内容確認を求める。
- ユーザーがレビューしてOKサインをテキスト入力でもらえたら、チェックボックスにチェックをつけて次の作業に移る。
- 全てのチェックボックスにチェックがついたら完了
このプロンプトを実行するとスライド作成の作業が自動で進むと思います。
作業の様子を動画で見てみたい方はこちらの動画を参照してください。
Clineが実際に作ってくれたスライドの一部を紹介します。
いかがでしょうか？
要件を整理していると、それを反映してスライドを作成してくれます。
修正が必要な時は、要件や基本設計の部分を変更した上で再度修正の指示を出すと反映をしてくれます。
この時の指示は、「具体的にどの部分をどう修正したいのか？」を補足してあげると要望を忠実に実装に落とし込んでもらいやすいです。
スライド量が多くなってきた時に特に有効です。
今回Clineが実際に作成したスライドのMarp形式のファイルは下記です。
Clineが作成したスライドのMarp形式ファイル
---
marp: true
theme: default
style: |
section {
background-color: #8B4513;
color: #D2B48C;
font-family: 'Noto Sans JP', sans-serif;
}
---
# 講義の目的と背景
## 生成AIの急速な発展と社会の変化
- 過去10年間のAI技術の進化
- 社会・産業への影響
- 求められる人材像の変化
## 本講義の目的
1. 生成AIがもたらす変化を理解する
2. 新しい時代に必要なスキルを把握する
3. 今後のキャリア設計に役立つ知識を習得する
---
# 生成AIの現状とトレンド
## 最新技術の動向
- 自然言語処理の進化
- 画像生成技術の進歩
- マルチモーダルAIの登場
## 主要な生成AIツール
- ChatGPT（OpenAI）
- Midjourney（画像生成）
- GitHub Copilot（コーディング支援）
## 具体的な活用事例
- コンテンツ作成支援
- デザイン制作の効率化
- プログラミング支援
---
# 社会の変化と求められるスキルの変化
## 過去10年間のスキル変化
- 技術スキルの重要性増加
- ソフトスキルの多様化
- データ活用能力の必要性
## 今後のスキル予測
- クリエイティブ思考
- データリテラシー
- 倫理的判断力
- 継続的学習能力
## 求められる人材像
- 技術を活用できる人材
- 新しい価値を創造できる人材
- 倫理観を持った人材
---
# 本講義の構成説明
## 講義の流れ
1. 導入（生成AIの現状と影響）
2. 本編（求められるスキルと能力）
3. まとめ（今後のキャリアデザイン）
## 各パートの目的
- 導入：現状認識と問題意識の醸成
- 本編：具体的なスキルと能力の理解
- まとめ：実践的なアクションプランの策定
## 期待する成果
- 生成AI時代のキャリア戦略の構築
- 必要なスキルの明確化
- 具体的な学習計画の立案
---
# 学習目標の提示
## 本講義の学習目標
1. 生成AIがもたらす変化を理解する
2. 新しい時代に必要なスキルを把握する
3. 今後のキャリア設計に役立つ知識を習得する
## 具体的な達成指標
- 生成AIの現状とトレンドを説明できる
- 求められるスキルを3つ以上挙げられる
- 自身のキャリアプランを具体的に描ける
## 講義後のアクション
- 学習目標の自己評価
- 不足スキルの洗い出し
- 具体的な学習計画の立案
---
# 生成AIが変える仕事の未来
## 各業界の変化
- IT業界：コーディング支援ツールの普及
- クリエイティブ業界：AIによるデザイン支援
- 教育業界：個別最適化された学習支援
- 医療業界：診断支援と治療計画の最適化
## 消える仕事・変わる仕事
- ルーティンワークの自動化
- データ入力・処理業務の効率化
- 翻訳・通訳業務の支援
## 新たに生まれる仕事
- AIトレーナー
- プロンプトエンジニア
- AI倫理コンサルタント
---
# 人間に求められる新しい能力
## 技術的スキル
- プロンプトエンジニアリング
- AIモデルのファインチューニング
- データ分析と可視化
## ソフトスキル
- クリエイティブ思考
- 複雑な問題解決能力
- 適応力と柔軟性
## 倫理的判断力
- AI利用における倫理的判断
- プライバシー保護の意識
- バイアス検出と是正
---
# クリエイティブ思考の重要性
## クリエイティブ思考とは
- 既存の枠組みを超えた発想
- 異なる要素の組み合わせ
- 新しい価値の創造
## クリエイティブ思考の具体例
- プロンプトエンジニアリング
- 新しいビジネスモデルの考案
- 既存技術の新しい応用方法
## クリエイティブ思考の鍛え方
- 多様な分野の知識習得
- 異分野とのコラボレーション
- 常識を疑う習慣
---
# 問題解決能力の再定義
## 従来の問題解決
- 既存のフレームワークの適用
- 過去の事例の模倣
- 線形的な思考プロセス
## AI時代の問題解決
- 非線形的なアプローチ
- データ駆動型の意思決定
- 複数の解決策の並列検討
## 新しい問題解決手法
- デザイン思考の活用
- プロトタイピングの重要性
- 迅速なフィードバックループ
---
# データリテラシーの必要性
## データリテラシーとは
- データを適切に扱う能力
- データの信頼性を評価する力
- データから洞察を得るスキル
## データリテラシーの重要性
- データ駆動型意思決定の基盤
- AI活用の前提条件
- 情報過多時代の必須スキル
## データリテラシーの習得方法
- 基本的な統計知識の習得
- データ可視化ツールの活用
- データ分析の実践経験
---
# コミュニケーション能力の進化
## AI時代のコミュニケーションの変化
- 人間同士のコミュニケーションの重要性増加
- 多様なバックグラウンドを持つ人々との協働
- リモート環境での効果的なコミュニケーション
## 求められる新しいコミュニケーションスキル
- プロンプトエンジニアリング
- 複雑な概念の簡潔な説明
- 異文化間コミュニケーション
## コミュニケーション能力の向上方法
- アクティブリスニングの実践
- フィードバックの活用
- 多様なコミュニケーションツールの習得
---
# 倫理的判断力の重要性
## AI利用における倫理的課題
- バイアスと差別の問題
- プライバシー保護の重要性
- 著作権と知的財産権の問題
## 倫理的判断力の必要性
- AIシステムの適切な利用
- 社会的影響の考慮
- 長期的な視点での判断
## 倫理的判断力の養成方法
- 倫理フレームワークの理解
- ケーススタディの活用
- 多様な視点からの議論
---
# 生涯学習の必要性
## 技術進化のスピード
- 技術の半減期の短縮
- 新しいツールの急速な普及
- 知識の陳腐化速度の加速
## 継続的学習の重要性
- キャリアの持続可能性
- 新しいスキルの習得
- 適応力の維持
## 効果的な学習方法
- マイクロラーニングの活用
- オンライン学習プラットフォームの利用
- 実践的なプロジェクトへの参加
---
# 新しい働き方の可能性
## リモートワークの普及
- 場所に縛られない働き方
- グローバルな人材活用
- ワークライフバランスの改善
## フリーランスの増加
- プロジェクトベースの働き方
- 複数の収入源の確保
- 専門性の高い人材の活躍
## 新しい雇用形態
- ジョブ型雇用の普及
- 副業・兼業の一般化
- プロジェクト単位の契約
---
# キャリアデザインの新しい考え方
## 従来のキャリアパス
- 終身雇用制度
- 年功序列型の昇進
- 単一の専門分野
## 新しいキャリアパス
- 複数の専門分野を持つ
- プロジェクトベースのキャリア
- 柔軟なキャリアチェンジ
## キャリアデザインのポイント
- 継続的なスキルアップ
- ネットワークの構築
- 自己ブランディング
---
# 講義内容の振り返り
## 主要ポイント
1. 生成AIの現状とトレンド
2. 求められる新しいスキル
3. キャリアデザインの新しい考え方
## 重要な気づき
- 技術進化のスピード
- 継続的学習の必要性
- 柔軟なキャリア設計
## 今後の展望
- AIと人間の協働
- 新しい働き方の可能性
- 持続可能なキャリア形成
---
# 今後のアクションプラン
## 短期目標（3ヶ月以内）
- 生成AIツールの習得
- データリテラシーの向上
- ネットワークの拡大
## 中期目標（1年以内）
- 新しいスキルの習得
- プロジェクトベースの経験
- 自己ブランディングの確立
## 長期目標（3年以内）
- 専門性の深化
- 複数の収入源の確保
- 持続可能なキャリアの構築
---
# 課題の提示
## 個人課題
1. 自身のスキルマップの作成
2. 学習計画の立案と実行
3. 定期的な自己評価
## グループ課題
1. AI活用事例の調査
2. 新しいビジネスモデルの提案
3. 倫理的課題の議論
## 提出期限
- 個人課題：2週間後
- グループ課題：1ヶ月後
---
# 参考資料・参考文献
## 参考書籍
- 『AI時代のキャリアデザイン』
- 『生成AIが変える仕事の未来』
- 『データリテラシーの教科書』
## オンラインリソース
- Coursera：AI関連コース
- edX：データサイエンス講座
- Udemy：プロンプトエンジニアリング講座
## 参考サイト
- OpenAI公式ブログ
- Google AI Blog
- 経済産業省 AIガイドライン
---
# 質疑応答
## 質問受付時間
- 本日：15:00-16:00
- メールでの質問：1週間以内
## 質問方法
1. 手を挙げて発言
2. チャットでの質問
3. メールでの質問
## 回答方法
- 直接回答
- 参考資料の提示
- 個別相談の設定
最初に作成した、目的のみClineに伝えてスライドを作成する場合と比べてどのような印象を持ちましたか？
- 中間ファイルを作成しているため、要望を的確に反映しやすい
- 中間ファイルが作業ログ的な役割も果たしており、修正がしやすい
のような点は要件定義からしっかり作成したスライドの方が優れているのではないかと思います。
また、スライド生成の際に使用したプロンプトは、.clinerulesというファイルに記載しておくことも可能です。
.clinerulesは、Clineへのカスタムプロンプトを設定できるファイルのイメージです。
ここに作業手順や参照先のファイルのパスなどを記載しておくと、それらの情報を参照して作業可能です。
例えば、Clineのチャット入力欄には「スライドを生成して」と指示するだけで要件定義書や基本設計書、実装手順書を確認した上でスライド作成を進めてくれます。
このように、手軽に工夫次第で自由にスライドを作成することができるのが「Cline × Marp」の魅力です。
ぜひこれ以外の例や、オリジナルのプロンプトに改良してスライド作成にチャレンジしてみて下さい。
おわりに
いかがだったでしょうか？
今回は、スライドの自動生成をMarpとClineを使って実現するための方法を紹介しました。
記事中で紹介したように、いきなりスライドを作成するのではなく、要件定義書などの中間ファイルを作成することで要望の反映やデザインの安定に寄与できることが分かりました。
詳細設計書を作ったり、プロンプトを工夫する、要件定義をする前の要求レベルの情報をリッチにする等、さらなる工夫の余地は残っています。
興味のある方は是非ご自身で工夫して肌感を掴んでください。
おまけ
生成AIに関する記事を執筆しているので併せてご覧ください。
生成AIの勉強方法をしたい人向け
今回紹介したClineの使用方法を知りたい人向け
生成AIを実務で使いこなしたい人向け
Discussion