Blog
UXリサーチをブログで学ぶ

【UI設計】優れたUIデザイン(ユーザインターフェース)を作るために意識すべき、たった1つの原則

Webサイトやアプリは、もはや現代人の生活に不可欠です。Webサイトやアプリにおける「UIデザイン」は極めて重要で、玉石混交の「UI原則」や「UIテクニック」が数多く公開されています。しかし、「UIデザイン」に関する膨大な情報を得ても、いざ自分のWebサイトやアプリ開発となると、「良いUIデザインは結局どうすれば作れるの?」と迷うことも多いのではないでしょうか。

この記事では、優れた「UIデザイン」作成の実践に必要な、

  • UIデザインとは何か、なぜ重要なのか
  • UIデザインで意識すべきたった1つの原則
  • UIデザインを行うための具体的なアプローチと成功事例

をまとめています。

ポップインサイトでは、ユーザーリサーチのファクトにもとづいた情報設計、UIデザイン、WEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。
UXデザイン/UXリサーチについて相談する>>
紹介資料の無料ダウンロードはこちら>>

※関連記事:【超入門】「UIとUXの違い」から「UI・UX改善の3つのポイント」をやさしく解説

目次

UIデザインとは何か、なぜ重要か?

まずはじめに、「UIデザインとは何か」そして「なぜ重要か」を整理しましょう。

UIデザインは「ユーザがWebサイト・アプリをスムーズに使えるようにする」こと

「UI」とは「ユーザインターフェース」の略称です。「ユーザインターフェース」とは、「コンピュータとユーザが情報をやりとりするためのインターフェース(接点)」を指します。

したがって、WebサイトやアプリにおけるUIデザインとは、「コンピュータ(=Webサイトやアプリ)とユーザが情報をやりとりするためのインターフェースをデザインすること」と言えます。

もう少し噛み砕くと、UIデザインとは、「ユーザがWebサイト・アプリをスムーズに使えるようにする」ことであると言えるでしょう。

無料DL|UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します(全45ページ)。ぜひUIの改善にご活用ください。

UIが悪いとサイトやアプリを使う目的が達成できない

ユーザがWebサイトやアプリを使うときには当然、使用目的(知りたいこと、やりたいこと)があります。

この前提に立って「良いUIデザイン」「悪いUIデザイン」の定義を考えると、

  • 良いUIデザインは「スムーズに使える=目的が達成しやすい」
  • 悪いUIデザインは「スムーズに使えない=目的が達成しづらい」

ということになります。

「目的が達成されない」というのは、例えば以下のような状況です。

  • 知りたい情報が見つけられない
  • 予約したいのにできない
  • 商品の検索方法が分からない

つまり、「UIデザイン」を考えるということは、「”ユーザが目的を達成できるようにするため”に何をすべきか」を考えることです。

目的が達成できないWebサイトやアプリ(それを提供する事業者や開発者)に対して、ユーザが大きな不満を抱くことは想像に難くありません。

上記の理由から「UIデザイン」は極めて重要なのです。

UIとUX(ユーザエクスペリエンス)との違い

似たような言葉に「UX(ユーザエクスペリエンス)」という言葉があり、しばしば混同されます。

UXは、Webサイトやアプリの利用時だけでなく、利用前の期待や、利用後の印象を含めたトータルのユーザ「体験」を指します。また、UIは「Webサイトやアプリの設計品質」が主な対象ですが、UXは「ユーザの利用品質」を考えることが主眼になります。

「設計品質」「利用品質」はそれぞれ、

  • 「客観的品質(あるページに到達するまでの時間など、具体的な数字で計測可能な「品質」)」
  • 「主観的品質(心理的満足度など、人間の主観でしか判断できない「品質」)」

にわかれます。

上記4区分をまとめると、UIは「客観的/主観的設計品質」、UXは「客観的/主観的利用品質」であると言えます。
(なお、「客観的設計品質」は「ユーザビリティ」、「主観的利用品質」はユーザの「満足感」となります。)

「UI」と「UX」では、「時間軸(利用時に限るのか/利用前後も含めたものか)」と「視点(設計の品質か/利用品質か)」の2つが大きく異なるのです。

引用:「設計品質と利用品質

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

次に「ビジュアルデザイン」と「UIデザイン」との違いを簡単に整理します。

一般的に、「デザイン」という言葉で連想されるのは、「ビジュアルデザイン」であることが多いでしょう。ビジュアルデザインの目的は、装飾や色合い・写真やイラストといった「ビジュアル(見た目)」により「良い印象(狙った印象)を与えること」です。一方で、「UIデザイン」の目的が、「ユーザが(サイトやアプリを)スムーズに使えるようにすること」であることは前述のとおりです。

