string(4) "blog"

CONTENTS

2020.7.27

アプリケーションとウェブサイト、UIデザインにおける情報設計の違いとは?

written by 清水 良介
タイトルイメージ画像

アプリケーションやウェブサイト※1 において、UXやUIデザインが大事と感じられている方は多いかと思います。しかし「情報設計(情報アーキテクチャやIAともいわれる)」についてはどうでしょうか。名前は聞くけど、あまりよく分からないという方もいらっしゃると思います。

さらに、「アプリケーションの情報設計」と「ウェブサイトの情報設計」では何が同じで、何が違うのでしょうか。この記事ではこれらの点について要点を整理してみました。

※1:この記事ではわかりやすく区別するために、アプリケーションとは「PCやスマホなどのアプリケーション・ソフトウェア」のこと。ウェブサイトとは「インターネット上にある企業・組織や個人などが情報発信などのためのウェブページ群」のことを指して説明しています。また、ECサイトやSNS、Webサービスなどはウェブ上のアプリケーションとしての性質もあり、実際にはどちらかに完全に区別しにくく両方の性格をもったものもありますが、ECサイトなどWebサービスは、アプリケーションとして捉える方が適切になります。

アプリケーションとウェブサイトは何が違うか?

はじめに、ウェブサイトとアプリケーションにおける共通点や相違点は何でしょうか?

共通点としては、利用する「ユーザー」がいて、何かの「目的」をもっていて、UIを通して「操作」をして、ある「目的を達成」する。これらは、どちらにも同じことだと思います。

では、異なるところは何でしょうか?

ウェブサイトは、ユーザーに届けたい情報や、ユーザーが求めている情報が中心となってできている。つまり「コンテンツが中心」であり、それを理解したり取得するために、UIがあります。

例えるならウェブサイトのデザインは「本の編集」に似ていて、伝えたい「情報」を、ユーザーがアクセスし理解できるようにウェブページへ変換していくことになります。

一方、アプリケーションは、ユーザーが表示された内容や情報(データ)を見るだけでなく、それを編集したり加工したりする処理やアクションがあり「作業が中心」といえます。つまり、UIは何かユーザーが必要な作業をなしとげるためにあるといえます。

こちらを例えるならアプリケーションのデザインは「道具の設計」に似ていて、「情報」を操作対象とし「製作(作成)・編集・加工」といった『操作を可能にするモノ』を作ることになります。

ウェブサイトとアプリケーションの違いの図

情報設計の観点での違いとは?

では、UIデザインにおいて情報設計のポイントは何でしょうか? ウェブサイトであれば本の編集と同じように、コンテンツをどうまとめるか(グルーピングやその優先順位)や、その「ラベリング(語句の表記・表現)」。また、情報同士の配置関係としての「レイアウト」、ページ同士の移動関係性としての「ナビゲーション」をどうするか、が主にあると思います。

