オンクラス UI/UX 全体改善プロトタイプ

ITリテラシーが低い人でも迷わないシステムへ — 受講生側 + 講師側 全124件の課題 / 優先度別改善案

124
総課題数
5
Critical
27
High
62
Medium
28
Low
26
プロトタイプ

オンクラス UI/UX 全体改善の進め方

受講生側14画面 + 講師側20画面を監査した結果、合計124件の改善余地を特定しました。このプロトタイプでは、特にITリテラシーが低いユーザーにインパクトの大きい改善案を可視化しています。

対象範囲
受講生側（app.the-online-class.com）
  • ログイン・招待URL・新規登録
  • ホーム / コース一覧 / カテゴリ / 動画視聴
  • 学習計画 / 感想 / マイリスト
  • コミュニティ / お問い合わせ / プロフィール
講師側（manager.the-online-class.com）
  • ダッシュボード / コース管理
  • 受講生・スタッフ・グループ管理
  • 招待URL / アンケート / お知らせ / 記事
  • LP構築 / 決済連携 / AI設定 / LINE連携
7原則（設計指針）
  1. 一画面一目的 — 1画面=1アクション
  2. 見ればわかる — アイコン+テキスト、色で状態
  3. 次のアクションを常に提示 — 空状態でも誘導
  4. 失敗を許容する — 戻るボタン、2段階確認
  5. 一貫性を保つ — 色・位置・用語を統一
  6. 認知負荷を下げる — 選択肢5つ以下、段階的開示
  7. モバイルファースト — 44pxタップ領域

最優先 Critical課題（5件）

  1. 受講生カテゴリ配下の全ブロックが1ページに無限スクロール表示 — 章ごとに分割しTOC付きサイドバーを導入
  2. 講師初回ログイン時のオンボーディングなし — 5ステップのウィザードを導入
  3. 講師ダッシュボード数値の意味が不明 — 説明ツールチップ + 「次のアクション」提示
  4. 講師コース作成手順が多すぎて諦める — ウィザード化 + プレビュー常時表示
  5. 講師受講生管理画面の検索・フィルターが機能不足 — 複数条件検索 + 保存済みフィルター

受講生ホーム画面の再設計

HighIssue #6: 現状は `/` にアクセスすると最後に見ていたコースへ自動リダイレクト。真の「ホーム」が存在しない。

Before: 自動リダイレクト
オンクラス 👤
⏳
読み込み中...
↓ 勝手に遷移
/courses/oEDI6MGb
「今日の学習は何から始めれば？」がわからない。
複数コースを並行受講している人は混乱。
After: 今日のダッシュボード
🏠 ホーム 👤 田中太郎 ▾
おかえりなさい、田中さん 👋
前回の続きから
Sample① 第1章 オリエンテーション
進捗 40% · あと3ブロック
受講中のコース
Sample①
40% 完了
順調
基礎講座
10% 完了
遅れ気味
📢 新着
・講師から新しい感想が届きました
・コミュニティに3件の新規投稿
改善ポイント
  • 「前回の続きから」カードをトップに。自動リダイレクトはしない。
  • 複数コースの進捗を一覧+ステータス（順調/遅れ気味/完了）で表示
  • 新着通知をホーム上で即確認できる
  • URL `/` が安定し、ブックマーク・共有が可能になる

カテゴリ内ブロック画面の再設計

CriticalIssue #25: 現状は章配下のすべてのブロックが1画面に並び、動画・テスト・感想欄すべて無限スクロール。

Before: 無限スクロール
Sample① / 【第1章】オリエンテーション
ブロック1: イントロ動画
▶ 動画
感想を書く：
ブロック2: 基礎テスト
問1. 次のうち正しいのは？
ブロック3: まとめ動画
ブロック4: 応用動画
ブロック5: ...
どこまで見たか分からない。戻ってくると全部読み込み直し。スマホで30秒スクロールし続ける。
After: TOC付き1ブロック表示
ホーム › Sample① › 第1章 › ブロック2
ブロック2: 基礎テスト
▶ 標準プレイヤー
ブロック 2/5 · 40%
第1章
✓ 1. イントロ
▸ 2. 基礎テスト
3. まとめ
4. 応用
5. 演習
改善ポイント
  • 1画面1ブロック — スクロール量を大幅削減、集中を維持
  • サイドバーTOC — 今どこにいるか一目瞭然、クリックで任意ブロックへ
  • パンくずで階層を可視化（Issue #2 解決）
  • 標準的なビデオプレイヤーUI（Issue #27 解決）
  • 「完了して次へ」で次アクションを明示（原則3）

