webデザイン関連の仕事をやっていると、必ずと言っていいほどぶつかるのが「UI」や「UX」という言葉です。本記事は、このUI、UXという言葉の意味やUIとUXとはどのような違いがあるのかについて解説しているものです。また、UIのデザインのポイント、UIデザインの向上のポイントといったUIデザインを行う際に役に立つポイントについても記載しています。

UIとは

UIとは「User Interface（ユーザーインターフェイス）」の略称です。Interfaceには、本来「接点、接触面」という意味があります。コンピューター関係でUIと言うときは、ユーザーとコンピューターあいだで情報をやり取りするさまざまな機器や入力装置を指すのです。コンピューター関係のUIは多岐にわたり、マウスやキーボードはもちろんのこと、マイクやスピーカーなどの音声入力装置、ディスプレイなどの画面表示装置などがあります。さらに、UIは装置にとどまらず製品そのものの外観も含まれますし、webサービスにおいてはwebページのデザインやフォントなどもUIに含まれるのです。洗練されたUIは、ユーザーとコンピューター間の情報のやり取りをスムーズにし、快適な操作を可能とします。

CUI

CUIとは、Character User Interface（キャラクター ユーザー インターフェイス）の略となります。これはキーボード入力を用いたインターフェイスのことであり、当然、コンピューターが生まれた当時のUIはこのCUIのみでした。コンピューターが生まれた当時は、現代で主流となっているグラフィカルなデザインを持った直感的に操作できるようなUIはまだ生まれておらず、画面に表示されるのは文字列のみだったのです。つまり、UIはいわゆるコマンドライン方式に相当するもののみでした。そのため、操作は非常に難しく、現代のように誰でも使えるものではなく、コンピューターを使いこなせるのは専門知識を持った専門家のみだったのです。

GUI

GUIとは、Graphical User Interface（グラフィカル ユーザー インターフェイス）の略となります。画面に表示されるのは文字列のみ、入力デバイスはキーボードのみというCUIには、グラフィカルな要素がなく使い方が直感的にわからないという弱点がありました。その弱点を克服するための画期的な発明が、カーソル操作です。これによって、UIに初めて視覚的なインターフェイスが誕生しました。現代では当たり前の操作となっている「必要なフォルダをカーソルで選択する」「ドラッグして複数のファイルを同じフォルダに入れる」といった操作が可能となったのです。

GUIの登場によって、コンピューターの使いやすさは格段に向上し、専門家でなくても簡単にパソコンを使えるようになりました。また、コンピューターマウスやサーチボックス、ハイパーテキストなどの、現代では当然のように存在するインターフェイスも、GUI、ひいてはカーソル操作がなければ生まれなかったインターフェイスだと言えるでしょう。

UIとUXの違い

UIと合わせてよく用いられる言葉に「UX」があります。UXとは、User Experience（ユーザー エクスペリエンス）の略です。その意味は「ユーザーが製品やサービスで得られる体験」となります。webページが快適に閲覧できる、フォントの大きさが適切で文章が読みやすい、投稿フォームのデザインがシンプルでわかりやすいといった経験は誰にでもあるでしょう。体験というと抽象的ですが、こうしたサービスの質に関わる体験は代表的なUXと言えるでしょう。

そして、UIの質やデザインが優れていれば、ユーザーはより良質のUXを得ることができるようになります。つまり、UIはUXを高めるために欠かせない要素なのです。しかし、UIだけがUXを高める要素というわけではありません。UXを高める要素には、ほかにも対応の良し悪しや商品購入までの導線、サービスの質があります。これらはUIとはまた異なる要素であり、UIはUXを高めるためのたくさんの要素のうちのひとつなのです。

どうしてUI・UXデザインが求められるのか

さまざまな場所で「IoT」という言葉に触れたことがある人は増えているのではないでしょうか。IoTとは「Internet of Things」の略で、さまざまなものをインターネットに繋げることを意味します。「スマホからインターネットを通じて自宅のドアをロックする」「外出先からエアコンを操作する」などがIoTの具体例となります。また、ウェアラブルデバイスも普及してきました。私たちの暮らしのなかには、インターネットに接続している機器が急激に増加しているのです。

IoTが普及していけば、インターネットは日常生活において今まで以上に身近な存在になるでしょう。そのため、インターネットに接続しているさまざまな機器に対しては、より使いやすくわかりやすいUIと、そうしたUIから得られる快適さや便利さ、使いやすいというUXが求められるのです。

優れたUIデザインを実現するためのポイント

より良いUXをユーザーに提供するには、優れたUIのデザインが欠かせません。ここでは、良いUXをもたらすためのUIデザインのポイントについて解説していきます。

デザインの原則を意識する

優れたUIのデザインのためには「UIデザインの原則」を意識することが大切です。webデザインにはさまざまな法則や手法がありますが、最も基本的なベースとなるのは「近接」「整列」「対比」「反復」の4つです。この4つの原則を守ることで、デザインに統一感が出ますし、web上の情報を読み取りやすくなるのです。ここでは、この4つのデザインの原則について1つずつ解説していきます。

近接

関連性のある情報とそうでない情報を分けて配置しているだけでは、快適なUXには繋がりません。情報が乱雑に配置されていると、関連性ごとに分けられていてもやはり情報検索が快適にできないのです。そこで、レイアウトを整然と配置することで情報の検索性を向上させ、ユーザーが探している情報にストレスなくたどり着けるようにすることで、UXの質を高めます。

整列

関連性のある情報とそうでない情報を分けて配置しているだけでは、快適なUXには繋がりません。情報が乱雑に配置されていると、関連性ごとに分けられていてもやはり情報検索が快適にできないのです。そこで、レイアウトを整然と配置することで情報の検索性を向上させ、ユーザーが探している情報にストレスなくたどり着けるようにすることで、UXの質を高めます。

