エクスポート / インポート

CSVファイルによるデータの書き出し・読み込み。先生がExcelで管理しているデータとの橋渡しをする重要な機能。

CSVエクスポート

ボタンの配置

エクスポートボタンは一覧画面のタイトル行右側、新規作成ボタンの左隣に配置する。セカンダリボタン(ボーダーのみ)でダウンロードアイコン付き。プライマリの新規作成ボタンより目立たせない。

ファイル命名

ダウンロードされるファイル名は「オブジェクト名_日付.csv」の形式にする(例: students_2026-03-10.csv)。先生がダウンロードフォルダで見つけやすいように、何のデータかわかる名前にする。

カラム選択

基本はテーブルに表示されている全カラムを出力する。カラム数が多い場合はエクスポート前に選択UIを表示する(モーダルまたはドロワーでチェックボックスリスト)。デフォルトは全選択状態にしておく。

フィルタとの連動

フィルタや検索が適用されている場合は、表示中のデータのみをエクスポートする。エクスポート前に「現在のフィルタ条件でN件をエクスポートします」と件数を表示する。

CSVインポート

アップロードUI

ドラッグ&ドロップエリア + クリックでファイル選択の両方に対応する。対応ファイル形式(CSV)と最大件数を明記する。ファイル選択後はファイル名を表示し、差し替えボタンを提供する。

プレビュー・バリデーション

ファイル選択後、即座に取込を実行しない。まずデータのプレビューを表示し、先生が内容を確認できるようにする。バリデーションエラー(必須項目の欠落、形式不正)があれば行ごとにエラー内容を表示する。エラー行を修正してから取込を実行する。

エラーハンドリング

エラーのある行は赤でハイライトし、エラー理由を行末に表示する。「N行中M行にエラーがあります」のサマリーを表示。エラー行を除外して正常行のみ取り込むオプションと、すべて修正してから取り込むオプションの両方を提供する。

ウィザード連携

CSVインポートは「ファイル選択 → プレビュー → 確認・実行」の3ステップウィザードが適している。フルスクリーンモーダルで表示し、先生が安心して作業できるようにする。詳細は「作成/編集」パターンのウィザードを参照。

テンプレートダウンロード

インポート用のテンプレートCSVファイルを提供する。テンプレートには正しいヘッダー行と、1〜2行のサンプルデータを含める。ダウンロードリンクはインポート画面のファイル選択エリア近くに配置する。「テンプレートをダウンロード」のテキストリンク形式で表示。

Do / Don't

Do
  • エクスポートファイル名にオブジェクト名と日付を含める
  • インポート前にプレビューを表示し、先生が確認できるようにする
  • テンプレートCSVを提供する
  • エラー行の内容を具体的に表示する
Don't
  • ファイル選択後に確認なしで即座に取り込まない
  • エラー時に「インポートに失敗しました」だけで終わらせない
  • フィルタ適用中にフィルタ無視で全件エクスポートしない
  • テンプレートなしでCSVの形式を先生に推測させない

プロトタイプ

エクスポートボタンの配置例

生徒一覧

インポートフロー

Step 1: ファイル選択

ここにCSVファイルをドロップまたは クリックして選択(最大10,000行)

Step 2: プレビュー(エラー表示例)

5行中2行にエラーがあります。修正してから取り込んでください。
名前メール教室エラー
1田中太郎tanaka@school.jp3年A組
2佐藤花子invalid-email3年A組メール形式不正
3鈴木一郎suzuki@school.jp3年B組
4takahashi@school.jp3年A組名前が未入力