---
title: Mermaid記法入門_PM編_Udemyコース設計
tags:  #udemy  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEWG51MWJ2.jpg?width=480
description: Mermaid記法入門_PM編_Udemyコース設計 by Yukiko
published: September 26, 26
canonical: https://image.docswell.com/s/yukiko_it/K6N83E-2026-09-26-145014
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEWG51MWJ2.jpg)

う さ うさ 研 修 工 房 ｜ U dem y講 座 設計 シ リ ー ズ （ス ロ ー プ フ レー ム ワ ー ク ）
「Mermaid記法入門 PM/PMO編」
Udemyコース設計
WBS・承認フロー・報告ラインを、90分のスロープ型設計で身につける（受講生・講師 両対応）
受講生向けスライド
講師用台本つき
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
スロープ型設計
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZLNPQ2J3.jpg)

WHY ｜ なぜ スロ ープ 型で 設計す るの か
「乗り越えられる苦しさ」が学習を定着させる
Vygotsky（1978）ZPD
Bjork & Bjork（2011）
「発達の最近接領域」理論。一人では
「望ましい困難」理論。適度な負荷（
まだ難しいが、適切な支援があればで
すぐには解けない、でも解ける）を経
きる範囲に課題を置くと、学習が最も
験させると、簡単な学習より記憶の定
効果的に進む。
着が良くなる。
Csikszentmihalyi（1990）
フロー理論。スキルと課題の難易度が
釣り合っているとき、人は「楽しい」
と感じながら深く集中できる。
この3つの理論を1本の坂道に落とし込んだのが「スロープフレームワーク」です。
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ6W8MN6JV.jpg)

WHAT ｜ この コー スで 身に つくこ と
受講生も講師も、2つの力を持ち帰る
Mermaidを書く力
自走する力
教える設計力
WBS（gantt）・
承認フロー・
報告ライン（sequence）が書ける
公式ドキュメントを
自分で調べて
学び続けられる
難易度カーブを
意識した教材を
自分でも組める
受講生用スライドと講師用台本（時間・セリフ例・ねらい）を1本のコースに統合しています。
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ5M9Z55J4.jpg)

DESI GN ｜ 難易 度カ ーブ 全体 図
理解度・楽しさ・難しさは、フェーズごとに動く
10
9
8
7
6
5
4
3
2
1
0
助走
上り坂
頂上チャレンジ
理解度
楽しさ
下山
難しさ
上り坂で「難しさ」だけを意図的に1回上げ、頂上チャレンジで3つとも山にする設計です。
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LE3WY9N5E5.jpg)

MAP ｜ コー ス全 体マ ップ
90分・4フェーズのタイムライン
1
2
3
4
助走ゾーン
上り坂ゾーン
頂上チャレンジ
下山・振り返り
0-15分
15-55分
55-75分
75-90分
難易度 1-3
難易度 3-8
難易度 8-9.5
難易度 2-4
各フェーズの詳細は、次のページから「受講生向け」と「講師フォーカス」の2面で解説します。
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/8EDK5GWY7G.jpg)

PHASE 1 ｜ 助走ゾーン
1
0-15分
難易度1-3
Mermaidに触れて「動いた」を体験する
受講生の学び
講師フォーカス
•
PM/PMO業務で図解が使われる場面（進捗報告・承認申請・体制図等
）を知る。
•
mermaid.js.org の公式サイトからLive Editorを開き、インストール
なしで図が動くことを体験する。
•
用意されたサンプルコードを1文字も変えずに実行し、「動いた」とい
う成功体験を得る。
ねらい
不安なくスタートを切ってもらう。ここでは「理解」よ
り「安心」を優先する。
声かけ例
「まずは何も考えずコピペしてみましょう。壊れる心配
はありません」
タイミング目安
説明5分＋実演5分＋自分の手で試す5分
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/V7PKG392J8.jpg)

PHASE 2 ｜ 上り坂ゾーン
2
15-55分
難易度3-8
書いて、1回だけつまずいて、自力で直す
受講生の学び
講師フォーカス
•
承認フローとスケジュール（gantt）の基本記法を、自分の手で書く。
•
意図的に用意された1つの構文エラー（ノードIDに end を使う）にぶ
つかる。
ねらい
•
Live Editorのエラーメッセージを自力で読み解き、直す。
Bjork & Bjorkの「望ましい困難」を1回だけ意図的に
•
直せた瞬間に「なぜ直ったのか」を自分の言葉で言い直す。
配置し、自力解決の達成感を作る。
声かけ例
flowchart TD
A[申請] --> end{承認}
「エラーが出た人は正解です。ここで一度立ち止まって
メッセージを一緒に読みましょう」
%% わざとエラーを起こす教材
タイミング目安
解説15分＋実践20分＋苦しさ演習5分
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/2JVV64MXJQ.jpg)

