docs/img — 画像アセット管理¶
このディレクトリは docs/index.md(HR チーム向けご紹介)および他の仕様書から参照される画像を置く場所です。
運用ルール¶
- ファイル形式: スクリーンショットは PNG(可逆圧縮)、図版で軽量化が必要な場合は SVG。JPEG は避ける。
- 命名規則:
<場所>-<何の>-<状態>.png(英小文字・ハイフン区切り)。例:slack-prompt-card-pending.png。 - サイズ目安: 横幅 1200〜1600 px、ファイルサイズ 500 KB 以下を推奨。Slack カードは横幅 1024 px で十分見える。
- 取得元のマスキング: 実名・実顧客名・実メールアドレスが写り込む場合は必ずぼかす/差し替える。デモデータで撮るのが望ましい。
- ダークモード: MVP では light テーマで撮影した 1 枚のみで可。将来 dark 対応時は
-dark.pngを追加する。 - 参照方法: Markdown からは相対パスで
と書く(docs ルートから)。
差し替え予定の画像一覧¶
現在は共通プレースホルダ placeholder.svg を参照しています。実画像が揃い次第、下表の PNG に差し替えてください(docs/index.md 側の src を書き換えるだけで OK)。
| 予定ファイル名 | 参照元 | 何を写すか |
|---|---|---|
slack-prompt-card-pending.png |
§3.1 | 実行方針カードの「承認待ち」状態。青カラーバー + [承認] / [却下] ボタンが見えること |
slack-process-card-pending.png |
§3.1 | 実行ステップカードの「承認待ち」状態。5 ステップが箇条書きで表示されていること |
slack-execution-card-completed.png |
§3.1 | 実行完了カード。全ステップ ✅ + サマリ + Google Sheet URL が見えること |
slack-execution-card-overtime.png |
§3.2 | 残業時間確認シナリオの完了カード。数値表示 |
slack-execution-card-employee-list.png |
§3.3 | 従業員一覧シナリオの完了カード。表形式で従業員名・部署が並ぶ |
slack-rejection-modal.png |
§4.3 | 却下理由入力モーダル。multiline テキストボックスと [送信して再生成] ボタン |
slack-cancel-confirm-dialog.png |
§4.4 | 実行中止時の確認ダイアログ。「実行を中止しますか?」 |
web-admin-pipeline-detail.png |
§4.5 | Web 管理画面のパイプライン詳細ページ。承認者・時刻・再生成履歴が見える状態 |
撮影手順(推奨)¶
make devでローカル環境を起動し、MOCK_MODE=trueの状態でシナリオを通す- 撮りたい状態でブラウザ/Slack の表示を止め、スクリーンショットを取る
- 余計な UI(チャンネル一覧・他メッセージなど)は画像編集でトリミング
- 本ディレクトリに PNG を配置し、
docs/index.mdのimg/placeholder.svgを新ファイル名に置換 make docs-buildでビルドが通ることを確認してコミット