ホームページから考えるユーザーインターフェース(UI)
みなさん、ユーザーインターフェース(UI)をご存知ですか。聞いたことはあるけど、それが何かまではちゃんと理解していないと言う方は、意外と多いのではないでしょうか。
またホームページ制作に関して、UIは関係ないと考えるかとも多いかもしれませんが、ホームページを一つ作るにしてもUIをしっかりと設計していくことは重要です。UI一つでユーザーのコンバージョン率が下がると言うことを大いに考えられ、そこからビジネスチャンスを逃すなんてことも起こりうるのです。
この記事ではUIと混同されがちなUXとの違い、またはホームページ制作でも大切なUIの重要性についても一緒に紹介していきたいと思います。
ユーザーインターフェースとはなにか
UI(ユーザーインターフェース)とUX(ユーザーエクペリエンス)
この2つは混同されがちですが、似て非なるものです。
ユーザーインターフェース(UI)
Interfaceとは「接点」や「接触面」と訳されます。パソコンやスマートフォンに表示されるデザイン、フォントなど、製品であれば製品そのものや外観、感触など、ユーザーが触れる全ての情報がUIと呼ばれます。
UXとは Experienceとは「経験」や「体験」という意味です。ユーザーが
サービスや製品を触れて使うことで、得られる体験や経験がUXと呼ばれます。
つまり、UIはユーザーが触れる情報、UXは経験・体験、すなわち、頭で感じるものとなります。
UI設計を行う理由
それでは、なぜUI設計をホームページ製作で行う必要があるのでしょうか。
①使いやすさ
ホームページにおいて、訪れたお客さんが自身の得たい情報を得るということは最優先項目といえます。
そのために、その情報へとわかりやすく導く必要があります。
ホームページを訪れた時に、どこに何があるのかわからず、どのページにいけばいいのかがわからない、と感じたことはありませんか。
例えば、ご自身の企業が何かのプロダクトやサービスを販売していて、それをホームページ上で宣伝しているとします。興味を持ってくれたお客さんがホームページを訪れますが、ホームページの使い勝手が悪いゆえに、目的のプロダクトやサービスの情報を得る前に諦めて、ホームページから離れてしまいます。
これはホームページは役目を果たしておらず、UI設計がしっかりされてないゆえの失敗と言えます。
②期待通りのオブジェクトの配置
ユーザーはこれまでの体験により、オブジェクトがどこにあるのかということを考えずとも潜在的に期待します。例えば、大抵のホームページはヘッダー部分にロゴがあり、トップページへ移動することができます。また、採用情報や会社情報などもヘッダーのリンクやヘッダーメニューから遷移できることが一般的です。
これらは過去に訪れた多くのホームページがそのような設計になっており、ユーザーは新たに別のホームページを訪れた際もヘッダーから会社情報や採用情報を探すようになるのです。
もし、そのユーザー期待通りにオブジェクトが配置されていなければ、ユーザーは自身のほしい情報を探さなければならず、使いにくいホームページだと感じてしまうのです。
UIデザインの基礎
デザイナーでなくても読むべき本と言われている「ノンデザイナーズ・デザインブック」、その中で説かれる4つの原則があります。
それを少しだけ紹介したいと思います。
・コントラスト
コントラストとはユーザーが着目してほしい項目を強調することです。色を変える、大きさを変える、太さを変えるなどをして、 ユーザーの視線を掴むことができます。
・反復
反復とは一貫性を持って繰り返すことです。文字の太さ、大きさ、色などが例としてあげられます。このページでは説明文を同じフォントサイズにし、4つの原則の項目を太字にするという反復をしています。
・整列
整列はばらばらに散らばっている情報をきちんと並べることです。文字を左揃えに揃える、イラストの余白を揃えるなどを行えば、視点が集約され見やすくなります。
・近接
近接とは関連情報を近づけることです。関連情報を近付けること でユーザーは情報同士が関連していることを認識でき、関連していない情報同士に距離を置くことで、関連していないということを認識できます。
わかりやすいデザインとは
UI設計をする上で一番重要なことはわかりやすいデザインであるということです。わかりにくいデザインであれば、ユーザーは使いにくいと感じてしまいます。
それでは、ユーザーが使いにくいと感じないためにはどうすればいいのでしょうか。
・スクロールできることを明確にする
ユーザーがスクロールできることがわからない場合は、ユーザー が見逃してしまうということが起こります。スクロールできるこ
とを明確にする方法は以下の6つがあります。
①要素を部分的に隠す
②スクロールバー を表示する
③矢印を表示する
④グラデーションカバーをかける
⑤スクロール可能であることをアイコンやテキストで表示する
⑥現在の位置を表すドットを表示する
・アイコンでわかりやすくする
文章を読むよりもアイコン一つだけの方がシンプルでユーザーがわかりやすいと感じることは多くあります。例えば、家のアイコンであれば、ホーム画面に戻り、メニューバーのアイコンであれば、メニューが開くことがわかります。
・ボタンやリンクをわかりやすくする
ボタンやリンクはできるだけわかりやすくしましょう。
その他のボディテキストと同じ色・スタイルのリンクは、ユーザーはリンクだとは気づきません。また、ボタンには影や立体感を出すことで、ボタンだとわかりやすくしましょう。
・わかりやすく説明する
ユーザーは画像＞箇条書き＞文章の順にわかりやすいと感じます。出来る限りは、画像や箇条書きで表現しましょう。文章になるとユーザーが読まない可能性が高まります。
・フォントに注意する
見出しや小見出し、箇条書きの文章などはフォントに注意しましょう。
多くの人に馴染みのあるフォントが好かれます。しかし、使用するフォントは日本語と英語で一つづつ、明朝体とゴシック体を混ぜるとまとまりがなくなったりもします。また、行間や行幅、文字間など、文字を読みやすいように一定の空間を開けることは重要です。
まとめ
ホームページにおけるユーザーインターフェースの重要性は理解いただけたでしょうか。
ホームページ制作だけでなく、サービスやプロダクトにおいて、ユーザーを考えさせることなく、使用できるようにすることは非常に難しいことです。しかし重要なことでもあります。
ホームページ制作の際はいろいろなホームページを訪れ、使いやすいデザインをぜひ一度考えてみてはいかがでしょうか。
中小企業をがっつりサポート！
当社では
など、企業のIT化のサポート・DX事業のサポートを行っています。
まずはお気軽にお問い合わせしてください。