ユーザー獲得や​売り上げに​つながる、​UI/UXデザインとは?

インターネットや​スマートフォンが​普及した​現代で、​自社の​ビジネスを​多くの​人に​知って​もらう上で​欠かせないのが​ウェブサイトです。​伝えたい​情報が​一つの​プラットフォームに​まと​まった​便利な​ツールでは​ある​ものの、​見た​目や​使い勝手に​よっては​情報が​伝わりづらく、​ユーザー獲得に​つながりにくいウェブサイトも​少なく​ありません。​そこで​ウェブサイトを​訪れた​人に​伝えるべき​情報が​届くよう、​押さえて​おきたいのが​UIと​UXデザインです。

今回は​意外と​知られていない​UI/UXの​特徴から、​最適な​UI/UXデザインを​設計する​上で​ビジネスオーナーが​準備して​おきたい​点を​解説します。

UI/UXに​ついて

UIUX02

パソコンや​スマートフォン上で​アプリや​ウェブサイトを​利用する​際に、​「使いにくい」​「見にくい」と​感じた​ことは​ありませんか。​こう​いった​弱点を​カバーし、​ユーザーに​とって​魅力的かつ​使いやすい​ウェブサイトや​アプリケーションを​デザインするのが​UI/UXの​役割です。​UI/UXとは、​主に​ウェブサイトや​モバイルプラットフォームの​デザインに​用いられる​概念ですが、​今回は​ウェブサイトに​焦点を​絞って​説明を​します。

UIとは?

UIとは​ユーザーインターフェース​(User Interface)の​略語で​あり、​ウェブサイトや​製品の​「見た目」を​意味する​用語です。​インターフェースは​「接点、​接触面」と​いう​意味を​持つため、​ユーザーの​目に​触れる​部分と​解釈する​こともできます。​つまり、​ユーザーが​目に​する​フォントや​そのサイズ、​ボタンの​色や形、​もっと​細かい​ところで​いえば​行間や​配置など、​見た目の​デザインに​関わる​全ての​要素が​UIに​当ては​まります。

Squareの​POSレジなら​高機能なのに​ずっと​0円

キャッシュレス決済、​在庫管理、​顧客管理、​スタッフ管理など、​店舗に​必要な​機能を​すべて​搭載

UXとは?

UXは​ユーザーエクスペリエンス​(User Experience)の​略で、​製品や​サービスを​通して​ユーザーが​得る​「体験」を​意味します。​優れている​UXデザインを​持つウェブサイトは、​ユーザーに​使いやすいと​感じて​もらえる​ものです。​具体的には​「ユーザーが​迷いなく​目的を​達成できる」​「ウェブサイトを​操作する​うえで​ユーザーへの​ストレスが​少ない」と​いった​点が​ウェブサイトの​使いやすさを​表します。

UXデザインを​設計する​うえで​多くの​デザイナーが​参考と​するのは、​情報アーキテクチャの​先駆者、​Peter Morvilleの​「UXハニカム」です。​ここには​以下の​七つの​要素が​含まれます。

1, Useful​(役立つ​ものである)​
2, Usable​(​使いやすい​ものである)​
3, Desirable​(望ましい​ものである)​
4, Findable​(情報が​探しやすい​ものである)​
5, Accessible​(情報に​アクセスできる)​
6, Credible​(信頼できる)​
7, Valuable​(価値の​ある​ものである)

たとえば​ECサイト上で​欲しい​商品が​すぐに​検索できれば、​ユーザビリティー​(2)と​アクセサビリティ​(5)の​両方に​優れており、​ユーザーに​とって​望ましい​(3)と​みなされるでしょう。​一方で​導入に​費用が​かかる​サービスを​提供する​ウェブサイトの​場合、​会社情報は​ユーザーに​とって​気に​なる​点かもしれません。​あまり​時間を​かけず、​この​情報を​見つける​ことができれば、​ユーザーは​アクセサビリティ​(5)に​優れていると​判断し、​信頼できる​サイトである​(6)と​感じ取ります。​このように、​UXを​向上させる​ためには、​ユーザーの​満足度を​高める​「UXハニカム」を​軸に​すると​いいかもしれません。

参考:User Experience Design(Semantic Studios)

UIと​UXの​関係​性

UIUX03

一見​似ている​印象を​受けやすい​UIと​UXですが、​デザイン部分を​指すUIは、​ウェブサイトが​ユーザーにもたらす体験を​統括する​UXの​一部であると​考えられています。​この​二つは​相互関係に​あり、​わかりやすく​説明を​すると、​
見た目は​いいけれど、​使いにくいサイト=UIデザインには​優れているけれど、​UXデザインに​劣っている​
​使いやすいけれど、​見た目が​よくない​サイト=UXデザインには​優れているけれど、​UIデザインに​劣っている

