デザインは「整える」ではなく「構築する」。UIの裏にある建築的思考

昼のレビューで「ここ、少し整えてください」と言われる。フォントを替え、余白を広げ、角を丸める。見栄えは良くなる。けれど、夜に計測すると離脱は減っていない。見た目を磨くだけでは、体験は丈夫にならない。デザインは外装工事ではなく、骨組みを立ち上げる仕事だ。

見た目の前にあるもの

建築なら、柱や梁、避難導線、配管が先に決まる。外装はその上に乗る。

UI/UXも同じで、最下層にはコンテキスト（誰が何をどんな制約の下で使うか）、その上にドメインや状態設計、さらにタスクの動線、APIやログの設備、最後にタイプフェイスや余白、モーションの仕上げが重なる。順番を取り違えると、表面は美しくても使い心地が脆い。まず構造、仕上げは最後で間に合う。

設計を積み上げる五層

最初に敷地を読む。利用シーンの温度、回線の安定度、片手操作か否か。目標はひとつに絞る。たとえば初回予約の完了率を3%から5%へ、と具体的な数字で置く。

次に構造体を組む。TypeScriptで User や Reservation などの型を引き、loading や failed といった中間状態も最初から型として固定する。React は Error Boundary と Suspense を先に入れる。耐震壁を先に据える感覚だ。

三つ目は動線。代表タスクを五つまで選び、秒単位で設計する。タップ目標はおよそ44–48px。主要アニメーションは120–200ms、画面遷移は200–300msに収め、長い動きは階層を説明する必然があるときだけ使う。フォームは二段以内にまとめ、途中保存や一瞬で戻せる導線を必ず用意する。

四つ目は設備。応答が400msを超えがちなら、楽観的UIで不安を先回りして抑える。権限は閲覧・編集・エクスポートで切り分け、計測はFCPやTTIだけでなくタスク達成時間を主役に置く。語りよりログだ。

最後に仕上げ。8ptグリッドで余白を統一し、見出し用・本文用・UI用に書体の役割を分ける。モーションは飾りではなく、どこが変わったのかを最短で理解させるための矢印にする。

よく起きる崩れ

ビジュアル先行で進めた結果、遅延やエラー、再試行といった状態の穴が後追いで継ぎ接ぎになる。ヒーローは映えるが、最初のタスクまでの距離がやたら遠い。戻ると入力が消えたり、絞り込みがリセットされたり、動線の断絶が残る。外壁は立派なのに非常口が塞がっている建物に似ている。人は使い続けない。

小さな補強で体験は変わる

都内レストランの予約フォームを想像してほしい。トップ → 店舗選択 → 日時 → 人数 → 入力 → 確認 → 完了。七画面、平均所要68秒。途中離脱が目立つ。

介入はシンプルだ。店舗固定のLPを用意して、トップ → 日時と人数 → 入力 → 完了の四画面に短縮する。日時選択は在庫のある枠だけを先に見せ、選んだ後で満席と告げる事態をなくす。入力は名前・電話・人数の最小セットに絞り、追加情報は完了後の編集で回収する。予約ボタン直後に仮予約表示を出し、サーバ確定を待つあいだの不安を抑える。

結果、タスク時間は38〜45秒へ。確認画面の統合で、その地点の離脱もおおむね半減する。派手さはないが、揺れに強い骨組みに変わる。

道具の役割を取り違えない

Framer は仕上げの筆ではない。動線と状態を現場で仮組みする監督に近い。GSAP や Framer Motion は装飾ではなく、注意の誘導と階層の説明に使う道具だ。Next.js と TypeScript は構造図面。型が歪めば建物も歪む。解析やセッションリプレイは定期点検表で、再現性を担保する。

一週間で上棟まで

初日は観察とKPIの一本化。二日目はドメインと状態の一覧化。三日目は代表タスクの動線を秒で詰める。四日目にAPIの結線と計測の設計。五日目で最小限の仕上げを当て、週末に五人規模のユーザーテストを回して修正する。外装を豪華にする意欲は、構造が立ってからでも遅くない。

終わりに

本当に強い体験は、混雑時や不安定な回線、焦りながらの操作に耐える。そこで崩れないものだけが、日常の選択肢として残る。表面を整えることは大切だが、優先順位は違う。まず建てる。測る。直す。Youestは MAKE IT PROFESSIONAL を合図に、骨組みから関わる。外装は、その後でいい。構造が語るからだ。

株式会社Youest代表取締役　木原裕睦