ユーザーメニュー（ヘッダー右上アイコン）

MediumIssue #1: 現状は無機質な人型アイコンのみ。ログアウトや通知への導線が見えない。

Before: アイコンだけ
オンクラス 👤
アイコンをクリック...
→ メニュー項目がアイコンのみ（ホーム / 通知 / ページ / ログアウト）
ITリテラシー低の方は「これが自分のアカウント」と認識できない。ログアウト場所を見つけられず離脱。
After: 名前 + 明示メニュー
オンクラス 👤 田中太郎 ▾
田中太郎 様
tanaka@example.com
🏠 ホーム
📢 お知らせ 3
👤 マイページ
⚙️ アカウント設定
❓ お問い合わせ
🚪 ログアウト
改善ポイント
  • 名前+▾キャレット — 「自分のアカウント」と認識できる
  • アイコン+テキスト — 全項目に言葉（原則2）
  • 未読バッジ — お知らせの存在が一目でわかる
  • ログアウトは赤文字 — 破壊的アクションを視覚的に区別（原則5）

パンくずリストの追加（全画面）

MediumIssue #2: 現状はカテゴリ・ブロックに入ると戻り導線が一切ない。

Before: 戻れない
Sample① / 【第1章】オリエンテーション
↑ リンクではない・クリックできない
ブロック表示中...
「コース一覧に戻る」にブラウザバックを使うしかない。SPAの遷移を飛ばしてしまう。
After: リンク付きパンくず
🏠 ホーム › Sample① › 第1章 オリエンテーション › ブロック2
ブロック表示中...
どのレベルへも1クリックで戻れる。現在地が一目でわかる。

講師ダッシュボードの再設計

Critical講師側 Critical: 現状のダッシュボードは数値が並ぶだけで「次に何をすべきか」がわからない。

Before: 数値の羅列
オンクラス管理 👤
152
受講生
78%
進捗
23
ログイン率
5
感想
¥0
売上
12
招待URL
「78%は高い？低い？」「何をすればいい？」が不明。数値だけで放置される。
After: アクショナブルな指標
📊 ダッシュボード 👤 講師A ▾
🎯 今日やるべきこと（3件）
・感想未返信が 5件 あります →対応する
・7日以上ログインなしの受講生が 12名 →フォロー
・月次レポート作成が まだです →作成
152
受講生 ⓘ
+8 先週比
78%
平均進捗 ⓘ
目標70%↑達成
23%
週次ログイン率 ⓘ
-3 要注意
改善ポイント
  • 「今日やるべきこと」カードを最上部に — 数値から行動へ（原則3）
  • 各指標にⓘツールチップで意味を説明
  • 前週比デルタで高い/低いが即判断可能
  • 色で状態：緑=目標達成、赤=要注意（原則2）

講師オンボーディングウィザード

Critical初回ログイン時、何から始めればいいか指示がない。コース作成は多段階で挫折する。

Before: 白紙のダッシュボード
管理画面👤
受講生: 0名 / 進捗: -- / 売上: ¥0
左メニュー: コース / 管理 / LP構築 / マーケ / 設定...
「何をクリックすればいい？」メニューが多すぎて迷う。サポート問い合わせが殺到。
After: 5ステップウィザード
🚀 はじめての設定👤
1 基本情報
2 コース作成
3 招待URL
4 決済
5 完了
ステップ3: 受講生を招待しましょう

受講生に配る招待URLを発行します。URLからアクセスすると自動で受講登録されます。

改善ポイント
  • 5ステップウィザードで順番に案内 — 迷う余地なし
  • 各ステップに解説動画リンク（2分程度）
  • スキップ可能 — 経験者の邪魔にならない
  • 完了後もダッシュボード右上に「初期設定の続き」を残す

コース一覧 + 検索・フィルター

Highコース数が増えると探せない。検索ボックス・ステータスフィルターがない。

