AI に施主ポータルを作らせてみた：事業者向けにそろったコンポーネントは、消費者向けの温かい画面では少し硬かった（やってみた #178）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に、実際の画面で組ませていく連載。建設の5枚目、そして初めての⁠施主（発注者）向け⁠です。お題は⁠注文住宅を建てている個人が見る「マイホーム進捗ポータル」⁠。工事の段階、現場から届いた写真、打ち合わせの記録と予定、施主が決めること、支払いの予定、現場担当への連絡をまとめた画面です。

結果：4/5。骨格は組めたが、消費者向けの温かさは既存のコンポーネントに無かった

予備知識ゼロの AI に、公開されている npm パッケージと gunjo.jp の docs だけを渡して組ませました。tsc は緑、スマホを主に据えた作りです。

ここまでの建設4枚は、現場監督や積算担当が使う⁠事業者向け⁠の画面でした。5枚目はお客さん（施主）が見る⁠消費者向け⁠の画面です。結論から言うと、画面の骨格は既存のコンポーネントで組めましたが、⁠「消費者向けの温かさ」を持ったコンポーネントが群青にはまだ少なく、いくつかを手で組む⁠ことになりました。

段階や予定を見せる部分は、事業者向けに作ったコンポーネントがそのまま使えました。

• ⁠Stepper（工事の段階）⁠：着工・基礎・上棟・内装・完成といった大きな流れを、今どこにいるかつきで見せられました。
• ⁠ProgressWidget（全体の進み具合）⁠ と ⁠EventCalendar（次回の打ち合わせ）⁠：進捗率も、予定カレンダーも、そのまま消費者向けに通用しました。カレンダーはキーボード操作や読み上げ対応まで入っています。
• ⁠Timeline（打ち合わせの記録）／MetadataList（決まったこと）／CheckList（施主が決めること）⁠：淡々としていますが、文章とアイコンの選び方で十分やさしくできました。

足りなかったもの：消費者向けのコンポーネントが薄い

埋まらなかったのは3つで、どれも⁠消費者向けの温かさ⁠に関わる部分です。

1. ⁠写真＋一言のやさしいカードが無い。⁠ 現場から届いた写真に「上棟しました」と一言そえて並べたかったのですが、既存の写真管理コンポーネントは、お気に入りや評価や選択といった⁠業務のアセット管理⁠の性格が強く、施主向けのアルバムには重すぎました。一覧ビューアの方はキャプション（説明文）を持てません。今回はカードと画像で素朴に手で組みました（約20行）。
2. ⁠素朴なメッセージ送信が無い。⁠ 現場担当とのやり取りの入力欄が欲しかったのですが、用意されている入力欄は AI との対話向け（モデル選択・音声・添付など）で、施主と担当の素朴なメッセージには重すぎました。文章の入力と送信ボタンを手で組みました（約15行）。
3. ⁠支払いスケジュールの行が無い。⁠ 「着工金・中間金・引渡金」を、金額と入金状況と予定日で並べたかったのですが、金額の内訳コンポーネントは合計を出す台帳で、行ごとの状況を持てません。チェックリストで代用しました。

手で組んだのは合わせて55行ほどで、画面全体（約570行）から見れば一部です。ただしこれらは消費者向けの画面でよく出る形なので、他の施主向け・お客様向けの画面でも繰り返し必要になりそうです。足りないコンポーネントは3つの別々の画面で独立に必要になったら正式に作る運用で、今回の3点はまだ1回目です。

温かさは、いまはコピーとアイコンで作っている

もうひとつはっきりしたのは、⁠コンポーネント自体は温かさを持っていない⁠ということです。カードも、進捗も、連絡スレッドも、中立で事業者向けにも消費者向けにも使えますが、裏を返すと淡々としています。今回の画面がやさしく見えるのは、文章とアイコンの選び方でそうしているからで、コンポーネントがそうしてくれるわけではありません。事業者向けのコンポーネントは十分にそろっていますが、消費者向けの温かさは、これからの領域です。

名前で迷ったところ

進捗の段階を出すコンポーネントは候補が散らばっていて（段階表示・承認ステップ・進捗ウィジェット・時系列など）、どれが消費者向けの大きな流れ用なのか名前からは判断しづらく、説明を読んで確かめました。写真系も候補が多く、「キャプションつきで並べたいだけ」の近道が名前からは読めませんでした。

まとめ

建設の5枚目は、初めての消費者向けでした。段階・進捗・予定・記録といった骨格は事業者向けのコンポーネントでそのまま組めましたが、写真のアルバム・素朴なメッセージ・支払いスケジュールという消費者向けの部分は、ぴったりのコンポーネントが無く手で組みました。事業者向けのコンポーネントが広くそろった一方で、⁠消費者向けの温かさは、まだこれから育てる領域⁠だと分かった回です。共通で使えるコンポーネントと、その先の足りないところが、事業者と消費者という別の軸でも見えてきました。