UI 設計で重要なインタフェースの一貫性について

ウェブサイトやウェブアプリケーションの UI (ユーザインタフェース)設計の目標は、利用者がなるべく直観的にそのウェブサイトやアプリケーションを利用できる状態を目指すものです。そしてその目標を達成するため、UI には「一貫性」が必要です。

  1. UI 設計で重要なインタフェースの一貫性について

ウェブサイトやウェブアプリケーションの UI (ユーザインタフェース)設計の目標は、利用者がなるべく直観的にそのウェブサイトやアプリケーションを利用できる状態を目指すものです。

ウェブサイトの利用者は、実生活の中で様々な UI に接しています。そしてその経験を通して操作方法を学習し、あなたのウェブサイトの UI にもそれまでの経験が当てはまることを期待します。つまり、ウェブサイトの UI には世の中の「慣例」に従うことが求められますし、その上で、それがウェブサイト全体でも一貫性を持っていることが重要になります。

そうでなければ、利用者は新しいウェブサイトを訪れる度に操作方法を最初から学習しなければならなくなり、これは大きな負担となります。ここでは UI の「一貫性」に関して、いくつかに分解しながら解説します。

使用される用語の一貫性

世の中には同じ意味を持ちながら異なる用語というものが存在します。例えば、ウェブサイトで使用される用語として、「トップページ」はウェブサイトのフロントページ、所謂、玄関的なウェブページを指しますが、同じ意味を持つ「ホーム」あるいは「ホームページ」という用語もよく使用され、日本以外ではこちらの方が一般的です。同様に、「ログイン」という用語に対して、「サインイン」という用語が同じ意味で使用され、ウェブサイトやアプリケーションによってどちらを使用するかに差異が出ることは珍しくありません。

用語の一貫性を考えたとき、ウェブサイト内において、これら用語が一貫して使用され、表記にブレがないことが重要になります。例えばある場所では「お問い合わせ」というボタンがお問い合わせフォームにリンクされており、別のページでは「コンタクト」というボタンが同じ意味で使用されている、といったことは避けなければなりません。

レイアウトの一貫性

ウェブサイトの主要なメニューが、そのページに移動しても必ずページ上部に、同じデザインで存在する。そういった、レイアウトの一貫性も重要であり、これはアクセシビリティ上も重要な一貫性となります。

また、世の中のウェブサイトにおける慣例として、主要なナビゲーションメニューは画面の上部、もしくは左側にレイアウトされることが多いですし、「戻る」「進む」のボタンがあれば、「戻る」が左側に配置されるのが一般的です。こういった慣例に従ってレイアウトを行うことも、利用者の認知負荷を低減する上で重要な一貫性となります。

色や形の一貫性

アクセシビリティの観点から、色や形に依存した UI は避けなければなりませんが、ウェブサイトやアプリケーション内で、同様の機能を持ちながら、あるボタンは四角、あるボタンは丸と、形状が大きく異なったり、あるページではリンクテキストの色が「赤」で下線がついているのに、別のページでは「水色」の背景色つきで下線がない、といった一貫性のなさは、利用者を混乱させます。

世の中のウェブサイトで慣例的に使用される「ボタン」のデザインや、フォームの入力コントロール(入力欄やチェックボックス)なども、普段からウェブサイトを利用する中で無意識に認知している見た目上の特徴があります。ここから大きく外れるようなデザインを採用してしまうと、利用者が必要な UI を発見できないなどユーザビリティを低下させる可能性があります。


そしてこれらの一貫性が、ウェブサイトのリニューアルやアプリケーションのバージョンアップを経ても維持されるということも、忘れがちですが重要なポイントです。

リニューアルやバージョンアップ時に、より利便性を向上させようとメニューのレイアウトを大きく変更したり、今まで使用されていた用語を別のものに変更するというのは必要な場合もありますが、安易な変更は、それまでウェブサイトやアプリケーションを使用していた利用者に、再度操作方法を学習するという負担を強いていることを認識する必要があるでしょう。

UI 設計

ご相談・お問い合わせ

We’re here to support your business

まじめにウェブサイトのユーザー体験(UX)を向上させたい、ウェブアクセシビリティへの取り組みを継続的に行いたい、本気でウェブサイト活用について相談できるパートナーが欲しい…… そんな企業の皆様の想いにバーンワークスは真剣に向き合い、最適解を提供いたします。