Before: プレーンな羅列
コース+
コース名受講生
基礎講座24名
Sample①152名
応用講座8名
旧コース（アーカイブ）0名
...全47件
コースが30件を超えると探せない。アーカイブと現役の区別もできない。
After: 検索 + フィルター + 状態
コース+ 新規作成
🔍
公開中 (23) 下書き (4) アーカイブ (20)
コース名状態受講生
基礎講座公開24
Sample①公開152
応用講座下書き—

招待URL作成フロー

High講師が招待URLをどこで作り、どう共有すればいいかわからない。

Before: 分断されたフロー
招待URL一覧
https://app.the-online-class.com/users/invitations?key=xxx
https://app.the-online-class.com/users/invitations?key=yyy
+ 新規作成
作成しても、どう共有すればいいか不明。URLをコピーする方法も見えない。
After: 作成→共有まで1画面
招待URL作成
チェックすると、講師の承認後に受講開始します。
✓ 作成完了
https://app.the-online-class.com/users/invitations?key=abc123

全26プロトタイプ一覧

優先度順。Critical/High 優先で実装・デプロイ計画。

受講生側 13プロトタイプ 残り8件を見る →
  1. Criticalカテゴリ内ブロック（TOC + 1画面1ブロック）
  2. Highホームダッシュボード（自動リダイレクト廃止）
  3. Highコミュニティインデックス（404解消）
  4. High標準ビデオプレイヤー
  5. Highパンくずナビ（全画面）
  6. Mediumユーザーメニュー（名前+メニュー項目）
  7. Mediumテストフィードバック画面
  8. Medium通知ページ（未読バッジ）
  9. Mediumマイページ（コース導線）
  10. Mediumパスワードリセット（ヘッダー付き）
  11. Medium招待URL無効時のエラー画面
  12. Medium受講期限切れバナー
  13. Mediumマイリスト空状態ガイダンス
講師側 13プロトタイプ 残り9件を見る →
  1. Criticalオンボーディングウィザード（5ステップ）
  2. Criticalダッシュボード再設計
  3. Criticalコース一覧（検索・フィルター）
  4. Critical受講生管理（複数条件検索）
  5. High招待URL 作成→共有フロー
  6. Highセキュリティ設定（2FA等）
  7. Highインアプリヘルプ
  8. Highヘッダー + パンくず
  9. Mediumモバイル対応ダッシュボード
  10. Medium空のダッシュボード対策
  11. MediumDanger Zone（削除動線）
  12. Medium承認フロー画面
  13. Medium改善版ログイン画面

実装ロードマップ

4スプリント（2週間×4 = 8週間）で全課題を消化。

Sprint 1（週1-2）: Critical対応
  • 受講生: カテゴリ内ブロック TOC化 + 1画面1ブロック
  • 講師: オンボーディングウィザード 5ステップ
  • 講師: ダッシュボード「今日やるべきこと」カード
  • 講師: コース作成ウィザード
  • 講師: 受講生管理 複数条件検索
Sprint 2（週3-4）: High対応
  • 受講生: ホームダッシュボード（自動リダイレクト廃止）
  • 受講生: 標準ビデオプレイヤー置換
  • 受講生: パンくずナビ全画面展開
  • 講師: 招待URL 共有導線（LINE/メール/QR）
  • 講師: ヘッダー+パンくず全画面
  • 共通: /communities の404解消
Sprint 3（週5-6）: Medium（UX改善）
  • 受講生: ユーザーメニューの名前+アイコン+項目改善
  • 受講生: 通知バッジ、マイページ、パスリセ
  • 講師: Danger Zone、承認フロー、空状態ガイド
  • 共通: 表記ゆれ解消（ユーザー/ユーザ等）、専門用語リライト
Sprint 4（週7-8）: Low + QA
  • マスコットイラスト mobile最適化
  • autocomplete属性、aria-label整備
  • コントラスト比4.5:1、タップ領域44px全面検証
  • リグレッションテスト + 社内ユーザーテスト（IT低リテラシ群）
💡 補足：本プロトタイプに含まれる既存デプロイ済みページ
・ログイン/招待フロー: https://onclass-uiux-typeb.pages.dev/
・お問い合わせ: https://onclass-uiux-typeb.pages.dev/inquiry.html
・本プロトタイプ（本ページ）: デプロイ予定 onclass-uiux-overhaul.pages.dev