これまで、実務上は一人のデザイナーが「ビジュアルデザイン」と「UIデザイン」との両方を担当することも多く、両者は密接かつ不可分な関係にありました。しかしながら、両者の目的は異なり、UIデザインの重要性が上がるにつれ、UIデザイナーにもより専門的な知識やスキルセットが必要になってきています。

デザイナーのスズキアユミ氏によると、webデザイナー(ビジュアルデザイナー)は「装飾美」を、UIデザイナーは「機能美」をより重視する傾向にあります。また、前者にはビジュアル表現力が求められるのに対し、後者には設計力が求められるなど、「ビジュアルデザイン」と「UIデザイン」の役割はもはや大きく枝分かれしていると言えるでしょう。

出典:WEBデザイナーとUIデザイナーは違う職業なの?| note

優れたUIデザインのたったひとつの原則:「ユーザに〇〇させるな」

UIデザインの重要性についてご理解いただけたところで、優れたUIデザインを制作・設計する際の「たったひとつの原則」をご紹介します。
私の過去10年間のUIデザインやユーザビリティのコンサルティング経験を振り返ったときに、もっとも重要であると確信するのは、Webユーザビリティの権威の一人であるSteve Krug(スティーブ・クルーグ)の以下の言葉です。

Don’t make me think(「ユーザに考えさせるな」)

「ユーザに考えさせるな」とは

「考えさせるな」とは、つまり、
「ユーザーが考えなくても、それが何か分かるようにせよ」ということです。

  • クリック(タップ)できるのか
  • クリック(タップ)したら何が起こるのか
  • どこに情報があるのか
  • このページはどこにあるのか
  • この言葉はどういう意味なのか

など、ユーザがわざわざ考えたり迷ったりすることなく、自明のものとして判断できることが、「ユーザに考えさせないUIデザイン」です。

一見、当たり前のように感じると思いますが、実は、世の中の多くのWebサイトやアプリは「ユーザを無駄に考えさせる要素」に満ち溢れています。

  • クリック(タップ)できるのかどうか分からない
  • クリック(タップ)したら何が起こるのか分からない・想像と違う)
  • 書かれている言葉の意味が分からない

など、キリがないほどの「?」が溢れています。

「ユーザに考えさせない」ナビゲーション事例

サイトやアプリの「ナビゲーション」機能は、そのUIデザインが使い勝手の良し悪しを大きく左右する例です。

例えば、アコースティックギターを購入しようとあるサイトを訪れたとします。あなたは、ナビゲーションの「アコースティックギター」のリンクをクリックしますか。それとも、検索ボックスでわざわざ「アコースティックギター」と入力するでしょうか。

答えはもちろん前者ですね。

では、もしナビゲーションのリンク名が「ギター」だったらどうですか?
もし「楽器」だったら?
・・・ではもし、「電子機器」だったら?

「ユーザを考えさせない」優れたナビゲーションのUI例は「ユーザ体験の質を左右するナビゲーションのパターン6選」を参考にしてみてください。

UIデザインのゴールは、ユーザの「?」を取り除くこと

UIデザインの最重要原則が「ユーザに考えさせない」とすると、やるべきことは極めてシンプルです。

ユーザを考えさせる要素、ユーザの「?」を取り除くことです。
つまり、具体的な作業は以下のようになります:

  • クリック(タップ)できることを明確にする
  • クリック(タップ)した後の挙動をユーザの想像どおりにする
  • どこに情報があるのかをわかりやすくする
  • ユーザがサイトのどこにいるかを明確にする
  • 分かりやすい言葉を使う(言葉の意味を補足する)

こうした改善・改修により、ユーザの「?」をできる限り取り除くことができれば、UIデザインの目的である「ユーザが、Webサイトやアプリをスムーズに使えるようにすること」の実現に大きく近づきます。

この内容の詳細は、スティーブ・クルーグの著作『超明快!Webユーザビリティ~ユーザーに「考えさせない」デザインの法則』をぜひご参照ください。

また、ユーザテストで実際にユーザの声を聞いてみることも、デザイナーには気づけない、ユーザの「考えるポイント」の洗い出しに大変効果的です。

UIデザインの具体的なアプローチ方法と成功事例

ここまでで、ユーザの「?」を取り除き「ユーザに考えさせない(Don’t make me think)」を実現することが「UIデザイン」である、という話をしました。

