家の建築過程を、施主の手元にリアルタイムで。施主ごとに異なる我が家を再現した施主体験Webアプリケーション「TATETA」開発

開発着手前の上流工程において、クライアントの業務フローとシナリオ設計を主導しました。「着工前→着工→基礎工事→上棟→木工事→完工→引き渡し」という全9ステップの施主体験を丁寧に定義し、各工程で施主が何を知りたいのか、現場監督はどのタイミングでどの情報を入力するのかを業務フローとして可視化しています。この上流での徹底的な情報設計が、その後の設計・実装の精度を担保するベースとなりました。

クライアントとのオーダー調整では要件の優先度を粘り強くすり合わせ、「実現可能なもの」と「実現すべきもの」を整理しながらプロジェクトを前進させました。

進捗情報の通知体験として、「現場からお手紙です」というコミュニケーション機能を設計しました。事務的な進捗報告ではなく、封筒のアイコンとともに届く「お手紙」というメタファーを用いることで、受け取る施主の感情的な反応を意図的にデザインしています。

上棟・完工・引き渡しの各マイルストーンには専用のムービーコンテンツを連動させ、節目の感動を映像とともに届ける仕組みを構築しました。完工日の実績が記録されたタイミングでフロー画面を施主に開示する段階的な情報設計により、情報の鮮度と体験のタイミングを最適化しています。完工時にはSNSシェア（LINE・X・リンク）機能も用意し、家づくりの感動を周囲と共有できる体験へと昇華させました。

4〜6月（春）・7〜9月（夏）・10〜12月（秋）・1〜3月（冬）と、四季に合わせてUIの雰囲気が変化するデザインを採用しました。家が建つ季節は施主の記憶と深く結びつきます。「あの夏、棟が上がった」「雪の季節に引き渡しを受けた」——その感情的な価値をUIデザインに反映し、Webアプリケーションを開くたびに「今、家が建っている」という実感を届けることを目指しました。

建築過程の進行を施主に伝える際に、静止画の切り替えや文字情報だけでは体験の質が不十分だと判断しました。そこでアニメーション制作会社と連携し、Lottieを用いた映像表現を実装しています。

Lottieを選んだ理由はパフォーマンスにあります。SVGベースで出力されるLottieは、ファイルサイズが軽量でWebとの親和性が高く、重い動画ファイルを使わずともスマートフォン・PCを問わずストレスなく動作します。家の形が着工から完工へと段階的に変化していくダイナミックな演出も、読み込み時間を感じさせることなくスムーズに再生されます。施主が画面を開くたびに「今、確かに家が建っている」という没入感を届けることが、この技術選定の狙いでした。アニメーションの制作ディレクションから実装統合まで、チームが一気通貫で担当しています。