Skip to content

feat: クラス機能の UI/UX 改善 — 役割選択廃止・先生モード全画面化 #463

Closed
#464
Closed
feat: クラス機能の UI/UX 改善 — 役割選択廃止・先生モード全画面化#463
#464
@takaokouji

Description

@takaokouji
takaokouji
opened on Apr 5, 2026

背景

クラス機能（#442, #443）の基本実装が完了し、先生・生徒の E2E フローが動作する状態になった。4/15 のリリースに向けて、日本の中学校の先生が説明なしでも使える状態にするため、UI/UX をブラッシュアップする。

プログルの生徒管理機能（Google Classroom 連携）を参考に、現在の Smalruby classroom 機能との差分を分析し、改善案をまとめた。

プログルの生徒管理機能の特徴（参考）

プログル情報 のクラス管理機能を分析した結果:

  1. 役割選択なし — URL でアクセスした時点で先生用の画面。生徒は別の導線
  2. 全画面レイアウト — クラス管理はモーダルではなく、ナビゲーションバー付きの全画面
  3. Google アカウント前提 — 先生は Google アカウントでログイン。ソーシャルログインが目立つ位置に配置
  4. Google Classroom 連携が主導線 — 「Google Classroom のクラスで登録」ボタンが目立つ位置。インポート後にクラス一覧に即反映
  5. 生徒名簿は取得しない — UI 上は生徒名の欄があるように見えるが、個人情報保護の観点から Google Classroom の生徒氏名・メールアドレスはインポートしない（入力不可）。サーバーに生徒の個人情報は保持しない設計。Smalruby でも同様に、出席番号（席番号）のみで生徒を識別する現在の方針を維持する
  6. クラス一覧がテーブル形式 — カードではなくテーブル。情報密度が高い

Smalruby の現在の問題点

問題 説明
役割選択が不要 先生か生徒かをユーザーに毎回選ばせるのは認知負荷が高い。先生はURLパラメータで判別すべき
モーダルが狭い 500px のモーダルでは先生の管理作業（座席グリッド確認、提出レビュー等）が窮屈
先生/生徒の導線が混在 同じモーダル内で先生フローと生徒フローが遷移するのは設計上複雑
Google ログインまでの手順が多い 役割選択 → ログイン画面 → ボタンクリック と3ステップ必要

現在の UI の詳細は docs/classroom/ui-ux.md を参照。

改善提案

1. URL パラメータによるモード切り替え

# 先生モード（全画面クラス管理）
https://smalruby.app?features=classroom&classrole=teacher

# 生徒モード（デフォルト）— 参加コード入力からスタート
https://smalruby.app?features=classroom
https://smalruby.app?features=classroom&classcode=ABC123
  • classrole=teacher がある → メニューバーに 「クラス管理」と「クラス」の2つ が表示される
    • 「クラス管理」→ 全画面管理画面（先生用）
    • 「クラス」→ 生徒用モーダル（参加コード入力 or ステータス）— 先生が生徒として試しに操作したいときに使う
  • classrole なし（デフォルト）→ メニューバーに「クラス」のみが表示される。クリックで生徒用モーダル（参加コード入力 or ステータス）
  • 役割選択フェーズ (role-select) は廃止

2. 先生モード: 全画面クラス管理

拡張機能選択モーダルやスプライト選択モーダルと同じ、全画面オーバーレイで実装。

┌─────────────────────────────────────────────────────────┐
│ [×]                    クラス管理                        │
├──────────┬──────────────────────────────────────────────┤
│          │                                              │
│ クラス一覧│  ← 選択中のクラスの詳細                      │
│          │                                              │
│ ┌──────┐ │  クラス名: 第3回 チャットアプリを作ろう        │
│ │Class1│ │  参加コード: 3cexm5  [コピー] [拡大表示]      │
│ ├──────┤ │  有効期限: 2026/4/6                          │
│ │Class2│ │                                              │
│ │ (選択)│ │  ┌─座席グリッド──────────────────────┐        │
│ ├──────┤ │  │ 1  2  3  4 [✓5] 6  7  8  9  10 │        │
│ │Class3│ │  │11 12 13 14  15 16 17 18 19  20  │        │
│ └──────┘ │  │...                               │        │
│          │  └──────────────────────────────────┘        │
│ [+ 作成] │                                              │
│ [GC取込] │  ← 選択したメンバーの詳細パネル                │
│          │  出席番号05 | 着席中 | ✓提出済み              │
│ [ログ   │  [サムネイル]                                  │
│  アウト] │  [スモウルビーで開く] [返却する]               │
│          │                                              │
└──────────┴──────────────────────────────────────────────┘

