良いUIデザインの考え方|参考にしたい設計のコツや改善事例
2021/07/19 (Mon)
良いUIデザインの考え方|参考にしたい設計のコツや改善事例
Kaizen 編集部

著者: Kaizen 編集部

UX

UIデザイン

「UIデザイン」という言葉は聞いたことあるものの具体的に何かをイメージできますか?

実は、Webサイトやサービス、アプリケーションにおいて売上やダウンロード、お問い合わせといった「成果」を向上させるために、UIデザインは非常に重要な役割を果たしています。

この記事では、そもそもUIデザインとは何か、そして、UIデザインの設計のポイントや成功事例、そしてUIデザインの設計に役立つ便利なサービスを紹介していきます。

自社のビジネスでさらなる成果を改善、向上していきたいと考えている方に役立つ情報をまとめましたので、ぜひ実践してみましょう。

”Webサイト改善”にお悩みはありませんか?

サイト改善に取り組みたいけど「自社にノウハウやリソースがない……」「DXってなにから始めれば良いの……?」といったお悩みはありませんか?そんなときは、WebサイトのUX改善を実現できる「KAIZEN ENGINE」の活用をご検討ください。特徴は以下のとおり。

    • タグを1行挿入するだけで導入可能。開発コストを大幅に削減
    • 既存システムに影響することなく分析・改善施策を実行でき、CVR(コンバージョンレート)の改善に貢献
    • DMPやCRMデータと柔軟に接続。より深い顧客理解が可能

これからDXに取り組まれる方や、Webサイト改善による事業成長を実現したい方へ、「KAIZEN ENGINE」の概要やこれまでの導入事例を掲載した資料をご用意しました。ぜひご一読ください。

まずは無料資料をダウンロード

▼目次

1.UIデザインとは何か?

2.なぜUIデザインが重要なのか?

3.良いUIデザインを考えるためのポイント

4.UIデザイン改善に役立つトレンド

5.CVR向上に貢献したUIデザインの改善事例

6.UIデザイン改善で使えるおすすめツール

7.まとめ

1.UIデザインとは何か?

「UIデザイン」とは、具体的に何を指すのでしょうか。まず「UI(User Interface)」とは、「ユーザーインターフェイス」の略称であり、製品やサービス、Webサイトやアプリケーションなどユーザーが触れる接点のことを指します。

そのうえで、「UIデザイン」を定義すると、「ユーザーがWebサイトなどで何らかの目的を達成するまでのプロセスをデザインすること」です。

例えば、ユーザーが製品やサービスについて「お問い合わせしたい」と思ったときに、「Webサイト上でお問い合わせ窓口が見つけにくい」状態だとユーザーはストレスを感じるかもしれません。すると、ユーザー体験を損ねてしまい「購買しよう」というモチベーション至らない可能性があります。

下記の図で示しているように、顧客としてのあらゆる体験(CX、カスタマーエクスペリエンス)の中に、製品・サービスを通して得られる体験(UX、ユーザー体験)が存在し、その中に、ユーザーに見えて触れる部分を指すUIデザインが要素として含まれているのです。

UIデザイン

出典:いまさら聞けない「DX」の本当の意味。DX成功の鍵は「UX」にある!

私たちが考える良いUIデザインに共通する条件としては、大きく下記の3つです。

  • ユーザーが目的の情報に到達しやすい
  • ユーザーニーズを満たす情報が網羅されている
  • ユーザーが迷わず利用できる使い勝手、使用感

自社のWebサイトやサービス、アプリケーションを訪れたユーザーが、目的(お問い合わせやダウンロードなど特定のアクション)を達成する上で、上記を満たせているかを振り返ってみましょう。

 

2.なぜUIデザインが重要なのか?

UIデザインとは何か、定義をもとに解説しました。続いて、Webサイトやアプリケーション、サービスにおいて、なぜUIデザインが重要なのかを解説します。

  • サイト改善において、なぜUIデザインを考える必要があるのか
  • 「良いUIデザイン」を考えることは、サイト改善にどのような影響をもたらすのか
  • UIデザインを改善することで得られる効果
  • UIデザインを改善することでのみ、最適化が可能なポイント

