概要

mikan for School の先生画面は、Bootstrapベースの旧UIからReactに載せ替えた段階にある。実装は進んでいるが、画面ごとのレイアウトルールが定まっておらず、新画面の設計・実装で都度判断が発生している。

このガイドラインは「この種類の画面はこう作る」という判断基準を定めることで、エンジニアの実装速度とPMのデザイン速度を上げることを目的とする。

このガイドラインの範囲

含むもの

含まないもの

「この画面を作るときはこのレイアウト」というルール。エンジニアが新画面を作るとき、PMがデザインするときの出発点。

ダッシュボードKPIカード＋チャート＋サマリー予定

設定セクション分け設定フォーム予定

複数の画面パターンをまたいで適用するルール。テーブルの振る舞い、フォームのラベル位置など。

テーブルソート・行選択・展開行・hover・空状態予定

フォームラベル位置・必須表示・バリデーション・disabled予定

ナビゲーションサイドバー・パンくず・タブ・戻るリンク予定

モーダル / ドロワーいつモーダルか、いつドロワーか。サイズとアニメーション予定

空・ローディング・エラーデータなし、取得中、失敗時のUI予定

フィードバック保存成功トースト、エラーバナー、操作結果の通知予定

エクスポート / インポートCSV出力ボタンの配置、ファイルアップロードUI予定

現状の先生Web画面をプロトタイプで再現したもの。ガイドライン策定のベースライン。