AI に訪問介護の管理画面を作らせてみた — 人材で作ったコンポーネントが、介護でも発掘された(やってみた #89)
/home-care375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に訪問介護の管理画面を作らせてみた — 人材で作ったコンポーネントが、介護でも発掘された(やってみた #89)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。新業界 介護・福祉 1枚目——訪問介護 サービス提供管理。サービス提供責任者(サ責)が、ヘルパー×利用者×訪問スケジュールと実績を管理する。
12業界目は介護・福祉。観測:人材・採用のシリーズで固まった/多用したコンポーネント(PersonCell・RelationshipRow パターン・ScheduleGrid)が、HR 系の外の業界でも自力で発掘されるか。
結果 — 4.5/5
tsc/build 緑・375px 横溢れゼロ・0 console error。本日の訪問サマリ・要介護度分布・訪問スケジュール(ヘルパー×時間)・利用者一覧・担当割り当て・ヘルパー別ルート・介護記録のサイン確定。
観測 — PersonCell が HR の外でも「この分野のために」
PersonCell — 「avatar + 氏名 + 属性 + status」セル。全利用者と全ヘルパーに使った。name/secondary/tertiary/presence/trailing/sizeが必要を100%カバー。JSDoc が「名簿、テーブル行、担当者ピッカー、承認者行、詳細パネル」を列挙。この分野でライブラリの最重要の単一コンポーネント。担当割り当て(ヘルパー↔利用者)も手組みしなかった——
PersonCell(ヘルパー・presence+「担当N名」Badge)の下に字下げしたPersonCell size="sm"(利用者)を重ねた。2つの既製セルの組み合わせ。
#85 で作った PersonCell は、#86/#87/#88(人材)に続き #89(介護)でも自力発掘=HR 系を越えて新業界で効いた。そしてヘルパー↔利用者のペアは #88 1on1 の上司↔部下と同じ形=#336 RelationshipRow の2回目(別業界で再確認)。
業界越えの総合 — 5業界で育てたコンポーネントが介護で集合
-
ScheduleGrid(教育#70)→ 訪問スケジュール(ヘルパー×時間・時間競合を destructive リングで検出・全セル合成読み上げ名「08:00 田中美咲 渡辺文雄、身体介護、完了」) -
SignedRecord+CoSign(医療/公共)→ 介護記録(追記のみ・署名ロック・サ責ダブルチェック) -
RouteStops(物流#47)→ ヘルパーの1日(予定vs実績・遅れを符号付きDelta・aria-current="step") Statistic/Badge/Tag(サービスコード)/MetadataList(バイタル/緊急連絡先)/CheckList(提供サービス)/DistributionBar(要介護度分布) も既存コンポーネント。
介護の画面が、医療・物流・教育・人材で育てたコンポーネントの集合でほぼ完成した=コンポーネントが業界を横断する証明、12業界目。
課題記録(コンポーネントを作らず)
- 🔴 サーバーコンポーネント(RSC)で関数の props が
next buildを壊す(DistributionBar.formatValue等を Server Component から渡すと事前描画が失敗・tsc/dev/CI も build しないので素通り・クライアント境界に出す必要・#337・新人が最初の本番ビルドで踏む)。 - 🟡
Iconがname=でなくicon={Glyph}(size も variant key・最も踏まれやすい初手のミス・.d.ts が無く props は src を読む・#338)。 - 🟢 RouteStops の既定ラベルが配送の語彙(statusLabels で関数なしの上書きは可・#282)・RelationshipRow 2回目(#336)。
今回 src の新規コンポーネントなし(4.5/5・PersonCell の HR 外への業界越え+5業界のコンポーネントの集合が成果)。
学び — 複利は「業界の壁」を越える
#86-#88 で PersonCell が人材内で3連続発掘されたのは「同じ業界だから」とも言えた。#89 は介護=全く別の業界で、利用者(≠社員)という別の人の対象に対して、同じ PersonCell が一発発掘された。コンポーネントの価値は業界に閉じない——「人を1行で表す」「予定vs実績の行程」「署名付き記録」「スタッフ×時間の格子」は、医療でも物流でも教育でも人材でも介護でも同じ形をしている。予備知識ゼロの AI に作らせるテストが12業界で見せ続けたのはこれ=業務 UI の最小単位は、業界を越えて共有される。残る課題は機能でなく、サーバーコンポーネント境界(#337)と発見可能性(#338/#325)という「採用者がつまずく既定」。
次回予告(やってみた #90・節目)
- 介護・福祉2枚目(ケアプラン / 介護記録 / 国保連請求 など)。RelationshipRow 3回目=作る合図の観測も。
試す
まだ alpha。だが「人材で固まったコンポーネントが、介護でそのまま効く」——複利が業界の壁を越えた、12業界目の証拠。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。