デザインとWebを楽しく学ぶLT大会 2025/08/21

自己紹介

梶原 睦 / かじはら むつみ

デザインとWebを楽しく学ぶLT大会 2025/08/21

毎日忙しい


でもやりたいことがいっぱいある


本当に時間がない


でも横になってスマホいじってしまう...


かれこれ数時間こんな感じだ


せめてこんな姿でも生産的なことができれば...


例えばプレゼン資料作るとか


...ってパソコンじゃなきゃ無理か

デザインとWebを楽しく学ぶLT大会 2025/08/21

そんな人間の怠惰を技術の力で肯定する！！

デザインとWebを楽しく学ぶLT大会 2025/08/21

プレゼン資料作成に必要なもの

  • PC
  • PCを開いて作業を始めようとする気持ち
デザインとWebを楽しく学ぶLT大会 2025/08/21

さらに

本質ではない所に時間が取られる

  • テーマを用意する
  • フォントを選ぶ
  • レイアウトを考える
  • 色を選ぶ
  • 画像を探す
  • 文字サイズを調整する
デザインとWebを楽しく学ぶLT大会 2025/08/21

提案：モバイルファーストなスライド作成

技術スタックの選定

フェーズ ツール・サービス 備考
入力 GitHub Issue Template テンプレートによる入力
処理 Claude GitHub App マークダウンによる文章生成と
変換 GitHub Actions + Marp スライドへの変換
公開 GitHub Pages プレビュー作成と公開

実現する価値

上記のツールを組み合わせることで、スマホのGitHubアプリをぽちぽちするだけで上でプレゼン資料作成ワークフローが実現します

デザインとWebを楽しく学ぶLT大会 2025/08/21

全体像

デザインとWebを楽しく学ぶLT大会 2025/08/21

用意するもの

  • Claude Codeのプラン💰
  • GitHubアカウント🐙
デザインとWebを楽しく学ぶLT大会 2025/08/21

技術選定 1

GitHub Issue Template

構造化された入力インターフェース


選定理由

  • スマホでたくさん文章かくのだるいな
  • 選択形式・チェック方式なら負担減る
  • 入力必須項目バリデーション機能の活用
  • GitHubアカウントのみで利用可能
デザインとWebを楽しく学ぶLT大会 2025/08/21

技術選定 2

Claude GitHub App

選定理由

  • GitHub統合によるシームレスな連携
  • コンテキスト理解能力の高さ
  • マークダウンネイティブな出力

GitHubでの呼び出し方

やっといて @claude

とメンションするだけでOK

デザインとWebを楽しく学ぶLT大会 2025/08/21

技術選定 3

GitHub Actions

選定理由

  • イベントドリブンな自動実行
    • マージが実行されたら、MarpコマンドでHTMLに変換
    • GitHub Pagesにデプロイ
  • 環境依存の排除
    • ローカルではなくGitHub上で動作するので、ローカル環境の依存を排除
  • 並列処理可能
デザインとWebを楽しく学ぶLT大会 2025/08/21

技術選定 4

Marp

選定理由

  • Markdownでスライド作成可能
    • エンジニアフレンドリー❤️
  • CSSでデザインをこだわれる
  • この資料もMarpで作成しています
デザインとWebを楽しく学ぶLT大会 2025/08/21

技術選定 5

GitHub Pages

選定理由

  • PDF、パワポを出力してダウンロード？
    • かったるい！！
  • MarpはHTML出力も可能
    • それを公開しちゃえばいい
  • GitHub Actionsで自動デプロイができる
  • パブリックリポジトリなら追加費用なし
デザインとWebを楽しく学ぶLT大会 2025/08/21

ディレクトリ構造

├── .github/
│   ├── ISSUE_TEMPLATE/イシューテンプレート
│   └── workflows/ワークフロー設定
├── slides/
│   └── 各スライドのディレクトリ/
│       ├── slide.md
│       └── images/
├── templates/スライドテンプレート
├── themes/スライドテーマ
└── CLAUDE.md
デザインとWebを楽しく学ぶLT大会 2025/08/21

実装手順

  1. リポジトリを作成
  2. Claude GitHub Actions をリポジトリに導入
  • GitHub上から設定可能
  • configの環境変数名に注意
  1. Issue Templateを作る
  2. CLAUDE.mdを整理
  3. GitHub Pagesを有効化
  4. GitHub Actionsを整理
  • スライドが作成され、プッシュされるごとに、MarpでHTMLにエクスポート
  • GitHub Pagesにデプロイ
  1. スライドのThemeとなるCSSを作成
デザインとWebを楽しく学ぶLT大会 2025/08/21

デモンストレーション📱

デザインとWebを楽しく学ぶLT大会 2025/08/21

パフォーマンス指標

処理時間

フェーズ ツール・サービス 所要時間 頑張る主体
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

従来手法との比較

項目 従来手法 本システム
必要機器 PC スマートフォン
必要アプリ Office等 GitHubアプリ、ブラウザ
作成時間 2~3時間 10分
バージョン管理 Fix_最新版_こっちが最新_250821.pptx Git
公開 別途作業 自動
GitHubの草 生えない 生える🌱
デザインとWebを楽しく学ぶLT大会 2025/08/21

こんなことに活用したい

適用例

  1. 技術勉強会のLT資料

    • スライド作成の負担減で登壇機会が増える

  2. 社内定例報告

    • 会社テンプレートを作成すれば、社内会議もスムーズ

  3. 勉強内容の即座の可視化

    • 思考の整理とアウトプット
    • 「Figmaについて勉強したいんだけど、ポイントをまとめて@claude」

  4. チーム共有資料

    • 開発方針やプロジェクト進捗状況のスライド化で合意形成や情報共有が捗る
デザインとWebを楽しく学ぶLT大会 2025/08/21

まとめ

実現したこと

  • スマホオンリーなスライド作成作業
  • ほぼ自動化されたワークフロー
  • 思いついてから10分後にはスライドが公開

リポジトリ

https://github.com/Mutsumix/marp-slides-generator/

デザインとWebを楽しく学ぶLT大会 2025/08/21

ありがとうございました🙏

デザインとWebを楽しく学ぶLT大会 2025/08/21

# プレゼン資料作成のプロセス ### 従来の資料作成プロセス - **PCが必須** - PowerPoint、Keynote等のデスクトップアプリケーション ### 結果として **「思いついた時にすぐ作れない」** ---

こだわろうとすると無限にこだわれてしまう 脳に負荷がかかることを知っているので、腰が重くなる

ソリューションの概要を提示 各技術の役割を明確に 時間配分: 1分

![bg right:40% 80%](./image/architecture.drawio.png)

全体のフローを視覚的に説明 各コンポーネントの連携を強調 時間配分: 45秒

Issue Templateを選んだ技術的理由 モバイルファーストの観点から最適 時間配分: 1分

Cursorとか他のエージェントでもできると思うけど せっかくClaudeに課金してるのでたくさん使いたい

PCがいらない！

Notion、Slack、Zenn、QiitaなどでMarkdownを使うことが多い

GitHub Pagesの技術的利点 即座に公開できる仕組み 時間配分: 45秒

実装における技術的な工夫 保守性と拡張性を考慮 時間配分: 1分

実際の処理時間を提示 高速性をアピール 時間配分: 45秒

定量的な比較を提示 優位性を明確に 時間配分: 1分

key takeawayを強調 リポジトリへの誘導 質疑応答の準備 時間配分: 45秒