本記事は『モデルベースUIデザイン 構造化UIと情報設計の方法論』の「第1章 情報設計とUIデザイン」から一部を抜粋したものです。掲載にあたって編集しています。
ソフトウェアとUI
ソフトウェアとUIの関係、ソフトウェアデザインの基本的な姿勢について解説します。情報設計をUIデザインに取り入れる前に、まずソフトウェア的な視点を持つことを意識してみましょう。
ソフトウェアをデザインするということ／ソフトウェアデザインとは
今日使われている「デザイン」という言葉には広い意味が含まれ、さまざまな文脈で用いられています。「デザイン」というと、何となく整った絵を描く行為や服飾の創作活動などを想像しますが、デザインの漢字表記が「設計」であることを鑑みると、あらゆる人工物は緻密な計画に基づいて意図を持ってデザインされているのだと考えることができます。
ソフトウェアには実体と呼べるものがなく、突き詰めるとそれは電気信号の集まりです。電気信号を記録しデータにまとめたものや、命令セットそのものを私たちはソフトウェアと認識しています。ソフトウェアには対応するハードウェアが存在します。ソフトウェアはコンピュータを動かすための仕組みと考えると、これらは人間で言うところの精神と身体に近いものとも言えるでしょう。
しかし人間のそれと大きく異なるのは、コンピュータのハードウェアもソフトウェアも人工物で、人間の手によって設計されている点が挙げられます。
ソフトウェアは複雑な情報を形に表すことができます。デザイナーによってあらかじめ計画されたプロセスに沿って何か決まった表現をするものもあれば、ソフトウェア自身が状況に応じて適宜振る舞い方を変え、その都度必要な情報を自動生成することもあります。さらに、ソフトウェア同士がネットワークを形成し互いに通信しながらより複雑な情報をやり取りするような仕組みも実現できます。
ソフトウェアを作るということは、コンピュータとそのユーザーを念頭に情報構造を設計するということであり、これには情報設計的アプローチが欠かせません。
ソフトウェアデザインとは、ユーザーから見たソフトウェアの振る舞い方、使い方、使い勝手を決定していくことです。ソフトウェアがどのような論理に基づいて、具体的にどう駆動するのかといった中身の仕組みに関しての一切を、ユーザーが知っている必要はありません。
ユーザーが関心を持つ対象はUIを含めた表側に見える部分だけであって、中身については私たちデザイナーや開発者たちが積極的に「隠蔽」していかなければならないのです。どのようにしてユーザーにとって使いやすいUIを提供し、どのようにロジックを隠蔽していくのか。そのテクニックを学んでいきましょう。
ソフトウェアを人間が操るためにはUIが必要
ひと口にソフトウェアと言ってもさまざまな種類のものがあります。アプリケーションソフトウェア（いわゆるアプリ）の形をしたものもあれば、アプリのための共通機能を提供するライブラリやミドルウェアと分類されるもの、ハードウェアの駆動に密接に関わるOS（オペレーティングシステム）やファームウェアと呼ばれるものなど、役割によってさまざまな種類や呼び名を持つソフトウェアがあります。
中でもアプリにはUIの存在が欠かせません。ユーザーにとってアプリとはUIから見て触れられる情報がすべてなので、UIのないソフトウェアはユーザーには認知することができません。ユーザー向けのソフトウェアを作るということは、UIを備えたソフトウェアを作るということであって、すなわちUIを設計することでもあります。
UIとは何か
UI（ユーザーインターフェイス）とは、製品とユーザーとをつなぐ架け橋になる部分です。広義の意味ではコンピュータの画面に関することに限定せず、製品とユーザーの関わり方とその仕組みのことを言います。例えば自動車の運転席、テレビのリモコン、駅のきっぷ売り場（券売機）などが含まれます。より単純な例では、トンカチや包丁の柄の部分もUIの一種と見做すことができるでしょう。
一般に「UI」と言った時、狭義にはコンピュータの画面や関連するデバイスとの関わり方に焦点を当てます。すなわち、Graphical User Interface（GUI）やHuman Interface Device（HID）を使ったインタラクションが起きる仕組みそのものです。
優れたUIをデザインするということは、製品の使い勝手向上や魅力向上に直結します。UIがうまく機能すれば、製品やサービスの印象も良くなり、ユーザーが迷いなく目的を達成しやすくなります。副次的には、製品そのもの、サービス、あるいは事業者のブランドイメージをも向上させ、競合製品よりも好意的に評価されやすくなるなど、使い勝手に限定されないより大きな効果をも期待することができます。
ソフトウェアとユーザー双方に目を向け、ソフトウェア的発想でUIを形作る
アプリを前提とする時、UIとはユーザーの方を向いているソフトウェアの一部分のことです。要するに、UIはソフトウェアとして設計されます。
アプリはユーザーのためのさまざまな機能やサービスを提供しますが、それらはすべてUIを介してユーザーとやり取りされます。一方それらの処理はUIではなくソフトウェアの中で行われますから、ソフトウェアの都合に矛盾することがないよう、ソフトウェア的発想を前提にUIを構築しなければなりません。自動車の設計に携わる人々が自動車に関する仕組みを適切に理解している必要があるように、アプリのUIを設計するデザイナーは、ソフトウェアに関する仕組みを理解する必要があるのです。
ソフトウェアのデザインではさまざまな情報を何かしらの「形」に表すということをします。例えばUIデザインではメタファーを駆使して人間にとってわかりやすい表現を目指します。しかし本質的には、どのような表現であれ、電気信号をデータ化したものをどのように処理するのか、という課題が共通しています。
写真を考えてみると、ソフトウェア上の写真は基本的にはビットマップのデータであるはずですが、それを「写真」と呼んで現実の写真を想起させ、単なるデータの羅列やビットマップとは異なる、何か価値のあるものとして表すことが、UIデザインでは重要なテーマになるのだとわかります。
「ソフトウェアの中ではデータとして処理をしつつ、UIの表側では『写真』として演出することにデザインとしての意味がある」
UIデザイナーがこのテーマを理解しデザインに取り組むためには、まずソフトウェアの立場からその仕組みを理解し、物事をソフトウェア的に捉える視点を持たなければなりません。次に、ユーザーの方にも目を向けて、ユーザーに適した表現というものを吟味します。
そして親しみやすさを盛り込む工夫を心がけましょう。機械的な仕組みをただそのまま操作するようなUIにはユーザーは魅力を感じられませんから、多かれ少なかれ、ソフトウェアに何か親しみを感じられるような表現を与えてみて、魅力を高めましょう。
ユーザーにとってはUIがすべて
デザイナーやデベロッパーと呼ばれる側の人々は物事を俯瞰して見られる立場にあり、その能力も持っています。特に設計や開発に関わっている製品のことであれば、その成り立ちや経緯、細かな条件や制約まで細かく把握することができます。表向きは美麗なUIでも、実のところ裏側では泥臭い処理を行っているのだけれども、うまく画面演出で誤魔化している、なんて事例は珍しくありません。
結局のところ、ユーザーにとってはUIがすべてであり、裏でどのようなことが行われていようが知る由もありません。どんなに美しいコード、システムアーキテクチャ、デザインシステムを構築していたとしても、表面のUIがポンコツならそのユーザー体験は悪くなります。ユーザーがソフトウェアを使う時には必ずUIに触れることになりますし、サービスや価値はUIを介した、その向こう側からもたらされます。UIがなければユーザーの手元には何も情報が届かず、その不満を向こう側に送ることさえもできないのです。
モデルベースUIデザイン
筆者がこれまでのデザイン経験に基づいて取りまとめたデザインプロセス「モデルベースUIデザイン」を解説します。ロジカルに設計を重ねながら必要な成果物を形作っていき、矛盾のないUI構成を目指します。「モデル」を活用して情報を整理しながらUIを設計するさまざまな方法を紹介します。
モデル思考
UIデザインでは大小さまざまな「モデル」を作ることになるはずです。プロセスの前段では、まず潜在的なユーザーにどのような用途が求められているのかを綿密に調査し、コンセプトを打ち立てて、ユースケースとコンテンツを定義し、デザインの土台を形作ります。この土台のことを「モデル」と呼びます。
「モデル」の言葉は多様な場面で使われています。基本的には何かの模型のことを表しますが、プラモデルやプロトタイプと呼ばれるものがまさに「モデル」の一種です。あるデータ構造や数式など、物理的な実体がない構造を「モデル」と呼ぶこともあります。基本的には、実物の代わりになるものを用意して、分析や推測、活用を促したり、再利用性を高めることを目的としています。あるいは単に、手元に置いておけないものを模型化して楽しむことを目的とすることがあります。
モデルの例と目的：
- モデルハウス（建築例を作って、商品をアピールする）
- 建築模型（完成予想を示す、建築の設計に活かす）
- プラモデル、フィギュア（手元に置いておけないキャラクターを模型化し、楽しむ）
- 操作説明書（操作手順のお手本を示し、結果を再現可能にする）
- 料理のレシピ（調理手順を示し、料理を再現可能にする）
- ペルソナモデル（想定ユーザーの人物像を模型化し、設計に活かす）
- ユースケース（ユーザーの用途を模型化し、設計に活かす）
- 製品のプロトタイプ（製品の模型を作り、手早く評価する）
物事をモデルで検討することは理に適っています。巨大な建築物を組み立てるのに、とりあえず実寸大で建ててみてから細かな設計を検討するようでは、あまりにも効率が悪いですし、何度も建築を建て直すことにもなり、お金や時間がかかりすぎてしまいます。
そもそも、満足のいくまで「建てては壊す」を繰り返すようでは本末転倒です。短時間で構築できる図面やミニチュア等のモデルで設計を検討することにより、わざわざ実寸大の建築を建てたり実物を作らずとも、細かな設計を行うことができます。モデルの活用は、構造物を作るコストを大きく抑えることに寄与します。
ソフトウェアでも同じように、いきなり見た目や振る舞いの詳細な部分から作り出すのではなく、そもそもどういったユーザーに向けて、どのような価値を訴求するのか、というところをモデルで定義し、まずターゲットユーザーの目処を付けます。次にどのようなコンテンツを扱うのかをモデルで表し、必要な情報を定義します。
では、モデルは見た目や振る舞いとはまったく関係がないものなのでしょうか。そうではありません。ルック&フィールにおいても、モデルを活用して設計に取り組むことができます。プロトタイピングはイメージの検討や共有において有用なモデルの活用方法です。場面に応じて適切なモデル化の手法を選び、効率良くUIデザインに取り組んでみましょう。
モデルで設計を検討するメリット：
- 具体的な／実寸大の構造物を作らずとも、緻密な構造設計を行える
- 安価にプロトタイプを構築し、短期間で製品に近いイメージを形にし、共有できる
- デザインパターンを熟知していれば、モデルを使って設計の良し悪しを評価できる
モデル／インタラクションテクニック／ルック&フィール
UIデザインに関わる工程を大きく3段階に分けると、モデルの設計が全体の60%、インタラクションテクニックが30%、ルック&フィールが10%を占めると言われています。モデルについては説明した通りです。ルック&フィールは、インターフェイスの見た目や感じ方に関わる設計を言います。
インタラクションテクニックとは、さまざまな入出力手段を活用して、人間とコンピュータの対話を成り立たせるための方法を言います。テキストの入力方法や編集方法、ポインターの動かし方、タッチジェスチャー、スクロールビューの仕組み、Undo/Redo、ドローイングの操作など、今日目にすることができるUIの仕組みは多くのインタラクションテクニックの組み合わせで成り立っています。それらをパターンとして捉え、ユースケースに合った適切なインタラクション方法をユーザーに提供することが、UIデザインのテーマの1つです。
出典：『 Designing for the User With Ovid: Bridging User Interface Design and Software Engineering』（Dave Robert 他著／New Riders Pub／1998）
これらの値は常に一定とは限りませんが、UIデザインにおいて、情報を整理する作業が全体のおおよそ6割、インタラクション関係が3割、見た目関係が1割と見積もるのが良いでしょう。
UIと言えば、色味や質感の良さだとか、心地の良い動きをするアニメーションだとかがよく注目されますが、それらは主に「ルック&フィール」に関わるものであり、全体の作業のうちの1割程度です。ただし、実際にユーザーに注目されるのはこの1割の作業で作られる成果物が主ですから、作業割合が少ないからといって蔑ろにもできません。
ルック&フィールの質を高めるためには、その基盤となる残り9割の設計が重要です。モデルベースにUIデザインを行うということは、確実な構造設計により基礎を盤石にし、ルック&フィールに関わる表現の可能性を広げることを意味します。
要するに、矛盾のある構造をあらかじめ排除し、確実に成り立つ構造の上で、適切なルック&フィールの表現を探るということになります。設計の足場をしっかりと固め、構造に筋すじ金がねが通っていれば、最後のルック&フィールの設計で大きく迷いが生じることもなく、魅力的な表現を検討するための多くの余裕を持つことができるはずです。
デザインプロセスの概要
モデルベースUIデザインのプロセスは、まっすぐな線形には進捗しません。時には2種類の設計を同時にこなしながら互いの成果を利用し合い、次の工程に必要な成果物を形作っていくような進め方をとります。
一般的なUIデザインのプロセスというと、まずはイメージする画面の姿を絵に描いてみて、そこに必要な情報を後付けしながらレイアウトとビジュアルを整えていくような作り方をする人がいます。このやり方は、デザイナーが思い描いているイメージをまず形にしてゴールを確定させてからそこに向かうパスを探っていくという、ある種の仮説的推論が念頭に置かれますが、規模が大きな製品の場合、大抵うまくいきません。
なぜなら、UIというものは人が想像する以上に複雑で、形が変化しやすく、外部からの影響も受けやすく、全体のイメージを掴みづらいものだからです。ある瞬間のUIのイメージを静止画として切り取って絵に写すことはできても、さまざまな条件が重なった際の細かな振る舞い方までを個別に考慮しながら適切なUIを設計するということは、おそらく難しいはずです。
モデルベースUIデザインは、デザインの各工程をより細かな単位に切り分けて、取り回しの効きやすい「モデル」の形で成果物を作っていく方針をとります。デザイナーの仮説的推論のような考え方を否定するのではなく、デザイナーの視界を工程ごとに細分化して、ロジカルに構造設計に取り組める環境を作ります。
作業には、環境調査や方針決定を行う序盤フェーズ、モデルの構造設計を行う中盤フェーズ、モデルに基づく表現設計を行う終盤フェーズの大きく3段階があり、それぞれで異なる成果物の構築を行います。そして最終的には1つの「UI」が成り立つことを目指します。
- 序盤：環境調査と基本設計
- 中盤：UIの構造設計
- 終盤：表現設計と大詰め
モデルベースUIデザインでは「画面」起点に設計を考えることを推奨しません。そもそもUIの画面とは、さまざまなビューの状態やコンテンツが組み合わさった結果として出力された「ある瞬間」の姿であり、その様子が恒久的に持続しているのではありません。
ソフトウェアとしてダイナミックに振る舞うUIを適切にデザインするためには、UIを構成するさまざまな部品や振る舞い方の定義、コンテンツや概念の定義が欠かせません。それらを「モデル」として構成し、適切に組み合わせながら設計していくのがモデルベースUIデザインの基本姿勢です。
本書『モデルベースUIデザイン』では、この各工程について詳しく解説しています。
