どうも。株）WIREBASEの中村です。
UI,UIと言われても具体的にどういうものなの？というのが分からない方も多いのではないでしょうか？
今回はそんな方に向けて、
・UIとはなんなのか？
・離脱率を1/10にするUIデザインを作る為にやるべきこと
を徹底的に解説していきます。
本記事のもくじは以下の通りです。
- 1. ユーザーインターフェースデザインって何？
- 2. UIってどうデザインするの？
- 3. UIとUXの違いは？
- 4. 流入数が伸びるUIの作り方は？
さて、早速始めましょう。
1. ユーザーインターフェース（UI）デザインって何？
ユーザーインターフェース（UI）デザインとは、ソフトウェアやハードウェア上のインターフェース（人間に見える表面部）のデザインのことです。よりユーザーにとって使いやすく、楽しいと感じるインターフェースを作ることで、ユーザー体験をより良いものにでき、その結果、流入もしくは転換するユーザーを増やすことができます。
例えば、ウェブサイトの例でみると、以下①と➁どちらのウェブサイトの見た目が良いでしょうか？多くの人は例➁の方が見やすいというのではないでしょうか？
例①
例➁
その通りです。この例の様に、いかにユーザーにとって見やすいデザインを作るか、がUIデザインを作る上で大切になってきます。
では、具体的にどのようにUIデザインを作っていけば良いのか、以下にて解説します。
1. UIってどうデザインするの？
ユーザーインターフェースには主に以下3つのカテゴリ―があります。
- グラフィカル・ユーザー・インターフェース（GUI）：視覚的に見えるもので、ユーザーが操作できるもの。例えば、パソコンのデスクトップやウェブサイト等はGUIになります。
- 声で操作するインターフェース（VUI）：声で操作するインターフェース。iPhoneのSiriやAmazonのAlexaなど、スマートアシスタントの多くはVUIになります。
- ジェスチャー・ベース・インターフェース：ユーザーが体の動きで操作するもの。例えば3Dのバーチャル空間で体を動かしながら操作することなどは代表例です。
これを踏まえて、それぞれどのようにUIを使っていけば良いか、解説していきます。
ユーザーは基本的に使いやすさや快適さを重視する
正直なところ、デザイン性にこだわるユーザーはあまりいません。どちらかというと、以下に自分のタスクを簡単に、最小限の労力でこなせるか、を最重視しています。
従って、UIデザインを作る時にもっとも注意すべきは、よいデザインを作ろうと必死になることではなくて、いかにユーザーの労力を軽減させられるか、に重きを置いた前提でデザインを作り上げることです。
具体例を出すと、例えば、ECサイトであれば、ユーザーの目的は「商品を買うこと」になります。
それであれば、できる限り商品を買うまでのステップを軽減してあげる、不要な広告を減らすことでユーザーが戸惑うことなく目的＝「商品を買うこと」を達成できる環境を整えてあげる、ことが重要になります。
UIは「楽しい」ものでないとダメ
ユーザーのニーズを予測してデザインすることで、よりパーソナライズされた没入感のある体験を提供することができます。必要に応じてゲームの様な要素を取り入れることで、ユーザーもUIを楽しむことができます。
例えば、ホームページであれば、ロード中の円マークをキャラクターやアイコンに変えるなど、ちょっとした遊びの工夫でもユーザーのフラストレーションを軽減することができるので、試してみましょう。
UIはブランドの価値を伝え、ユーザーの信頼を勝ち取るもの
良いデザインに一貫して言えることは感情的価値を伝えることが上手いです。ユーザーは自分が共感できるブランドに良い感情を抱き続けるため、感情的価値を訴えかけることでより快適なユーザー体験を提供できるようになります。
3. UIとUXの違いは？
UXと混同して表現されることが多いのですが、UIデザインは人間の見える部分の全体的な雰囲気やデザインのことを指します。例えば、車でいえば、UXデザインは車全体の機能性やデザインのことで、UIデザインは運転席（いわゆる人が操作する場所）のことを指します。
4. 離脱率を軽減するUIの作り方は？
先程述べたように、ユーザーは人間であり、快適さや使いやすさを重視しています。
そのニーズに応えるには以下の方法を実践してみてください。
- ボタンをユーザーが予測した通りに動作するよう改善する
例えば、「問い合わせはこちら」というボタンであれば、ユーザーは「問い合わせフォームに飛ぶのだろう」と予測してそのボタンをクリックします。しかし、それがFAQに飛んでしまったらどうでしょうか。予測したことと違うことが起きてしまった場合は、ユーザーある一定のフラストレーションを抱えて離脱してしまいます。従って、ユーザーが無意識でも自分の得たい情報を得ることができ、容易に目的を達成できれば、より良いです。なので、ボタンやその他の要素に関しても、できる限りユーザーが予測した通りに動作するよう改善する必要があります。 - ボタンやアイコンを明確にする
色合いやその他のフォーマットを変えることで、ユーザーがすぐ発見できるように仕上げます。 - インターフェイスは出来る限りシンプルにする
ユーザーの目的以外のものは全て排除しても良いくらいです。不要な広告やテキスト文面、その他要素などは、一切不要なものです。ユーザーの目的はなんなのか？徹底的に考えることで、不要な要素を排除できるようになります。 - ユーザーの目線を把握し、読みやすさを重視する
ユーザーは一般的に画面中央よりも先ずは端を見る傾向があります。特に左端から右端にかけて目線を移す傾向があります。その目線に沿ってコンテンツのレイアウトを考えていきましょう。
また、色、明るさ、コントラストを使って主要な機能に目線を向けさせることも必要です。 - ユーザーが実行するタスクは1ページあたり1つ
例えば、「オンライン講座を受講する」と「無料説明会に参加する」というボタンが2つ並んでいるとします。この時点でユーザーはどちらを押せば良いのか、混乱して結局目的を達成せずに、離脱してしまうことが多いです。
それであれば、オンライン講座を受講する、無料説明会に参加するというページをそれぞれ1枚設けて、ボタンを配置したほうがユーザーの労力もかからず、よりUIデザインの良いウェブサイトに仕上げることが可能になります。 - ユーザーのレスポンスやアクションについて、きちんとフィードバックを与え続ける
- 統一感をもったデザイン
- ユーザーの次のステップを明示してあげる
ウェブサイトであれば、次のページはどういうコンテンツが待っているのか、事前に伝えてあげることで、次のページへ遷移した時に期待値を外すことなく、ユーザーが得たい情報を得られます。そうすることで結果的にフラストレーションをなくし離脱率を軽減することが可能になります。
どうでしょうか？少しはUIデザインに関する理解を深めれたでしょうか？
それでは、今日はこの辺で。
WEBに関するご相談はLINE/Twitterにてお待ちしております。
株）WIREBASE中村LINE↓
株）WIREBASE中村Twitter↓