ここからは、具体的にはどのようなアプローチを取ればよいのかについて、事例を交えて解説していきます。

ベテランUIデザイナーでも、ユーザの「?」をとらえきれない2つの理由

ユーザが迷ってしまう要素をとらえることは、一見簡単なようですが、意外と難しいものです。それには2つの理由があります。

理由1:人間は十人十色。想像力にも限界あり

当然のことですが、人間は一人ひとりが異なります。パソコンやスマートフォンの利用経験も異なれば、知識やバックグラウンドも人それぞれです。

そのため、ある人にとっては自明のことが、別の人にとっては「なんだこれ?」となってしまうことも往々にしてあるのです。

デザイナーは、UIデザインやユーザビリティ経験をある程度積むと、ついつい「これはこのパターンで大丈夫」「これで誰にでも分かる」と思ってしまいがちですが、実はそんなことはありません。

ベテランのUIデザイナーは、ユーザの利用シーンや様々な「つまずきポイント」を経験則として知っており、経験からの指摘(ヒューリスティック評価)もある程度までは可能です。
しかしそれはあくまでも、その人の過去経験に依存した指摘に過ぎません。1,000人のユーザの動きを知っていたとしても、それは日本の人口のわずか10万分の1の過ぎませんし、1,001人目のユーザの動きは未知数なのです。

理由2:慣れによる”当たり前”の感覚

制作者やデザイナーは、制作過程で同じWebサイトやアプリを幾度となく使ったり見たりする結果、どんどんそのサイト・アプリに「慣れ」てしまいます。

慣れというのは怖いもので、最初は「なにこれ?」「わからない」という新鮮な視点があったとしても、すぐに「何がわからないかが、わからない」状態になってしまいます。

この状態になってしまうと、「自分が分かるんだから、ユーザもこのぐらいは分かるだろう」と考えてしまいがちになってしまうのです。

では、どのようにしてユーザの「?」を見つけていけばよいでしょうか?

最も手軽な方法は「ユーザテスト」

ユーザの「?」を捉える上で、最も手軽で簡単、しかも効果的な方法は、ユーザテスト(ユーザビリティテスト)です。

ユーザテストは自分以外のユーザに、実際にWebサイトやアプリを、ある状況・目的で利用してもらい、迷わず問題なく使えたかを確認する方法です。

ユーザテスト(ユーザビリティテスト)の重要性や方法はこの記事に詳しいですが、その効果は極めて大きく、「ユーザはそんなことすら分からないのか」という驚きや気付きが多く得られます

専門的にしっかり行おうとするとそれなりにコストがかかりますが、会社の同僚や家族に協力してもらい、自分で行うだけでも、極めて多くの気付きが得られます。
ユーザテストを行って「?」を発見し、改善する。これを行うだけで、圧倒的に良いUIデザインに近づけることができるのです。

無料DL|ユーザビリティテストの基本

数あるUXリサーチ手法の中でも最初に始めやすい「ユーザビリティテスト」の「基本的な設計・実査・分析の流れ」と「実施の進め方や注意点」を解説します。

ユーザテストによるUIデザイン成功事例1~その場Q&A

ユーザテストにより様々な「?」を洗い出し、改善することは、ビジネス成果にも直結します。

ある旅行サイトでは、料金が格安であるがゆえに、ユーザが「金額に航空券代は含まれているのか?」と不安になっている、という課題が見つかりました。この「?」への対応は、料金表示の下に「航空券代込み」という一行を足す、というものでした。しかし、たったこれだけの改善で、CVRが20%もアップしたのです。

UIデザインの改善、というと、ビジュアルデザインを大きく変えないといけないというイメージもあるかと思いますが、それは誤りです。
たった一行の補足を足すだけでも、「ユーザが目的を達成する」に大きく寄与することができるのです。

ユーザテストによるUIデザイン成功事例2~要素を減らす

ユーザの「?」に対応するコンテンツがあったとしても、要素が多すぎたり、UIがごちゃついていると気づかれない場合があります。

ある携帯サイト(有料課金サービス)の事例では、ユーザは「お試し登録=自動的に更新」という強い先入観がありました。元々、サイトには「自動更新はない」と記載してありましたが、ユーザテストを行ったところ、「他にも様々な要素があり『自動更新はない』という記載に気づかれない」という課題が明らかになりました。そこで、メッセージの量を減らし、「自動更新はない」というメッセージを引き立たせたところ、お試し登録数がなんと3倍にもなりました。

