// bu/v4.jsx — v3の骨格を維持しつつ「見た目の訴求力」を戻す2案 // 案A ソフトトーン：状態に連動した淡い色面＋スコアリング（円形ゲージ）＋塗りスパークライン // 案B コントラスト：ダークヘッダーで主役を強く、下は白いシートで静かに // 共通ルール：階層は v3 と同じ（1枚シート＋ヘアライン）。装飾は「判断レイヤー」だけに集中投下し、根拠レイヤーは静かなまま。 const { AppFrame, PageBar, Face, Icon } = window; const P = { ink: '#1b1e24', ink2: '#3f444d', muted: '#71767f', faint: '#9aa1ab', ghost: '#b8bdc6', line: '#eceef1', lineSoft: '#f3f4f6', paper: '#ffffff', inset: '#f7f8fa', navy: '#1d2434', navySoft: '#2a3349', up: '#1f7a4d', down: '#bd3a54', warn: '#9a7018', upBg: '#ecf5f0', downBg: '#faeef1', warnBg: '#f8f2e2', upLine: '#d4e7dc', downLine: '#f0d5dc', warnLine: '#ecdfba', }; const PFONT = "'Inter','Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif"; if (typeof document !== 'undefined' && !document.getElementById('v4-styles')) { const s = document.createElement('style'); s.id = 'v4-styles'; s.textContent = ` .v4 details > summary::-webkit-details-marker{display:none} .v4 details > summary{list-style:none} .v4 .act{cursor:pointer;font-family:${PFONT};border:none;background:${P.ink};color:#fff;border-radius:10px;font-weight:700;transition:background .15s,transform .05s} .v4 .act:hover{background:#33383f}.v4 .act:active{transform:translateY(.5px)} .v4 .actw{cursor:pointer;font-family:${PFONT};border:none;background:#fff;color:${P.ink};border-radius:10px;font-weight:700;transition:opacity .15s,transform .05s} .v4 .actw:hover{opacity:.88}.v4 .actw:active{transform:translateY(.5px)} .v4 .quiet{cursor:pointer;font-family:${PFONT};background:transparent;border:1px solid ${P.line};color:${P.ink2};border-radius:10px;font-weight:600;transition:border-color .15s,background .15s} .v4 .quiet:hover{border-color:#d8dce2;background:${P.inset}} .v4 .rec-btn{cursor:pointer;font-family:${PFONT};background:#e8f8fd;border:1px solid #a5e2f3;color:#007fa8;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,border-color .15s} .v4 .rec-btn:hover{background:#d5f3fb;border-color:#0ab1e8} .v4 .quietw{cursor:pointer;font-family:${PFONT};background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:10px;font-weight:600;transition:background .15s} .v4 .quietw:hover{background:rgba(255,255,255,.1)} .v4 .tlnk{cursor:pointer;border:none;background:none;font-family:${PFONT};color:${P.muted};font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:${P.ghost};transition:color .15s} .v4 .tlnk:hover{color:${P.ink}} .v4 .fin{font-family:${PFONT};font-size:13.5px;color:${P.ink};background:${P.inset};border:1.5px solid transparent;border-radius:10px;outline:none;width:100%;padding:11px 14px;transition:background .15s,border-color .15s} .v4 .fin:focus{background:#fff;border-color:${P.ink}} .v4 .fin::placeholder{color:${P.ghost}} `; document.head.appendChild(s); } // ── データ（v3 と同一） ── const Q = { member: { name: 'B班 副班長L', role: 'L / 副班長', dept: '2部', tenure: '3年11ヶ月' }, period: '2026/06/01 – 06/30', summary: { score: 3.9, delta: 0.1, trend: [3.6, 3.5, 3.7, 3.8, 3.9], deptAvg: 3.6, teamAvg: 3.7 }, status: { label: '要確認', note: '2pt低下の項目 / 1on1未実施 39日' }, last: { date: '2026/05/15', daysAgo: 39 }, checkpoints: [ { kind: 'survey', q: '仕事内容満足度', prev: 5, cur: 3, hist: [4, 4, 5, 5, 3], reason: '大きく低下' }, { kind: 'survey', q: '自身へのマネジメント', prev: 3, cur: 5, hist: [3, 4, 3, 3, 5], reason: '大きく上昇' }, { kind: 'signal', q: '前回1on1から1か月以上経過（39日）', reason: '1on1未実施期間' }, { kind: 'signal', q: '日報提出率が低下（92% → 71%）', reason: '日報提出率の低下', src: 'collab' }, ], survey: [ { q: '仕事内容満足度', desc: '現在の業務内容に満足していますか？', prev: 5, cur: 3, hist: [4, 4, 5, 5, 3] }, { q: '人事評価満足度', desc: '会社からの、あなたに対する評価に満足していますか？', prev: 3, cur: 4, hist: [3, 3, 3, 3, 4] }, { q: '自身へのマネジメント', desc: '上司の自身に対するマネジメントに満足していますか？', prev: 3, cur: 5, hist: [3, 4, 3, 3, 5] }, { q: 'モチベーション', desc: '現在のモチベーションは？', prev: 3, cur: 3, hist: [3, 3, 3, 3, 3] }, { q: '現場環境満足度', desc: '現在参画している現場の環境には満足していますか？', prev: 5, cur: 5, hist: [5, 5, 5, 5, 5] }, { q: '自己成長満足度', desc: '自身の成長を実感することができていますか？', prev: 3, cur: 3, hist: [3, 3, 3, 3, 3] }, { q: '帰属満足度', desc: '会社に対して、帰属意識を持つことができていますか？', prev: 4, cur: 4, hist: [4, 4, 4, 4, 4] }, { q: 'やりがい', desc: 'やりがいを感じて日々仕事に取り組んでいますか？', prev: 4, cur: 4, hist: [4, 4, 4, 4, 4] }, ], comment: '6月は特に大きな課題はありません。次の目標について相談したいです。', commentPrev: '5月は特に大きな課題はありません。次の目標について相談したいです。', record: { date: '2026/05/15', method: '対面 / 個別', report: '5月の1on1で目標進捗と困りごとをヒアリング。次回までの小さな改善アクションを合意。', memo: '特記事項なし。前回から大きな変化は見られない。' }, thread: { author: '2部 課長', time: '2026/06/18 10:20', body: '案件切り替え後の負荷は落ち着いてきているようですね。次回は優先順位の整理と、資格学習の時間確保について確認するようにしてください。' }, }; // ── 塗りつきスパークライン（訴求力の核） ── function AreaSpark({ data, color, w = 84, h = 30, id }) { const pad = 3; const min = Math.min(...data), max = Math.max(...data), range = (max - min) || 1; const pts = data.map((v, i) => { const x = pad + (i / (data.length - 1)) * (w - 2 * pad); const y = (h - pad) - ((v - min) / range) * (h - 2 * pad); return [x, y]; }); const line = pts.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' '); const area = `${pad},${h - pad} ${line} ${(w - pad).toFixed(1)},${h - pad}`; const last = pts[pts.length - 1]; const gid = `as-${id}`; return ( ); } // ── スコアリング（円形ゲージ） ── function ScoreRing({ score, max = 5, size = 92, color = P.ink, track = P.line, dark = false }) { const sw = 7, r = (size - sw) / 2, c = size / 2; const circ = 2 * Math.PI * r; const frac = Math.min(1, score / max); return (
{score} / {max}.0
); } function DeltaChip({ delta, dark = false }) { if (delta === 0) return ±0; const up = delta > 0; const c = up ? P.up : P.down, bg = up ? P.upBg : P.downBg; return ( {up ? '↑' : '↓'} {up ? '+' : '−'}{Math.abs(delta)} ); } function SecLabel4({ children, right, tick = false }) { return (
{tick && } {children} {right}
); } // ── 確認ポイント：淡い色面カード（訴求力の主投下先） ── function CheckCard({ item, idx }) { const toneMap = { down: { c: P.down, bg: P.downBg, ln: P.downLine }, up: { c: P.up, bg: P.upBg, ln: P.upLine }, warn: { c: P.warn, bg: P.warnBg, ln: P.warnLine } }; const tone = item.reason.includes('低下') && item.kind === 'survey' ? toneMap.down : item.reason.includes('上昇') ? toneMap.up : toneMap.warn; if (item.kind === 'signal') { return (
{item.q} {item.src === 'collab' && collab連携} {item.reason}
); } const delta = item.cur - item.prev; return (
{item.q}
{item.reason}
{item.prev} → {item.cur}
); } // ── アンケート詳細行（v3 と同じ静かなトーン） ── function SurveyRow4({ s, last, idx }) { const delta = s.cur - s.prev; const changed = delta !== 0; const c = delta < 0 ? P.down : P.up; return (
{s.q}
{s.desc}
{changed ? : } {s.prev} → {s.cur}
); } // ── 下部（根拠レイヤー）：両案共通 ── function LowerSections() { const changed = Q.survey.filter((s) => s.cur !== s.prev); const flat = Q.survey.filter((s) => s.cur === s.prev); return ( <>
本人コメント

