エムアンドシーシステム株式会社の「見やすい”だけでは足りない？ユーザーが迷わない情報設計の基本」です

Webサイトをデザインするとき、「見やすいデザインにしよう」と考えることは多いと思います。

余白をきれいに取る。文字を読みやすい大きさにする。色を使いすぎない。
ボタンを分かりやすくする。
もちろん、これらはどれも大切です。
しかし、実際にWebサイトを使ってみると、「見た目はきれいなのに、なぜか分かりにくい」と感じることがあります。
反対に、デザイン自体はとてもシンプルなのに、「どこを見ればいいのか分かる」「次に何をすればいいのか迷わない」と感じるサイトもあります。

この違いは、単純な見た目だけではありません。

「何を、どこに、どの順番で見せるのか」
という、情報の設計が大きく関係しています。

今回は、Webサイトや社内ポータルなどの画面を作るときに意識したい「情報設計」について、UIデザインの視点から考えてみます。

まず考えたいのが、「見やすい」と「分かりやすい」の違いです。

例えば、白い背景に適度な余白があり、文字の大きさも揃っていて、ボタンもきれいに配置されたWebページがあるとします。

見た目としては、とても整っています。
しかし、そのページを初めて訪れた人が、

「ここでは何ができるんだろう？」

「自分が探している情報はどこにあるんだろう？」

「このボタンを押すと何が起こるんだろう？」

と考えてしまうのであれば、ユーザーにとっては必ずしも「分かりやすい」画面とは言えません。
つまり、
見やすさ＝情報を気持ちよく見ることができるのに対して、分かりやすさ＝情報の意味や関係性を理解しやすいという違いがあります。
もちろん、この2つは別々のものではありません。

見やすさがあってこそ情報は理解しやすくなります。
ただし、見た目を整えるだけでは、ユーザーが迷わない画面にはならないのです。

Webサイトを見るとき、ユーザーは必ずしもページの上から下まで文章を読んでいるわけではありません。
特に初めて訪れるページでは、まず画面全体をざっと見て、

「ここには何がある？」

「自分が必要なものはどこ？」

と情報を探します。

例えば、ニュースサイトを開いたときに、すべての記事タイトルを最初から最後まで読む人は多くありません。

まず大きな見出しを見る。

カテゴリーを見る。

気になるタイトルを探す。必要そうな情報を見つけたら、そこを詳しく読む。
このように、ユーザーは画面を「読む」というより、情報をスキャンしながら必要なものを探していることが多いのです。

だからこそ、UIを設計するときには、
「この情報は正しい場所にあるか？」

だけではなく、
「ユーザーは、この情報をどのように見つけるだろう？」

という視点が重要になります。

情報設計を考えるとき、単純に「必要な情報を全部入れる」だけでは十分ではありません。

同じ情報でも、見せ方によってユーザーが受け取る印象は大きく変わります。

例えば、

• 大きな文字で表示する
→ 重要度を高く見せる

• 小さな文字で表示する
→ 補足情報や優先度の低い情報として見せる

•上部に置く
→ 最初に目に入れてほしい情報として配置する

•下部に置く
→ メイン情報を邪魔しない補足情報として配置する

• カードにする
→ 関連する情報をひとまとまりとして認識しやすくする

• リストにする
→ 複数の情報を比較したり、順番に確認したりしやすくする

• アイコンを付ける
→ 情報の種類や意味を直感的に伝える

• 他の情報とまとめる
→ 関連性のある情報をグループ化し、理解しやすくする

• あえて余白を広く取る
→ 情報を目立たせたり、他の情報との違いを明確にしたりする

こうした選択によって、ユーザーが感じる「重要度」が変わります。

つまり、UIデザインには、
「何を置くのか」だけではなく、

「何を大きく見せるのか」「何を小さく見せるのか」「何を近くに置くのか」「何を離して見せるのか」「どの順番で見せるのか」
という判断も含まれています。これは、単なる装飾ではありません。
ユーザーに情報の優先順位を伝えるためのデザインなのです。

情報を分かりやすくしようとして、すべての情報を目立たせたくなることがあります。

