D-03
プレビュー（A4縦）
URL：/skillsheets/preview/:id
作成日：2026-05-25
アクセス者：管理職・営業
ステータス：draft
更新日：2026-06-01
モック画面
※ 承認済みモックアップのスクリーンショット
概要
生成されたスキルシートをA4縦レイアウトでプレビューし、PDF/Excel/Word形式でダウンロードできる画面。テンプレート・ズーム・出力形式・バージョンをツールバーで操作する。
アクセス権限
- ロール：管理職・営業
- 認証：要
画面構成要素
ツールバー構成
| ツール | 内容 |
|---|---|
| テンプレート選択 | ドロップダウン（自社標準・顧客A様指定・顧客B様指定等） |
| ページナビゲーション | 1/Nページ表示、前後ページ移動 |
| ズームコントロール | ー/100%/+、「幅に合わせる」ボタン |
| 出力形式 | PDF / Excel / Word 切替 |
| バージョン履歴 | バージョン表示・過去バージョン参照 |
アクションボタン
▍通常モード（閲覧）
| ボタン | 内容 |
|---|---|
| ← 編集に戻る | D-02 AIスキルシート生成 Step 4 に戻る（生成直後の場合）または前画面に戻る |
| ✏ 編集する | インライン編集モードへ切り替える |
| 📥 PDF ダウンロード | A4 縦 PDF をダウンロードする |
| 📨 案件に紐付けて保存 | 案件を選択してスキルシートを保存・D-01 へ遷移する |
▍編集モード
| ボタン | 内容 |
|---|---|
| 💾 保存する | 編集内容をサーバーに保存し、バージョンを自動インクリメント。完了トーストを表示して閲覧モードへ戻る |
| ✕ キャンセル | 編集内容を破棄して閲覧モードへ戻る（未保存変更がある場合は確認ダイアログを表示） |
| 📥 PDF ダウンロード | 現在の編集内容（未保存）で PDF をダウンロードする |
インライン編集モード仕様
「✏ 編集する」ボタンをクリックすると編集モードへ切り替わる。
| エリア | 編集方式 | 備考 |
|---|---|---|
| 基本情報テーブル（全項目） | テキスト入力・インライン編集 | 各セルをクリックで編集可能 |
| 経験技術グリッド（熟練度） | ドロップダウン（◎ / ○ / △ / −） | 各技術の熟練度を変更可能 |
| 業務経歴（業務内容） | テキストエリア・インライン編集 | 行をクリックで編集可能 |
| 業務経歴（使用言語・DB・サーバ OS・FW 等） | テキスト入力・インライン編集 | |
| 業務経歴（担当工程） | チェックボックス | 工程のチェックを変更可能 |
| 業務経歴（期間・役割・規模） | テキスト入力・インライン編集 |
- 編集可能フィールドはホバー時に薄いハイライト枠を表示し、クリックで編集開始
- 編集中フィールドはアウトライン枠（ブランドカラー）で強調表示
- 未保存の変更がある行・セルは差分インジケーター（左ボーダーのアクセントライン等）を表示
- ページ離脱・キャンセル時に未保存変更がある場合は確認ダイアログを表示
A4用紙プレビュー内容
| セクション | 内容 |
|---|---|
| ヘッダー | スキルシートタイトル・イニシャル（D.K 形式）・出力日（YYYY/MM/DD） |
| 基本情報 | 技術者名（イニシャル）・所属・最寄駅・年齢・性別・学歴・得意分野・得意技術・得意業務・保有資格 |
| 経験技術グリッド | 4列構成。セクション：経験言語 / 経験 FW / 経験 DB / 経験 OS / 経験ツール（全幅） |
| 業務経歴 | 直近順テーブル。No / 期間 / 業務内容 / 役割・規模 / 使用言語 / DB / サーバ OS / FW・MW・ツール等 / 担当工程（縦書き7項目） |
熟練度凡例
| マーク | 意味 | 基準 |
|---|---|---|
| ◎ | 得意 | 2年以上の実務経験 |
| ○ | 経験あり | 1年以上の実務経験 |
| △ | 少し経験あり | 0.5年以内 |
| - | 未経験 | — |
担当工程（7項目）
業務経歴テーブルの担当工程列に縦書きチェックボックス形式で表示する。
- 要件定義
- 基本設計
- 詳細設計
- 実装・単体
- 結合テスト
- 総合テスト
- 保守・運用
エラー表示
| ケース | メッセージ |
|---|---|
| スキルシートデータ取得失敗 | データの取得に失敗しました。ページを再読み込みしてください |
| PDF ダウンロード失敗 | PDF の生成に失敗しました。しばらく待ってから再試行してください |
| 保存失敗 | 保存に失敗しました。しばらく待ってから再試行してください |
| テンプレート切替失敗 | テンプレートの読み込みに失敗しました |
| 編集中のページ離脱（未保存あり） | 保存されていない変更があります。このページを離れますか？（確認ダイアログ） |
画面遷移
| トリガー | 遷移先 | 条件 |
|---|---|---|
| 「← 編集に戻る」ボタン | D-02 AIスキルシート生成または前画面 | 閲覧モード時。編集モード中は確認ダイアログを先に表示 |
| 「📨 案件に紐付けて保存」完了 | D-01 スキルシート一覧 | 保存成功時 |
| 「✏ 編集する」ボタン | 同画面（編集モードへ切り替え） | 閲覧モード時 |
| 「💾 保存する」ボタン | 同画面（閲覧モードへ切り替え） | 編集モード・保存成功時 |
| 「✕ キャンセル」ボタン | 同画面（閲覧モードへ切り替え） | 編集モード時 |
備考・仕様詳細
- A4 縦（210×297mm）の紙面を CSS で再現し、印刷プレビューと出力結果が一致するよう実装する
- テンプレート切替はリアルタイムでプレビューを更新する（クライアントサイドレンダリング推奨）
- PDF ダウンロードはサーバーサイドレンダリングで生成し、フォント埋め込みを確実に行う
- 「技術者名」フィールドへの出力内容は D-02 生成時の匿名化処理により決定される（D-03 単体では氏名・イニシャルの変換処理を行わない）
- 編集モードでの「保存する」実行時に新しいバージョンを自動採番する（例：v1 → v2）
- 編集内容はサーバーに即時保存する。オートセーブは行わない（保存ボタン押下時のみ保存）
未決事項
| # | 内容 |
|---|---|
| 1 | Excel・Word 出力の対応タイムライン（MVP vs v1.0） |
| 3 | 複数ページ（2 ページ目以降）のレイアウト設計 |
| 4 | バージョン復元機能の UI 設計（D-03 内 vs D-01 経由） |
| 5 | 「案件に紐付けて保存」時の案件選択 UI（モーダル vs ドロップダウン） |
変更履歴
| 日付 | 変更者 | 内容 |
|---|---|---|
| 2026-05-25 | 開発推進本部 | 初版作成（承認済みモックアップをもとに生成） |
| 2026-06-01 | 開発推進本部 | サンプルPDF（D.K スキルシート）との差異を修正：経験技術グリッドから「経験 AI/LLM」削除・「クラウド・OS」→「経験 OS」へ変更、業務経歴テーブルの「使用技術」を「使用言語／DB／サーバ OS／FW・MW・ツール等」4 列に分割、担当工程を 7 項目（結合テストと総合テストを分離）に変更。プレビュー画面にインライン編集モードと保存機能を追加。匿名化処理を D-02 生成時に一元化 |