Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
軽率に資料をスライド化しよう
Search
Mutz
August 21, 2025
Programming
0
39
軽率に資料をスライド化しよう
Mutz
August 21, 2025
Tweet
Share
More Decks by Mutz
See All by Mutz
地域コミュニティを活かす市民開発の可能性
mutsumix
0
52
社員のスキルチェックのためにスマホアプリを作った話
mutsumix
0
43
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
320
地味に効く、ドキュメント作成の AI 活用術
mutsumix
0
81
人間コーチとつくる大人の学習習慣
mutsumix
0
48
技術書典18結果報告
mutsumix
2
220
水耕栽培に全部賭けろ
mutsumix
0
590
Beyond Coding: The Power of Diverse Paths
mutsumix
0
40
AIフレンドリーアーキテクチャについて考える
mutsumix
0
130
Other Decks in Programming
See All in Programming
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
980
Advance Your Career with Open Source
ivargrimstad
0
210
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
640
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
300
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
700
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
330
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
310
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
How to Think Like a Performance Engineer
csswizardry
27
2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to Ace a Technical Interview
jacobian
280
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Gamification - CAS2011
davidbonilla
81
5.5k
Transcript
デザインとWebを楽しく学ぶLT大会 2025/08/21 1
梶原 睦 / かじはら むつみ 株式会社 シスマック DX ソリューション事業部 部長
Twitter(現 X): ムツミックス @Mutsumix_dev Voicy: Mutsumix の進捗どう? 技術書典: 自宅水耕栽培で毎日サラダ生活 最近は受託開発の提案やったり営業やったり研修講師やったり総務やったり 自己紹介 デザインとWebを楽しく学ぶLT大会 2025/08/21 2
毎日忙しい でもやりたいことがいっぱいある 本当に時間がない でも横になってスマホいじってしまう... かれこれ数時間こんな感じだ せめてこんな姿でも生産的なことができれば... 例えばプレゼン資料作るとか ...ってパソコンじゃなきゃ無理か デザインとWebを楽しく学ぶLT大会 2025/08/21
3
そんな人間の怠惰を技術の力で肯定する!! そんな人間の怠惰を技術の力で肯定する!! デザインとWebを楽しく学ぶLT大会 2025/08/21 4
PC PC を開いて作業を始めようとする気持ち プレゼン資料作成に必要なものを考える デザインとWebを楽しく学ぶLT大会 2025/08/21 5
特に本質ではない所に時間が取られる テーマを用意する フォントを選ぶ レイアウトを考える 色を選ぶ 画像を探す 文字サイズを調整する さらに時間が必要 デザインとWebを楽しく学ぶLT大会 2025/08/21
6
技術スタックの選定 フェーズ ツール・サービス 備考 入力 GitHub Issue Template テンプレートによる入力 処理
Claude GitHub App マークダウンによる文章生成 変換 GitHub Actions + Marp スライドへの変換 公開 GitHub Pages プレビュー作成と公開 実現できること 上記のツールを組み合わせることで、スマホで GitHub アプリをぽちぽちするだけで プレゼン資料作成ワークフローが実現します 提案:モバイルファーストなスライド作成 デザインとWebを楽しく学ぶLT大会 2025/08/21 7
用意するもの Claude Code のプラン GitHub アカウント デザインとWebを楽しく学ぶLT大会 2025/08/21 8
GitHub Issue Template 構造化された入力インターフェース 選定理由 スマホでたくさん文章かくのだるいな 選択形式・チェック方式なら負担減る 入力必須項目バリデーション機能の活用 GitHub アカウントのみで利用可能
技術選定 1 デザインとWebを楽しく学ぶLT大会 2025/08/21 9
Claude GitHub App 選定理由 GitHub 統合によるシームレスな連携 コンテキスト理解能力の高さ マークダウンネイティブな出力 GitHub での呼び出し方
やっといて @claude とメンションするだけで OK 技術選定 2 デザインとWebを楽しく学ぶLT大会 2025/08/21 10
GitHub Actions 選定理由 イベントドリブンな自動実行 マージが実行されたら、Marp コマ ンドで HTML に変換 GitHub
Pages にデプロイ 環境依存の排除 ローカルではなく GitHub 上で動作 するので、ローカル環境の依存を排 除 並列処理可能 技術選定 3 デザインとWebを楽しく学ぶLT大会 2025/08/21 11
Marp 選定理由 Markdown でスライド作成可能 エンジニアフレンドリー CSS でデザインをこだわれる この資料も Marp で作成しています
技術選定 4 デザインとWebを楽しく学ぶLT大会 2025/08/21 12
GitHub Pages 選定理由 PDF、パワポを出力してダウンロード? かったるい!! Marp は HTML 出力も可能 それを公開しちゃえばいい
GitHub Actions で自動デプロイができる パブリックリポジトリなら追加費用なし 技術選定 5 デザインとWebを楽しく学ぶLT大会 2025/08/21 13
全体像 デザインとWebを楽しく学ぶLT大会 2025/08/21 14
ディレクトリ構造 ├── .github/ │ ├── ISSUE_TEMPLATE/イシューテンプレート │ └── workflows/ワークフロー設定 ├──
slides/ │ └── 各スライドのディレクトリ/ │ ├── slide.md │ └── images/ ├── templates/スライドテンプレート ├── themes/スライドテーマ └── CLAUDE.md デザインとWebを楽しく学ぶLT大会 2025/08/21 15
実装手順 1. リポジトリを作成 2. Claude GitHub Actions をリポジトリに導入 GitHub 上から設定可能
config の環境変数名に注意 3. Issue Template を作る 4. CLAUDE.md を整理 5. GitHub Pages を有効化 6. GitHub Actions を整理 スライドが作成され、プッシュされるごとに、Marp で HTML にエクスポート GitHub Pages にデプロイ 7. スライドの Theme となる CSS を作成 デザインとWebを楽しく学ぶLT大会 2025/08/21 16
デモンストレーション デモンストレーション デザインとWebを楽しく学ぶLT大会 2025/08/21 17
パフォーマンス指標 処理時間 フェーズ ツール・サービス 所要時間 頑張る主体 Issue 作成 GitHub Issue
Template 1 分 人間 Claude 生成 Claude GitHub App 3 分 AI マージ作業 GitHub の画面をぽちぽち 1 分 人間 Actions 実行 GitHub Actions + Marp 2 分 AI Pages 公開 GitHub Pages 3 分 AI 合計: 約 10 分で公開完了 デザインとWebを楽しく学ぶLT大会 2025/08/21 18
従来手法との比較 項目 従来手法 本システム 必要機器 PC スマートフォン 必要アプリ Office 等
GitHub アプリ、ブラウザ 作成時間 2~3 時間 10 分 バージョン管理 Fix最新版こっちが最新_250821.pptx Git 公開 別途作業 自動 GitHub の草 生えない 生える デザインとWebを楽しく学ぶLT大会 2025/08/21 19
適用例 1. 技術勉強会の LT 資料 スライド作成の負担減で登壇機会が増える 2. 社内定例報告 会社テンプレートを作成すれば、社内会議もスムーズ 3.
勉強内容の即座の可視化 思考の整理とアウトプット 「Figma について勉強したいんだけど、ポイントをまとめて@claude」 4. チーム共有資料 開発方針やプロジェクト進捗状況のスライド化で合意形成や情報共有が捗る こんなことに活用したい デザインとWebを楽しく学ぶLT大会 2025/08/21 20
実現したこと スマホオンリーなスライド作成作業 ほぼ自動化されたワークフロー 思いついてから10 分後にはスライドが公開 リポジトリ https://github.com/Mutsumix/marp-slides-generator/ まとめ デザインとWebを楽しく学ぶLT大会 2025/08/21
21
ありがとうございました デザインとWebを楽しく学ぶLT大会 2025/08/21 22