コンテンツにスキップ

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 からは相対パスで ![キャプション](img/<filename>) と書く(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 管理画面のパイプライン詳細ページ。承認者・時刻・再生成履歴が見える状態

撮影手順(推奨)

  1. make dev でローカル環境を起動し、MOCK_MODE=true の状態でシナリオを通す
  2. 撮りたい状態でブラウザ/Slack の表示を止め、スクリーンショットを取る
  3. 余計な UI(チャンネル一覧・他メッセージなど)は画像編集でトリミング
  4. 本ディレクトリに PNG を配置し、docs/index.mdimg/placeholder.svg を新ファイル名に置換
  5. make docs-build でビルドが通ることを確認してコミット