左サイドバー:

  • クラス一覧（リスト形式）
  • 「クラスを作る」ボタン
  • 「Google Classroom からインポート」ボタン
  • 「ログアウト」ボタン

メインエリア（右）:

  • クラス選択時: クラス詳細（参加コード、座席グリッド、メンバー詳細）
  • クラス未選択時: 「クラスを選択してください」

メリット:

  • 広い画面で座席グリッドとメンバー詳細を同時に表示可能
  • プログルと同じ全画面レイアウトで先生が迷わない
  • サイドバーでクラス間の切り替えが1クリック

3. 生徒モード: シンプルなモーダル維持

生徒フローは現在のモーダル形式を維持しますが、役割選択フェーズを廃止して直接フローに入ります。

# 未参加の生徒
クラスボタンクリック → 参加コード入力（直接）→ 席番号選択 → 参加完了

# 参加済みの生徒
クラスボタンクリック → ステータス画面（直接）

4. フェーズ変更まとめ

現在のフェーズ 変更後
role-select 廃止 — URL パラメータで判定
teacher-login 先生全画面の初期表示に統合（未ログインなら自動表示）
teacher-dashboard 全画面の左サイドバーに統合
teacher-create 全画面内のインラインフォーム or サブパネル
teacher-detail 全画面のメインエリア（常時表示）
student-join モーダル初期画面（役割選択なし、直接表示）
student-seat そのまま
student-joined そのまま
student-status そのまま
submit-confirm そのまま

5. 追加改善案

改善 説明
自動 Google ログイン classrole=teacher でアクセスし、未ログインの場合は Google ログインボタンを全画面に大きく表示。プログルと同様に迷わない導線
クラス一覧のテーブル表示 プログルのようにテーブル形式も検討。ただしクラス数が少ない（〜10件）ならリスト形式で十分
招待リンクの改善 先生用 URL に classrole=teacher が含まれるリンクと、生徒用の classcode=XXXXXX リンクを明確に分離

6. 操作チュートリアル（ソフトウェア内ガイド）

マニュアルを読んでもらうことは現実的に難しい。プログルでもマニュアル（PDF 9ページ）を用意しているが、それは先生がつまずいた箇所を説明するもの = つまずきが発生している証拠でもある。

スモウルビーでは、マニュアルの代わりにソフトウェア自体がチュートリアルを表示して解消する。 人の手が足りない分を、ソフトウェアのチュートリアルで補う方針。

設計原則:

  • 操作説明画面は実際の操作の直前に表示する（事前にマニュアルを読ませるのではなく）
  • 一度表示したチュートリアルは localStorage に記録し、2回目以降は自動的に非表示にする（「スキップ」ボタンや「次回から表示しない」チェックボックスは設けない。ユーザーに余計な判断や操作をさせない）
  • もう一度見たい場合は、ブラウザのシークレットモード（プライベートウィンドウ）で操作すれば初回表示に戻る
  • チュートリアル画面には実際の画面のスクリーンショットを含め、視覚的に理解させる

チュートリアル① 初回 Google ログイン — 正しいアカウントを選択する

つまずきポイント（PDF p2-3）: 先生が Google ログイン画面で、個人の Google アカウントを選んでしまい、学校（Google Workspace for Education）のアカウントでログインできない。

チュートリアル内容:

┌─────────────────────────────────────────────┐
│                                             │
│  Google でログイン                           │
│                                             │
│  このあと Google のログイン画面が             │
│  表示されます。                              │
│                                             │
│  ⚠ 学校の Google アカウントを                │
│    選んでください                            │
│                                             │
│  ┌───────────────────────────────────────┐  │
│  │  [実際のアカウント選択画面の           │  │
│  │   スクリーンショット]                  │  │
│  │                                       │  │
│  │   ✗ 個人アカウント (xxx@gmail.com)    │  │
│  │   ✓ 学校アカウント (xxx@ed.jp) ← これ │  │
│  └───────────────────────────────────────┘  │
│                                             │
│              [ログイン画面に進む →]          │
│                                             │
└─────────────────────────────────────────────┘

チュートリアル② 初回 Google Classroom 認証 — 2つのチェックボックス

