毎月数社限定トライアル

ヒューリスティック分析事例集 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

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

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

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

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

神戸女子大学

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

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

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

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

Spotify

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

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

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

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

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

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

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

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

 

おわりに

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

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

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

 

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

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

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

pagetop

パンタグラフブログとは?

パンタグラフブログは、社内のメンバーがデジタルマーケティングに関する情報を積極的に配信するためのブログです。トレンドやノウハウ、成功事例やリサーチ情報を定期的に配信しています。このブログがきっかけでお問い合わせいただくこともあります。気になる方は、パンタグラフ通信(メルマガ)へのご登録をお願いいたします。

最新トレンドやWebマーケティングに関するお役立ち情報を随時配信中
自社サービスの成長やマーケティングのネタにお役立てください。

メールアドレスを入力してください

メールアドレスを正しく入力してください

メールアドレスのご登録ありがとうございました