デザインをするとは、意図を持って設計と意匠を行うということであるという定義は、デザインの本質を捉える枠組みとして長く機能してきた。しかしこの「設計」という言葉は便利すぎて、内側で何が起きているかが曖昧なまま放置されている。設計とは具体的にどういう行為で、何を決めているのか。デジタルプロダクトデザイナーが画面に向かったとき、どの判断を「設計」と呼んでいるのか。これを分解すると、少なくとも8つの異なる判断領域が見えてくる。
1. 要素の選択と定義
ある画面、ある場面において、何を存在させるかを決める行為。8つのうちで最も根源的な層にあたる。
デザインとは意図してそれを置いていることで論じたように、デザインされたものとそうでないものの違いは、要素が意図して置かれているかどうかにある。設計の出発点は「何を置くか」より前の「何を存在させるか」であり、これは何を見せ、何を隠し、何を最初から存在させないかという三つの判断を含んでいる。
空の状態、エラーの状態、大量データの状態、それぞれで何を存在させるか。ログイン前と後で何が見えるか。権限のないユーザーには何を見せないか。これらはすべて要素の選択の問題で、意匠(ビジュアル表現)の手前にある純粋な設計判断だ。
2. 構造の設計
存在させると決めた要素を、どういう関係性と階層で配置するかを決める行為。情報アーキテクチャの中核にあたる領域で、情報アーキテクチャデザインのステップバイステップが扱っているのはまさにこの層だ。
具体的には、情報の階層をどう作るか、何と何をまとめて何を分けるか、どれを最も重要なものとして扱うか、各カテゴリーをどう名付けるか。優先度の判断はビジュアル上の重み付けと不可分なので、構造の設計は意匠と切り離せない部分を多く含む。
3. 振る舞いの設計
ユーザーの操作に対してシステムがどう応答するかを決める行為。インタラクションデザインの核心であり、ドナルド・ノーマンのデザイン6原則のうちFeedbackとMappingが直接関わる。
ボタンを押したら何が起きるか。入力に対してどうバリデーションするか。エラーが起きたとき何を返し、どう回復させるか。ローディング中に何を見せるか。操作と結果の対応を直感的にするマッピングをどう設計するか。
PRDの前にデザインを作ることで要件の解像度が格段に上がるで書いたとおり、画面上にピクセルとして配置する以上、すべての振る舞いを具体的に決めなければならない。文章では曖昧に済ませられた部分が、設計という行為によって強制的に具体化される。
4. フローの設計
ユーザーが目的を達成するまでの道筋を決める行為。画面遷移の設計と言い換えてもよいが、もっと広い概念だ。
何画面でゴールに到達するか。どこで分岐し、どこで合流するか。途中でやめたらどうなるか。戻れるのか、戻れないのか。慣れたユーザーが使うショートカットを用意するか。エンディングの後にどこへ送り返すか。フロー設計は時間軸を持つ判断であり、要素の設計や構造の設計が空間的なのに対して、ここは経過の設計だ。
5. 状態の設計
システムが何をいつまで覚え、何をいつ忘れるかを決める行為。一見エンジニアリングの領域に見えるが、ユーザーがプロダクトをどう体験するかに直結するため、設計判断の対象になる。
ログイン状態をどれくらい維持するか。入力途中のデータは下書きとして保存するか、画面を離れたら消すか。前回の選択や設定を覚えておくか。通知の既読と未読をどう扱うか。進捗をどこに記録するか。複数デバイス間で状態を同期するか。
これらは「機能仕様」と呼ばれることもあるが、ユーザーから見れば「このプロダクトは私のことを覚えている/忘れている」という体験そのものだ。
6. ルールの設計
ユーザーの行動に対する制約と許可の体系を決める行為。ノーマンの6原則におけるConstraintsの領域だ。
何文字まで入力できるか。どんな形式の値だけを受け付けるか。Aを完了しないとBに進めないという順序制約をかけるか。誰が何を見られ、何を操作できるかという権限を細かく分けるか。一度やったら戻れない操作にするか、いつでもUndoできるようにするか。
ルールは目立たない設計だが、ユーザーの自由度と安心感を直接決める。ゆるすぎれば事故が起き、厳しすぎれば不自由になる。
7. コンテキスト適応の設計
同じプロダクトが異なる状況でどう振る舞うかを決める行為。デジタルプロダクト固有の難しさが集中している領域だ。
スマホとデスクトップで何が変わるか。初めてのユーザーとリピーターで何を見せ分けるか。データが0件のとき、10件のとき、1万件のとき、それぞれどう振る舞うか。オフライン時に何ができるか。タイムゾーンや言語が違う相手にどう対応するか。
物理的なプロダクトは一度作れば形が固定される。デジタルプロダクトは状況によって姿を変えるため、「あらゆる文脈での振る舞い」を設計しなければならない。
8. 一貫性の設計
個別の設計判断の集合に秩序を与える行為。デザインシステムの根幹にある思想と言ってもいい。ノーマンの6原則のConsistencyが直接関係する。
同じ操作には同じ振る舞いをさせる。似た要素は似た見た目にする。コンポーネントを標準化して再利用する。用語を統一する。インタラクションのパターンを揃える。
一貫性は単独で完結する設計領域ではなく、1から7の判断を横串で揃える役割を持つ。一貫性が崩れると、ユーザーは毎回新しいプロダクトに出会ったかのように学び直さなければならない。
8領域は独立していない
これら8つの判断領域は、互いに独立して扱えるものではない。要素を一つ追加すると、構造(どこに配置するか)、振る舞い(押したら何が起きるか)、フロー(次はどこへ)、状態(何を覚えるか)、ルール(誰が使えるか)、コンテキスト適応(小さい画面ではどうするか)、一貫性(既存パターンと揃えるか)すべてに波及する。
デジタルプロダクトデザインは要素・インタラクション・意匠の三層構造を持ち、反復的なプロセスを必要とするが指摘する反復性は、ここから生まれている。8領域が相互に絡み合っているからこそ、一発で完成形を出すことができない。一つの判断を変えると別の判断の前提が変わり、また戻って調整するしかない。
設計と意匠の境界はグラデーションである
8領域を並べると、もう一つ重要なことが見えてくる。意匠(ビジュアル表現)と切り離せる設計判断と、切り離せない設計判断があるということだ。
要素の選択(1)やフロー(4)は、視覚的な表現とは比較的独立に決められる。「この画面にどんな項目を置くか」「何画面でゴールするか」は、白黒の図でも議論できる。
一方、構造の優先度(2)や振る舞いのフィードバック(3)は、意匠と不可分だ。優先度はサイズや色や配置の重み付けとして表現され、フィードバックはアニメーションやマイクロインタラクションとして体験される。設計の判断と意匠の判断を分けて決めることができない。
最終成果物がデザインそのものである領域では設計と意匠の分離が成り立たないという主張は、この8領域の分解によってより精密に語れるようになる。すべての設計判断が意匠と一体化するわけではない。「比較的独立に扱える領域」と「最初から不可分な領域」が混在しているのだ。
デジタルプロダクト開発が粘土造形化しているのはツールが素材の可塑性に追いついたからであるで論じたように、デジタルプロダクトのつくり方が「設計図→組立」から「探索→発見」へ移行している。この移行が進むと、不可分な領域がさらに広がり、8領域の判断と意匠表現を同じ手で同時に行うことが当たり前になっていく。
設計を分解する意味
「設計」を一つの単語で済ませている限り、何が決まっていて何が未決なのかが見えにくい。8領域に分解すると、デザインレビューで「この画面の振る舞いは決まっているが、コンテキスト適応がまだ抜けている」「要素は揃ったが状態の設計が曖昧だ」と具体的に指摘できる。
教育の場面でも、若手デザイナーが「設計が苦手」と言うとき、8領域のどこに弱さがあるのかを切り分けられる。構造化が苦手なのか、状態管理の発想が抜けているのか、コンテキストの想像力が足りないのか。同じ「設計が弱い」でも、対処は変わる。
デザインという言葉を設計と言い換えるのは不十分であるという主張は変わらない。設計はデザインの一部であり、意匠と意図と統合されて初めてデザインになる。だが「設計」の中身を曖昧にしたままでは、その不十分さの議論も浅くなる。設計を8領域に分解することは、デザインの全体像をより解像度高く語るための準備運動だ。