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


Webサイトやアプリの利用率は日に日に高まり(参考:インターネット利用動向)、それに伴い「UIデザイン」の重要性がより高まっています。UIデザインについて、様々な「UI原則」や「UIテクニック」が公開・更新されており、情報もどんどん増えています。

しかしいざ自分のWebサイトやアプリ開発においてUIデザインを行おうと思った場合、「で、良いUIデザインを作るにはどうすればいいの?」と迷ってしまう場合も多いのではないでしょうか。

この記事では、よりシンプルかつ実践的に「UIデザイン」を行うために、

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

をまとめています。

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

そもそもUIデザインとは何で、なぜ重要かを整理します。

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

UIとは「ユーザインターフェース」の略称です。「ユーザインターフェース」とは、「コンピュータと利用者の間で、情報をやりとりするためのインターフェース」を指します。

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

やや固いので、もう少し噛み砕くと「ユーザが、Webサイト・アプリをスムーズに使えるようにする」ことであると言えます。

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

ユーザがWebサイトやアプリを使う時には、当たり前ですが、何らかの目的(知りたいこと、やりたいこと)があります。

この前提に立ち、UIデザインの定義を考えると、良いUIデザインとは「スムーズに使える=目的が達成しやすい」ものであり、逆に駄目なUIデザインは「スムーズに使えないもの=目的が達成しづらい」ものです。

目的が達成されないとは、例えば、

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

といった状況を指します。

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

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

そのため、UIデザインは極めて重要なのです。

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

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

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

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

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

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

また、UIデザインとビジュアルデザインについても簡単に整理します。

「UIデザイン」は「スムーズに使えるようにすること」が目的でした。

一方で「ビジュアルデザイン」は、装飾や色合い・写真やイラストのような「ビジュアル」により「良い印象(狙った印象)を与えるようにすること」と言えます。

UIとビジュアルは、一人のデザイナーが両方を担当することも多く、密接かつ不可分な関係ではありますが、両者の目的は異なるため、本質的には別途検討・議論する必要がある要素です。

UIデザインの最重要原則

さて、UIデザインが重要であるとして、どのようなことに留意し、設計を行うことが重要でしょうか。

UIデザインには様々な原則がありますが、私がこれまでの10年間のUIデザインやユーザビリティのコンサルティング経験の中で、もっとも重要と思われるのは、Webユーザビリティの権威の一人であるスティーブクルーグの以下の言葉です。

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

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

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

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

などの基本的な内容について、ユーザがわざわざ迷うことなく、自明のものとして判断できることが、「ユーザに考えさせないUIデザイン」ということになります。

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

  • クリック(タップ)できるか分からない
  • クリックしたら、何が起こるか分からない(想像と違う)
  • どこに情報があるのかが分からない
  • サイトのどこにいるのかが分からない
  • 言葉の意味が分からない

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

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

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

ユーザを考えさせる要素、ユーザの「?」を取り除いていくことがUIデザインです。

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

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

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

UIデザインを行うための具体的なアプローチと成功事例

さて「ユーザに考えさせない(Don’t make me think)」を実現するために、ユーザの「?」を取り除くことがUIデザインであるという話をしましたが、具体的にどのようなアプローチを取ればよいでしょうか?

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

ユーザが迷う要素を捉えることは、一見簡単なようで、案外意外と難しいものです。

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

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

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

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

ベテランのUIデザイナは、様々なユーザの利用シーンやつまずきポイントを過去経験として知っており、経験からの指摘(ヒューリスティック評価)も一定可能ですが、あくまでもその人の過去経験に依存した指摘に過ぎません。

1,000人のユーザの動きを知っていたとしても、日本人口のわずか10万分の1の過ぎないのです。

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

制作者やデザイナは、何度も同じWebサイトやアプリを使う・見ることになり、その結果、どんどん「慣れ」てしまいます。

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

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

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

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

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

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

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

専門的にしっかり行おうとするとそれなりにコストがかかりますが、会社の同僚や家族に協力してもらい、自分で行うだけでも、極めて多くの気付きが得られます。

ユーザテストを行って「?」を発見し、その「?」を改善する。これを行うだけで、圧倒的に良いUIデザインに近づけることができます。

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

ユーザテストにより様々な「?」を洗い出し、そこを改善することで、実際にビジネス成果にも繋がります。

