ソフトウェア開発に関わる「●●デザイン」の分類
OOUIデザインを取り組む上でまず明らかにしなければならなかったことは、どのような作業工程があるかということと、それぞれの成果物は何であるのかという大きく2点でした。これには既存のUIデザインプロセスの俯瞰をするのと同時に、ギャレットの5段階モデルを再解釈する必要がありました。
ギャレットの5段階モデルの再解釈
ギャレットの5段階モデルのオリジナルを眺めてみると、いくらか現代のソフトウェアデザインにはそぐわない点が見られます。オリジナルでは右側の軸を「ハイパーテキストシステムとしての Web」としていましたが、私はこれにもう少し汎用性と解釈の余地を残したかったので、「情報システム的観点」と置きました。左側の軸もオリジナルでは「ソフトウェアインターフェイスとしての Web」とされていたところを「ユーザーインターフェイス的観点」と置きました。どちらからも “web” に限定していた視点を排除して汎用性を持たせてみました。
オリジナルのギャレットの5段階モデル
http://www.jjg.net/elements/translations/elements_jp.pdf
それぞれの層においては、特にユーザーインターフェイス的観点の側にある表層〜構造にかけての内容をざっくりと「インタラクションデザイン」と置きました。オリジナルではインタラクションデザインは構造に限定されていましたが、私の解釈では『情報をヒトが理解できる形に整形する作業とはインタラクションデザインである』と考えているため、これらはすべてそう呼んでも差し支えないだろうという考えからこのようにしてみました。構造層で行うデザイン行為は「情報の特性を見出して整理することにより、その在り方を明らかにする」という意味でのインタラクションデザインだということです。
ただし、これらの「インタラクションデザイン」はまだざっくりしすぎているようにも見えるため、インタラクションデザインの具体的にどの部分であるのかをより細かく定義する必要があるかもしれません。
また、表層のビジュアルデザインを「視覚的情報デザイン」、構造層の「情報アーキテクチャ」を「構造的情報デザイン」と表現を少し変更しました。意味としてはオリジナルとほとんど変わりはありませんが、情報システムに関わるデザインであることをより強調しています。
これらに関しては次の記事でも同様に言及しています。
ソフトウェア開発に関わる「●●デザイン」の分類
「デザイン」という言葉がざっくりしすぎていて、それを使う人によって意味が異なるために会話が噛み合わないような場面がよくあるのが大きな課題となっていました。私たちが“デザイン”的な作業を行う際にも、例えばグラフィックデザインの文脈でそれを語る人もいれば、UIデザイン的な文脈で語る人もいるわけで、まずお互いの「デザイン」とはどこの何であるのか共通認識を持つ必要がありました。
そこで、前述の再解釈したギャレットの5段階モデルを元に、ソフトウェア開発に関わる「●●デザイン」と呼ばれるものをマッピングして図表に表してみることにしました。
この図では5段階モデルのうち、特にソフトウェアデザインが着目するであろう4層を扱っています。そのため戦略層への言及はあえて省いてあります。
この図で明らかにしたかったことは大きく次の3点です。
1つは、私たちの携わるデザインは基本的にすべてソフトウェアデザインの一部であることを示すことでした。ソフトウェアの仕組みを考えるのはエンジニアだけではない、UIはソフトウェアアーキテクチャのプレゼンテーション層的に扱われるから、当然そこにはUIデザイナーの思考が介入しなければならない、OOUIとは元来そういうものであるということを表しています。
2つは、インタラクションデザインの範囲をより広く持たせることでした。一部には「インタラクションデザイン＝UIの動き（モーション）を設計することだ」と捉えている方がいて、確かにそのような工程もあるけれども、それだけではないよね、ということを示す必要がありました。再解釈した5段階モデルの左軸でも同様にそう置いています。
3つは、構造層の作業工程をはっきりさせることでした。恥ずかしながら私たちもこの層が具体的に何であるのかというのをあまりよく認識しておらず、なんとなく『情報設計をやります』程度にしか捉えていなかった事実があります。そもそも情報設計が何であるのかさえよくわかっておらず、雰囲気で画面遷移図を描画したりサイトマップのようなナビゲーションストラクチャを描いて情報設計した気になっていたことさえあります。実際には、OOUIデザインではこの構造におけるモデリング作業がデザインの要となるため、構造層とは前後の緩衝地帯になるのではなく、UIモデリングを中心とした作業の連鎖とループがもっとも重視されるものと考えています。
なお、この図は仮説を含むために、これを唯一の正解として扱わない、今後もアップデートする可能性が高いことを補足させてください。その前提に立って、まずデザイナー同士お互いの「デザイン」が何であるのか認識を揃えることがこの図を作った目的であり目標であるため、間違っていたならばそこで直せば良いと考えています。
そしてこの図には明示されていない観点がいくつか存在しています。例えばエンジニアリングはどこになるのか、ブランディングに関わるデザインはどこになるのか、といったことです。これらを網羅するにはもう2軸くらい次元が必要だと考えていて、二次元のモデル図で表すにはこれが限界でした。よって、現状では一旦「ソフトウェア開発に関わるデザイン」という風にドメインの範囲を限定しています。
それぞれの「デザイン」の成果物が明らかになる
このようにして5段階モデルに当てはめることで、それぞれの「デザイン」の作業が何であるのかが明らかになるのと同時に、前後の作業工程との関連性も明らかになるため、何がインプットで何がアウトプットであるのかが自ずと見えるようになりました。このモデル図を眺めると例えば骨格層の「レイアウト」を制作上で必要になるのは要件層や構造層で行われたデザインの成果物になりますし、次の表層で行うであろう「グラフィック」を当てる対象は「レイアウト」の成果物（ワイヤーフレームなど）になることでしょう。
このようにして、ソフトウェアデザインに携わるさまざまなデザイナーたちが行うデザイン行為が具体的にどこの何で、何を作ろうとしているのか、それらの認識合わせを行うための土台をようやく整えられました。
そもそも、「デザイン」とは根底は一つの概念なのだと考えています。あらゆる領域でデザインという行いがつながっていて、「●●デザイン」と呼び方を変えたところで、それらは本質的には同じなのだろうと思います。先の図表ではそのことも表現しようと思い、一番下の層にある「ユーザー体験に関わるデザイン」は、その上の層全てを含む包括的な「デザイン」であることを反映しています。さらには、図表に表しきれなかったより抽象度の高い「デザイン」というものが下の層に広がっている。デザインを抽象度でモデル化するとしたら、そのように捉えられるのではないだろうかと考えています。
この記事が気に入ったらサポートをしてみませんか？