前段でお伝えしたように、UIデザインはユーザー、顧客の体験(UXあるいはCX)に含まれる概念です。「良いUX」を提供できれば、ユーザーは心地よい購買体験ができ、その結果さらなる継続利用や購入が発生することが見込めます。それにより、LTV(顧客生涯価値)を向上させることができ、売上の向上に寄与するのです。

そして、UXを改善し、「良いUX」を提供するためにはUIデザインの見直しが必要であり、UIデザインを見直す上で最初の設計が重要となります。闇雲に自社が見せたい情報を掲載しても、ユーザーが求めているものと必ずしも一致するとは限りません。

自社のWebサイトやアプリケーションなどに訪れるユーザーのニーズやペインに対して、どういった導線を作れば良いのか、適切な情報を網羅できているかを想定してページ構成を設計していきましょう。

 

3.良いUIデザインを考えるためのポイント

UIデザインが重要である理由として、良いUXを提供する起点となり、結果として売上やLTVの向上に寄与するということをお伝えしてきました。

次に、良いUIデザインを考え、設計する上で注目すべきポイントを以下の章で解説していきます。

良いUIデザインを考えるためのポイント

良いUIデザインを実装するにあたり何から考えていけば良いのかわからないという方も少なくないはずです。そこで、私たちKaizen Platformが実践しているWebサイト改善の流れをベースに、UIデザインの観点にフォーカスした次の3つのポイントを紹介します。

 

1. 自社のビジネスモデルからターゲットユーザーを明確にする

まず始めに行うべきは、ターゲットユーザーの明確化です。

Webサイトに訪れるユーザーは何を目的としているのかを、自社のビジネスモデルと照らし合わせて明確化します。どういったユーザーが訪れ、どのように自社の売上に寄与するのか、売上に貢献するターゲットユーザーを設定するのが大切です。

 

2. ユーザーが目標に至る上で生じる課題分析

次に、現状のWebサイトの構成やUIにおける課題分析を行ないます。ターゲットユーザーが購買やダウンロード、お問い合わせなど目標に達する上で障壁となる点を抽出し、改善すべき項目に優先度を付けます。

例えば、月間10万人がWebサイト上に訪れる中で、トップページに1万人が流入し、特定のページには月に1,000人程度の流入があるとします。ここで改修すべきは、1,000人が訪れるページではなく、多くの来訪ユーザーが接触するトップページです。

最終的にユーザーが達成したい目的をストレス無く、あるいは心地よい体験をもとに達成できることが良いUIデザインの前提となります。その前提をもとに、事業インパクトとして大きいポイントから優先度を高めて改善項目を設定していくのです。

 

3. Webサイトに訪れたユーザーにどうして欲しいかを定義する

改善すべき点を抽出できたら、UIデザインとして適切な施策に落とし込みます。

良いUIデザインというのは、ビジネスモデルや目標によって異なりますが、共通して意識していただきたいのは、目的を達成しようと思ったときに、迷わずできる動線設計や誘導ができているかです。

  • 欲しい情報が記載されていなければ、必要な情報を網羅する
  • 目的に対して意思決定するタイミングで適切に誘導できている
  • 購買やお問い合わせなどの目的に向けた導線が強調されている、目立っている

といった点に気をつけ、UIデザインの改善を行ないましょう。Webサイトに訪れたユーザーにどうなってほしいのか、ユーザー行動を起点に考えてプランニングしてみてください。

 

4.UIデザイン改善に役立つトレンド

UIデザインを改善したり、新たに設計する上でトレンドは非常に重要です。トレンドを知ることは、ユーザーが普段目にし、使い慣れているUIを理解することに繋がります。

ユーザーは日頃から使っているWebサイトやアプリケーションを把握し、ストレスのないUIデザインを目指しましょう。

例えば、フードデリバリーサービスでは、InstagramやFacebook、Twitterなど近年様々なSNSアプリに搭載されている「ストーリーズのUI」を踏襲した、カテゴリ選択のボタンデザインを導入しているケースが多く見受けられます。

ユーザーが日常的に利用するアプリケーションのUIデザインには、「使いやすさ」のヒントが多く含まれています。また、使い慣れていることから行動を起こす上でのハードルが低いとも言えるでしょう。

UIデザイン改善に役立つトレンド

consim. β