PHASE 3 ｜ 頂上チャレンジ
3
55-75分
難易度8-9.5
自分のプロジェクトを1つ、図解してみる
受講生の学び
講師フォーカス
•
自分が関わるプロジェクトのスケジュールか承認・エスカレーション
フローを1つ選び、ganttかflowchartで図解する。
•
完成した図に、上司やステークホルダーに説明するつもりで一言コメ
ントを添える。
•
正解は1つではないことを前提に、自分のプロジェクトに合わせた粒度
で仕上げる。
ねらい
ここでの「できた」が自己効力感（成長マインドセット
）に直結する。うまさより実務での使えそうさを評価す
る。
声かけ例
「きれいじゃなくて大丈夫です。あなたのプロジェクト
が誰かに伝わればゴールです」
タイミング目安
個人ワーク15分＋共有5分
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/5EGLN1GRJL.jpg)

PHASE 4 ｜ 下山・振り返り
4
75-90分
難易度2-4
次の報告書に活かす力に変えて終える
受講生の学び
講師フォーカス
•
公式ドキュメント（Syntax一覧）をブックマークし、次に自分の報告
書で使いたい図の種類を1つ決める。
•
今日の学びを一言で振り返り、隣の人（またはチームチャット）に共
有する。
•
余力があれば、xychart-beta（進捗率などの折れ線グラフ）にも触れ
てみる。
ねらい
難易度を意図的に下げ、「またやりたい」という気持ち
で終える。
声かけ例
「今日一番『使えそう』と思った図を、隣の人に話して
みましょう」
タイミング目安
振り返り10分＋次への案内5分
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JQYQDXY7P.jpg)

S CRI PT ｜ 講師 用台 本サ ンプ ル
フェーズ2「乗り越えられる苦しさ」の場面（承認フロー）
時間
セリフ例
35分
「では、この承認フローのコードのendという文字を、そのまま書いて実行してみてください」
意図的にエラーを起こす。ここまでは講師が誘導する
36分
「赤字が出ましたね。焦らなくて大丈夫です。まずメッセージの1行目だけ読んでみましょう」
パニックを防ぎ、エラーメッセージへの注意を向けさ
せる
38分
「'end'という単語が特別な意味を持つようです。他の名前に変えたらどうなるでしょう？」
答えを言わず、仮説を立てさせる（生産的失敗の設計
）
40分
「直りましたね！
解決の言語化で学びを定着させる（アウトプットの効
果）
ねらい
今、何が原因で、何を変えたか、隣の人に説明してみてください」
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/K74WNZ6ZE1.jpg)

S UPPORT ｜ 受講 生が ハマ りや すいポ イン ト
講師のフォロー例つき早見表
① endという単語で構文が壊れる
② 矢印の種類を混同する
症状：ノードIDに end を使い Parse error が出る
症状：flowchartの --> と sequenceDiagramの ->> を混ぜてしまう
フォロー：「エラーメッセージのどの単語が引っかかっていそうか」を一緒に
探す問いかけをする。
フォロー：「今書いているのはどちらの図か」を声に出して確認させてから直
させる。
③ ganttの日付フォーマットが揃わない
④ 「できたつもり」で先に進めない
症状：dateFormatの指定と実際に書いた日付表記が食い違いエラーになる
症状：完璧を求めて頂上チャレンジで手が止まる
フォロー：dateFormatで指定した形式と、実際に書いた日付の形式を並べて
見比べさせる。
フォロー：「6割の完成度でいったん出す」練習だと明言し、時間で区切って
声をかける。
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LJ1Y5RVDEG.jpg)

REF ERENCE ｜ 参考 文献 ・公 式サ イト早 見表
教材設計の根拠と、内容の根拠を分けて示す
分類
出典
コースでの活かし方
学習設計
Vygotsky (1978) ／ Bjork & Bjork (2011)
難易度カーブと「乗り越えられる苦しさ」1回配置の根拠
学習設計
Csikszentmihalyi (1990)
スキルと難易度のバランスを取り、楽しさを維持する根拠
教材内容
Mermaid 公式サイト
gantt / flowchart / sequenceDiagram / xychart-beta のPM実
務での記法根拠
mermaid.js.org（公式） ／ 学習設計理論はスロープフレームワーク制作時の引用に準拠
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GJWG51L872.jpg)

まとめ｜このコース設計の位置づけ
① 助走（安心） → ② 上り坂（1回の苦しさ） → ③ 頂上チャレンジ（自己効力感）
④ 下山（次への橋渡し） — 90分でMermaidを「使える」に変える設計
udemy-it-course-creator Skillへの追加
このPM/PMO編は、汎用エンジニア版と並ぶ「テーマ違い・型同じ」の実例として
Skillに追加できます。「助走・上り坂・頂上チャレンジ・下山」の型と
「1回だけの苦しさ」の配置は、題材をWBSや承認フローに変えるだけで
そのまま使い回せます。
うさうさ研修工房
うさうさ研修工房 ｜ Mermaid記法入門 PM編（スロープ型学習設計）
13