つまり​片方に​優れているだけでは、​ユーザーは​求めている​情報に​たどり着けず、​ビジネスオーナーは​適切な​情報を​ユーザーに​届けられず、と​両者に​とって​満足度の​低い​サイトと​なってしまいます。​そのため、​ウェブサイトの​利用率を​上げる​ためには、​「離脱を​促さない​デザイン​(UI)」と​「ユーザーが​目的を​達成できる​機能性​(UX)」の​両方を​最大限に​生かす​必要が​あると​考えられます。

ユーザー満足度の​高い​ウェブサイトを​生み出す、​UI/UXの​設計方法

UIUX04

UI/UXの​デザイン設計には、​自社で​デザイナーを​雇う、​もしくは​アウトソースで​デザイナーに​依頼を​する、の​二つが​選択肢と​して​考えられます。​いずれに​しても、​ユーザーに​刺さる​ウェブサイトを​作るには、​ユーザー心理を​掘り下げ、​どのような​ターゲットに​向けて​ウェブサイトを​設計していきたいかを​デザイナーと​共有する​ことが​大切です。​極端な​例では​ありますが、​「かっこいい​デザイン」、​「やわらかめの​印象」など漠然と​したイメージは、​UI/UXの​デザイン設計に​おいて​不十分と​みなされてしまうでしょう。

ユーザーを​迷わせない​UI/UXデザインを​自社サイトに​組み込むためにも、​以下​3点を​明確に​して​おきましょう。

1, ターゲット層と​そのニーズ
ブランドアイデンティティを​構築する​上で​ターゲット層を​明確に​する​ことは​欠かせませんが、​UI/UXデザインに​おいても​ターゲット層は​常に​念頭に​置いておくべき要素の​一つです。

ターゲット層の​性別や​年齢を​考慮するだけでも、​適切な​UI/UXデザインは​大きく​変わってきます。​たとえば​若者は​個性ある​クリエイティブに​惹かれるかもしれませんが、​パソコンに​あまり​慣れていない​年代は、​わかりやすい​設計を​好むでしょう。​このように​ターゲット層を​見極める​ことは、​適切な​UI/UXデザインを​導く​上で​欠かせない​工程です。

ターゲット層に​おける​ニーズも、​深掘りが​必要な​要素です。​自社の​ウェブサイトを​訪れる​ユーザーの​顕在ニーズに​合わせて、​サービスを​知る​ことから​生まれる​潜在ニーズまで​掘り下げておくと、​より​ユーザー満足度の​高い​UI/UXデザインを​設計する​ことができます。

たとえば、​業務効率化に​役立つ月額制サービスを​提供しているとしましょう。​ユーザーが​ウェブサイトを​訪れる​うえでの​顕在ニーズは、​おそらく​「業務を​効率的に​行いたい」でしょう。​潜在ニーズには、​「使ってみないと​判断できないから、​一定の​期間は​サービスを​無料で​試してみたい」​「トレーニングに​時間を​避けないので、​使い方は​動画で​学習したい」などが​挙げられます。​このように​ユーザーの​あらゆる​ニーズを​仮定しておくと、​ウェブサイトに​組み込むコンテンツ案も​出しやすくなります。

2, 顧客に​起こして​ほしい​アクション
来店して​ほしいのか、​商品を​購入して​ほしいのか、​サービスを​利用して​ほしいのか、​会員登録を​して​ほしいのか……​最初に​絞り出したターゲット層に​第一に​起こして​ほしい​アクションを​想定する​ことで、​思わず​クリックしたくなる​ボタンの​デザイン​(UI)や、​スクロールせずに​アクションを​起こせる​機能性​(UX)など、​UI/UXデザインが​設計しやすくなります。

3, 顧客に​伝えたい​情報
あなたのターゲットユーザーは、​何を​求めて​ウェブサイトを​訪れるでしょうか。​たとえば​レストランの​ウェブサイトの​場合、​店内の​雰囲気や​提供される​メニューを​知りたいのかもしれません。​ユーザーに​よっては、​読みやすい​文字や​イラストで​商品の​価格や​サービスを​説明して​ほしいと​感じる​ことも​あるでしょう。

情報の​最適な​見せ方を​見い出すためにも、​自社の​サービスや​商品に​おいて、​ユーザーが​必要と​しているであろう​情報を​掘り出すのは​もちろんの​こと、​優先順位を​つける、と​いう​工程も​踏みましょう。​そうする​ことで、​デザイナーは​情報に​対する​強弱の​つけ方​(文字の​大きさや​配置など)を​より​判断しやすくなるでしょう。