参考サイトとして、「consim design」というUIデザインをまとめているサービスがあります。上記で挙げたSNSの他にも、著名なサービスのUIデザインが網羅されているため、具体的なUIデザインを設計してみると良いでしょう。

 

5.CVR向上に貢献したUIデザインの改善事例

ここからは、実際にKaizen Platformが手がけたプロジェクトから、UIデザインを改修したことでCVR改善につながった事例をご紹介します。

1. ジャパンネット銀行|ユーザーごとに訴求を変えてCVRを改善

image2-Jul-13-2021-07-57-57-85-AM-1

課題

収益性が高い商材にもかかわらずローンの申込者数に伸び悩んでいた

施策

LPの訴求内容をABテスト。口座の保有者と未保有者を分け、それぞれにパーソナライズした訴求文言でLPを作成し、出し分けを行った。

結果

銀行口座未保有者で109.4%のCVR改善

銀行口座保有者では132.5%のCVR改善

ジャパンネット銀行のUIデザイン改善事例です。銀行というビジネスモデルの中でも、ローンのような金融商材は収益性が高く、事業インパクトが大きな項目です。

従来より「キャッシュカードで借りられる」という訴求内容でローン申込者の獲得を行っていました。しかし、申込者数の伸び悩みを課題として感じていたため、サービスサイトの改修を実施することに。

まずはターゲットユーザーとして、ジャパンネット銀行の口座を保有する人、保有していない人それぞれのニーズに合わせてABテストを実施。その結果から、ターゲットニーズに合わせたUIデザインを出し分けることで、改善効果が見込めることがわかりました。銀行口座未保有のユーザーには、「30日間利息0円」という競合優位で口座開設を促す訴求を行い、保有ユーザーには「ネットで完結」という申込ハードルの低さを訴求するLPをそれぞれ作成しました。

その結果、銀行口座未保有者で109.4%のCVR改善し、銀行口座保有者では132.5%のCVR改善に成功したのです。

 

2. 関西アーバン銀行|冗長なページを改善し、申込完了率が131%改善

関西アーバン銀行

課題

金融商材申込み時の「同意画面」が冗長でユーザーの途中離脱を招いていた。

施策

「任意確認事項」「必須確認事項」に分解し、「必須」の箇所だけを表示させることで1スクロールで同意画面を表示させる設計に改修を行った。

結果

申込完了率が131%改善

関西アーバン銀行(現 関西みらい銀行)のUIデザイン改善事例です。同社では、金融商品の申込の際の同意画面に課題がありました。具体的には一つのページに全ての確認事項まとまっており、3~4スクロールしなければ下部のCTA(申込ボタン)まで到達できない状態でした。

そこで、「任意確認事項」「必須確認事項」に分解し、表示させるのは「必須確認事項」に限定。任意確認事項は、折りたたみ、任意で表示させるという設計にページの改修を行い、1スクロールでCTAに到達できる状態になりました。その結果、金融商品の申込完了率が131%改善したのです。

 

6.UIデザイン改善で使えるおすすめツール

良いUIデザインを作るための考え方や、参考となるトレンドが理解できたら、あとは実践です。UIデザインを改善していくためにはユーザー行動をデータで把握し、課題分析を行うことが大切です。

データ計測や課題分析、改善に役立つツールをご紹介しましょう。

 1. ABテストが無料で簡単にできる「GoogleOptimize」

GoogleOptimize

参照元:ウェブサイト、A/B テスト、パーソナライズのソリューション - Google オプティマイズ

「GoogleOptimize」はGoogleが提供している無料のABテストツールです。サイト内にタグを挿入し、コーディングすることなく直感的にページの変更を行い簡単にABテストができます。

無料かつ簡単に利用できるのが特徴ですが、無料で利用できる範囲は3つのテストまでと限定されており、より精緻なABテストを実施したい場合や、あるいは、丁寧な導入サポートを必要とする場合は国産のクラウドサービスを利用するのが良いかもしれません。

▼GoogleOptimize

https://marketingplatform.google.com/intl/ja/about/optimize/

 

 2. ユーザーの行動ログデータからUIデザインを構築できる「KARTE」

KARTE

参照元:CX(顧客体験)プラットフォーム KARTE(カルテ)

「KARTE」は、ユーザーの行動ログから「どのサイトをどれくらい閲覧したか」「購買に近いページに訪問しているか」などのデータを可視化し、ユーザーごとに合わせたパーソナライズした施策を実施できるのが特徴のツールです。

