// ServiceIllustrations — 各カード用のSVGアイソメ風イラスト（モノクロ＋黄アクセント）。
// トーン&マナー: 白背景 / 黒線 (#111) / グレー塗り / 黄色 (#f5c842) を小面積でアクセント
function IsoBase({ children, viewBox = "0 0 200 160" }) {
return (
);
}
// 01 AIコンサルティング — ホワイトボード＋3キャラが議論
function IllustrationConsulting() {
return (
{/* backdrop halftone */}
{/* Whiteboard (isometric) */}
{/* Whiteboard contents: flow diagram */}
INPUT
AI STRATEGY
GOAL
{/* secondary note */}
{/* Character 1 - left, presenter */}
{/* pointing arm */}
{/* Character 2 - sitting center-right */}
{/* laptop hint */}
{/* Character 3 - right standing */}
{/* Floor line */}
{/* floating geometric accents */}
);
}
// 02 AIエージェント開発 — ノードワークフロー＋歯車＋ロボ手
function IllustrationAgent() {
return (
{/* Big workflow panel */}
{/* Nodes */}
Trigger
Agent
Tool
Output
{/* connecting lines */}
{/* Gears - bottom-left */}
{[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => {
const rad = (a * Math.PI) / 180;
const x1 = 36 + Math.cos(rad) * 10;
const y1 = 118 + Math.sin(rad) * 10;
const x2 = 36 + Math.cos(rad) * 13;
const y2 = 118 + Math.sin(rad) * 13;
return ;
})}
{/* Robotic arm - bottom-right */}
{/* Floor */}
{/* accent */}
);
}
// 03 AI研修 — 講師＋スクリーン＋着席受講者
function IllustrationTraining() {
return (
{/* Projector screen */}
{/* Screen content - chart */}
{/* bars */}
{/* trend line */}
{/* Lecturer */}
{/* pointer */}
{/* Audience — 3 rows of seats */}
{[0, 1, 2].map((row) => (
{[0, 1, 2, 3].map((col) => (
))}
))}
{/* Floor */}
{/* accents */}
);
}
// 04 AIツール導入 — PC画面＋チャット吹き出し＋ツール選定カード
function IllustrationTools() {
return (
{/* Laptop */}
{/* Screen UI — chat bubbles */}
User: help me...
AI: Sure!
...
{/* Tool selection cards - right side, stacked */}
Tool A
{/* Magnifier */}
{/* Checklist */}
{/* Floor */}
{/* accents */}
);
}
window.ServiceIllustration = {
consulting: IllustrationConsulting,
agent: IllustrationAgent,
training: IllustrationTraining,
tools: IllustrationTools,
};