Blog スタッフブログ

WEB制作 デザイン

UIデザインに関する基本と考え方

こんにちは、デザイナーのMです。

突然ですが、UIとは何ですか?と人に聞かれたとき、あなたならどう説明しますか。
よく耳にする言葉であり、なんとなくは知っているものの、分かりやすく説明してほしいと言われると…アレ?意外と難しい…「UI」は、そんな用語の筆頭ではないでしょうか。

(何を隠そう、私も昔はそんな一人でした…)

ユーザーに選んでもらえるWebデザインやアプリを作るためには、UIを理解することはとても重要です。
今回はその「UIとは何か?」といった基本的な部分を簡単に紹介していきます。

そもそもUIデザインとは?

UIは、ユーザーインターフェース(User Inerface)の頭文字をとって作られた略称です。
直訳は「ユーザーの接点、境界面」で、その名の通りWebやアプリでユーザーが“触れる”箇所のことを指す言葉です。
電源ボタンなどの物理的なボタンからディスプレイ上に表示される操作ボタンまで、これらをひっくるめてUIと呼びます。

ユーザーのニーズや使いやすさを最重要視したインターフェースを作り上げる作業を「UIデザイン」と呼びます。見栄えを重視したアート的な考え方とは対極にあるデザインです。

UIとUX(ユーザーエクスペリエンス)の違い

UIとセットで語られることが多く、混同されがちな用語にUX(ユーザーエクスペリエンス)があります。
直訳は「ユーザーの体験」で、その名の通りWebやアプリでユーザーが“何を経験したのか” “何を感じたのか”といったことの全てを指す言葉です。

両者の違いをアプリを例に簡単に言うと、ユーザーの操作画面が「UI」で、アプリを使ってユーザーが何を体験したかが「UX」ということになります。

UI(ユーザーがアプリ上で操作する画面)
UX(ユーザーがアプリで何を体験したか)

用語の具体的な使い方としては、「UX(ユーザーの体験)向上のためにUIデザインをより良いものにする」といったイメージでしょうか。

まずここをおさえる!UIデザインの基本的な10のルール

ユーザーがWebサイトやアプリを使うときには当然、それを使う目的やゴールがあります。
何かを知りたい、何かをやりたい…こういったユーザーの要望をスムーズに叶えるために、Webサイトやアプリを使いやすく整えるというのがUIデザインの基本の考え方です。

そのためにまずおさえるべき、基本的な10のルールが以下になります。

01.少しでもユーザーの疑問点を無くし、アクションの回数をとにかく「減らす」ことを目標にする

02.「ターゲット層」を絞り込み、最適なデザインを考える

03.ユーザーに「今、何をしてほしいのか」というゴールを明確にして強調する

04.ワクワクする言い回しと明確な伝え方でユーザーに対して「期待感」を与える

05.混乱を避けるために、アイコンは既存の確立されたものを使用する(新コンセプトの時以外)

06.画面内で優先順位を決め、重要な情報に強弱をつけてメリハリを出す

07.関連性の高い情報をまとめ、一定のルールを決めてそれに沿って並べる

08.レイアウトや見出しを統一して、同じパターンを反復して使うことでテンポを作る

09.フォーム入力欄はできるだけ情報を少なくし、その時点で不要な情報は要求しない

10.空っぽの初期ページはテキストやヒントを置いて工夫し、ユーザーの初期行動を促す

まとめ

いかがでしたでしょうか。

「極力ユーザーに考えこませない設計」「サービスや商品をユーザーが迷わず快適に利用できる設計」を行う、といった基本的な考え方をまずおさえておけば、優れたUIデザインを制作するための土台になります。

デザインにおいてビジュアル(見た目)の良さはもちろん大切ですが、ユーザー目線で共感し、己のデザインを何度も客観視し、「ユーザーの心地よさ」を目指して全力を尽くすという点で、UIデザインとグラフィックデザインには明確な違いがあると言えます。


基本を大切に、流行と傾向を押さえつつ、使いやすいUIデザインを目指して進む一助に、当記事がなれば幸いです。