UIデザインは、webサイトやアプリを制作する上で重要なポイントといわれています。
しかし、中には
「UIデザインはなぜ重要なのかわからない」
「どうやってUIデザインを考えたらいいのか悩んでいる」
という方もいらっしゃるかもしれません。

そこでこの記事では、UIデザインの基礎や事例について、わかりやすく解説します。ぜひご一読いただき、サイト制作などを行う際の参考にしてください。

 

UIデザインはユーザーの快適な利用につなげる大事な要素

UIデザインとは、簡単にいえば「ユーザーがwebサイトやアプリを快適に使うための設計」です。

UIは、User Interface（ユーザーインターフェーズ）の頭文字を取ったものです。Interfaceには「境界面」や「仲介」などの意味があり、IT用語的には、「ヒト（ユーザー）」と「モノ（機器、プログラムなど）」をつなぐ役割を果たすものといえます。

具体的には、Webサイトのフォント、イラスト、入力欄など、ありとあらゆるものがUIとなります。

これらUIを、いかにユーザーにとって使いやすいものにできるか。それがUIデザインの本質です。

 

なぜUIデザインが大切なのか

なぜUIデザインが大切なのかというと、UIデザインが優れているか否かで、サービスの利用率に大きく影響するからです。

UIデザインが悪いサイトがどんなものかというと、

・ユーザーから見て、欲しい情報がどこにあるのかわからない
・文字や絵がごちゃごちゃしていて見づらい
・予約や検索のやり方がわからない

などがあります。

いくら企業の側から良い情報を発信していたとしても、ユーザーに「このサイトは使いにくい」と判断されれば、購入や予約につながることなく離脱されてしまいます。

それを避けるためにも、ユーザーがスムーズに使えるUIデザインを意識する必要があります。

 

UIデザインをする上で押さえたい４つの基礎ポイント

デザインをする上で、４つの大切なポイントがあるといわれています。デザインの名著『ノンデザイナーズ・デザインブック』（著者：Robin Williams）によれば、

・近接
・整列
・コントラスト
・反復

がデザインの基本原則です。UIデザインを考える上でも役立つため、１つずつ見ていきましょう。

近接

複数の情報がある中で、関連するものを近づけることです。

例えば、「りんご、にんじん、レタス、ぶどう」があったとしたら、「りんご、ぶどう」「にんじん、レタス」のように、近い属性同士をまとめる、と考えるとよいでしょう。
ユーザーにとって、内容が把握しやすくなります。

整列

ばらばらに散らばっている情報を、きちんと並べることです。

具体的には、横書きの文章を左揃えにする、図やイラストの余白をそろえる、などが考えられます。
視点が集約されるため、非常に見やすくなります。

コントラスト

情報に強弱をつけて目立たせることです。

例えば、太字にする、サイズを変える、赤など印象が強い色をつける、アイコンを付ける、といった方法があります。
目につきやすいため、重要なポイントを強調したい場合に効果的です。

反復

同じパターンを繰り返し使うことです。

具体的には、レイアウトや色、モチーフなどの要素を何度も使って一貫性を持たせます。
全体に統一感が生まれるため、ユーザーも情報を理解しやすくなります。

 

参考になるUIデザインのwebサイト・アプリ事例５選

こちらでは、優れたUIデザインのwebサイトやスマートフォンアプリをご紹介します。
具体的なイメージを描くためにも、ぜひ参考にしてください。

Google：シンプル・イズ・ベストの検索エンジン

検索エンジン最大手のGoogle。

ページのデザインは非常にシンプルで、Googleのロゴのほかには、検索窓がページの真ん中に表示されているだけです。

しかし、ユーザーはサイトを開いた瞬間に、自分が何をすればいいのかが一目でわかることでしょう。「使いやすさ」「わかりやすさ」がとことん追求された好例です。

神戸女子大学公式サイト：流行のタイポグラフィを活用したサイト

2018年現在の流行の１つに「タイポグラフィ」があります。簡単にいえば、「文字による表現」であり、文字をデザイン的に活用する方法です。

神戸女子大学のサイトでは、神戸女子大生を表す「Shinjo」の文字が、ページを開いたときに目に飛び込んできて、強いインパクトを与えます。

説明文の文字にも読みやすいフォントが使われており、文字の力を生かしたデザインといえます。

Spotify：トレンドのグラデーションとシンプルな構造のサイト

音楽配信サービスのSpotifyのサイトでは、2018年現在のカラートレンドであるグラデーションが綺麗に使われています。配色も明るい色が選ばれ、音楽を聴くワクワク感を演出しています。

文字も大きくて見やすいほか、ページ構造自体もシンプルなので、ユーザーは欲しい情報にたどり着きやすくなっています。

ルナルナ：一目で体調管理が可能なユーザーに寄り添うアプリ

女性に人気の生理日管理アプリです。また、男性のバイオリズム計測にも使えます。

データの入力がやりやすく、体調管理もグラフやカレンダーの形で簡単にチェックできるようになっています。また、体調に関するアドバイスを毎日配信し、ユーザーに安心感や心構えを示してくれるのもポイントです。

Trello：直感的に操作できるタスク管理アプリ

ふせんを使うイメージでタスク管理ができるアプリです。

使い方は、デジタルふせんともいえる「カード」にタスクを入力し、「ボード」にカードを貼り付けたり、削除したりするだけ。

指一本でカードやボードの移動ができるほか、「タップすると、カードやボードが斜めになる」という動きが、ふせんの張り替えを連想させてくれます。

 

おわりに

UIデザインについて、改めてまとめます。

UIデザインとは、
・デザインの出来がサービスの利用率に影響する
・「近接・整列・コントラスト・反復」の４つがデザインの基礎

以上、紹介したポイントやUIデザイン事例などを参考にしていただき、ぜひサイトやアプリの制作にお役立てください。

 

しかし、いざUIデザインを意識して制作をしようとしても、思うようなデザインができなかったり、ユーザーの満足度につながらなかったりするかもしれません。

パンタグラフでは、UIデザインについて、クライアント様のご希望を満たし、ユーザーの使いやすさにもこだわったwebサイトやアプリの設計・制作を行なっています。

UIデザインについてお悩みやお困りの点などがあれば、ぜひお気軽にお問い合わせください。