インターフェースって何？UIとデザインの関係性をわかりやすく解説

WEBデザイナーという仕事に興味を持ち今年度入社しました、株式会社レベルスの水口です。
右も左もわからずIT業界のいろいろな事を勉強中の身ですがよろしくお願いいたします。

今回はWEB制作をするなら知っておきたい、『UI』についてお話ししたいと思います。
コンピューターが誕生した当初はキーボードしか操作できるものはなく、コマンドラインに相当する入力方式を使用していたため専門に扱っている人以外はとても使いにくいとされていました。それがGUIというインターフェースができたことにより、カーソルを使ってファイルを選ぶ、捨てる、リンク先に飛ぶなどの操作が簡単になったことで、誰でもパソコンが使えるようになりました。

1.UIについて

UIとは、User Interface(ユーザーインターフェース・使用者インターフェース)のことです。Interfaceは「接点」「接触面」という意味で、UIはユーザーと製品やサービスの接点を表します。
「ユーザーが見たりに触れたりするるもの」つまり、ホームページのデザイン、フォント、エレベーターやタブレットのボタンなどディスプレイ上に表現しユーザーが使用できるようにする方法のことをUIに言います。
入力（ユーザーがシステムを操作する手段）
出力（ユーザーが操作した結果システムが生成したものを提示する手段)がUIのできることとなります。

2.インターフェースについて

そもそもインターフェースの意味がわからなければ、何のことを言っているのかあまりピンとこないかもしれません。インターフェースは日本語で「接点」「中間面」「境界」という意味になります。わかりやすく言えば「何かと何かを繋ぐもの」ということになりますね。つまりITにおけるインターフェースは
「コンピューターと周辺機器をつなぐ接続部分」あるいは「コンピューターと人を繋ぐもの」のことを指します。

【1】ハードウェアインターフェース

PCとプリンターを繋ぐケーブルなどのように、ハードウェア(機械)どうしを繋ぐもののことです。ほとんどのハードウェアインターフェースには規格というものがあるので製造メーカーが違っていても同じケーブルで繋ぐことが可能です。

【2】ソフトウェアインターフェース

API (Application Programming Interface)アプリケーション・プログラミング・インターフェースなどが代表的で、あるソフトウェアから別のソフトウェアへの機能のやり取りをする仕様のことを言います。

【3】ヒューマンインターフェース・ユーザーインターフェース

ヒューマンインターフェースは、人とデバイスの間で情報を伝達するための入出力装置(キーボード、ディスプレイ)の事を指します。
ユーザーインターフェースは、ヒューマンインターフェースよりデザインなど視覚的なものを指しています。

3.UIデザインについて

上記でUIとはコンピューターとユーザーを繋ぐものと説明しました。
サイトやデバイス使おう、見ようと思わせるためにはUIデザインというものが重要となります。
UIデザインとは、簡単にいえば「ユーザーがwebサイトやアプリを快適に使うための設計」です。
フォント、イラスト、入力欄などをいかにユーザーにとって使いやすいものにできるかというものがUIデザインの本質です。

このUIデザインが悪いと、ユーザーが見て「ほしい情報がどこに書かれているかわからない」「ごちゃごちゃしていて見にくい」「検索や予約などサイトの使い方がわからない」という問題が出てきてしまいます。
そうなると「このサイトは使いにくいから見ない。」とユーザーは判断してしまい、どれだけ素敵な情報があっても利用されなくなってしまうのです。

【1】見やすいサイトを作るのに必要なこと

サイトを見やすくするためには以下のことに注意すると綺麗に仕上げることが出来ます。
・関連している情報を「近接させる」
・散乱している情報や文章を「整列させる」
・重要な情報とそうでない情報に強弱をつけ「コントラストをはっきりさせる」
・サイトの途中でコンセプトや書き方を変えず、パターンを「反復して使う」

【2】デザインとアートの違い

よく勘違いされているのが、アートを手がける人はデザインができる、デザインをやる人はアートも得意ということです。できる人もいると思いますが、実はデザインとアートは全然違くて、アートを描くのは得意だけどデザインは苦手という方は結構多いです。
これは「デザインは問題解決のために」ビジュアルを考え、「アートは自己表現のために」キャンバスに描き出しているという違いがあるためだと思います。

デザイナーは見た目を綺麗にするだけでなく、仕事の問題を解決する事が仕事です。
販売意欲を出させたり、お知らせやサービス内容など何に注目してほしいかなどをを考えて目標達成、問題解決に努めなくてはなりません。
・情報がわかりやく整理されている
・使いやすい機能性
・ユーザーを惹きつける綺麗な見た目
(レイアウトや色使い、文字の大きさ、ロゴやアイコンなどをバランスを見ながら作成する)

【3】デザイナーの種類

ファッションやイラスト関連などデザイナーにもいくつか種類がありますが、その中のITのデザイナーの一部を紹介します。
・WEBデザイナー
ホームページなどサイトのデザインを行う、ビジュアルの設計だけでなくHTMLやCSSのコーディングなども行います。UIデザイナーを兼任することも多くあります。

・UIデザイナー
ユーザーインターフェースの設計を行う。webデザイナーに似ているが、UIデザイナーはUIの使いやすさや設計に特化しています。

・アートディレクター
コンセプトの立案、制作スタッフのとりまとめ、デザインマネジメントなどの制作全般における視覚表現の責任者になります。

4.まとめ

UIはいま、世の中に溢れています。ゲームや飲食店のオーダー用のタブレット、このサイトを見ているパソコンや携帯などもUIと言えますね。

物の販売や制作のためには、それを購入したり支援する人がいなくてはなりません。
そのユーザーを獲得するためにUIはとても重要です。
情報を目にしなければ気になりませんし、デザインや使いやすさが良ければさ更に知ろうと思わせることが出来ます。せっかく興味が出たのに「よく分からないから」良いや。では勿体無いですよね。デザインをする時は伝えたいことに見やすさ、分かりやすさに注意してください。