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

Webサイトやアプリを使う人は日々増えており,それに伴い「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デザインであるという話をしましたが、具体的にどのようなアプローチを取ればよいでしょうか?

池田 朋弘

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



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

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