UI/UXデザインを​設計する​ためには、​上記3点を​明確に​したうえで、​デザイナーに​発注を​する​ことで、​より​ユーザーに​使いやすい​ウェブサイトが​作れるでしょう。

UI/UXデザインを​改善させる​方法

UIUX05

UI/UXデザイン改善には​膨大な​リソースが​かかってしまい​そう……と​いう​懸念から、​ウェブサイトの​最適化に​手を​つけられていない​ビジネスオーナーも​少なくないのではないでしょうか。​ところが、​最近では​中小企業や​スモールビジネスでも​リーズナブルな​価格で​改善を​試みる​ことができます。​その方法の​一つと​して​挙げられるのが、​ユーザビリティテストの​実施です。

第三者に​インターフェースを​触って​もらい、​どれだけスムーズに​目的地に​到達できるか、​目的を​達成する​上で​どのような​課題点が​あるか、​などが​探れる​調査方法です。​実際に​サイトを​訪れる​ユーザーの​心理を​探る​ことで、​より​的確な​改善方法が​見い​出せる​ことから、​導入する​事業が​増えているようです。

ユーザビリティテストと​聞くと、​大企業が​取り入れている​印象を​受けるかもしれませんが、​最近では​中小企業向けの​クラウド型テストサービスも​出てきました。​その他にも、​自社サイトでの​ユーザー行動を​確認したり、​定性分析を​したりし、​どれだけユーザーに​とって​最適化されているかを​教えてくれる​ツールも​増えてきているようです。​ユーザーに​より​満足して​もらえる​ウェブサイトを​提供できるよう、​導入を​検討してみては​いかがでしょうか。

参考:
スマートフォンアプリ・Webサイトを​“ユーザー視点”で​品質向上!​クラウド型テストサービスを​提供開始​(2017年6月5日、​PR TIMES)
【プレスリリース】アイスリーデザイン、​ウェブサイトの​UI/UX改善ツール ​「flamingo(フラミンゴ)」を​メジャーバージョンアップ  Google モバイル ファースト インデックス対応で​SEO向上​(2018年8月1日、​株式会社アイスリーデザイン)

UI/UXデザインの​改善が​もたらす効果

UIUX06

ユーザーに​伝わりやすい​サイトづくりに​欠かせない​要素と​して​UI/UXデザインを​紹介してきましたが、​実際には​どのような​効果が​見られるのでしょうか。​2017年に​経済産業省が​行なった​第4次産業革命に​おける​クリエイティブの​重要性に​まつわる​調査に​よると、​デザインの​定義を​広める​ことで​営業利益が​上がる​ことが​わかっています。

この​調査では、​デザインの​定義が​広い​ビジネスと​狭いビジネスを​比較した​ところ、​デザインの​定義が​広い​企業の​方が​他社との​差別化に​おいて​達成度合いが​高い​傾向に​あり、​新たな​サービスの​設計に​おいて、​顧客との​接点に​一貫性を​見い出すことに​焦点を​置く​傾向に​ありました。​一方で​デザインの​定義が​狭い​事業は、​傾向と​して​他社との​差別化に​おける​達成度も​低く、​低価格で​サービスを​提供する​ことに​重きを​置いていました。

ウェブサイトの​UI/UXを​含めて、​顧客満足度が​高く、​他社よりも​優位な​製品や​サービスを​デザインする​ためには、​サービスの​価値を​掘り下げて、​ユーザーの​ニーズに​寄り​添った​体験を​提供する​ことに​なり、​価格競争を​しなくても​商品の​価値を​より​ユーザーに​理解して​もらえ、​営業利益に​つなげられるようです。

参考:第4次産業革命に​おける​デザイン等の​クリエイティブの​ 重要性及び具体的な​施策検討に​係る​調査研究報告書​(経済産業省)

全ての​ユーザーが​満足する​ウェブサイトを​作るのは​難しいかもしれませんが、​デザインを​見直す​ことで、​伝えるべき​情報が​ユーザーに​より​よく​届く​ウェブサイトに​改良する​ことは​できます。​ユーザーに​迷いやストレスを​感じさせないためにも、​UI/UXデザインと​いう​概念を​もとに​自社サイトを​分析してみては​いかがでしょうか。

関連記事
今すぐ​モバイル端末で​使える​おすすめPOSアプリ6選
​見やすい​ウェブサイトを​作ろう!​フラットデザインと​マテリアルデザイン

執筆は​2019年7月2日​時点の​情報を​参照しています。​
*当ウェブサイトから​リンクした​外部の​ウェブサイトの​内容に​ついては、​Squareは​責任を​負いません。​
*Photography provided by, Unsplash