Web系のデザイナーを目指す中で、「UI/UXデザイン」という言葉に触れる機会は多いかと思います。
ただ、「よく聞くけど、いまいち分からない」「ビジュアルデザインや普通のデザインと何が違うの？」など疑問に感じている方は多いでしょう。
この記事では、WebデザインにおけるUI/UXについて詳しく解説していきます。
目次
UI/UXとは？
まずUIとは「ユーザーインターフェース」の略称で、UXとは「ユーザーエクスペリエンス」の略称です。
両者は混同されがちですが、それぞれ役割が違います。
UIとは、ユーザーと商品やサービスの接点を指す言葉
UIの「U＝ユーザー（利用者）」を指し、「I＝インターフェース」は接点や繋ぐといった意味があります。
つまりUIとは、ユーザーと商品やサービスを繋ぐための役割をもつ、あらゆるデザインを指します。Webサイトであれば、PCやスマホに限らず利用者の目に入るデザイン・フォント・色・レイアウトなど全てがUIです。
ビジュアルデザインとUIデザインの違いは？
「全部UIになるなら、ビジュアルデザインと何が違うの？」と疑問に思いませんでしたか？実は、その作成における目的が似て非なるものです。
「ビジュアルデザイン」の目的は、ユーザーに商品やサービスのイメージを意図した通りに伝えられるようデザインすることです。
それに対して「UIデザイン」の目的は、ユーザーの使いやすさに特化してデザインすることです。
例えばWebサイトをデザインする際、問い合わせボタンをすぐ見つけられるよう、意識してデザインします。もしくは、ページのスクロール途中で上部へすぐ戻れるよう、TOPへ戻るボタンを設置することがあります。
このように、読みやすさ・使いやすさ・分かりやすさへの配慮がビジュアルデザインとの大きな違いです。
UIの具体例は？
代表的な例は以下の通りです。
- TOPへ戻るボタンがひと目で分かる
- 関連情報がグループ化され、内容が分かりやすい
- 重要な情報に強弱を付けることで、見やすくなっている
- 読みやすいフォント・レイアウトで違和感がない
- お申し込み/お問い合わせなどの重要なボタンが見つけやすい
- テキストリンクが、リンクと認識しやすい
- スマホ向けにした時に、親指の届く位置にボタンを設置する
上記は一例ですが、皆さんもデザインを行う際、UIという言葉を意識せず、自然と行っているのではないでしょうか？
UXとは、ユーザーが商品やサービスから得る体験を指す言葉
UXは「U=ユーザー（利用者）」を指し、「X＝エクスペリエンス（experience）」は体験や経験といった意味があります。
つまりUXとは、ユーザーが商品やサービスに感じた、面白い・使いやすい・使いにくいなどを含め、そこから得た全ての顧客体験を指します。
Webサイトやアプリでは、デザイン性はさることながら、求める情報へスムーズに辿り着けるように導線設計されていることが重要です。
UXの具体例は？
代表的な例は以下の通りです。
- どこに何があるか、欲しい情報への導線が分かりやすい
- ストレスを与えない読み込み速度になっている
- 申込や会員登録の手順が簡単になっている
- 興味を掻き立てる魅力的なビジュアルになっている
また、UXは使いやすいだけでなく、商品やサービスであれば利用した後に「次も利用したい」と思ってもらう必要があり、その過程までUXに含まれます。
両者の関係は？
一度ここでUI/UXについて整理しましょう。
- UI＝ユーザーと商品やサービスとの接点
- UX＝ユーザーが商品やサービスから得た全ての体験
いかがでしょうか。両者の関係性にお気づきの方もいらっしゃるでしょう。
UIはUXの中にある、ひとつの役割にすぎない
UXには全ての体験が含まれます。
その中には、サービスを利用し得た印象も含まれるため、UIも要素のひとつとしてユーザーに影響を与えています。UXはユーザーに感じてもらいたいゴールであって、UIはそこに辿り着くための方法と考えてください。
例えばECサイト（通販サイト）の場合、目指すUXが「商品の購入がストレスなく簡単にできて満足できる」なら、UIはどのようにすれば良いでしょうか？
- 購入ボタンは、素早く認識できる位置に配置
- 見つけやすい色、読みやすい文字で目立っている
- 決済方法の種類が直ぐわかる
- 今入っているカートの中身は何商品あり、合計金額や送料の値段が直ぐに分かる
- 決済までのステップが分かりやすい
こういったUIの積み重ねを行うと、購入後「また次もここで購入しよう」といったUX（体験）を与えることができます。
UI/UX設計する時のポイント
UI/UXに基づいて制作を進めることで、ユーザーを悩ませず考えさせない心地良さを実現できます。
例えば通販サイトは、大手のAmazon・楽天・Yahoo!をはじめ、小規模も含めると無数に存在します。どの企業も求められるニーズ「早さ・正確さ・安全性・操作や決済が簡単」を満たしているのが実状です。
他社と差別化するには、どうUI/UX設計をすれば良いのでしょうか？
ターゲットを明確にし、
求められるニーズを元にゴールをUX設定する
まずは現状の分析を行い、クライアント（提供側）の「こうしたい」という要求だけにならないよう、ユーザー目線のUX設計をする必要があります。
1. 自社の強み：ブランドコンセプトの分析
2. ユーザーの調査：ターゲットはどこに絞るのか、どういった背景の人物が購入するのか
3. ニーズ：その人物が求めるものは何か
4. 競合他社の調査：競合他社は何をアピールしているのか
5. ゴール設定：このサービスで、どういう結果（ゴール）を得たいか
6. フローの調査：購入するまでに、どういうフローを辿るのか
上記の中で特にむずかしいのが、意外とブランドコンセプトです。あまり深く考えず、「なんとなく」で制作を進めてしまう場合が多々あります。
「なんとなく」で終わらせず、クライアントと一緒に言語化することが重要です。そうすることで、他社との差別化を図るためのキーに繋がります。
調査し分析した後にUIデザインを行い、結果を評価する
今度はコンセプトに添いながら、どのデザインの方向性が目に止まり、購入へ繋がる導線設計はどうすれば良いのか探ります。
方向性が決まればUIデザインをプロトタイプへ落とし込み、改良を重ね完成を目指します。もちろんユーザーへ自社のイメージを伝えるビジュアルも重要です。
また、完成したらUX設計は終了ではありません。ある程度経過したタイミングで、実際の売上や予想した顧客満足度が得られているかなどの結果を検証し、改善が必要であれば提案します。
まとめ
今UI/UXデザインは重視されている！
近年、PCやスマホの普及でWebサイトやアプリの数は増加し、他社と差別化が至難の業になってきました。変化が激しい時代だからこそ、ひとつでもUIの問題で使いにくかったり、ニーズにそぐわなかったりすると、ユーザーは簡単に利用を止めてしまいます。
例えばお問い合わせフォームの項目が多い、入力がしにくい、同じようなことを何度も入力させられる、などです。こういった不満は、一つ一つは小さなことですが、積み重なるとユーザーが離れる原因となります。
そのため、UI/UXを意識した考え方、つまり「ニーズに対して課題点を洗い出し、より良い顧客体験の創造と、提供側が望む成果を実現するための方法」がポイントになります。
優れたUI/UXは、サービスや商品の成否を決める重要な役割を果たします。
UI/UXへの理解を深めるには、分析・調査・設計などの能力が必要になりますが、今後も需要が高まっていくでしょう。
