エクスポート / インポート
CSVファイルによるデータの書き出し・読み込み。先生がExcelで管理しているデータとの橋渡しをする重要な機能。
CSVエクスポート
ボタンの配置
エクスポートボタンは一覧画面のタイトル行右側、新規作成ボタンの左隣に配置する。セカンダリボタン(ボーダーのみ)でダウンロードアイコン付き。プライマリの新規作成ボタンより目立たせない。
ファイル命名
ダウンロードされるファイル名は「オブジェクト名_日付.csv」の形式にする(例: students_2026-03-10.csv)。先生がダウンロードフォルダで見つけやすいように、何のデータかわかる名前にする。
カラム選択
基本はテーブルに表示されている全カラムを出力する。カラム数が多い場合はエクスポート前に選択UIを表示する(モーダルまたはドロワーでチェックボックスリスト)。デフォルトは全選択状態にしておく。
フィルタとの連動
フィルタや検索が適用されている場合は、表示中のデータのみをエクスポートする。エクスポート前に「現在のフィルタ条件でN件をエクスポートします」と件数を表示する。
CSVインポート
アップロードUI
ドラッグ&ドロップエリア + クリックでファイル選択の両方に対応する。対応ファイル形式(CSV)と最大件数を明記する。ファイル選択後はファイル名を表示し、差し替えボタンを提供する。
プレビュー・バリデーション
ファイル選択後、即座に取込を実行しない。まずデータのプレビューを表示し、先生が内容を確認できるようにする。バリデーションエラー(必須項目の欠落、形式不正)があれば行ごとにエラー内容を表示する。エラー行を修正してから取込を実行する。
エラーハンドリング
エラーのある行は赤でハイライトし、エラー理由を行末に表示する。「N行中M行にエラーがあります」のサマリーを表示。エラー行を除外して正常行のみ取り込むオプションと、すべて修正してから取り込むオプションの両方を提供する。
ウィザード連携
CSVインポートは「ファイル選択 → プレビュー → 確認・実行」の3ステップウィザードが適している。フルスクリーンモーダルで表示し、先生が安心して作業できるようにする。詳細は「作成/編集」パターンのウィザードを参照。
テンプレートダウンロード
インポート用のテンプレートCSVファイルを提供する。テンプレートには正しいヘッダー行と、1〜2行のサンプルデータを含める。ダウンロードリンクはインポート画面のファイル選択エリア近くに配置する。「テンプレートをダウンロード」のテキストリンク形式で表示。
Do / Don't
- エクスポートファイル名にオブジェクト名と日付を含める
- インポート前にプレビューを表示し、先生が確認できるようにする
- テンプレートCSVを提供する
- エラー行の内容を具体的に表示する
- ファイル選択後に確認なしで即座に取り込まない
- エラー時に「インポートに失敗しました」だけで終わらせない
- フィルタ適用中にフィルタ無視で全件エクスポートしない
- テンプレートなしでCSVの形式を先生に推測させない
プロトタイプ
エクスポートボタンの配置例
生徒一覧
インポートフロー
Step 1: ファイル選択
Step 2: プレビュー(エラー表示例)
| 行 | 名前 | メール | 教室 | エラー |
|---|---|---|---|---|
| 1 | 田中太郎 | tanaka@school.jp | 3年A組 | |
| 2 | 佐藤花子 | invalid-email | 3年A組 | メール形式不正 |
| 3 | 鈴木一郎 | suzuki@school.jp | 3年B組 | |
| 4 | takahashi@school.jp | 3年A組 | 名前が未入力 |