{Q.comment}

前回のコメントを見る

{Q.commentPrev}

{Q.record.date} ・ {Q.record.method}}>前回1on1記録

{Q.record.report}

自分用メモ

{Q.record.memo}

過去回答一覧}>アンケート詳細
変化あり {changed.length}
{changed.map((s, i) => )}
変化なし {flat.length}件を表示
{flat.map((s, i) => )}
コメント・共有
{Q.thread.author} {Q.thread.time}

{Q.thread.body}

); } function FootLinks() { return (
「collab連携」の項目は会社設定でON時のみ表示
); } function CheckSection({ inset = true }) { return (
ルールベースで自動抽出}>今回の確認ポイント
{Q.checkpoints.map((c, i) => )}
); } // ═══ 案A ソフトトーン ═══ function ScreenV4A() { return (
{/* ヘッダー：状態連動の淡い色面（要確認=温かい生成り） */}
{Q.member.name} {Q.status.label}
{Q.member.dept} ・ {Q.member.role} ・ 勤続 {Q.member.tenure}　対象期間 {Q.period}
総合スコア
前回1on1
{Q.last.date}
{Q.last.daysAgo}日前 — 未実施期間が長め
{Q.status.note}
); } // ═══ 案B コントラスト（ダークヘッダー） ═══ function ScreenV4B() { return (
{/* ダークヘッダー */}
{Q.member.name} {Q.status.label}
{Q.member.dept} ・ {Q.member.role} ・ 勤続 {Q.member.tenure}　対象期間 {Q.period}
総合スコア
前回1on1
{Q.last.date}
{Q.last.daysAgo}日前 — 未実施期間が長め
{Q.status.note}
); } Object.assign(window, { ScreenV4A, ScreenV4B, V4: { P, Q, AreaSpark, ScoreRing, DeltaChip, SecLabel4, CheckCard, CheckSection, LowerSections, FootLinks } });