会社デザインのスライドをサクサク作ろう ~MarpとAgent Skillsを利用したスライド作成~

MarpとAgent Skillsを組み合わせ、会社や組織のカスタムデザインのスライドを効率的に作成する事例を紹介します。

Transcript

1. 会社デザインのスライドをサクサク作ろう ~MarpとAgent Skillsを利用したスライド作成~ 2026-10-29 AI活用LT祭り 北嶋 悠斗(pipepasta) / フリュー株式会社 © FURYU Corporation. 1
2. 自己紹介 北嶋 悠斗 ソフトウェアエンジニア@フリュー株式会社 プリントシール機の連動サービス「ピクトリンク」の開発を担当 2026年度からイネイブリングチーム(商品開発チームの技術支援が 仕事) GitHub: pipepasta Twitter(新X): @pipepasta_ © FURYU Corporation. 2
3. 今日の話を持ち帰ってもらえると・・・ エンジニアの効率化を周りにも広げられる エンジニア1人がささっと仕組みを用意できる 使うのは、普段PPTで社内資料を作るメンバー全員(マネージャ・非エンジニアなど) スライド作成のtoilが減り、伝えたいことに集中できる 結果として、情報共有や意思決定のリードタイムに寄与できる 本セッション資料も、「どう伝えればよいか」という中身だけに時間をかけて作りました © FURYU Corporation. 3
4. INDEX 01 02 03 © FURYU Corporation. Marpとは Agent Skillsを組み合わせる 持ち帰ってできること 4
5. Marpとは © FURYU Corporation. 5
6. Marpとは Markdownでスライドを作れるツール ページ目のタイトル # 1 - 箇条書き --- <!-- ハイフン3つでページ区切り --> # 2 | 表 | も | 書ける | よ | |---|---|---|---| ページ目のタイトル Marp CLI で HTML / PDF / PNG にエクスポート可能 VSCode extensionでリアルタイムプレビュー可能 みのるんさん作「パワポ作るマン」(minorun365/marp-agent) もMarpで描画 © FURYU Corporation. 6
7. Marp単体で嬉しいこと Markdownをソースとしてスライドが生成される 人間、AIともに読み書きしやすい git管理に向いている テーマCSSを用意すれば、カスタムデザインのスライドが誕生する 本資料はフリューのスライドデザインを再現した furyu.css を使ったスライドです 見た目は整えてもらえるので、伝えたい中身を考えることに集中できる © FURYU Corporation. 7
8. Agent Skillsを組み合わせる © FURYU Corporation. 8
9. Agent Skills とは AIエージェント用に指示やメタデータをパッケージ化したもの SKILL.md に発火条件と手順を書く 同じフォルダに テンプレート・スクリプト・参考資料を同梱できる ユーザの依頼が発火条件に合うと、AIが自分でスキルを読み込んで従う Claude Code ではプラグインとして配布・インストールできる my-skill/ ├── SKILL.md ├── references/ └── template/ # 発火条件 + 手順書 # AI に読ませたい補足資料 # そのまま使わせたいファイル 毎回同じプロンプトを貼る 再利用可能な手順とファイルをセットで配る © FURYU Corporation. 9
10. SKILL.md の例(簡略化) --name: furyu-marp-slides description: --- フリュー社内テンプレート準拠のスライドをMarpで作成するスキル。「Marpで社内スライド作って」と言われたら使う ## 手順 1. 目的・聴衆・発表者・日付を確認する 2. template/furyu-theme/ を作業ディレクトリにコピーする 3. Markdown を生成する（利用可能な class は以下…） 4. marp-cli で描画して PNG を確認する : 発火条件。AI はここを見て「今このスキルを使うべきか」を判断する 本文は人間向けの手順書と同じく自然言語 skillを作成するskillもある(skill-creator) description © FURYU Corporation. 10
11. MarpとSkillsを組み合わせる推しポイント 非決定的なAIを決定的なツールで補強するところ デザイン、出力フォーマットは決定的(Marpや静的リソースのおかげ) 中身は非決定的 目的「意図通りに内容が伝わるスライドを作る」へのあくまでアシスト [IMO]良いSkillsの条件: 柔軟な部分と決定的な部分の使い分けが明確になっている 最近の例: nanaismさんの yomiyasu スキル(AI生成の日本語を自然に直すスキル) linterの決定的な判定と、文脈を考慮した柔軟な判断を両立している © FURYU Corporation. 11
12. 持ち帰ってできること © FURYU Corporation. 12
13. 持ち帰ってできること 1. テーマCSSで自社デザインのスライドを再現する 既存テンプレートの配色・ロゴ・背景画像をCSSに起こす ページ種類(表紙・目次・本文)ごとにclassを用意する 2. Skillを作成する に「{自社}テンプレートでスライド作って」という発火条件 手順(確認事項 → テンプレコピー → Markdown生成 → Marpによる描画) template/ にCSSと画像、 references/ にclassの記法一覧 description 3. マーケットプレイスからスキル配布 /plugin marketplace add your-org/your-repo # マーケットプレイス用のGitHubリポジトリを組織で用意する /plugin install your-skill@your-plugin # 各自がインストールする © FURYU Corporation. 13