つまずきポイント（PDF p6）: Google Classroom のクラスを利用するための認証画面で、2つのチェックボックスにチェックを入れる必要があるが、チェックを入れずに「続行」を押してしまう。結果、クラスのインポートに失敗する。

チュートリアル内容:

┌─────────────────────────────────────────────┐
│                                             │
│  Google Classroom の認証について             │
│                                             │
│  このあと Google の認証画面が表示されます。   │
│  以下の 2 つに必ずチェックを入れてください:  │
│                                             │
│  ┌───────────────────────────────────────┐  │
│  │  [実際の Google 認証画面の             │  │
│  │   スクリーンショット]                  │  │
│  │                                       │  │
│  │  ☑ Google Classroom のクラスの         │  │
│  │    閲覧  ← チェックを入れる           │  │
│  │  ☑ Google Classroom のクラスの         │  │
│  │    生徒の閲覧  ← チェックを入れる     │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  ⚠ チェックを入れないとクラスの              │
│    インポートができません                    │
│                                             │
│              [認証画面に進む →]              │
│                                             │
└─────────────────────────────────────────────┘

チュートリアル③ 初回クラス作成 — 課題ごとにクラスを作る運用

つまずきポイント（PDF p5）: プログルでは「クラスを登録する」→「Google Classroom のクラスで登録」という手順を説明している。先生は「クラス」という概念が「学級」なのか「授業の回」なのか混乱する。

チュートリアル内容:

┌─────────────────────────────────────────────┐
│                                             │
│  クラスの作り方                              │
│                                             │
│  スモウルビーでは、課題（授業の回）ごとに    │
│  クラスを作ります。                          │
│                                             │
│  例:                                        │
│  ┌───────────────────────────────────────┐  │
│  │ ✓ 第1回 ネコを歩かせよう             │  │
│  │ ✓ 第2回 じゃんけんゲームを作ろう      │  │
│  │ ✓ 第3回 チャットアプリを作ろう        │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  生徒は毎回、参加コードを入力して            │
│  クラスに参加します。                        │
│                                             │
│                         [わかりました →]    │
│                                             │
└─────────────────────────────────────────────┘

チュートリアル④ Google Classroom からのインポート — コースの選択

つまずきポイント（PDF p7）: Google Classroom のコース一覧が表示されたとき、どのコースを選べばよいか分からない。プログルでは「インポートしたいクラスをクリック」と説明しているが、複数コースがあると迷う。

チュートリアル内容:

┌─────────────────────────────────────────────┐
│                                             │
│  Google Classroom からインポート             │
│                                             │
│  Google Classroom のクラスが表示されます。    │
│  この授業で使いたいクラスを選んでください。   │
│                                             │
│  ┌───────────────────────────────────────┐  │
│  │ 1年A組 情報Ⅰ  (30人)  ← 例         │  │
│  │ 1年B組 情報Ⅰ  (32人)               │  │
│  │ 2年C組 技術    (28人)               │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  選択すると、クラス名と人数が自動で          │
│  入力されます。                              │
│                                             │
│                         [わかりました →]    │
│                                             │
└─────────────────────────────────────────────┘

チュートリアル⑤ 2回目以降のログイン

つまずきポイント（PDF p4）: プログルでは「2回目以降のログインの際には」として再ログイン手順を別途説明している。先生が次の授業でアクセスしたとき、ログイン方法を忘れる。

スモウルビーでの対策: classrole=teacher の URL をブックマークさせる。全画面管理画面の初回表示時に「このページをブックマークしてください」とガイドを表示する。

チュートリアル⑥ 生徒データの再インポート（転入・クラス替え対応）

つまずきポイント（PDF p8）: プログルでは、新たな生徒が加入した場合に「Google Classroom のクラスで登録」を再度行い、チェックボックス入れ直しとインポートが必要と説明している。

スモウルビーでの対策: スモウルビーは席番号ベースのため、人数変更（増減）はクラス詳細画面から直接行える。転入生は空いている席番号に参加するだけでよい。チュートリアルは不要だが、「人数を変更する」ボタンの存在を先生に気づかせる UI ヒント（ツールチップ等）を検討する。

参考資料

  • docs/classroom/ui-ux.md — 現在の UI パーツと data-testid の完全な一覧
  • docs/classroom/architecture.md — システム構成・API ルート
  • docs/classroom/user-stories.md — ユーザーストーリー
  • プログル情報: https://high.proguru.jp/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions