実例から考えるUIの情報設計

情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。

情報設計の専門書を漁ってみると、“ふわっとした” 話か、Webサイト設計の話に終始するものが多いのですが、本来はWebサイト設計以外の分野にも通用する考え方です。今回はiOSなどのアプリケーションデザインに焦点を当てて、UIの情報設計というものを考えてみたいと思います。

この資料では、「情報設計としてのUIの組み立て方と考え方」をテーマとし、すでにあるようなUIの実例を用いて情報設計視点でのUIデザインの解説を試みます。UIの具体イメージと結果から設計の意図というものをクイズ形式で考えられる内容となっています。

IA（情報アーキテクチャ）に関する考え方の解説は行いません。

なぜUIデザインには情報設計がもっとも大切なのか

情報設計とはデザインの “すじがね” となるものです。物事を破綻させずに適切に成り立たせるためには、審美性だけでなく論理性が不可欠です。特にソフトウェアを作るのであれば論理性を損なうことがあってはなりません。論理性のない仕組みはコンピュータに拒絶され、まともに機能できなくなってしまうからです。

情報設計を経てでき上がる形を「構造」と表現することがあります。構造とは直接目に見えない論理の形ですが、確実にそこには存在するもので、情報同士が互いにどう関連付けられ、作用し合うのかを定義づけます。適切な構造があれば、美しいルックアンドフィールを備えたユーザインターフェイスを実現できるようになります。

UIデザインの過程では、コンセプト定義や要件定義を経たあと、論理を成す構造設計を手厚く行い、設計全体の “すじがね” を立たせます。ここで特に必要になるのが情報設計の知識と技能です。仮に目論見なくUIの見た目から作り出してしまうと、多くの場合は構造の論理性がうまく成り立たず、結局何度もそれを作り直す羽目になります。デザイナーのイメージを膨らませるためにまずコンセプト画を描くようなことは問題になりませんが、プロダクションに近い緻密な表現の制作にいきなり取り掛かってしまうと、制作過程で思いがけない “手戻り” を招くことがあるので、要注意です。

構造設計を経てからようやく人間の感覚に直接作用する表現を肉付けします。最終はユーザが手にとって触れるものですから、それが魅力的に見えるように整えます。ルックアンドフィールに係る設計は感覚に頼ることが多いため、なるべく細かい表現までこだわったクリエイティブな活動にしたいものです。対して構造設計の方はある程度の正解パターン、アンチパターンが予め見えているので、この辺りは試行錯誤を最小限にさっさと「正解」に辿り着けるようにしたいものです。

情報設計や構造設計はUIデザインにはもっとも大切ですが、それが目当てにはならないということです。「美しく魅力的なUIの実現」を目当てに、下地となる確実な設計を志向していきたいものです。

ナビゲーションと「戻る」ボタン

UIの構造を情報設計的に考えてみましょう。元の講義では問答形式を採ったため、内容もクイズのような出題の仕方になっています。

最初の例はiPadOSの「設定」のナビゲーション構造です。次の問いを考えてみましょう。

iPadOSの設定で「壁紙」を展開した後、｢壁紙」から「一般」に戻るためのボタンを設置すべきか？　（イメージを参照）

イメージ

考え方

この問題を考えるにあたっては、次のような構造を描いてみると思考を整理しやすくなります。

「設定」のコンテンツはツリー構造のList-Detail (Master-Detail) インターフェイスで表現されます。ツリー構造はルートを除くすべてのノードが親ノードに連なる形をとります。今回の問では、異なる枝に属するノード間の遷移を考えるものです。ツリー構造だけで考えるとわかりづらい場合は、“遷移スタック” というものを別途描いてみることも解決のヒントになります。

答えと理由

イメージ（再掲）

さて、「壁紙」から「一般」に戻るための “戻るボタン” をUIとして提供すべきか否かですが、答えを言うと「戻るボタンは必要ない」となります。

iPadOSの「設定」では、UIの基本形態がList-Detail (Master-Detail) なので、ルート階層は常にサイドバー（左ペイン）に表示されたままの状態になります。2階層目以降のナビゲーションはコンテンツエリア（右ペイン）で展開される仕組みです。ViewControllerの構成を考えると、左右のペインで異なるViewControllerがそれぞれのナビゲーションを管理していることになります。問である「『壁紙』から『一般』に」とは、サイドバー（左ペイン）側のリストのセルの選択変更として扱えるので、わざわざ前に選択していたセルの履歴を保持しておく必要がありません。前に選択していたセルを再度選択したければ、ユーザがもう一度それをタップすれば良いためです。

シングルペインのUIを基本とするiOS (iPhone) の場合も基本的には同様の考え方をします。また、macOSの旧システム環境設定のように、コンテンツの表示履歴をスタックしてそれらをWebブラウザのごとくナビゲートさせたい要件がある場合は、適切な形でバックボタンを提供することも検討できます。

付録：画面全体を “ページ” として扱うか否か

この問を考える上でもう一つ重要な要素があります。iOS / iPadOSでは、画面全体を “ページ” として扱う発想がありません。個々のUI要素を “ビュー” オブジェクトとして捉え、ビューの入れ子構造がUIの形を構成するものとして考えます。

「“戻る”とは何を戻すのか」で考えることが大切です。