ある旅行サイトの事例では、「金額に航空券代が含まれているか分からない」という課題が見つかり、対応として、料金の下に「航空券代込み」という一行を足しました。たったこれだけの改善で、CVRが20%もアップしたのです。

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

 

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

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

ある携帯サイト(有料課金サービス)の事例では、ユーザは「お試し登録=自動的に課金」という強い先入観がありました。元々のデザインでも、この先入観に対して「自動課金はない」と書いてはあったのですが、他にも様々な要素があり気づかれないという課題がユーザテストでわかりました。

メッセージを減らし、誰でも要素に気づくようにしたところ、お試し登録数がなんと3倍にもなりました。

これも、表面的なデザイン変更ではなく、ユーザの「?」を真摯に捉え、「要素を減らす」というUI改善により成果が出た事例です。


 

Web経由の問い合わせを10倍にした事例
ただいま、ポップインサイトにお問い合わせいただくと、「【Ebook】ユーザテストでWeb経由の問い合わせを10倍にした事例」をご無料でお送りしております。Ebook希望の旨を明記の上お問い合わせくださいませ。

お問合せはこちら

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

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

テクニック1~整列

要素を配置する際には、ルールや基準にしたがって整理することで、見やすくなります。

テクニック2~近接

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

グループ化のことを「チャンク(情報の固まり)を作る」「チャンキング」とも言います。要素をまとめて、チャンクの数を減らすことで、要素数は変わらなくても、情報を受け取りやすくなります。

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

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

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

 

テクニック4~反復

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

見出しやリストの体裁を揃える、同じアイコンを使う、などの方法があります。反復により、できるだけ一貫性を保つことで、考えるコストが下がります。

UIデザイン基礎固め資料2選

感覚的に素早く理解したいなら、スライド「UI Design & UX for ENGINEER」

UIデザインについてさらに基礎を固めたいという方には、こちらのスライドがおススメです。

1ページ目は英語なので身構えてしまいますが、2ページ目以降は日本語です。

UXとの違いもわかりやすく説明されており、感覚的にUIUXとは何かを理解したい方向けです。一見枚数が多いようですが、スライドなので1枚の情報量はそれほど多くなく、素早く最後まで目を通すことができます。

より良いUIデザインとは? 更に詳しい記事を読んで基礎固め

上でご紹介したスライドでざっくりUIの定義をつかんだら、実践に向けた知識をつけましょう。

より良いUIデザインを作る為に必要な8つの基礎

こちらの記事では、UIデザインの基本的な手法が8つのカテゴリに分けて紹介されています。「より良いUIデザインにするにはどこから手を付けたらいいの?」という人にはおススメの記事です。

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

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

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

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

Webサイトのデザインについてまとめられた記事です。画像付きの具体例も豊富で、分かりやすく説明されています。

2017年を先取り!WEBデザインの最新トレンドまとめ

2017年版アプリデザインのトレンドまとめ記事

こちらはアプリデザインに特化したまとめ記事です。こちらも具体例が画像付きで説明されており、デザインの傾向を知るには最適です。

2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ

2016年と比べてこう変わる! トレンドの変遷がわかるまとめ記事

デザインだけでなく、Web制作業界全体を分析した記事がこちらです。トレンドの裏側まで網羅した密度の高い記事なので、業界全体を理解してUIデザインに反映させたい方は必読です。

2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ

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

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

プロトタイプを理解してデザインを加速する!おすすめツール3選

こちらの記事は3つのプロトタイピングツールが紹介されており、それぞれの特徴がわかりやすく明記されています。

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

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

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

国内のUIデザイン/UXデザイン会社10選

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

まとめ

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

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

ポップインサイトへのお問い合わせはこちら


The following two tabs change content below.
池田 朋弘

池田 朋弘

株式会社ポップインサイト代表取締役CEO。株式会社ビービットで、ユーザテスト・ユーザ行動観察を軸にしたコンサルティングで、売上1.5倍・問合せ10倍等の実績を出す。二児の父。「ユーザ視点をもっと間近に」をミッションに日々奮闘中。


【人気】UXリサーチャを貴社チームに!!

「UX改善したいけど人がいない」「CVR改善が伸び悩む」「社内で育てられない」というチームに最適!UXリサーチャとリサーチツールをセットで提供!