毎月数社限定トライアル
ヒューリスティック分析事例集 Trial of Heuristic report
資料ダウンロードはこちら
UIデザインとは何かを勉強しよう!基礎知識と参考事例5選まとめ
UI/UXデザイン 2018.12.14

UIデザインは、webサイトやアプリを制作する上で重要なポイントといわれています。
しかし、中には
「UIデザインはなぜ重要なのかわからない」
「どうやってUIデザインを考えたらいいのか悩んでいる」
という方もいらっしゃるかもしれません。
そこでこの記事では、UIデザインの基礎や事例について、わかりやすく解説します。ぜひご一読いただき、サイト制作などを行う際の参考にしてください。
目次
UIデザインはユーザーの快適な利用につなげる大事な要素
UIデザインとは、簡単にいえば「ユーザーがwebサイトやアプリを快適に使うための設計」です。
UIは、User Interface(ユーザーインターフェーズ)の頭文字を取ったものです。Interfaceには「境界面」や「仲介」などの意味があり、IT用語的には、「ヒト(ユーザー)」と「モノ(機器、プログラムなど)」をつなぐ役割を果たすものといえます。
具体的には、Webサイトのフォント、イラスト、入力欄など、ありとあらゆるものがUIとなります。
これらUIを、いかにユーザーにとって使いやすいものにできるか。それがUIデザインの本質です。
なぜUIデザインが大切なのか
なぜUIデザインが大切なのかというと、UIデザインが優れているか否かで、サービスの利用率に大きく影響するからです。
UIデザインが悪いサイトがどんなものかというと、
・ユーザーから見て、欲しい情報がどこにあるのかわからない
・文字や絵がごちゃごちゃしていて見づらい
・予約や検索のやり方がわからない
などがあります。
いくら企業の側から良い情報を発信していたとしても、ユーザーに「このサイトは使いにくい」と判断されれば、購入や予約につながることなく離脱されてしまいます。
それを避けるためにも、ユーザーがスムーズに使えるUIデザインを意識する必要があります。
UIデザインをする上で押さえたい4つの基礎ポイント
デザインをする上で、4つの大切なポイントがあるといわれています。デザインの名著『ノンデザイナーズ・デザインブック』(著者:Robin Williams)によれば、
・近接
・整列
・コントラスト
・反復
がデザインの基本原則です。UIデザインを考える上でも役立つため、1つずつ見ていきましょう。
近接
複数の情報がある中で、関連するものを近づけることです。

<近接のイメージ>
例えば、「りんご、にんじん、レタス、ぶどう」があったとしたら、「りんご、ぶどう」「にんじん、レタス」のように、近い属性同士をまとめる、と考えるとよいでしょう。
ユーザーにとって、内容が把握しやすくなります。
整列
ばらばらに散らばっている情報を、きちんと並べることです。

<整列のイメージ>
具体的には、横書きの文章を左揃えにする、図やイラストの余白をそろえる、などが考えられます。
視点が集約されるため、非常に見やすくなります。
コントラスト
情報に強弱をつけて目立たせることです。

<コントラストのイメージ>
例えば、太字にする、サイズを変える、赤など印象が強い色をつける、アイコンを付ける、といった方法があります。
目につきやすいため、重要なポイントを強調したい場合に効果的です。
反復
同じパターンを繰り返し使うことです。

<反復のイメージ>
具体的には、レイアウトや色、モチーフなどの要素を何度も使って一貫性を持たせます。
全体に統一感が生まれるため、ユーザーも情報を理解しやすくなります。
参考になるUIデザインのwebサイト・アプリ事例5選
こちらでは、優れたUIデザインのwebサイトやスマートフォンアプリをご紹介します。
具体的なイメージを描くためにも、ぜひ参考にしてください。
Google:シンプル・イズ・ベストの検索エンジン
検索エンジン最大手のGoogle。
ページのデザインは非常にシンプルで、Googleのロゴのほかには、検索窓がページの真ん中に表示されているだけです。
しかし、ユーザーはサイトを開いた瞬間に、自分が何をすればいいのかが一目でわかることでしょう。「使いやすさ」「わかりやすさ」がとことん追求された好例です。
神戸女子大学公式サイト:流行のタイポグラフィを活用したサイト
2018年現在の流行の1つに「タイポグラフィ」があります。簡単にいえば、「文字による表現」であり、文字をデザイン的に活用する方法です。
神戸女子大学のサイトでは、神戸女子大生を表す「Shinjo」の文字が、ページを開いたときに目に飛び込んできて、強いインパクトを与えます。
説明文の文字にも読みやすいフォントが使われており、文字の力を生かしたデザインといえます。
Spotify:トレンドのグラデーションとシンプルな構造のサイト
音楽配信サービスのSpotifyのサイトでは、2018年現在のカラートレンドであるグラデーションが綺麗に使われています。配色も明るい色が選ばれ、音楽を聴くワクワク感を演出しています。
文字も大きくて見やすいほか、ページ構造自体もシンプルなので、ユーザーは欲しい情報にたどり着きやすくなっています。
ルナルナ:一目で体調管理が可能なユーザーに寄り添うアプリ
女性に人気の生理日管理アプリです。また、男性のバイオリズム計測にも使えます。
データの入力がやりやすく、体調管理もグラフやカレンダーの形で簡単にチェックできるようになっています。また、体調に関するアドバイスを毎日配信し、ユーザーに安心感や心構えを示してくれるのもポイントです。
Trello:直感的に操作できるタスク管理アプリ
ふせんを使うイメージでタスク管理ができるアプリです。
使い方は、デジタルふせんともいえる「カード」にタスクを入力し、「ボード」にカードを貼り付けたり、削除したりするだけ。
指一本でカードやボードの移動ができるほか、「タップすると、カードやボードが斜めになる」という動きが、ふせんの張り替えを連想させてくれます。
おわりに
UIデザインについて、改めてまとめます。
UIデザインとは、
・デザインの出来がサービスの利用率に影響する
・「近接・整列・コントラスト・反復」の4つがデザインの基礎
以上、紹介したポイントやUIデザイン事例などを参考にしていただき、ぜひサイトやアプリの制作にお役立てください。
しかし、いざUIデザインを意識して制作をしようとしても、思うようなデザインができなかったり、ユーザーの満足度につながらなかったりするかもしれません。
パンタグラフでは、UIデザインについて、クライアント様のご希望を満たし、ユーザーの使いやすさにもこだわったwebサイトやアプリの設計・制作を行なっています。
UIデザインについてお悩みやお困りの点などがあれば、ぜひお気軽にお問い合わせください。
関連する記事