オンクラス 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