PC ADMIN · Curriculum Management Design

管理サイト カリキュラム管理 デザイン提案

運営スタッフの操作性向上のため、本番デザイントーン（ゴールド + ホワイト）でモックアップしたサンプル集です。実装後の見た目に近い形で確認できます。

01ビジュアルレッスンカード

一覧でステップの「中身」が一目で分かる形に。動画はサムネイル＋所要時間、テキストは冒頭プレビュー、アクションはチェックリストで差別化。

現状
▶ 動画
オリエンテーション
動画ID: dQw4w9WgXcQ
公開 完了 5名
📄 テキスト
資産設計の3原則
本文 1,234文字
公開 完了 3名
✓ アクション
今週の実践課題
3項目
下書き 完了 0名
改善案
01
12:34
▶ 動画

オリエンテーション

完了 5名 · 視聴中 2名
公開
02
資産設計の3原則
資産設計の基本となる3つの考え方をテキストで解説します。図解やチェックリストも含まれており…
📄 テキスト

資産設計の3原則

読了目安 5分 · 完了 3名
公開
03
✓ 家計の現状を把握する
□ 3年後の目標を1つ書く
□ 月次予算を見直す
✓ アクション

今週の実践課題

3項目 · 完了 0名
下書き
実装メモ: サムネイルは https://i.ytimg.com/vi/{videoId}/mqdefault.jpg。動画ID 表示の代わりに視覚的に理解できる。テキストは冒頭文プレビュー、アクションは項目を最大3行表示。種別ごとに色を変えて識別性UP。

02ドラッグ＆ドロップ並び替え

レッスンの並び替えをドラッグで行えるように。矢印ボタンも残し、両方の操作方法に対応。

現状

各行に上下矢印ボタン。10件並んだステップを最後尾から先頭まで移動するには 9 回 ↑ ボタンを押す必要がある。

サンプルステップ
改善案

行頭の ⋮⋮ ハンドルをドラッグで自由に並び替え。矢印ボタンは小型化して残す（タッチデバイス・1段階移動用）。

⋮⋮ 01 サンプルステップ（ドラッグできます） ↕ DRAG
実装メモ: @dnd-kit/core + @dnd-kit/sortable（軽量、TypeScript対応）が定番。並び替え後に既存の /api/curriculum/steps/reorder API を呼ぶ。タッチデバイスでもドラッグ可能。

03一覧でのクイック操作

公開／非公開の切り替えに編集モーダルを開かず、一覧上のトグルスイッチで即時切替。

現状

1. 編集ボタンをクリック
2. モーダルが開く
3. 「公開する」チェックボックスを切替
4. 「保存」をクリック
→ 4 ステップ必要

[ 編集モーダル ]

☐ 公開する

[ 保存 ]
改善案

一覧上のトグルスイッチをクリックするだけ → 即時切替。
PUT /api/curriculum/steps/{id} を内部で呼ぶ。

サンプルステップ 公開
下書きのレッスン 下書き
実装メモ: トグル切替時に楽観的UI更新（即時反映）→ 失敗時にロールバック。toast で「公開しました」/「下書きに戻しました」を表示。誤操作防止のため、公開→下書き切替時のみ確認ダイアログを出すオプションも検討可。

04動画 URL のリアルタイムプレビュー

作成モーダル内で URL を入れた瞬間にサムネイルが表示され、正しい動画かどうかその場で確認できる。

現状

ステップ追加

×

動画は限定公開でアップロード

URL が正しいか、動画が再生できるかは「保存」してから編集ページへ移動して確認。

改善案

動画レッスンを追加

×
✓
プレビュー右下に表示されます
実装メモ: URL 入力時に既存の extractYouTubeVideoId() でID抽出 → サムネイルURLを組み立て → そのまま画像表示。デバウンス（300ms）で過剰な更新を抑制。緑チェックでお客様にも動作することを確信できる UX。

05ヘッダーの統計サマリー

画面トップに公開数・下書き数・お客様の完了状況をカード表示。全体の俯瞰が一目で。

改善案 — 画面上部に配置

カリキュラム管理

12
PUBLISHED LESSONS
公開中
3
DRAFT LESSONS
下書き
87%
AVG. COMPLETION
39名中
2:48:30
TOTAL DURATION
合計時間
人気レッスン TOP 3
01
オリエンテーション
完了 32/39名
02
資産設計の基本
完了 28/39名
03
不動産投資の入口
完了 18/39名
未完了が多いレッスン
!
税金の仕組みを理解する
未完了 21/39名
!
海外口座の活用
未完了 18/39名
※ 内容の見直しやお知らせの送付を検討
実装メモ: 既存の /api/curriculum/progress から集計。「人気レッスン TOP 3」は完了率順、「未完了が多い」は閾値以上未完了で表示。スタッフが「次に何をすべきか」を直感的に判断できる。

06新規追加ウィザードの簡素化

「+ レッスンを追加」を主役の CTA に。種別を選んでから必要なフィールドだけ表示する。グループ作成は任意。

現状の作成フロー

1. 「グループ追加」 → グループを作る
2. グループに「+ モジュール追加」 → モジュールを作る
3. モジュール詳細画面に移動
4. 「+ ステップ追加」→ モーダル
5. 種別選択（動画/テキスト/アクション）→ フィールド入力
6. 保存

→ 6 ステップ。3階層が必須に見える。

改善案 — 1 つのモーダルで完結

新しいレッスンを追加

×
▶
動画
YouTube動画
📄
テキスト
本文記事
✓
アクション
実践課題
URLを入力するとここにプレビューが表示されます

既存のモジュールに追加するか、未分類でも OK

実装メモ: 既存のグループ・モジュールが無くても「未分類」プレースホルダーで作成可能にする。後からドラッグでグループに移動できれば、「先にグループを作る」必須感が消える。種別カードでクリック1回で選択、視覚的にも分かりやすい。