フォーカスしたいもの
Webサイトやアプリは、現代人の生活にはなくてはならないほどの存在となっています。
そんなWebサイトやアプリにおける「UIデザイン」はとても重要であり、さまざまなテクニックや原則が数多く公開されています。
実際に「UIデザイン」に関する情報を得たり、自らWebサイトの構築やアプリ開発を行ったりしても、「良いUIデザイン」がハッキリとわからないということもしばしば。
今回の記事では、UIデザインの重要性や優れたUIデザインとは一体どういったものなのか、重要なポイント、作成手順などをご紹介します。
優れたUIデザインの実例も記事の後半で紹介いたしますので、参考にしていただけると幸いです。
UI（ユーザーインターフェース）デザインとは？
「UI」とは「ユーザーインターフェース」の略称。
「ユーザーインターフェース」とは、コンピューター側とユーザー側が情報をやりとりするための接点のことを指します。
WebサイトやアプリにおけるUIデザインとは、「コンピューター（Webサイトおよびアプリ）とユーザーが情報をやりとりするための接点を設計すること」といえます。
ビジュアルデザインとUIデザインの違い
ビジュアルデザインとは、写真や文字、グラフィックなどの視覚的表現を用いてユーザーに狙い通りのイメージを持たせることをいいます。
その一方で、UIデザインの目的は、ユーザーが快適にサービスやプロダクトを利用できるように設計を行うことを指します。
ビジュアルデザインとUIデザインは混同されやすい言葉ですが、ビジュアルデザインは表現であり、UIデザインはユーザーが直感的に認知できる設計を重視する考え方であるため、両者の意味合いは異なるものなのです。
UIデザインとUXデザインの違い
UX（ユーザーエクスペリエンス）とは、ユーザーがWebサイトやアプリの利用を通して得るすべての顧客体験を示す言葉です。また利用前の期待や利用後の印象もUXに含まれます。
つまり、ユーザーとサービスやプロダクトの接点であるUIは、UXの一部なのです。
UIは「客観的および主観的な設計品質」、UXは「客観的および主観的な利用品質」であるとされています。
サービス開発・商品開発におけるUIデザインの重要性
Webサイトやアプリなど、多種多様なサービスやプロダクトにおいて、UIデザインはとても重要視されています。UIデザインはユーザーのサービス利用率に大きく関与しているからです。
どんなにいいコンテンツやサービスを企業側が用意し、公開していたとしても、UIが悪ければユーザーが求めている情報に辿り着けなかったり、Webサイトやアプリに不満を感じてしまう可能性があります。
UIデザインが悪いと、サービスがユーザーに定着することは少ないでしょう。
顧客の体験価値を向上させ、ユーザー満足度を高めることでサービスへの定着率をアップさせるためには、ユーザーの目的に沿った使いやすいUIを設計することが重要といえます。
優れたUIデザインとは何か？
優れたUIデザインとは、「ユーザーに考えさせない（Don’t make me think）」デザインであるとされています。
「ユーザーに考えさせない」デザインとは、ユーザーが感覚的に情報を理解し、操作できるデザインということです。
ユーザーが迷ったり考えたりすることなく、ユーザー自身の目的にあったアクションをスムーズにおこなえることがとても重要なのです。
UI（ユーザーインターフェース）設計を行う際の重要なポイント
UIデザインで「ユーザーに考えさせない」という状態を実現のものとするためには、どのようなことに注意すれば良いのでしょうか。
UIデザインの基本原則を解説した書籍『ノンデザイナーズ・デザインブック』によれば、UI設計をおこなう際の基本的なポイント4つを解説いたします。
近接
要素を配置する際に、ルールを定義し整列すると見やすくなります。
関連性の高い情報を整理しまとめることにより、情報量が同じであってもユーザーがより内容を把握しやすくなります。
整列
「整列」では、情報を整理して、ルールに沿って並べることを指します。
関連性の高い要素をまとめ、グループ化することでユーザーが情報を確認しやすくなります。
記載するコンテンツ・要素の数が変わらなくても、整列することで読み手は情報を取得しやすくなります。
対比
重要な要素は、他の要素に比べて強弱をつけて目立たせるようにします。
文字のサイズを変更する、太字にする、フォントを変更する、装飾をする、アイコンを設置するなどの方法があります。
反復
類似要素に対して同じパターンを使うと、意味がわかりやすくなります。
例えば、見出しやリストの体裁を整えたり、同じアイコンを使用するなどの方法があります。
同じパターンを反復することにより、ユーザーが考えることなく理解できるようにできるのです。
UI（ユーザーインターフェース）デザインの具体的な作成手順
ここからはUIデザインの具体的な作成手順をご紹介します。
①必要な画面数や機能を洗い出して整理する
まずはWebサイトやアプリに必要な画面数や、最低限必要な機能などを書き出して整理することから始めましょう。
最初に書き出しておくことで、ページごとの一貫性やユーザー目線でのWebサイト、アプリ開発がしやすくなります。
②代表的な画面で画面設計（ワイヤーフレーム）をおこなう
代表的な画面のワイヤーフレームを作成します。ほとんどの場合TOPページ（アプリであればメイン画面）のワイヤーフレームを作成することをおすすめします。
そうすることで、ユーザーがどういった画面遷移および操作をするのかイメージしやすく、どういった流れとコンテンツの配置などが適切かわかりやすくなります。
③共通のインターフェースを定義する
このフェーズでは、どのページでも同様のインターフェースとなるように文字や色などの定義をしていく工程となります。
タイポグラフィの定義
ユーザーが読みやすく、綺麗に配置することは重要なUIデザインです。
「タイポグラフィ」とは文字の体裁を綺麗に整える技術のことを意味し、文字を美しく見せつつも可読性を高めることが目標に定められています。
文字を綺麗に配置するなら、フォントのサイズや種類はページで揃えた方が無難です。
そうすることで、ユーザーもページごとに同じ文字サイズや同じフォントであることで、迷いが少なく操作していくことができます。
行間や文字間の広さの調整をし、ほとんどの場合、統一しておいた方が可読性は高まります。
見出しやタイトルなどによって、文字サイズを大きくして見やすく強調することも基本的な技術の一つです。
これらを事前に定義してデザインシステムに取り入れておけば、スムーズなUIデザインが可能になるでしょう。
カラーの定義
次に定義するべきは、カラーです。
基本的にデザインのカラー配色はメインカラー・ベースカラー・アクセントカラーの3種類です。これらのバランスを整えることで美しいデザイン・UIデザインを作ることができます。
ベースカラーは背景や余白部分など一番大きな面積を埋める色で、全体の70％程度を目安に設定します。
メインカラーはサイトのイメージを印象付ける中心となる色で、目安は全体の25%程度です。
アクセントカラーはサイト内の強調したい部分や目を引きたい部分に使う目立った色のことで、全体の5％程度に使われます。
配色の基本に沿って、カラー配色の定義づけを行いましょう。
スペーシングの定義
スペーシングの定義も重要なUIデザインの一つです。
スペーシングとは、サイト内における余白のバランスのことを指します。
文字のバランスもイラストのバランスも、その良し悪しを大きく左右するのが余白の使い方です。
規則性を持たせることを基本とし、見やすい配置にすることを心がけましょう。
コンポーネントの抽出・共通化・定義
基本的な要素の定義が完了したら、次はコンポーネントの抽出・共通化・定義をしていきます。
コンポーネントとは、Webデザインにおける機能を持った各部品の集合体のことを指します。
Webサイトでは、多くのコンポーネントが組み合わさってサイト全体を形成しています。
例えば、問い合わせフォームを例にすると、入力欄やチェック欄、送信ボタンなどの機能を持った多くの部品が集合していることがわかります。
Webサイトはコンポーネントによって形成されており、コンポーネントを細分化すると色々な機能が集まっている、ということをしっかりと理解しておきましょう。
④その他の各画面も定義した共通のインターフェースで作成する
②で作成したワイヤーフレームをベースに、必要なその他の画面の設計をおこなっていきます。
⑤モックアップを作成する
モックアップ (mock-up) とは「模型」という意味を持ち、内部のシステムは実装されておらず機能しないものの、外面は完成品に近いサンプル品のことを指します。
色やレイアウトなどのビジュアルデザインを、完成品を再現したサンプルとしてモックアップを作成します。
ワイヤーフレームとモックアップを混同してしまう場合がありますが、ワイヤーフレームは構成または設計であり、モックアップはワイヤーフレームに色などのデザインを加えたもののことを指します。
⑥モックアップでユーザーテストを行いUI/UXの改善点を見つける
モックアップが完成したらユーザーテストをおこない、UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の問題点および改善点を見つける作業をおこなっていきます。
ここまでの工程でUIやUXを意識して設計を進めており、開発に携わった人間には快適であったとしても、実際に中身を知らないユーザーにとっては操作性の悪いWebサイトやアプリになっている可能性があります。
外部の協力者（会社の同僚や家族など）を集め、テストをおこない改善点を見つけていきましょう。
⑦ユーザーテストの結果をもとにブラッシュアップ
ユーザーテストで見つかった問題点および改善点から、Webサイト・アプリをより良いUIデザインに昇華させます。
外部の人間にチェックしてもらうことで、さらに高品質なUIデザインに近付けることができます。
UI（ユーザーインターフェース）デザインの事例10選
ここからは優れたUIデザインのWebサイトおよびアプリをご紹介します。
「Google」のトップページのデザインはとてもシンプルで、Googleのロゴのほかには、検索窓がページの真ん中に表示されているだけのデザインです。
しかしこのデザイン、ユーザーはサイトを開いた瞬間に自分が何をすればいいのかが一目でわかります。
「使いやすさ」「わかりやすさ」、UIデザインが徹底的に追求された一例です。
https://www.google.co.jp/
Trello
「Trello」は、ふせんを使うようなイメージでタスク管理ができるWebサービスおよびアプリです。
使い方は簡単で、デジタルふせんともいえる「カード」にタスクを入力、「ボード」にカードを貼り付けたり、削除したりするだけ。
指一本でカードやボードの移動ができるほか、「タップすると、カードやボードが斜めになる」という動きが、ふせんの張り替えを連想させてくれます。
Snapchat
ミレニアル世代を中心に人気を集めているメッセージ・チャットアプリ「Snapchat」。
SNS機能やメッセージ機能だけでなく、写真や動画の加工機能を持ち合わせています。
大きな特徴としては、作成したコンテンツ(スナップと呼ばれるもの)が指定した時間で消えるようデザインされています。
また、他のSNSにはない代表的な特徴およびデザインとして、アプリを起動するとすぐにカメラの画面になります。
海外では企業のマーケティングやプロモーションツールとしても注目されており、例えばマクドナルドでは、アルバイトの採用情報をミレニアル世代に効率的に届けるためSnapchatを活用しています。
https://snapchat-www-dot-amourmapassion-hrd.appspot.com/
Must
「Must」はこれから観たい、もしくは観ようと思っている映画やTVシリーズのコレクションおよびレビュー専用のSNSです。
保存した情報をもとに、自分の好みと近い映画やTVシリーズをレコメンドしてくれる機能もあります。
スマホの画面操作において、Mustは画面下半分でほとんどの操作が完結できるよう設計されています。
使い勝手もさることながら、UIのモーションにもこだわりを感じます。
スタディサプリ
「スタディサプリ」は、株式会社リクルートが運営しているオンライン教育アプリ。
経験豊富な先生の授業動画やドリルなどを提供することで、ユーザーが自発的に勉強する仕組みが形成されています。
また小・中学生向けコンテンツがあることもあり、インターフェースもシンプルで使いやすい印象です。
スペースマーケットアプリ
「スペースマーケットアプリ」は、球場やお寺などユニークな場所、レンタルスペースなどの貸し借りができるWebサービスのアプリ版です。
これ一つで、会場の予約から支払いまで一貫しておこなうことができる、とても便利なアプリです。
メッセージ機能もあるので、オーナーとのやりとりもストレスなく簡単です。
大きな画像をもとにさまざまな場所を閲覧して確認できるので、眺めているだけで楽しめます。
動画コンテンツサービス「ほぼ日の學校」（株式会社ほぼ日）
動画コンテンツサービス「ほぼ日の學校」は、多数のユニークな「ほぼ日らしい」アイデアを効果的に取り入れながら、登録フォームなどの離脱率の高いページにおけるユーザビリティを損なわない設計がされています。
神戸女子大学公式サイト
神戸女子大学の公式サイトは、ファーストビューにはキャンパス内の写真もありつつ海辺でのフォトジェニックな写真なども用いており、大学のホームページとは思えないほど洗練されたデザインになっています。
コンテンツやコンポーネントもスマートな印象で、一貫して「女性らしさ」が感じられるホームページになっています。
https://www.yg.kobe-wu.ac.jp/wu/
ルナルナ
女性に人気の生理日管理アプリです。また、あまり知られていませんが、男性のバイオリズム計測にも使えます。
データの入力が簡単で、体調管理もグラフやカレンダーの形で簡単にチェックできるようになっています。
体調に関するアドバイスを毎日配信しており、ユーザーに安心感や心構えを示してくれるのも嬉しいポイントです。
ニューズメディア「ウェブ電通報」（株式会社電通）
シンプルなデザインでありながら力強いフォント選びが特徴の「ウェブ電通報」。
過去記事やジャンルからも見つけやすいように、ヘッダー部分にカテゴリを設置しユーザーファーストを意識したWebデザインになっています。
UI（ユーザーインターフェース）デザインまとめ
UIとは、自社のサービスやプロダクトとユーザーをつなぐ接点のことです。UIデザインは、サービスやプロダクトをユーザが快適に利用できるように設計することを意味します。
悪いUIデザインでは、ユーザーがWebサイトやアプリを使う目的を十分に達成できず、不満や離脱を招いてしまいます。
ユーザーが迷ったり考えたりせず、感覚的に操作して目的を達成できる優れたUIデザインは、サービスやプロダクトの利用率向上には欠かせない条件なのです。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