他に検索やフィルタリング(絞り込み)が必要な場合は、どのような検索方法にするか、どのように検索結果を見せるかなども関わってきます。(これらは、一般的に「情報アーキテクチャ(IA: Information Architecture)」と呼ばれる分野のことと同じことです。※2

一方、アプリケーションの場合は、(道具の設計と同じように)ある作業ができなくてはいけないので、上記のようなこと以前に「ユーザーが行う様々な処理/操作」を実現するための情報設計が特に必要になります。

例えばメールアプリケーションの場合「メールを書く」「新着メッセージを確認する」「過去のメールをラベルをつけて整理する」などの「操作」をできるようにすることです。

さらに操作できるようにするだけでなく、その「操作対象が何か?」も明確にする必要があります。もし「操作」だけをUI上に提示して、例えばボタンで「書く」「送信する」とだけあっても、ユーザーは「何を?」となってしまうからです。とはいえ「メールを書く」というボタンをもし作ったとしたら、他の操作をするために「メールを削除する」「メールを検索する」「下書きメールの続きを書く」……と、操作に必要な分だけボタンが増えていってしまいます。

そうならないよう、まず「操作対象」を関わりやすいカタチに定義して、それに対して様々な「操作」ができるようにする情報設計(関係性の設計)が大事になってきます。メールアプリケーションであれば、「メール」そのものだったり「メールボックス(受信箱や送信箱)」といったメールを管理する「環境」がその操作対象にあたり、それらに対して“受信箱を「開く」”、“メールを「書く」”などといった操作を結びつけるイメージです。

このように、アプリケーションではウェブサイトと違い、情報設計そのものの性格が変わってくるのがポイントとなります。

※2:この記事では「情報設計」の意味合いを広義に捉えており、UIデザインにおける、ユーザーが目にしたり操作したりする表面的な具体情報と、本来達成したい目的や持つべき機能など内面的な抽象情報をどう体系的に組み上げるかという意味で扱っています。

一般的に「情報アーキテクテャ」という分野は、複雑化するウェブサイトを情報の観点からわかりやすく整理する技術や理論として発展しており、アプリケーション設計の分野からはやや離れています。そのため広義の意味で「情報設計」の領域を扱う場合、アプリケーションにおいては厳密には「インタラクションデザイン」や「インターフェイスデザイン」の領域も多く含まれる分野といえます。

アプリケーションとウェブサイト、UIデザインにおける情報設計の違いとは?

使いやすいUI・分かりやすいUIにするためには何が必要か?

では、情報設計をどのように行えば、使いやすいUI・分かりやすいUIにできるのでしょうか?

ウェブサイトであれば以下の観点を押さえるのがまず大事になってきます。

  • 情報の組織化:コンテンツをどうまとめるか組織化するかという点で、目的や意味性、理解しやすい分量・内容を考慮し、グルーピングやその優先順位を整理する。
  • 名前づけ:組織化された情報をどう指し示すかという点で、ナビゲーションのメニュー名や見出しなどラベリング(語句の表記・表現)をユーザーが理解しやすいものにする。
  • ナビゲーション:サイト内で「自分がどこにいるのか」「どこへ行けるのか」といった移動に関する構造と情報提示を体系的に整理する。
  • 見つけやすさ:どこに何がありそうか見当がつくように情報提示する。また検索機能を設ける場合は、どのような検索方法が良いか(キーワード検索がいいのか、条件による絞り込みがいいのかなど)など、ユーザーが情報を探せるように考慮すること。

一方、アプリケーションでは上記の点も大事ですが、それ以前に以下の観点を押さえる必要があります。

  • 操作対象をユーザーの想定にあった形で表現:行いたい作業のために「何が」操作できるようになっているのか、その「操作対象」をユーザーの頭の中にある想定(脳内のモデル)に沿った形で定義し表現する。(例えばスケジュールアプリであれば、「予定」や「カレンダー」といったものが上位概念の操作対象として相当するので、それをまずユーザーに見えるようにする。)
  • 操作方法を何ができるか予測がつくかたちで提示:操作対象が明確になった上で、それらにはどんな操作ができるのか、その対象と動作の関係を直感的(具体的にいえば慣用的)に示します。つまり、これを操作したらこうなるだろうという予測がつく形にUIを構成し提示します。これは慣習化された標準的なUIパターンが多くあるので、それを活用することも有効です。
  • 操作対象がどのような状態かを見せる:操作対象が今どのような「状態」なのか。そして状態が変わった時にどう見え方が変化するのかを、一貫性をもった形で示します。(例えば、テキストボックスなら、入力できるのか・できないのか。入力中なのか、バリデーションエラーが発生してるのかなど。複合的なものであれば、スケジュールアプリの予定の有無状態や、ToDoアプリのタスクの状態:完了/未完了ステータスや期限などの状態など、対象によって様々なレベルがある)

それぞれの特性をふまえると、このように目に見える表層的なUIの奥にある構造はかなり異なり、それに関連して情報設計のポイントも変わってくるといえます。

使いやすいUI・分かりやすいUIにするためには何が必要か?の図

アプリケーションや業務システムの情報設計とは

道具の設計としてアプリケーションのデザインをみたとき、「使いやすさ」は操作接触面のデザイン(インターフェイスデザイン)や、その相互作用のデザイン(インタラクションデザイン)も関わってくる分野ですが、全体として複雑な機能をもつアプリケーションになればなるほど、アプリケーション全体としての機能と、個々の機能を「どう体系的に統合するか」という構造上の情報設計が、(間接的には)使いやすさに大きく影響を与えてきます。

加えて補足すると、通常一人で使うような一般的なアプリケーションの場合は良いのですが、私たちFixelが関わっているような業務システムや専門性の高い特殊なアプリケーションになると、一つのデータ群を複数の役職の人が、それぞれ違う使い方(業務)で利用したり、ある決まった業務フローの中で、順番にデータを受け渡ししたりして進めていくなど、複数のユーザータイプがいる上に「操作対象」や「操作」、その「状態」などが複雑に絡み合って、全体としてある作業が完了することが多いです。

(例えば、病院の電子カルテシステムのように、患者一人のカルテ情報をもとに、医師、看護師、受付、経理、事務など、別々の役割にあわせて、業務とできることが異なるが、それらが繋がることで医療サービス全体が成り立っているようなものなどが当てはまります)

そのような場合においては、UXを向上していきたいとき、UIデザインの見た目だけを良くしても本質的なUXや使いやすさは向上しないため、上記のような構造上の設計を最適化することが極めて重要といえます。

まとめ

この記事では、ウェブサイトとアプリケーションにおける情報設計の違いについて要点をまとめて書いてきました。UIデザインやUXデザインという言葉はよく聞いたり知っていても、作るものがウェブサイトなのかアプリケーションなのかによってどのように違い、どの観点を押さえて設計すれば良いのかまで理解されている方は少ないのではないでしょうか。

ウェブサイトはコンテンツを中心にできていますし、アプリケーションは作業を中心にできています。通常、コンテンツの無いウェブサイトはないですし、機能の無い(=ユーザーによる作業ができない)アプリケーションもないでしょう。どちらの場合も「UIデザイン」と一括りにして捉えがちですが、作ろうとしているもの自体が違うので、今回紹介した「情報設計」だけでなく、全般的に必要な設計手法やスキルも変わってくるといえます。

ウェブサイトやアプリケーションを作る際には今回の内容を参考にしてもらえたらと思います。また、詳しい進め方が知りたい、具体的にデザインを一緒に考えて欲しいなどあれば、是非お問い合わせください。

私たちFixelは業務システムを中心に、様々な企業のアプリ開発に携わってきました。これらの経験をもとに、上記のようなアプリケーションにおける情報設計も適切に行い、よりユーザーにとって価値があり、ビジネスの成果につながるアプリ開発を支援いたします。

一覧に戻る
お問合わせ