Zenn
🦔

【非エンジニア向け】プレゼンテーション作成Slidev

に公開
非エンジニア
Slidev
生成 AI
資料作成
tech

うぇっす！ノウチーニョです。
今回はSlidevに関しての紹介をさせていただきます。

Slidevの基本概念

Slidevは、開発者向けのプレゼンテーション作成ツールです。「slide + dev」を組み合わせた名前で、「/slaɪdɪv/」と発音します。

最大の特徴は、Markdownという軽量な記述言語を使ってスライドを作成できることです。Markdownは、簡単な記号を使って文書の構造や装飾を表現できるため、PowerPointのような複雑な操作を覚える必要がありません。

主な特徴と機能

1. Markdownベースで簡単作成

一つのテキストファイル（.mdファイル）にスライドの内容をすべて書くことができます。これにより、内容に集中でき、Gitでのバージョン管理も可能になります。

2. 開発者フレンドリーな機能

  • コードハイライト機能：プログラムコードを美しく表示
  • ライブコーディング：プレゼン中にコードを実際に編集・実行可能

3. 豊富な表現機能

  • テーマシステム：npm パッケージとして共有可能なテーマ
  • インタラクティブ要素：Vueコンポーネントを使った双方向操作
  • 数式表示：LaTeX形式での数学式表示
  • 図表作成：Mermaidを使ったテキストベースの図表作成
  • 描画機能：スライド上での直接描画・注釈

4. プレゼンテーション支援機能

  • プレゼンターモード：別ウィンドウやスマートフォンでの操作
  • 録画機能：内蔵の録画・カメラビュー機能

5. 高速な開発体験

Viteベースの即座リロード機能により、編集内容がリアルタイムでブラウザに反映されます。

使い始め方

オンラインで試す

ブラウザで即座に試すことができます：sli.dev/new

ローカル環境での作成

Node.js 18以上が必要です。以下のコマンドで新しいプロジェクトを作成します。

npm init slidev

作成されたプロジェクトのslides.mdファイルを編集することで、スライドを作成できます。

Marpとの比較

共通点

両者ともMarkdownベースのプレゼンテーション作成ツールで、シンプルさを重視しています。

Slidevの優位性

1. 同等のシンプルさ

SlidevはMarpと同じレベルのシンプルさから始められます。

2. より多くの機能

Marpでは提供されていない多くの機能をSlidevは提供しています：

  • Vueコンポーネント対応：インタラクティブなスライド作成が可能
  • Viteベースの開発環境：即座のホットリロードと柔軟なプラグインAPI
  • UnoCSS統合：より柔軟なスタイリング

3. 多様な出力形式

PDF、PPTX、PNG、単一ページアプリケーション（SPA）など多様な形式でエクスポート可能です。

使用技術スタック

Slidevは以下の最新技術を組み合わせて構築されています：

  • Vite：超高速フロントエンド開発ツール
  • Vue 3：モダンなJavaScriptフレームワーク
  • UnoCSS：オンデマンドCSSフレームワーク
  • Shiki/Monaco Editor：高品質なコードエディタ機能

まとめ

Slidevは、Marpの持つシンプルさを保ちながら、より豊富な機能と表現力を提供するプレゼンテーションツールです。特に技術系のプレゼンテーションや、インタラクティブな要素を含むプレゼンテーションに最適です。非エンジニアでも、基本的なMarkdown記法を覚えることで、PowerPointよりも効率的にプレゼンテーションを作成できます。

Notes

Slidevは開発者向けに特化したプレゼンテーションツールですが、Markdownの基本的な記法は比較的習得しやすく、非エンジニアでも十分活用可能です。Marpと比較して、より多機能で拡張性が高く、特にコード表示やインタラクティブな要素が必要な場合にその真価を発揮します。オンラインエディタも提供されているため、まずは試してみることをお勧めします。

Have a nice day！

Discussion