AI に 1on1 管理を作らせてみた — CJK タブの溢れを見つけて、その場で直した（やってみた #88）
/one-on-one375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に 1on1 管理を作らせてみた — CJK タブの溢れを見つけて、その場で直した（やってみた #88）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。人材・採用 6枚目——1on1 / フィードバック管理。マネージャー↔メンバーの定期1on1、履歴、ネクストアクション、コンディション推移。
#87 と同時に回した人材6枚目。観測：PersonCell の再々利用＋ペア（上司↔部下）という HR 特有の形。
結果 — 4/5・そして Tabs を修正
tsc/build 緑・375px・0 console error。1on1俯瞰・今週の予定・ペア一覧・掘り下げる詳細（履歴/アクション/コンディション）。
観測 — PersonCell が ~12回、すべて既製
PersonCell（最大の収穫） — 「avatar + 氏名 + 部署/役割」セルが~12回（全マネージャー＋全メンバー、ペアで）出る。avatar+text を1つも手組みしなかった。name/secondary/tertiary/avatar/size/trailing・日本語の姓の頭文字・truncate・綺麗なアクセシビリティの行。この名簿系の画面のために最も明確に作られたコンポーネント。
Timeline（ペアの履歴・mood で色分け・as="div"で<p>の入れ子によるサーバー/ブラウザずれを回避）・Meter（健全性・経過 vs サイクル窓）・Badgeicon（mood/overdue を色＋アイコン）・SparklineChart（コンディション推移）・Statistic/Sheet/EmptyState/Tagも既存コンポーネント。
PersonCell の別業界での自力発見は #86 勤怠・#87 入社に続き3画面連続＝作った次の3ラウンドで別々の予備知識ゼロの AI が全部自力発掘。
見つけて直した — TabsList が CJK ラベルを 375px で切り落とす
375px のタブ溢れ（実バグ） —
TabsListはoverflow-y-hiddenだが、横にスクロールも縮小もしない。中くらいの日本語ラベル3つ（履歴 / アクション / コンディション）が Sheet の余白の中で2px 溢れた。既定のpx-4が CJK には広い。利用者側で直したが、ライブラリのTabsListが横スクロール or 縮小すべき——測らない採用者は溢れを出荷してしまう。
→ その場で修正（PR #334）。横方向を max-w-full overflow-x-auto＋スクロールバー隠し＋モバイルは justify-start（先頭タブに到達可能）→ sm+ で justify-center。CJK ラベルはもう絶対に切れない。 群青は日本語ファーストのライブラリなので、CJK タブのモバイル溢れは主要な読者にとっての欠陥＝即修正に値する。design:verify 緑・tarball 再パック→gunjo-test に再インストール済。
その他の課題記録
- 🟠 ペア行のコンポーネントが無い（上司↔部下を2つの PersonCell＋コネクタ＋signal で手組み・HR の関係を表す画面そのものの形・#336
RelationshipRow・1回目）。 - 🟢
SparklineChartにheightprop が無い（className でサイズ・#330）・CheckListは表示/確認用で、選択用の ListBox(#135) は未出荷・サーバー描画はtodayを固定しないとずれる（注入できる today を前面に出してほしい）。
学び — 発見可能性の次は「壊さない既定」
PersonCell + Meter + Timeline + Statistic + CheckList が 1on1 ツールの背骨をほぼ手組みゼロで賄い、アクセシビリティも大半の手書きより良い。残る alpha は「薄いチャート props」と「CJK タブ溢れ」——どちらも日本語ファーストのライブラリが日本語で最初に当たる場所。#88 はその1つ（Tabs）をその場で潰した。複利（PersonCell 3連続発掘）と品質（CJK 既定の修正）が同じ回で回った。
次回予告（やってみた #89）
- 人材6枚で締め、次業界へ移る（Tier1: 飲食 / 保険 / 運輸 / 介護）。PersonCell/RelationshipRow が新業界でも発掘されるか。
試す
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。