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
46
軽率に資料をスライド化しよう
Mutz
August 21, 2025
Tweet
Share
More Decks by Mutz
See All by Mutz
地域コミュニティを活かす市民開発の可能性
mutsumix
0
64
社員のスキルチェックのためにスマホアプリを作った話
mutsumix
0
46
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
410
地味に効く、ドキュメント作成の AI 活用術
mutsumix
0
82
人間コーチとつくる大人の学習習慣
mutsumix
0
58
技術書典18結果報告
mutsumix
2
220
水耕栽培に全部賭けろ
mutsumix
0
600
Beyond Coding: The Power of Diverse Paths
mutsumix
0
40
AIフレンドリーアーキテクチャについて考える
mutsumix
0
140
Other Decks in Programming
See All in Programming
contribution to astral-sh/uv
shunsock
0
530
チームの境界をブチ抜いていけ
tokai235
0
220
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
630
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.5k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
370
CSC509 Lecture 06
javiergs
PRO
0
270
理論と実務のギャップを超える
eycjur
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
610
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.8k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
Building Applications with DynamoDB
mza
96
6.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Visualization
eitanlees
149
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A better future with KSS
kneath
239
18k
Done Done
chrislema
185
16k
How STYLIGHT went responsive
nonsquared
100
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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