シンプルな計測ツールやテストツールによる可視化だけでなく、購買行動につなげるための具体的にコンバージョンを促進させる(チャットボットなどを利用した)施策を行いたい方におすすめです。

▼KARTE

https://karte.io/

 

 3. 分析からUIデザイン改修施策まで基本無料で利用できる「Juicer」

Juicer

参照元:ユーザー分析DMP Juicer|ユーザー分析やA/Bテスト、NPSが無料で

「Juicer」は、無料でありながらペルソナ分析からNPS調査といったユーザー分析ができるDMP(データマネジメントプラットフォーム)です。

ユーザーデータの可視化による分析機能に強みを持っているのが特徴ですが、実はそれだけでなくABテスト機能やポップアップなどUIデザイン改善に向けた施策に取り組める機能が豊富なのも特徴です。

基本機能は無料で利用できるため気軽に試せますが、ユーザーデータの詳細な分析やJuicerが保有するデータを活用した広告配信など、データ活用を深化させる活用においては有料オプションとなります。

▼Juicer

https://juicer.cc/

 

4. コーディング不要でUIデザイン改修から分析まで可能「KAIZEN ENGINE」

KAIZEN ENGINE

参照元:KAIZEN PLATFORM

ABテストを始め、コーディング不要でUIデザインの見直しが行えるクラウド型ツール「KAIZEN ENGINE」。いくつものUX改善を手がけてきた「Kaizen Platform」が、長年蓄積したノウハウをパッケージ化したサービスです。

Webサイトのページにタグを挿入するだけで、HTMLやCSS、PHPなどをコーディングする必要なく、WebサイトのUIデザインの改善のための環境を活用できます。高機能テストツール、分析機能、パーソナライズ機能などが搭載されています。

開発コストをかけることなく、すぐに利用を開始でき、外部ベンダー制約やCMS・ASP・パッケージ制約を受けません。膨大な手間や期間をかけずとも、すぐにサイト改善をはじめられます。

レガシーシステムが、比較的まだ多く残っている金融業界などでも簡単に導入してサイト改善に寄与してくれるツールです。

▼KAIZEN ENGINE

https://kaizenplatform.com/ux/kaizen-engine.html

 

7.まとめ

この記事では、UIデザインの定義から具体的なUIデザイン設計のポイント、成功事例などについてお伝えしてきました。

まずUIデザインの設計や既存のWebサイトの改善において、ビジネスモデル問わず共通して考えるべきは、ユーザーが目的を達成するまでのプロセスをいかに障壁なく設計するかです。

この基準を持ち、自社のビジネスモデルとターゲットユーザーに合わせたより良いUIデザイン設計に取り組んでみてはいかがでしょうか。

Webサイト改善のことなら「KAIZEN ENGINE」

サイト改善に取り組みたいけど「自社にノウハウやリソースがない……」「DXってなにから始めれば良いの……?」といったお悩みはありませんか?そんなときは、WebサイトのUX改善を実現できる「KAIZEN ENGINE」の活用をご検討ください。

「KAIZEN ENGINE」は、これまで700社・30,000件以上の改善に取り組み、企業の事業成長を支援してきたKaizen Platformが提供するWebサイト改善のプラットフォーム。Webサイトにタグを1行入れるだけで、既存システムに影響することなく改善環境を構築でき、WebサイトのUX改善を実現します。「KAIZEN ENGINE」の特徴は以下のとおり。

  • タグを1行挿入するだけで、既存システムに影響することなく導入可能。膨大な手間や時間、開発コストを削減
  • 高度な分析やABテストなどパーソナライズWebを実現し、CVR(コンバージョンレート)の改善に貢献
  • DMPやCRMなど多種多様なデータと柔軟に接続でき、より深い顧客理解が可能

これからDXに取り組まれる方や、Webサイト改善による事業成長を実現したい方へ、「KAIZEN ENGINE」の概要とともに、これまでお取り組みをしてきた企業さまとの代表事例を掲載した資料をご用意しました。ぜひご一読ください。

まずは無料資料をダウンロード

 

Kaizen Platformのコラムを定期購読する(月1回)

関連記事

記事一覧へ戻る