スライドの作成と使い方

概要

**スライド（Slide）**は、Markdownを使ってプレゼンテーション資料を作成するためのコンテンツタイプです。--- で区切ることでスライドを分割でき、フルスクリーンのプレゼンテーションモードで発表できます。

スライドの作成

手順1: コンテンツ作成画面を開く

画面右下の**作成ボタン（+）**をタップ
コンテンツタイプ選択画面が表示されます
**「スライド」**を選択

手順2: 基本情報を入力

以下の情報を入力します：

必須項目

タイトル: スライドのタイトル（例: 「2025年度第2四半期進捗報告」）
公開範囲: PRIVATE / TEAM / PUBLIC から選択

任意項目

説明: スライドの概要（検索結果やカード表示で使用されます）
カテゴリ: スライドを分類するカテゴリを選択
親フォルダ: スライドを配置するフォルダを選択

手順3: スライドを作成

Markdownテキストエリアに内容を入力します。--- を使ってスライドを区切ります。

基本的なスライドの構造

# 最初のスライド

内容を書きます

---

## 2枚目のスライド

- 箇条書き1
- 箇条書き2
- 箇条書き3

---

## 3枚目のスライド

| 項目 | 値 |
|-----|-----|
| A   | 100 |
| B   | 200 |

手順4: プレビュー

エディタの右側にスライドの一覧プレビューが表示されます。各スライドのサムネイルを確認しながら編集できます。

手順5: 保存

すべての入力が完了したら、**「作成」**ボタンをクリックしてスライドを保存します。

スライドの表示モード

スライドには2つの表示モードがあります。

一覧表示

スライドの詳細画面を開くと、すべてのスライドがサムネイル形式で一覧表示されます。

スライドの枚数を一目で把握できます
各スライドの内容を確認できます

プレゼンテーションモード

発表するときは、プレゼンテーションモードを使います。

起動方法:

スライドの詳細画面を開く
**「プレゼンテーション」**ボタンをクリック
フルスクリーンで表示されます

操作方法:

操作	説明
右矢印キー / スペースキー	次のスライドへ
左矢印キー	前のスライドへ
Escキー	プレゼンテーションモードを終了
モバイル（スワイプ）	左右スワイプでスライドを切り替え

Markdown記法の活用

見出し

スライドのタイトルや大きな見出しには #、セクション見出しには ## を使います。

# スライドのタイトル
## セクション見出し
### サブ見出し

箇条書き

要点を箇条書きで整理します。

## 今日のアジェンダ

- はじめに
- 現状報告
- 課題と対策
- まとめ

番号付きリスト

手順や順序がある場合は番号付きリストを使います。

## 実装の手順

要件の定義
設計
実装
テスト
デプロイ

テーブル（表）

比較や一覧を表形式で見せます。

## 比較表

| 機能 | プランA | プランB |
|-----|--------|--------|
| ユーザー数 | 5名 | 20名 |
| ストレージ | 10GB | 50GB |
| サポート | メールのみ | 電話+メール |

コードブロック

技術系のプレゼンテーションでコードを見せる場合に使います。

## サンプルコード

```javascript
function hello(name) {
  return `Hello, ${name}!`;
}
```

引用

印象的なフレーズや引用を強調できます。

## 格言

> 千里の道も一歩から

画像の挿入

## 図解

![アーキテクチャ図](https://example.com/diagram.png)

スライドの実用例

例1: プロジェクト進捗報告

# プロジェクトA 進捗報告

2025年 第2四半期

---

## 目次

1. プロジェクト概要
2. 進捗状況
3. 課題
4. 次のステップ

---

## プロジェクト概要

**目標**: 新しい顧客管理システムの構築

- 期間: 2025年4月〜9月
- チーム: 6名
- 予算: 500万円

---

## 進捗状況

| フェーズ | 予定 | 実績 | 状況 |
|---------|------|------|------|
| 要件定義 | 4月末 | 4月25日 | 完了 |
| 設計 | 5月末 | 6月10日 | 遅延 |
| 実装 | 7月末 | 進行中 | 進行中 |

---

## 課題と対策

**課題**: 設計フェーズが2週間遅延

**原因**:
- 顧客要件の変更
- 技術調査に予想外の時間がかかった

**対策**:
- 実装チームの増員（2名追加）
- スコープの一部を後続フェーズに移行

---

## 次のステップ

1. 実装フェーズの加速（〜7月末）
2. 中間レビュー（8月第1週）
3. テスト開始（8月中旬）

例2: 勉強会の資料

# Reactの基礎

入門者向けハンズオン

---

## Reactとは

- UIを構築するためのJavaScriptライブラリ
- Facebookが開発・メンテナンス
- コンポーネントベースの設計

---

## コンポーネントの基本

```javascript
function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

ポイント:

関数でUIを定義する
{} でJavaScriptの式を埋め込む

まとめ

Reactはコンポーネント単位でUIを組み立てる
Propsで親から子へデータを渡す
Stateで変化するデータを管理する


---

## スライドの編集

### 編集画面を開く

1. 編集したいスライドを開く
2. スライド右上の**「編集」**ボタンをクリック
3. 編集画面が表示されます

### 編集内容の保存

- 編集が完了したら、**「保存」**ボタンをクリック
- 変更内容が即座に反映されます

---

## ヒントとコツ

### 1. 1スライドに1メッセージ

各スライドは1つのメッセージや要点に絞ると、聴衆に伝わりやすくなります。情報を詰め込みすぎないようにしましょう。

### 2. 見出しで流れを作る

スライドタイトル（`#`または`##`）を明確に設定して、発表の流れを見えやすくします。

### 3. テーブルで比較を見せる

複数のオプションや選択肢を比較するときは、テーブルを使うと直感的に伝わります。

### 4. コードは短くシンプルに

技術系の発表でコードを見せる場合、スライドに表示するコードは必要最小限に絞りましょう。長いコードは読みにくくなります。

---

## よくある質問

### Q1: スライドは何枚まで作れますか？

**A**: 枚数の上限はありません。ただし、プレゼンテーションとしては25〜30枚以内が読みやすさの目安です。

### Q2: テーマやデザインを変更できますか？

**A**: Marp対応のFront Matterを使ってテーマを指定できます。スライドの先頭に以下のように記述してください。

```markdown
---
marp: true
theme: default
---

# タイトル

Q3: プレゼンテーションモードで画面全体に表示されない場合は？

A: ブラウザのフルスクリーン（F11キー）と組み合わせると、より大きく表示できます。

Q4: スライドをPDFで保存できますか？

A: ブラウザの「印刷」機能からPDF形式で保存できます。

スライドの作成と使い方

概要