学生向け試験ダッシュボードのワイヤーフレーム

KPI優先の学生ダッシュボード

Zentou AI · Portal WIREFRAME v0.1 は、デスクトップ版の学生ポータルをローファイで検討した案です。選ばれているコンセプトは DATA-FORWARD とラベルされた「B · ダッシュボード」で、KPIを先頭に置くことで、詳細へスクロールする前に学習者が現在地を把握できる構成です。

ダッシュボードは motoki.daisuke にあいさつし、今週、今月、通算という3つの固定の期間ラベルを表示します。このうち今月が強調されています。4枚のカードは、基礎認定付きの認定ランク A2、+3.2 前回比付きの偏差値 39、04/19 10:00 付きの次回まで 1日、練習進捗 62% を示します。ランク、比較、緊急度、活動量を分けて見せており、HTMLでは期間ラベルとデータの切り替えは連動していません。

密度の高さは意図的なトレードオフです。4枚のカードで素早く比較できますが、値の算出方法や相互の関係は説明されていません。このアーティファクトでは、これらはビジュアルデザイン内のサンプルであり、実際の評価データや連携した学生記録の証拠ではありません。

01

ランク

A2 と 基礎認定 は、数値の偏差値とは別に、分類上の認定状態を伝えます。

02

変化

39 と ↑ +3.2 前回比 は現在のスコアと比較を組み合わせ、比較期間を定義せずに動きを示唆します。

03

緊急度

1日 と 04/19 10:00 は、次の試験を期限を意識したステータスにします。

04

活動量

分割バー付きの 62% は完了度を示唆しますが、基になる活動の定義は未定のままです。

構成が支える学習上の判断

このレイアウトは、ポータルを開いた学生が次に何をするか決める場面で役立ちます。左のナビゲーション列には ダッシュボード、試験日程、成績一覧、練習問題、学習計画 が並び、メイン領域は概要から根拠、そして行動へと進みます。この順序により、現在の状態を見る前に移動先を選ぶ必要が減ります。

CHART · 偏差値推移 は赤い線とプロット点を使い、SUBJECTS · 科目別 は原文ラベル 開発 / 国 / 数 / 英 / 理 の下に斜線入りのバー5本を置いています。どちらのパネルにも手描きの軸線はありますが、数値目盛り、日付、バーごとの値はありません。実測の成績データは示さず、提案としてのスコア推移と科目比較を区別しています。

下部の「NEXT STEP / 次にやること」パネルには、試験申し込みの完了と、苦手分野 論理 の10問演習という2つの具体的なアクションがあります。診断から行動への良い橋渡しです。一方で、完了状態や担当、推奨の生成方法を示さないまま、アクションのラベルだけを提案している点はトレードオフです。

ポータル入口から次のステップまで

目に見える読み順は、ポータルのラベル「zentou-ai.jp / portal / dashboard」から始まり、学習者へのあいさつと期間コントロールを経て、4枚のKPIカードに至ります。これにより、本人と時間範囲から現在のステータスへというワークスペースの流れが生まれます。期間スイッチャーでは 今月 が強調されていますが、キャプチャからは、実行時にこのコントロールがデータを切り替えるかどうかは確認できません。

KPIの下では、チャートと科目のパネルが2種類の文脈を提供します。チャートは科目パネルより広く、CSSの1.4fr対1frのパネルグリッドの関係と一致しています。この比率により、推移に広い領域を与えつつ、比較パネルをコンパクトに保てます。動きを重視するダッシュボードの方針に合う選択ですが、目盛りが未指定のままでもチャートが視覚的に強い権威を持ってしまいます。

続いて、お知らせ（直近 3 件） というラベルの破線コンテナにお知らせが表示され、その下に赤枠の次のステップ領域があります。この順序では、受動的な情報が明示的なアクションより先に来ます。実運用への応用では、緊急タスクをお知らせの上に移すべきか検証できますが、それはこのサンプルが示す挙動ではなく、提案される変更になります。

1. 概要に入る

   ポータルのパスとあいさつにより、ダッシュボードが学習者の起点となるワークスペースであることが示され、左側にはナビゲーションがあります。

2. 現在のステータスを確認する

   期間コントロールと4枚のKPIカードが、選択中の時間表示、スコアの文脈、期限、練習進捗を枠付けします。

3. 補助ビューを確認する

   推移パネルと科目パネルは、観測を通じた動きと、科目間の相対的な分布という異なる文脈を提供します。

4. おすすめに沿って行動する

   NEXT STEP ブロックは概要を2つの提案タスクに変えます。試験申し込みを完了するか、苦手分野 論理 を練習するかです。

見えている構造と機能の境界

これは OpenDesign に同梱された公式サンプルで、静的なBダッシュボードのキャンバス1枚です。A、C、D のコンセプトタブや page-1 / 5 の付箋は、追加の制作済み画面を意味しません。タブ、期間、サイドバー項目、次のステップにはクリックハンドラーもありません。学生の識別情報、日付、ランク、進捗値は例示です。このワイヤーフレームが示すのは視覚的な階層であり、稼働中のポータル、保存された記録、試験の提出、検証済みの教育成果ではありません。

このデザインから最も再利用しやすい学びは構造面にあります。推移、科目、お知らせ、アクションの領域を示す前に、分類上のステータス、数値の比較、期限、練習の完了率を分けて見せることです。応用する場合は、各指標の意味と出典を定義し、チャートの単位と時間範囲を加え、どのコントロールとおすすめが実際に機能するかを決めてから、運用可能なダッシュボードとして扱ってください。