UIデザインとは?定義から事例までマルッと解説!

UIデザインとは

UIデザインは、ユーザーがスムーズに、プロダクトやサービスを使えるように設計を行なうことをいい、webサイトやアプリを作成するうえで、重要なポイントです。

どんなに便利なサービスを作っても、使いにくい設計になっていれば、ユーザーはサービスに定着することなく、終わってしまいます。

つまり、UIデザインはユーザーのサービス利用率とも深く関係を持っているといえるのです。

UIデザインの意味

UIデザインは、サービスやプロダクトと、ユーザーの接点を表す言葉であり、「webサイトやアプリをユーザーが、快適に使用するための設計」のことを指します。

UIは、User Interface(ユーザーインターフェース)の頭文字を、取った言葉で、Interfaceには「境界線」「仲介」などの意味を持つため、IT用語では、『「ヒト(ユーザー)」と「モノ(機器やプログラム)」を役割を果たすもの』を意味しています。

具体的にUIは、webサイトのフォントやイラスト、入力欄など、あらゆるものをいいます。

UIデザインの本質は、『いかにユーザーにとって、使いやすいものを作り出すことができるか』ということです。

UXデザインとの違い

UIと似た言葉で「UX(ユーザーエクスペリエンス)」というものが存在し、混同されることがしばしばあります。

UXデザインは、webサイト、アプリを利用する時だけでなく、利用前の期待や利用後の印象を含めた「ユーザー体験」のことを指します。

加えて、UIデザインは「webサイト、アプリの設計品質」が主な対象なのに比べて、UXデザインは、「ユーザーの利用品質」を考えることが主な目的、対象です。

また、UIはUXの一部であり、ユーザーとサービスやプロダクトの接点を持っています。

UXデザインの詳しい内容はこちら

ビジュアルデザインとの違い

デザインという言葉を聞いて思い浮かぶものは、一般的に「ビジュアルデザイン」であることがほとんどです。

ビジュアルデザインは、装飾や色合い、写真やイラストというような「ビジュアル(見た目)」よりも「良い印象(狙った印象)を与えること」を、目的としています。

一方、UIデザインの目的は、「ユーザーがサイトやアプリを、スムーズに使えるようにすること」です。

これまでは、実務上「ビジュアルデザイン」と「UIデザイン」を、一人のデザイナーが担当することが多く、「ビジュアルデザイン」と「UIデザイン」は親密で、不可欠な関係でした。

しかし、UIデザインとビジュアルデザインの目的は異なっていて、UIデザインの重要度が上がるにつれて、UIデザイナ―にも、より専門的なスキルや知識が求められています。

