ユーザーを混乱させない、ウェブのUIデザインの一貫性を保つために気をつけたいポイント

Post on:2012年8月6日

UIデザインの一貫性を保つ3つのポイント

ウェブやスマートフォンのサイト・アプリを設計する際、UIデザインの一貫性を保つためにおさておくべきポイントは3つあります。

デバイスの標準の振舞いやUIガイドラインと矛盾しないようにする。
他の類似のサイトまたはアプリケーションと一貫した状態にする。
あなた自身のデザイン上、矛盾しないようにする。

特に大切なのは3番目で、あなた自身のデザインの中でユーザーを混乱させたり、破綻しないようすることは重要です。

一貫したストラクチャとインタラクション

サイト・アプリのストラクチャやインタラクションを考えることは、整合性のあるUIを作成するキーとなります。この二つはユーザエクスペリエンスに大きな影響を与えるもので、非常に大切です。
コードを書き始める前に、考え、そして計画を練ってください。

エレメントはサイトまたはアプリケーションを通じて、一貫して配置する。
使用するUIパターンについて考える。
どのようなインプットエレメントが必要であるか計画を練る。
どのようなアイコンを必要であるか理解し、目的にあったアイコンを作成する。

一貫したスタイル

それぞれのUIエレメントのスタイルとデザインの一貫性を維持することは、ユーザーにとって重要なことです。それは一貫したデザインの上で、一貫したアイコンやボタン使うことは重要であるということです。例えば、目立たせたいだけで異なるカラーのボタンを一つだけ設置すると、ユーザーは混乱してしまうでしょう。
一貫性を維持するために、UIエレメントの設計時に念頭におくポイントがあります。

カラースキーム
スタイル
ボーダー
フォント
サイズ
背景画像
エフェクト

カラー

カラースキームはサイトデザインと矛盾しないよう設計します。ちょっと目立たせたいだけのために、カラースキームにないものをその場しのぎで使用したり、デザイン全体がフラットなのに、ボタンだけシャドウをつけているなどは、あらかじめ設計して使用してください。

ボーダー

ボタンに使われてるボーダーが角丸だったり立体的だったりと、混在しているサイトを見かけることがあります。やはりこれも他のUIエレメントと矛盾しないように一貫性をもたせて、一つのスタイルを使うようにしてください。

フォント

エレメントで同じタイプフェイスとフォントを使うことは、かなり重要なことです。特にヘッダは一貫しているようにしてください。また、多くの種類のフォントを使うのは好ましくないでしょう。

サイズ

フォントのサイズと他のエレメントは一貫しており、互いに引き立てあうよう使用するべきです。ページのヘッダとタイトルは一貫したサイズで提供し、コンテンツのリンクやナビゲーション、サイドバーなど、あらゆるUIエレメントにに当てはまります。一貫したサイズで提供することで、ユーザーはページが読み込まれるとすぐにそれらを識別することができるでしょう。