これも、いわゆるビジュアルデザインの変更ではなく、ユーザの「?」を真摯にとらえ、「要素を減らす」というUI改善により成果が出た事例です。

UIデザインで知っておくべき4つのテクニック

UIデザインの原則である「ユーザに考えさせない」という考え方をお伝えしました。これを実現するためのデザインテクニックを知っておくと、打ち手を考えやすくなります。ここでは、すぐに使える「4つのテクニック」をご紹介します。(出典:「ノンデザイナーズ・デザインブック」

テクニック1~整列

要素を配置する際には、ルールを決めて整列させると見やすくなります。

テクニック2~近接

関連性の高い要素をまとめてグループ化すると、読み手が情報を受け取りやすくなります。

グループ化のことを「チャンク(情報の固まり)を作る」「チャンキング」とも言います。チャンキングによって、記載する要素の数自体は変わらなくても、読み手は情報を受け取りやすくなります。

テクニック3~コントラスト

重要な要素は、他の要素に比べて目立たせるようにします。

文字のサイズ、太字、フォント変更、装飾、アイコン設置などの方法があります。

テクニック4~反復

類似要素に対して同じパターンを使うと、意味がわかりやすくなります。

例えば、見出しやリストの体裁を揃える、同じアイコンを使う、などの方法です。同じパターンの反復により一貫性を保つことで、ユーザの「考える」負荷が下がります。

UIデザイン基礎固めスライド

感覚的に素早く理解!「UI Design & UX for ENGINEER」

UIデザインについてさらに基礎を固めたいという方には、こちらのスライドがおススメです。英語のタイトルに思わず身構えてしまいますが、2ページ目以降は日本語です。UIとUXの違いもわかりやすく説明されており、感覚的にUIUXとは何かを理解したい方向けです。スライド枚数は多いですが、素早く最後まで目を通すことができます。

UIデザインの流行・傾向を見るまとめ記事4選

UIデザインの基礎や基本的な手法を身につけたら、流行のデザインや求められているデザインの傾向を把握しましょう。

ユーザの使い勝手を追求するには、一般的に使われているデザインを知る必要があります。なぜなら、ユーザが使い慣れているデザインを採用するのも大切なことだからです。そしてそれはファッションの流行と同じで、時と共に変化していきます。流行と傾向を押さえ、ユーザに心地よいUIデザインを目指しましょう。

2021年最新版Webデザインのトレンドまとめ記事

2021年のWebサイト・アプリデザインのトレンドについてまとめられた記事です。最新事例の画像とデザインのポイントがわかりやすく説明されており、一読の価値があります。

ついに出た!2021年注目のWebデザイン人気トレンド9個まとめ

2021年に流行するWebデザインの最新トレンド12個まとめ

UIデザインツールのまとめ&比較記事

UIデザインの知識や方向性がわかれば次は実践ですが、デザインを試行錯誤する際にいちいちHTMLやJavaScriptのコードを書いたり消したりするのは大変です。まずプロトタイピングツールを用いて、ページやアプリ画面のプロトタイプを作りデザインを検討すると効率的です。

また、近年はPhotoshopやIllustratorに競合するUIデザインに特化したツールとして、SketchとAdobe XDが台頭してきました。デザインツールに悩んでいる方は、このSketchとAdobe XDを比較した記事もおススメです。

比べてわかったSketchとAdobe XDの違い 最高のUIデザインツールはどっち?

もし自社でUIデザインを考えることが難しいのであれば、UIデザイン/UXデザイン会社に依頼するのも一つの手です。

実績のあるUI/UXデザイン会社12選

こちらの記事に詳しくまとめてあるので、参照いただければと思います。

まとめ

UIデザインについて、この記事でお伝えしたかった内容をまとめます。

  • UIデザイン(ユーザインターフェース・デザイン)とは、「ユーザが、Webサイトやアプリをスムーズに使えるようにすること」
  • 悪いUIデザインでは、ユーザはWebサイトやアプリを使う目的を達成できず、不満や離反を招いてしまう。そのため、UIデザインを考えることは大事。
  • UIデザインの最重要原則は「ユーザに考えさせるな(Don’t make me think)」
  • UIデザインは、ユーザの「?」を見つけ、解消していく取組である。
  • ユーザの「?」を見つけるには、ユーザテストがもっとも簡単かつ有用。家族や同僚に協力してもらい、まずは手軽に行おう。

無料DL|UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します(全45ページ)。ぜひUIの改善にご活用ください。

こんな記事もオススメ

投稿日: 2016/12/29 更新日:
カテゴリ: UX改善
タグ: ,