デザイナーである『はじめてのポートフォリオづくり』(https://booth.pm/ja/items/745541)

というデザインに役立つ小冊子を作成したスズキアユミさんによると、『webデザイナー(ビジュアルデザイナー)は、「装飾美」を重視し、UIデザイナーは、「機能美」をより重要視する傾向にある』そうです。

加えて、webデザイナー(ビジュアルデザイナー)には、ビジュアル表現力が求められているのに対して、UIデザイナーには、設計力が求められる点をみると、「UIデザイン」と「ビジュアルデザイン」の役割は、大きく枝分かれしているといえます。

サービスやプロダクトにおけるUIデザインの重要性

UIデザインは、webサイトやアプリなどの、様々なサービスやプロダクトで重要視されています。

そこから、UIデザインは、ユーザーのサービス利用率と大きく関係しているといえます。

サービスやプロダクトを作成するうえでは、どんなに便利な機能やコンテンツを企業側が用意したとしても、見た目や使い勝手が悪く、ユーザーが求めていた情報にたどり着くことができなければ、サービスがユーザーに定着することはありません。

しかしながら、考え方を変えると、ユーザーの目的にあった使いやすいUIを設計することによって、ユーザー満足度が高まり、顧客体験価値が向上することで、サービスへの定着率が上がっていきます。

優れたUIデザインの原則とは

UI専門家である、Steve Krug氏(スティーブ・クリュッグ氏)によると、『優れたUIは、ユーザーに考えさせない(Don’t make me think)デザイン』であるといわれています。

ユーザーに考えさせないデザインとは、感覚的にユーザーが情報を理解でき、操作できるデザインということです。

ユーザーが考えたり迷ったりすることなく、自分の目的に沿ったアクションをスムーズに行なうことができることが重要になっています。

UI設計のポイント

ユーザーに考えさせないUIデザインを作り出すために、どのようなことに気を付ければ良いのでしょうか。

UIデザインの基本原則を、解説した名著『ノンデザイナーズ・デザインブック』によると、UI設計を行なうときの基本的ポイントは、

・近接

・整列

・対比

・反復

の四つになります。

ここからは、この四つについて詳しく解説していきます。

ポイント① 近接

「近接」は、関連性の高い情報を、グループ化することを指します。

関連性の高い情報をまとめることによって、情報量が同じであっても、ユーザーがより内容を把握しやすくなるというメリットがあります。

ポイント② 整列

「整列」は、情報を処理、整理し、ルールに沿って並べることです。

文章の中で要素を羅列するのではなく、箇条書きにすることによってユーザーの混乱を防ぐことが可能になります。

ポイント③ 対比

「対比(コントラスト)」は、重要な情報に強弱を付けて、目立たせることをいいます。

具体的には、重要な用語を太字にする、フォントの色やサイズを変更するなどの装飾を使用するといった方法をあげることができます。

ポイント④ 反復

「反復」は、同じパターンを、類似した要素に対して、くりかえし使うことです。

具体的にいうと、色の統一やレイアウト、見出しの体制を整えるなどがあげられます。

同じパターンを何度も繰り返すことによって、ユーザーがそのページのレイアウトに慣れていき、ページ内容を理解するのに、かかる時間や負荷を下げることが可能になります。

UIデザインのトレンドはオブジェクト指向UI(OOUI)

オブジェクト指向UIは、UIデザインのトレンドで、再評価されているものです。

オブジェクト指向UIとは

オブジェクトとは、「対象」「目的」といった意味を持っています。

オブジェクト指向UIとは、「ユーザーの目的とするもの(オブジェクト)を起点とし、設計されたUIのこと」です。

ユーザーは、商品(目的とするもの)をまず最初に選択し、その後に商品の購入(行動)をします。

タスク指向UIとの違い

タスク指向UIは、オブジェクト指向UIと対比されるものです。

オブジェクト指向UIは、「ユーザーの目的を起点として、その後にアクションがおきる」のに対して、タスク指向UIは、「最初にアクションを起こし、その後に目的を選ぶ」というのが、主な設計です。

具体的には、ソフトドリンク自動販売機があげられます。

多くの自販機では、最初にお金を入れて、商品のボタンを押すことによって、飲み物を購入するという設計になっています。

自販機操作のタスクは、「お金を入れる」「商品を選択する」といったシンプルなものです。

しかし、タスクが複雑になってしまえばしまうほど、ユーザーが目的にたどり着くまでの道のりが遠くなっていきます。

オブジェクトUIのメリット

オブジェクト指向UIのメリットとしてあげられるのは、「ユーザーが目的にたどり着きやすく、直感的に感覚的に操作できる」という点です。

オブジェクトを起点として考えられているので、素早くユーザーが目的にたどり着くことが可能になります。

そのため、様々なサービスやプロダクトに活用されています。

現在、日々の暮らしに欠かせないスマートフォンも、直感的に操作できる、という観点からオブジェクト指向UIの活用例といえます。

加えて、タスクを起点としたUIデザインを作成すると、オブジェクトを起点として、作成されたUIデザインよりもページ数が多くなる傾向にあり、オブジェクト指向UIはタスク指向UIと比較すると、よりシンプルで分かりやすい設計になるということが分かります。

UIデザインの導入例

導入例① ニュースメディア『web電報通』(株式会社電通)

電通のオウンドメディアである『web電報通』では、リリース後三年ほど経過した時に、「既存サイトが今のトレンドに合わない」「過去の記事を探すのに時間がかかる」といった、UIデザインの観点においての課題が浮き彫りになっていました。

この課題に対して、リニューアルを担当することになった「モンスターラボ」は、クライアントとコンセンサス(合意)を取りながら、シンプルかつユーザーを第一に考えたUIデザインを実現し、改善していきました。

導入例② 動画コンテンツサービス『ほぼ日の學校』(株式会社ほぼ日)

「モンスターラボ」は、株式会社ほぼ日が提供している動画コンテンツサービス「ほぼ日の學校」のサービス開発の際に、UX/UIデザインからプロダクトの開発までの工程を担当していました。

情報アーキテクチャ(情報を分かりやすく伝えて、探しやすくするための、技術及びデザインに関する分野のこと)と、候補に上がった「ほぼ日」らしいユニークなアイデアを効果的に取り入れつつ、ユーザビリティを重要視しています。

具体的には、登録フォームなどのユーザー離脱につながりやすい項目において、ユーザビリティを損なわない設計を心掛けています。

導入例③ シンプル・イズ・ベストの検索エンジン(Google)

Googleのページデザインは非常にシンプルであることが分かると思います。

Googleのロゴの他に、検索窓がページの真ん中に表示されるだけです。

シンプルなデザインであるが故に、ユーザーはサイトを開いた途端に、自分が何をすれば良いのかが、一目で直感的に理解することができます。

Googleは、「使いやすさ」「分かりやすさ」がとことん追求されている、いわば好例といえます。

導入例④ 流行のタイポグラフィを使ったサイト(神戸女子大学公式サイト)

「タイポグラフィ」という方法が、2018年に流行しました。

「タイポグラフィ」とは、簡単にいうと「文字による表現」のことで、文字をデザインとして活用することです。

神戸女子大学では、積極的にタイポグラフィを取り入れており、神戸女子大学の公式サイトでは、神戸女子大生を表す「Shinjo」の文字が、サイトを開いた瞬間に、目に飛び込んできて、インパクトを与えています。

説明文に使われる文字にも、読みやすいフォントが使用されていて、文字の力を最大限に引き出したデザインといえます。

導入例⑤ シンプルな構造のサイトとトレンドのグラデーション(Spotify)

音楽配信サービス「Spotify」のサイトでは、グラデーションが綺麗に使われています。

配色も、明るい色が選ばれていて、音楽を聴く楽しみやワクワク感を増大、演出しています。

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

導入例⑥ ユーザーに寄り添う、一目で体調管理ができるアプリ(ルナルナ)

「ルナルナ」は女性に人気の生理日管理アプリで、男性のバイオリズム測定にも使用できます。

データ入力がやりやすいのに加えて、体調管理もグラフやカレンダーの形式で簡単にチェックできることが大きな魅力です。

また、毎日体調に関するアドバイスを配信してくれるので、ユーザーに安心感や心構えを提供してくれるのもポイントです。

導入例⑦ 直感的に操作可能なタスク管理アプリ(Trello)

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

使い方は、デジタルふせんといえる「カード」に、タスクを入力した後、「ボード」に貼ったり削除したりするだけというシンプルなものです。

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

まとめ 

UIは、自社サービスやプロダクトとユーザーをつなぐ接点のことを指し、ユーザーが快適にサービスやプロダクトを、使用できる設計をすることがUIデザインであるということが、分かったのではないでしょうか。

UIデザインについて、難しそう、と思っている方も、これを機にUIデザインをサービスやプロダクト設計に取り入れてみてはいかがでしょうか。

>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG