アプリの体験は、画面の構成、時間の流れ、入力への反応、状態変化、端末の特性が一つに結びついたときに立ち上がる。UIは体験を構成する重要な層であり、コードは複数の層を実行中の振る舞いへ統合する素材である。デザイナーがアプリの体験を直接扱うには、コードで動く実物を作り、触りながら判断する必要がある。
デザイン対象は実行中の振る舞いへ広がる
デザインの対象は、使われる媒体と技術に応じて変化してきた。紙面では文字や画像の配置、デジタル画面では情報構造と操作部品、サービスでは複数の接点をまたぐ行動の連続が設計対象になった。アプリでは、ユーザーの操作を受けてシステムがどう振る舞うかまでが一つの素材になる。
UXデザインはユーザーが行動をしやすい環境を作るデザインで扱う環境には、画面に見えている要素に加えて、操作後の応答、次の行動が現れる順序、失敗から戻る経路、使い続けるうちに変わる状態が含まれる。プロダクト開発におけるコア体験の重要性が示すコア体験も、ユーザーが価値を感じる一連の行動として実行されて初めて観察できる。
静止した画面は、ある瞬間の状態を高い精度で表現できる。アプリの体験は、その状態へ入るまでの期待、操作した瞬間の手応え、結果が返るまでの待ち方、成功や失敗を受け取った後の感情まで含む時間的な構造である。デザイン対象がこの時間的な構造へ広がると、デザイナーが扱う素材も実行中のシステムへ広がる。
コードは体験の情報を一つに束ねる
コードには、画面上の配置と装飾に加えて、データ、状態、条件分岐、時間、入力、出力、端末機能が記述される。ボタンを押した直後に何が変わるか。通信中に何を見せるか。結果が空だったときに次の行動をどう示すか。権限を拒否されたあとにどこへ戻すか。これらはユーザーが実際に受け取る体験の一部である。
デジタルプロダクトにおける設計は8つの判断領域の束であるで分解した要素、構造、順序、状態、ルール、意味、時間、関係は、コード上で相互に作用する。個別の判断が適切でも、統合された動作のリズムが合わなければ、触ったときの印象は崩れる。
たとえばアニメーションは、開始状態と終了状態の絵だけでは決まらない。アニメーションにおける「イン」と「アウト」の設計が、ユーザー体験の質と認知的負荷を決定的に左右するように、速度、イージング、連続する操作との干渉を実行環境で確かめる必要がある。スクロールの慣性、キーボードの出現、触覚フィードバック、音、通信遅延も同じである。コードは、こうした体験の情報を同時に動かせる場所である。
実装は体験を発見する場になる
実装コストが高い環境では、設計を固めてからコードへ渡す手順に合理性があった。AIコーディングによって変更コストが下がると、コードは完成した設計を受け取る場所に加えて、設計を探る場所として使えるようになる。
AIにより実装ベースで設計を逆算するプロセスが成立するで扱ったように、先に動くものを作り、触って判断し、判断理由をあとから言語化する順序が成立している。この順序では、プロトタイプが答えを見せるだけでなく、考えるべき問いを露出させる。押した感触が弱い、待ち時間が長く感じる、結果が現れた瞬間に達成感がないといった違和感は、動く実物に触れることで具体的になる。
この変化は、デジタルプロダクト開発が粘土造形化しているのはツールが素材の可塑性に追いついたからであるという見立てとつながる。コードを粘土のように変形できるなら、実装は設計意図を再現する工程であると同時に、触りながら形を見つける探索の場になる。
デザイナーがコードを書く意味
デザイナーがコードを書く意味は、判断と素材の距離を縮めることにある。デザイナーはエンジニアでいうコードを書く代わりにスケッチを書くという比喩は、スケッチがデザイナー自身で操作できる最も近い素材だった状況を表している。AIコーディング環境によってコードも直接操作できる素材になると、スケッチで考える範囲と動く実物で考える範囲がつながる。
必要なのは、すべての技術領域を単独で構築する能力より、設計意図を実行可能な形へ変え、動作を見て調整できる範囲の実装力である。AIにコードを書かせる場合も、どの体験を作るか、どこに違和感があるか、どの変更を残すかはデザイナーが決める。AIを使う者はアウトプットの品質責任者になるため、生成されたコードを動かし、体験として検収する責任も引き受ける。
AI時代のデザインは文字理解ではなく身体化された理解から始まるで述べた身体化された理解は、コードを書く行為にも当てはまる。端末で触る。指の移動を感じる。待たされる。失敗する。戻れるか試す。こうした経験が、次に何を直すかの判断を生む。コードを書くことは、体験を身体で理解するための制作行為になる。
体験をコードで設計する反復
体験をコードで設計する反復は、良い体験の言語化から始まる。機能追加の前に良い体験を言語化するが示すように、「何を実装するか」より先に、ユーザーがどのような行動と感情の変化を経験するかを置く。この言葉を、最も短く価値が伝わる一連の動作へ変換する。
- 誰が、どの状況で、何をできるようになるかを書く
- 価値が伝わる最短の行動列をコードで動かす
- 想定する端末やブラウザで自分が触る
- 時間、状態、反応、感情の違和感を具体的な言葉にする
- コードを変更し、同じ行動列をもう一度試す
- 残した判断をUI原則、デザインシステム、実装記録へ戻す
この反復では、デザインファイル、仕様書、デザインシステムがコードへ渡すコンテキストになる。デザインツールはマスターデータ制作からAIへの視覚的インプット生成へと役割を変えるのと同時に、コードで見つけた判断をデザインツールや言葉へ戻す流れも生まれる。両者を往復することで、視覚的な意図と実行中の振る舞いが同じ体験へ収束する。
デザインの解像度は理論ではなく手を動かすことでしか上がらないという命題において、アプリを作る手はコードにも触れる。デザイナーの成果は、画面の集合、設計書、実装のどれか一つに閉じない。ユーザーが触れたときに起きる一連の変化へ、意図した判断が統合されている状態が成果になる。