対比

「対比」は「コントラスト」とも呼ばれるデザインの原則です。閲覧しているwebページのレイアウトやフォントがすべて均一だと、統一感はあるものの強調されている部分がないので情報が捉えにくくなります。そこで、フォントの大きさや色を変えたり、見出しを配置したりすることで情報に強弱をつけるのです。

反復

UIデザインにおける「反復」とは、ある程度の大きさの情報のまとまりを繰り返すことです。そうやって反復を行なうことで、情報の提示にリズムが生まれるのです。情報の提示にリズムが生まれれば、閲覧する側も提示される情報を読み取りやすくなり、快適なUXが得られるというわけです。

情報過多になりすぎないようにデザインする

ユーザーに対して情報を提示する際には、提示する情報が多くなりすぎないように注意する必要があります。多くの情報を一度に提示すると、そこから必要な情報を見つけることが困難になるのです。そのため、ユーザーに対して提示する情報量をうまく調節し、情報過多になりすぎないようにしなくてはいけません。また、情報量が多すぎると、ユーザーが必要な情報にリーチしにくくなってしまうので、結果としてそのwebページの価値も下がってしまいます。

こうした状態を避けるためには、提示する情報に優先順位をつけることが大切です。そうすることで、自ずとユーザーに提示すべき情報とそうでない情報を分けられるようになり、webページの内容をシンプルにまとめられます。

ユーザーの目線でデザインする

ユーザーに快適なUXを提供するためのUIを構築するためには、ユーザーの目線を意識しなくてはいけません。ユーザーがどのような順番や向きで提示された情報を追っていくかがわかれば、それに沿って情報を配置することでユーザーが情報を取得しやすい構成のwebページを作ることができるからです。一般的に、webページを閲覧する際、ユーザーは視線を左上から右下にかけて動かす傾向にあるといわれています。この動きは、ちょうどアルファベットの「F」の字を描くように動くことから、「Fの法則」とも呼ばれています。そのため、提示する情報を左上から右下にかけて配置することで閲覧がスムーズになるのです。そして、ユーザーの視線の動きに合わせた情報の配置ができ、優れたUXをユーザーに提供できます。

デバイスごとのUIを考える

スマホやタブレットなどの急激な普及によって、webページを閲覧するためのデバイスはパソコン以外にも増えてきました。そのため、どんなUIが快適かもまた、どのデバイスを用いるかによって異なるようになっています。パソコンで快適にwebページを閲覧できるUIは、ほかのデバイスでも同じように快適であるとは限らないのです。そのため、UIをデザインする際には、まずユーザーがどんなデバイスを用いるかを想定し、それに合わせたUIデザインを行う必要があるのです。

例として、パソコンとスマホを比較してみましょう。パソコンは横長のディスプレイが主流であるため表示に横幅を大きく取っても問題ありませんが、縦方向にスクロールが長すぎると読みづらくなります。逆にスマホの場合は縦長の画面なので縦スクロールが長くなってもあまり支障はありませんが、横方向に広い配置には向きません。このように、UIにはデバイスによって適切なデザインを使い分ける必要があるのです。

ユーザビリティテストをする

UIを制作する側は、当然のことですがユーザーよりもUIについて多くの知識を持っていますし、そうでなくてはいけません。しかし、UIクリエイターは、UIについて深く知りすぎているがゆえに、しばしばユーザーと同じ目線でUIを見ることが苦手なことがあるのです。そのため、UIにユーザー側にとって明らかな不具合や欠陥があっても、制作する側の立場からはそれがわからず見逃してしまうことがあります。これを防ぐためには、必ずユーザビリティテストを行う必要があるのです。

ユーザビリティテストとは、テスト対象となるUIについて事前知識や情報を持たないユーザーにUIを使用してもらい、その様子をモニターするテストのことです。テストを行うユーザーは、対象となるUIについて何も知らないので、フラットな立場からそのUIの使い心地の良し悪しを判断し、不具合を見つけることができます。優れたUIを構築するためには、このユーザビリティテストを早い段階から行うことが有効です。UIのプロトタイプが完成したら早速ユーザビリティテストを行い、そこから得られた結果をもとにUIを改変していけば、完成度の高いUIが出来上がるでしょう。

UIデザインのスキル向上のために取り組みたいこと

優れたUIを構築できるようになるには、スキルの向上が欠かせません。ここでは、UIデザインのスキル向上のために取り組みたいことを2つピックアップして解説していきます。

実践を積み重ねる

UI構築に必要な知識や情報は、各種書籍やセミナーなどから吸収することができます。しかし、せっかくそうした知識や情報を蓄えても、実践しなくては意味がありません。インプットした情報を活用して実際にUIの作成というアウトプットを行うことは非常に重要です。たくさんのUIを作成して実践を重ねていくことは、もちろん成果物を作り出すために必要となります。しかし、それ以外にも、たくさんの実践を経ることで、自分に足りない知識や情報が見つかったり、新しいUIのひらめきを得られたりすることができるのです。そうした意味でも、実践の積み重ねは地味ですが優れたUIの構築の礎となるでしょう。

有名なサービスを分析する

優秀なUIを構築するためには、既存のUIの分析も重要です。有名で人気のあるサービスには、必ずその理由があります。サービス内容を分析することで人気の理由がわかれば、それを自身のUI制作に取り入れることができるのです。優れたUIの秘密を理解するためには、まず自分が有名なサービスに実際に触れてみて、分析をしてみるのがいいでしょう。そうすれば、自分のUIに取り入れたいエッセンスが見つかるはずです。