WebシステムのUIデザイン、これだけは絶対守るべき点

Writer:Asai (20.10.07)

UIとは、User Interface(ユーザーインターフェーズ)の頭文字を取ったもので、あらゆるユーザーがWebサイトやシステム、アプリを快適に使えるようにデザインすることをUIデザインと言います。
ユーザーには各々の特徴があります。例えば、年齢や閲覧環境、色の見え方などが代表例として挙げられると思います。これらを考慮して、UIデザインは考えていく必要があります。

代表的な気をつけること

UIデザインのポイントについては、デザインコンサルタントの古長克彦さんが下記のページで詳しく書いていただいています。

管理画面のUIデザインにおける20の改善ポイント

このページでは、詳細かつ丁寧に紹介されているので、とてもわかりやすい内容です。この中で、特にWebシステムのUIデザインを設計する際に私たちが気をつけている点を挙げていきたいと思います。

1.どんな環境でも見られるようにする。

古長さんの記事にある「1:リキッドレイアウトにする」という点に該当します。
現在のWebシステムを閲覧する環境というものは多岐に渡っています。PC、スマホ、タブレットはもちろん、閲覧するブラウザの幅も人それぞれです。これが、「特定のサイズ以上じゃないと全部見れない」ということでは、不便ですよね。そのため、リキッドレイアウトかつレスポンシブで設計することで、だれでも閲覧可能な状態を用意することは必須なのです。

2.だれでもリンク先が理解できるようにする。

こちらは、「3.アイコンに頼りすぎない」に該当します。
アイコンは確かに直感的に伝えることには便利ですし、場所もとらない優れたアイテムです。しかし、このアイコンの意味がユーザーに伝わらなければ意味がありません。そのため、アイコンを利用する際は、なるべくリンク先がわかるようにメニュー名などを併記するということを意識しています。
この件については、一時期話題になった「スマホサイトのハンバーガーメニューは最適なのか?」ということにも繋がっていますね。

3.色に気をつける

こちらは、「4.色に頼りすぎない」に該当します。
普段生活していると、「色に気をつける」ということは少ないかと思いますが、この色に気をつけないと利便性が大きく異なってしまいます。
世の中には、色覚に問題を抱えている人が沢山います。(かく言う私も若干色弱です。)また、利用デバイスによっては、色がハッキリと出ない場合もあります。つまり、色で区別・判別をさせるということは、これらのユーザーの利便性を損なっているとも言えます。

4.できるだけシンプルな構造にする

こちらは、「5.視線誘導を意識したレイアウトにする、6.構造をできるだけシンプルにする」に該当するお話です。
みなさんもレイアウトがバラバラだったり、階層が深いサイトを見たことがあると思います。これらを利用して感じた感想は「使いにくいなぁ、見にくいなぁ」という感じに落ち着くのではないでしょうか。Webシステムは今後も頻繁に利用されることを考えると、レイアウトがバラバラや階層が深いということは利便性の面でNGということになります。 できるだけ、シンプルにすることは、それだけ利便性向上にも繋がります。

5.今、どこにいるのかを明確にする

こちらは、「15.現在地が分かるようにする」に該当します。
この点については、Webシステムのみならず、Webサイトやアプリ全般に言えることだと思います。自分がどこにいるかわからないと、ユーザーはサイト内で迷子になってしまいます。どこにいるか分からなくなったから、とりあえずトップに戻るというナビゲーションでは、ユーザーはイライラしてしまいます。そうならないためにも、現在地を示すということは非常に大切な要素だと思います。

UIデザインで大切なことは、どこまでユーザーに寄り添えるか

弊社でWebシステムをデザインする際は、最低限上記のことを気に掛けています。もちろん、Webシステムの内容によっては、もっと気に掛けるべき点は多数存在します。しかし、これらのことは最低限守るべき点であると考えています。
頻繁に触るものだから、使いやすくなければならない。ユーザーに快適に使ってもらいたい。UIデザインに大切なことは、このユーザーに寄り添う気持ちだと思います。
もし、利用中のWebシステムが使いにくい、構築中のWebシステムの利便性が悪いと思われたら、UIデザインを改めて見直してみると良いかもしれません。

コラム執筆中

アイビーネットでは、マーケティングなど様々なテーマでコラムを随時執筆中です。

コラム カテゴリ