重要な情報だから赤色。

おすすめだから大きく。

新着だからバッジ。

クリックしてほしいからボタンを目立たせる。

注意事項だから太字。
もちろん、それぞれに理由がある場合は問題ありません。
しかし、画面の中で「重要」「おすすめ」「新着」「注意」などが同時に強調されると、ユーザーからすると、

「結局、何を一番見ればいいの？」

となってしまいます。

例えば、スーパーで店内の商品がすべて「大特価！」と書かれていたら、どの商品が本当におすすめなのか分からなくなるのと似ています。

UIでも同じです。重要度には差をつける必要があります。
一番重要な情報は一番見つけやすく。次に重要な情報は、その次に見つけやすく。
補足的な情報は、必要な人が探せば見つけられる程度に。
このように情報に階層を作ることで、画面全体が整理されます。

情報設計でよく使われる方法の一つが「グループ化」です。

関連する情報を近くに配置することで、ユーザーは「これは同じグループなんだ」と理解できます。
例えば、ユーザー情報であれば、

•プロフィール写真
• 名前
• メールアドレス
• パスワード
•アカウント設定

などをまとめると理解しやすくなります。

しかし、ここで一つ注意したいことがあります。

「同じ会社に関係するものだから、同じグループにする」とは限りません。

ユーザーが実際に使う目的が違うのであれば、別々に考えたほうが分かりやすい場合があります。

例えば、会社のWebサイト、福利厚生に関するページ、社内で使用するアプリなどがあったとしても、それらを単純に「サービス」という一つのカテゴリーにまとめると、初めて見る人には少し分かりにくいかもしれません。

「サービス」という言葉を見たときに、

「これは会社が提供しているサービス？」

「社員向けのサービス？」

「外部向けのサービス？」

と迷う可能性があるからです。

ここで大切なのは、「作る側から見て関連しているか」ではなく、「使う側から見て関連しているか」という視点です。

カテゴリーやメニューを作るとき、つい管理する側の都合で分類してしまうことがあります。
しかし、ユーザーはWebサイトの内部事情を知りません。
ユーザーが知りたいのは、

「この会社の情報構造はどうなっているのか？」

ではなく、

「自分が欲しい情報はどこにあるのか？」です。

例えば、社内ポータルなら、

「会社からのお知らせを確認したい」

「社内ルールを確認したい」

「自分のアカウントを変更したい」

「福利厚生について知りたい」

など、ユーザーにはそれぞれの目的があります。
その目的から考えると、メニューやカテゴリーの名前も自然と変わってきます。
「管理上は同じカテゴリーだから一緒にする」のではなく、
「ユーザーがその情報を探すとき、どんな言葉や分類を思い浮かべるか？」

を考える。
これが情報設計の基本的な考え方の一つです。

良いUIを考えるとき、もう一つ重要なのが「次の行動」です。

例えば、お知らせの一覧ページを開いたとします。

ユーザーは、

「記事を読む」

「詳細を見る」

「検索する」

「カテゴリーを絞り込む」

など、何かしらの目的を持っているかもしれません。

そのとき、

情報を表示するだけで終わるのか、
「詳細を見る」という行動につながるのか検索やカテゴリー分けによって必要な情報をさらに探せるのか、によって使いやすさは変わります。

つまり、UIを考えるときには、

「このページには何を表示するか？」

だけではなく、

「このページを見たあと、ユーザーは何をするのか？」

まで考える必要があります。

これは特に、設定画面やフォーム、検索画面、一覧画面などで重要です。

画面を作る前に、一度そのページの目的を一言で説明してみるのも効果的です。

例えば、

「このページはプロフィールを見るページです」

「このページは会社からのお知らせを探すページです」

「このページはアカウントを設定するページです」

というように、その画面の役割を言葉にしてみます。

もし一言で説明できなかったら、情報が多すぎたり、複数の目的が混ざっていたりする可能性があります。
もちろん、すべてのページが一つの目的だけを持つ必要はありません。

ただ、

「このページに来たユーザーに、最初に何を理解してほしいのか？」

を決めるだけでも、配置やデザインの判断がしやすくなります。

