知って得するIT用語「UI(ユーザーインターフェース)」とは

記事更新日: 2020/06/30

ライター: せきぞー

気になるWebサイトでのブラウザサービスやアプリなどがあった場合は、

口コミサイトなどで実際に利用した人の評判を確認してから自分も使ってみるかを決めるといったことが近年では一般的になっているといえます。

 

最近、そんな口コミサイトなどで

 

このサイト(アプリ)はUIがすごく良くできている!

UIがわかりやすいのでとても簡単に使えます!

といったように「UI」という言葉が使われているのを見たことがある人は多いのではないでしょうか?

 

初めて聞いた人にとっては何かの単語を省略したものだろうということくらいしか推測がつかないため、

前後の文章からなんとなくはわかるけど説明しろといわれて説明できる人は少ないのではないでしょうか?

 

今回はそんなUIについてはっきりとわかっていない部分をUIに関わる用語も含めて詳しく解説していきたいと思います。

UIとは?

UIとはユーザーインターフェース(User Interface)の略のことで、大きな枠組みでとらえると「物と人」を繋ぐ対象のことをいいます。

※ここでいう「物」とは物質ではなくサービスそのもののことを指します。

 

インターフェースとは

UIの意味を理解する上でまずインターフェースという言葉について知る必要があります。

インターフェースとは「物と物とのあいだにはいっているつなぎ役」といった意味があり、主にIT関連で使われています。

なかでも一番代表的に使われる言葉がユーザーインターフェース(UI)で

Webサイトやアプリなど「サービスを提供する側」と「サービスを受ける側(ユーザー)」をつなぐPCやスマホに表示される画面そのものを表す時などに使用されます。

 

その他にもインターフェースは繋がれる対象によって呼び方が大きく3種類に分類されます。

 

  • ハードウェアインターフェース:ケーブルなどを用いて「装置と装置」を接続する(USBケーブル、電源ケーブルなど)

  • ソフトウェアインターフェース:「アプリとアプリ」や「アプリとスマホ」のデータをやりとりするための仕組み(APIなど)

  • ユーザーインターフェース:「サービスと人」をつなぐための仕組み(PC、スマホ画面でアプリを操作する)

 

UIが良いとは?

身近なものに例えて考えてみる

ここまでの説明を聞いてなんとなくUIの概要がわかったところで「じゃあ良いUIってのはどういったものか?」といった疑問まで解消するのは難しいのではないでしょうか。

これはユーザーインターフェース(UI)はユーザーから見て対象物が物質ではないためイメージが若干湧きづらいことが原因かもしれません。

 

しかし、ユーザーから見た対象を身の回りの物質に置き換えることで簡単にイメージがしやすくなります。

 

例えば、UIをメガネに置き換えたとします。

メガネは「物質と人の眼のあいだ」のつなぎ役であり、メガネをかけることによって対象物を良く見ることができるようになります。

 

ではどういったメガネだと「良いメガネ」と言われるのでしょうか?

 

おそらくメガネを選ぶ時に多くの方が気にしているのは「デザイン」と「かけごごち」ではないでしょうか?

 

極端な話ですが、

もし仮にフレームがレンズの面積よりも広いデザインのメガネがあったとしたらあなたはそれを常用のメガネとしてかけたいと思うでしょうか?

おそらくかけたいと思う人は全世界人口の1%にも満たないでしょう。

メガネのデザインはなるべくシンプルで汎用性のあるものを好む人が大半だと思います。

 

さらにかけごごちについてはどうでしょうか?

耳や鼻が痛くならない、顔を動かしたりしてもズレたりしないなど長時間身につけていても負担に感じないものを多くの人は望んでいるはずです。

 

その他にも、かけない時は折りたためるようになっているか、壊れにくいようにフレームの中がステンレスなどで骨組みされているか、レンズの中に不純物が混ざっていないか、左右の耳の高さに合わせられるかなど

 

総じて利用する側にとってどれだけ使い勝手が良いかという点がメガネの良し悪しを決める上で大事なポイントとなってきます。

 

良いUIデザインとは

上記の点を踏まえてUIが良いと呼ばれるWebサービスやアプリにはどのような特徴があるのかをいくつか挙げていきたいと思います。

 

可視性が良い

読みやすいフォントが使われているか、段落を意識して適切なサイズで使い分けされているか。

サイト全体の画像やアイコン、文字がバランス良く配置されているか、適度な余白が設定されているか。

 

クリッカブルかどうかがわかりやすい

テキストなどが青いテキストカラーにアンダーラインが引かれていたり、バナーやアイコンなどリンク付きのものでクリックすると別のページへ飛んだり、違う動作が起こるということがわかりやすく設定されているか。

 

クリック・タップがしやすい

クリッカブルなテキストやボタンがちいさくてクリックやタップがしづらくないないか。

 

機能を理解しやすい

アイコンやボタンなど「これを押したら何がおこるか」が見ただけで自然とイメージができるデザインになっているか。

例)虫眼鏡のアイコンをクリックしたら検索ボックスが表示される

情報理解がしやすい

文字の情報と、カラーやフォントに整合性がとれているかなど、スムーズに情報が理解できるようにしっかり設計ができているか。


UIデザインの改善案

インタラクションコストを下げる

インタラクションとはinter(相互に) とaction(作用する)が合わさった言葉です。

 

ユーザーがサイトやアプリを訪れて(アクション)から目当ての情報まで到達する(リアクション)までにかかる労力のことをインタラクションコストといいます。

 

つまりこれまで並べてきた良いUIの特徴は総じてインタラクションコストと呼べます。

そして良いUIデザインを考案するにはインタラクションコストを下げることが極めて重要になってくるということになります。

 

その他のインタラクションコストの具体的な内容には、

画面のスクロールのしやすさ、ページの読み込み速度、検索時のサジェスト機能の有無などが当てはまってきます。

 

インタラクションコストを効果的に下げるにはどこにどれくらいのコストがかかってくるかなど、サイト全体を俯瞰的に眺め、サイト内のページ遷移や導線設計などを考えるような取り組みが必要になってくるといえます。

 

おわりに

今回はUIがどういったもので、UIの良いサービス、良いUIデザインにするための改善策までご紹介させていただきました。

UIがどういったもので、どんな工夫でUIが良くみえてくるのかということまで意識しながらサイトやアプリを眺めていくとほんとうに良いサービスとはどういったものなのかがわかってくるようになるかもしれません。

この記事を書いたライター

せきぞー

普段は野外イベントの設営など行っています。

出来るだけ読者の方の視点に立った執筆を心がけていきます!

物静かな性格なため時折南の島に佇む某石像と勘違いされることもあるとか、ないとか。

Twitter:@100Sekizo

この記事に関連するラベル

ページトップへ