イケてるスライド作成ツール Slidevを使ってみよう！

Slidevの魅力紹介用LT資料

Transcript

1. イケてるスライド作成ツール Slidevを使ってみよう！ 2026/02/20 vana4 Copyright © 3-shake, Inc. All Rights Reserved.
2. 「Googleスライドでコードを貼ると見づらい」 「デザインに時間がかかって、内容に集中できない」 「スライドのバージョン管理ができない」 ・・・ もっとエンジニアらしいやり方、ありますよ。 2 プレゼン資料作成ってめんどくさいですよね
3. 1 Slidevってなに？ 2 なぜSlidevを使うのか？ 3 Slidevを始めてみよう 3 今日お話しすること
4. 01 Slidevってなに？ Copyright © 3-shake, Inc. All Rights Reserved.
5. 💡 Markdownで書ける、エンジニア向けスライド作成ツール Markdown コンテンツに集中 Web技術 Vue 3 + Vite OSS 無料で使える ♡ AI AIツールと相性良し 5 Slidev（スライディブ）とは？
6. Shikiによる美しいシンタックスハイライト ViteベースのHMR（Hot Module Replacement） PDF / PPTX / Webページとしてエクスポート・公開可能 6 Slidevの主な特徴
7. 1 Shikiによる高精度シンタックスハイライト 2 行ハイライトで強調表示（複数行の順次ハイライトも可能！） 3 Monaco Editorでライブコーディング（プレゼン中にコード編集可能！） console.log(add(1, 2)); console.log('Hello World') function add(a: number, b: number) { return a + b; } console.log('Hello World') function add(a: number, b: number) { return a + b; } console.log(add(1, 2)); 7 エンジニア最大のメリット：コードの表現力
8. 02 なぜSlidevを使うのか？ Copyright © 3-shake, Inc. All Rights Reserved.
9. Slidev Marp Googleスライド 記法 Markdown + Vue Markdown WYSIWYG コードハイライト あり（高精度） あり 限定的 インタラクティビティ 高度 低い 普通 Git管理 可能 可能 困難 エクスポート PDF/PPTX/SPA PDF/PPTX/HTML PPTX/PDF 費用 無料（OSS） 無料（OSS） 有料 9 他のツールと比べてみよう
10. コードが美しい Googleスライドにコードを貼り付ける苦痛から解放される Gitで管理できる バージョン管理、差分確認、チームでの共有が容易 Webページとして公開 GitHub Pagesで手軽にスライドを共有できる 10 Slidevが選ばれる理由
11. 普段の開発ワークフローの延長でスライドが作れる 知っておくとスムーズ Node.js（>= 18.0）の環境が必要 Markdownの基本的な書き方の知識は必須 カスタマイズにはHTML/CSSの知識があると便利 とはいえ、普段コードを書いているエンジニアなら問題なし！ 11 始める前に知っておきたいこと
12. 03 Slidevを始めてみよう Copyright © 3-shake, Inc. All Rights Reserved.
13. いくつかの質問に答えるだけでプロジェクトが自動作成される # pnpm （推奨） pnpm create slidev •▪▲ Slidev Creator v0.50.0-beta.7 ✔ Project name: … project-name Scaffolding project in project-name ... Done. ✔ Install and start it now? … yes ✔ Choose the package manager › pnpm 13 たった1コマンドで始められる
14. 1 プロジェクトフォルダに slides.md が作成されるので編集 2 pnpm slidev コマンドで開発サーバーを起動 3 ブラウザでリアルタイムにプレビューしながら編集 # 開発サーバー起動 pnpm slidev # PDF エクスポート slidev export # SPA としてビルド slidev build 14 プロジェクト作成後の基本操作
15. ハイフン3つで区切るだけでスライドが作れる --- theme: seriph --- # 最初のスライド こんにちは！ --- # 2 枚目のスライド - Markdown で書ける - `---` で区切るだけ --- ... 15 スライドの書き方はシンプル
16. John Alice John Alice A typical interaction Hello John, how are you? One Two Text Decision Result 1 Result 2 mindmap Origins Long history Popularisation British popular psychology author Tony Buzan Research On effectiveness and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid 16 Mermaidも使えます
17. vana4 @c0ffee10ver·Follow 書こう書こうと思ってた話がやっと書けました zenn.dev/t_vana4/articl… 6:03 PM · Jan 31, 2026 1 Reply Copy link Read more on X 17 X(Twitter)も埋め込めます
18. 04 まとめ Copyright © 3-shake, Inc. All Rights Reserved.
19. 1 Slidevは Markdownで書ける エンジニア向けスライド作成ツール 2 コードの表現力 と Git管理 がエンジニアにとって最大のメリット 3 1コマンド で始められ、すぐにスライドを作成できる Markdown コード表現 Git管理 19 まとめ
20. 次のLTや勉強会の発表では、ぜひSlidevを試してみてください。 コードを書くように、スライドを書こう。 https://sli.dev/new ブラウザで今すぐ試せます 20 今日からSlidevを使ってみよう！
21. ありがとうございました！ Copyright © 3-shake, Inc. All Rights Reserved.