構造で考える情報設計。知っておきたい「モデルベースUIデザイン」入門

スマートフォンアプリをはじめとするソフトウェアのUIデザインに、UXデザイン・ユーザーリサーチの成果を反映するにはどうすればいいのでしょうか。「モデルベースUIデザイン」を提唱するソフトウェアデザイナー／デベロッパー・丸怜里さんに、その考え方と方法論を聞きました。（『Web Designing 2025年10月号』より抜粋）

プロフィール

共通言語としての「情報設計」が
ロジカルなUIデザインの起点

2000年代はじめ、Appleが発表した「Mac OS X」はそれまでのコンピュータとは一線を画す「Aqua」と呼ばれるUIで、水のような透明感を持つ美しいインターフェースを実現しました。私はこれに感化され、「自分もこんなUIを備えたアプリをつくってみたい」という想いを持ったことから、プログラミングの世界に足を踏み入れました。

iPhoneの発売以降はiOSアプリの開発も手がけるようになり、最初の就職先はアプリの受託開発を行うシステム開発会社でした。その後、転職先のグッドパッチではソフトウェアのデザインと開発を担当することになり、肩書きを「ソフトウェアデザイナー」と改め、現在のような形で情報設計やUIデザインに関わる立場となったのです。原体験にあった「美しいUIをつくりたい」という意識は今も変わりません。

「美しい」とは、「絵としてきれい」なことだけを意味するものではありません。なぜなら、UIはソフトウェアのロジックと一体であり、ロジックのないUIは機能しないからです。UIデザイナーは、プログラムを書く必要はないとしても、ソフトウェアのロジックと無関係でいることはできないのです。

ロジカルなUIをデザインするには、ビジュアル側から感覚的に正解を探るより、ソフトウェアが扱う情報から論理的に正しい構造を割り出せたほうが効率的です。そのため、UIデザイナーにもソフトウェアの構造をつくる「情報設計」の知識と技術が求められます。

こうした視点でUIデザインを担えるデザイナー人材は決して多くなく、入門者向けの教材も限られているのが現状です。その課題感から、私の実践と経験を元にまとめた方法論が「モデルベースUIデザイン」です。

ここでは、UXデザインやユーザーリサーチの成果をUIデザインに活かす手法として、モデルベースUIデザインのプロセスを用いたアプローチを解説します。

「モデルベースUIデザイン」とは？

モデルベースUIデザインは、形のない情報や機能を「モデル」として可視化し、情報設計の基盤とする方法論です。その基本的な考え方を解説します。

#1｜機能するUIのための「情報設計」

UIは、ユーザーが触れる唯一のソフトウェアとの接点です。そこには審美性（ビジュアル）だけでなく、論理性（ロジック）が不可欠です。ロジックがそのまま表に出たUIはユーザーにとってわかりにくく、逆に審美性だけのUIはソフトウェアとして機能しないからです。

つまり、UIデザインの役割とは、ロジックが扱うさまざまな情報を整理し、ユーザーにとって理解しやすい形で提示することだと言えます。

その土台となるのが「情報設計」です。情報設計というと、画面遷移やサイトマップの整理を思い浮かべるかもしれませんが、本来はもっと広く、人とモノ・コトを繋ぐ情報に形を与え、理解しやすい状態にする行いを意味します。機能するUIデザインは、その行いの上に成り立つのです。

#2｜情報設計の基盤となる「モデル化」

「モデルハウス」や「ペルソナモデル」のように、何かを模式的に表現し、検討・分析などに用いる手法を「モデル化」と言います。モデルベースUIデザインでは、形が不明瞭なソフトウェア上の情報に対して、「ユースケース」や「概念モデル」などのモデルを用いることで構造化し、機能するUIの構築を目指します。

UIデザインの工程を3つに分けると、その割合はモデルの設計が全体の60％を占めるといわれます。機械と人が対話する接点をつくる「インタラクションテクニック」が30％、ユーザーが直接見て触れる「ルック＆フィール」は10％にすぎません。

しかし、ユーザーから見ればそれがすべてです。その10％のために、残りの90％を緻密に積み上げる必要があるのです。

#3｜「勘」頼りのデザインから脱却するには？

情報設計の視点が足りないと、デザイナーは自分の勘を頼ることになります。勘とは、その人がそれまでに見たり触れたりしてきたさまざまな表現を、自分の中で独自にパターン化して整理した暗黙的な基準といえます。

同じカテゴリのアプリを見回し、似た要素を見つけて“よし”と評価し採用することもあるでしょう。これらの基準がすべて悪いわけではありません。

しかし、そこに「このUIはなぜこの見た目になっているのか」という視点を加え、何かしらの答えに辿り着ければ、良し悪しをよりロジカルな基準で評価できるでしょう。答えが正解か不正解かは必ずしも重要ではありません。構造的、またユーザー体験的に、なぜそれがよいのかを掘り下げて評価する情報設計の視点が重要なのです。

COLUMN｜実装モデル・表現モデル・メンタルモデル

UIの裏側にはソフトウェアのロジックが存在します。ロジックがそのまま表面に現れたものを、実装に基づいた表現＝「実装モデル」といいます。これはユーザーにとって難解なものになりがちです。逆に、ロジックを前提とせずユーザーがそのソフトウェアに対して思い描く構造を「メンタルモデル」といいます。そして、実装モデルをメンタルモデルに変換する役割を持つのが「表現モデル」です。

ユーザビリティに優れたUIデザインとは、実装モデルとメンタルモデルを適切に媒介する表現モデルを形づくることだと言えます。


実装のロジックがそのまま表面に現れたUIは、ユーザーにとって難解であることが多く、「表現モデル」を介して「メンタルモデル」に近づける必要があります。

取材・文：笠井美史乃