Use Case Image Style Guide
ansoby-showcase で使用するユースケース画像のスタイルガイドです。一貫性のあるビジュアルを通じて、ansoby-orchestrator の価値を正しく伝えることを目的とします。
画像タイプの使い分け
画像は用途に応じて大きく2つのタイプに分類します。
| タイプ | 用途 | 向いている対象 | 表現方法 | 避けること |
|---|---|---|---|---|
| Abstract Workflow Diagram | 概念・制御・Flowの説明 | 標準ユースケース (Core) | 簡潔なボックスと矢印 | 派手なAI演出、複雑すぎるUI |
| Scene-based Infographic | 具体的な業務現場の説明 | 個別の業務ストーリー | 人、デバイス、場所の描写 | 細かすぎる文字、リアルすぎる人物 |
ブランドトーン
ansoby の基本カラーと世界観を維持します。
- 背景: Light gray (#efefef) または Off-white
- 線・文字: Dark gray (#666666, #4f4f4f)
- アクセント: Orange (#f57c00) を限定的に使用
- 世界観: Minimal, Calm, Operational, Controlled.
- ※ 青い発光、サイバー感、過度な未来的演出は避けてください。
仕様と命名規則
- アスペクト比: 16:9
- 推奨サイズ: 1600x900 または 1280x720
- ファイル形式: PNG
- 命名規則:
- 標準ユースケース:
static/images/usecases/[usecase-id].png - 具体事例 (Stories):
static/images/stories/[story-slug].png
- 標準ユースケース:
生成プロンプト方針
ChatGPT (DALL-E) 等で画像を生成する際のベースプロンプトです。
Abstract Workflow Diagram 用テンプレート
Create a clean abstract workflow diagram for ansoby-showcase. Use ansoby brand colors: light gray background, dark gray text, orange accents. Style: minimal, calm, operational workflow infrastructure, not futuristic, not blue neon. Aspect ratio 16:9. Show the following flow as simple boxes and arrows: [FLOW] Include subtle labels only. Avoid detailed UI mockups. Avoid realistic people.
Scene-based Infographic 用テンプレート
Create a clean scene-based infographic for ansoby-showcase. Use ansoby brand colors: light gray background, dark gray text, orange accents. Style: minimal, calm, business operations, friendly but not cartoonish. Aspect ratio 16:9. Show this business scene: [SCENE] Show people, devices, communication channel, ansoby processing, and output dashboard/sheet. Avoid detailed real UI, avoid real company logos, avoid blue neon AI style.
PDF / スクリーンショットへの配慮
- 画像内の文字量は最小限に抑え、図解で意図を伝える。
- 境界線や余白を意識し、縮小表示やモノクロ印刷でも内容が判別できるようにする。