AI に従業員名簿＋組織図を作らせてみた — 「人」を表すコンポーネントだけが、2回続けて手組みされた（やってみた #84）
/employee-directory375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に従業員名簿＋組織図を作らせてみた — 「人」を表すコンポーネントだけが、2回続けて手組みされた（やってみた #84）
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。人材・採用 2枚目——従業員名簿 / 組織図。全社の従業員を一覧で見て、組織階層をたどり、個人にドリルインする。
採用パイプライン(#83)とは作法が真逆——カンバンのファネルではなく、名簿テーブルと組織ツリー。観測ポイントは2つ：①組織階層に木構造のコンポーネントが自力で発掘されるか ②前回手組みされた「人物セル」がまた手組みされるか（3回ルールの2回目）。
結果 — 4/5・約85%が既存コンポーネント
tsc/build 緑・375px 横溢れゼロ（実測 scrollWidth-clientWidth===0）・0 console error。総従業員サマリ・雇用形態内訳・名簿テーブル/グリッド・組織図ツリー・従業員を掘り下げる詳細。
観測① — TreeView が組織図にそのまま
TreeView（いちばんの見どころ） — 組織図は再帰的な開閉ツリーを手組みする覚悟で「無いコンポーネント」として記録する準備をしていた。がTreeViewが全部やった：controlledexpandedSet・selectionMode・renderNodeMeta(直属部下数)・renderNodeActions・roving-tabindex・aria-label。上司→部下のグラフをTreeNode[]に写すだけ。組織図のために作られたよう。
Display 層の TreeView(#135系) が、人材の組織階層に業界を越えて効いた。DataTable(renderCard でモバイルはカード崩し)・Statistic・DistributionBar・Sheet+MetadataList+Timeline(異動履歴)・Tag(スキル)・Avatar(presence dot)・Grid(レスポンシブ列)・SearchInput/Select/Tabs/EmptyState も全部既存コンポーネントで。
観測② — そして「人」だけが、また手組みされた
人物セル（大物） — 「顔写真＋氏名(ふりがな)＋部署・役職＋在籍ステータス」のセルが、テーブル・グリッドカード・詳細ドロワーの上司/部下行に何度も出る。人物のコンポーネントが無いので
Avatar+text+StatusBadgeを手組みして自前の囲みを使い回した。ライブラリは最小コンポーネントを全部持つが「これは人だ」と言う組み合わせが無い。Person/IdentityCell（{name, secondary, avatar, status, presence, meta}＋サイズ）があれば、最も使い回した自作ファイルが消えた。追加すべき最も価値あるもの。
これで PersonCell の手組みは2回連続（#83 採用パイプライン＋#84 名簿）。別々の予備知識ゼロの AI が、独立に同じ組み合わせを再発明した。#329 に2回目を記録——あと1回 HR/CRM 系で出れば3回ルール発火で作る。「人物セル」は HR/CRM/ATS/担当者ピッカー/コメント/承認者行、あらゆる人物系の画面の最小単位。
課題記録・追記（コンポーネントを作らず）
- 🟠
PersonCell不在が2回目（#329・3回ルール2/3・クリックできる手がかりも希望）。 - 🟡
TreeViewが発掘されにくい（まとめて呼び出す入口（@gunjo/ui）にはあるが docs に「組織図/階層」の枠も使用例もパターンページも無い・「入口が救い、docs は救わなかった」・#325 に追記＝EventCalendar/ChartLegend と同じ「在るのに見つからない」）。 - 🟢
Avatarの fallback が全員同じグレー（名前から決まった色を付ける option が欲しい・名簿22人の見分けやすさ・#331）。 - 🟢
Timelineの下位パーツが未 export・DataTableが tanstack の ColumnDef を前提にする点がライブラリ内に文書化なし。
今回 src の新規コンポーネントなし（4/5・ライブラリが85%を摩擦なく賄い、残りは PersonCell＋発見可能性＋細かな仕上げ）。
学び — 収束先が「人」という組み合わせで確定した
#83 で「欠落は個別のコンポーネントでも大型レイアウトでもなく『人』の合成コンポーネントに収束した」と書いた。#84 はそれを別業界・別作法の画面で独立に再確認した——カンバンでも名簿でも、テーブル行でもツリーでもドロワーでも、「人を1行で表す」たびに手組みが発生する。2回連続の独立した手組みは、もう偶然ではない。 一方で TreeView の業界越えが示すとおり、構造系の大型はもう揃っている。次の HR 画面で PersonCell が3回目を踏めば、それが次に固めるべきコンポーネント。
次回予告（やってみた #85）
- 人材・採用3枚目（人事評価ワークフロー / 勤怠
ScheduleGridなど）。PersonCell 3回目＝作る合図の観測。
試す
まだ alpha。だが「次に作るべきコンポーネント」が、2回連続の手組みという形で目の前に立ち上がった回。3回目が出たら、それを固める。
この連載は、作者が AI（Claude と Codex）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。