UIを作っていると、つい一つひとつの画面に集中してしまいます。

「このカードはきれいか？」

「このボタンの位置は適切か？」

「余白は十分か？」

もちろん、それも大切です。

しかし、一つの画面だけを見て判断すると、その画面の中だけでは問題がなくても、サイト全体では分かりにくくなることがあります。

例えば、

トップページでは「お知らせ」という名前なのに、別のページでは「ニュース」になっている。
あるページではカード形式なのに、別のページでは同じような情報をリスト形式で表示している。
ある場所ではアイコンをクリックすると詳細が開くのに、別の場所では文字をクリックする。

こうした小さな違いが積み重なると、ユーザーは毎回「これはどう使うんだろう？」と考える必要があります。
そのため、UIデザインでは、

一つの画面をきれいにすることだけではなく、サイト全体で一貫したルールを作ることも重要です。

情報設計をチェックするとき、意外と効果的なのが、

「自分がこのサイトを初めて見る人だったら？」

と考えることです。
自分が作った画面は、何度も見ているので、どこに何があるのか分かっています。
だからこそ、作った本人には「分かりやすい」ように見えてしまいます。

しかし、初めて見る人には、その前提知識がありません。
そこで、画面を見ながら次のような質問をしてみます。

「このページは何のためのページ？」

「一番重要な情報はどれ？」

「自分が探している情報はどこ？」

「このカテゴリー名で意味が分かる？」

「次に何をクリックすればいい？」

「この情報とこの情報は、本当に同じグループ？」

こうした質問に自然に答えられる画面であれば、情報設計はかなり整理されていると言えます。

Webデザインには、色やフォント、余白、レイアウトなど、さまざまなルールがあります。
しかし、ルールを守ることだけが目的になってしまうと、本来の目的を忘れてしまうことがあります。

例えば、

「このレイアウトが流行っているから」

「このデザインがきれいだから」

「このサイトと同じ配置だから」

という理由だけでデザインを決めるのではなく、
「このデザインによって、ユーザーは何を理解できるのか？」

と考えることが大切です。

参考サイトを探すことも重要ですが、参考にするのは見た目だけではありません。

なぜその場所にその情報があるのか。

なぜそのボタンが目立っているのか。

なぜそのカテゴリーに分けられているのか。

なぜその情報には余白が多く使われているのか。

そこまで考えることで、参考デザインをそのまま真似するのではなく、自分が作るサイトに合った設計へ変えていくことができます。

最後に、Webサイトや社内ポータルの画面を作るときに使える簡単なチェックポイントをまとめます。

1．このページの目的は何か？
ユーザーがこのページに来る理由を、一言で説明できるか。

2．最初に何を見てほしいか？
ユーザーが画面を開いた瞬間に、重要な情報が見つかるか。

3．情報のグループ分けは自然か？
作る側の都合ではなく、ユーザーの目的に沿った分類になっているか。

4．次に何をすればいいか分かるか？
読む、検索する、詳細を見る、設定するなど、次の行動が迷わず分かるか。

5．初めて見る人でも理解できるか？
自分がすでに知っている前提を取り除いて、画面を見直してみる。

「見やすいWebサイト」を作ることは、きれいなデザインを作ることだけではありません。

余白を整える。

文字を読みやすくする。

色を整理する。

こうした視覚的な工夫に加えて、何を置くのか。
どこに置くのか。どれを目立たせるのか。どの情報をまとめるのか。どの順番で見せるのか。ユーザーに次に何をしてもらうのか。

まで考える必要があります。
そして、情報設計を考えるときに大切なのは、作る側の視点だけで判断しないことです。

「自分なら分かる」ではなく、

「初めてこのページを見た人にも分かるだろうか？」

と考えてみる。

その小さな視点の変化が、UIの使いやすさを大きく変えることがあります。
Webサイトのデザインは、情報をきれいに並べる作業だけではありません。
ユーザーが迷わず、必要な情報を見つけ、次の行動へ進めるように道筋をつくること。

それも、UIデザインの大切な役割なのではないでしょうか。

備考欄

記事情報