UI/UXデザイン（手順・改善ポイント・指標）

UI/UXデザインは、Webサイト上などの顧客満足度（CS）を高めるために重要なデザインです。

UI（User Interface）とは「ユーザーが実際に見たり触れたりする部分」を指し、UX（User Experience）とは「ユーザーがWebサイトや商品、サービスなどを通じて得られる経験や体験」を指します。

例えば、Webサイトの画面上に表示されるテキストや画像、ボタンなどはすべて「UI」に該当します。また、ユーザーが求めている情報をWebサイトで素早く入手できれば、それは良質な「UX」を提供している証となるのです。

つまり、ユーザーに高い満足度をもたらすUXを実現するには、UIが大切な役割を担っているため、どちらも総合的にデザインへ落とし込むことが重要です。

UI/UXデザインを実現する上では、手順や改善ポイント、Googleが提唱する指標を把握しておく必要があります。

1.UI/UXデザインを行う手順

自社の商品・サービスにおいて、UI/UXデザインを的確に取り入れるには、以下のような基本的な流れを知っておく必要があります。

Step1.目的・KPIの設定

まずは、UI/UXデザインを組み込むことで、どのような目的を達成したいのか明確にしなければなりません。可能な限り関係者へ詳細なヒアリングを行い、共有するビジョンにズレが発生しないように調整します。

また、目的の設定と併せて取り組むのが、成果指標の設定です。中間目標の指標には「KPI」の設定が有効で、最終目標の指標には「KGI」を設定します。例えば、商品のリピート率や新規登録ユーザー数など、KPIを具体的な数値目標として設定しておけば、メンバー間で共有しやすいでしょう。

Step2.ユーザーの調査・分析

続いて、ユーザー調査・分析を行います。特に、UI/UXデザインにおいてポイントとなるのは、細かなペルソナ（ターゲットとなるユーザー）の設定です。

ペルソナ設定を細かく行うには、既存ユーザーのアンケート調査をしたり、既存の商品・サービスのユーザビリティ評価をフィードバックしたりすることが有効です。

ペルソナが決まり次第、UI/UXデザインを取り入れることによって、ペルソナへどのような価値提供が可能であるかを分析しましょう。

Step3.プランニング

ユーザーを調査・分析した結果をもとに、プランニングへ取りかかります。このステップでは、主に以下の項目を実行します。

• アイデア分析
• IA（Information Architecture）による分析
• ユーザーフロー・ワークフローの考察
• スケッチ・ワイヤーフレームの制作
• プロトタイプを使ったユーザーテスト

上記の中でも、プロトタイプを使ったユーザーテストは、UI/UXデザインを行う前段階として重要なポイントです。その際、ユーザーニーズの満足度を高めることと併せて、step1で設定したKPIも達成できるように注意してください。

Step4.UI・ビジュアルデザイン

このステップでは、ビジュアルデザインシステムの構築を行います。ビジュアルの全体像は以下のポイントを押さえて、プロダクトに統一性を持たせることが重要です。

• カラーパレット
• タイポグラフィ・ボタンのスタイル
• 共通部品のデザイン
• ルック＆フィール（見え方と操作感）
• デザインカンプ（完成見本）

特に、ルック＆フィールに関しては、ユーザーの満足度を高めるためにしっかりと確認しておかなければなりません。当初の目的や、企業のブランドイメージなどと照らし合わせ、ビジョンに沿った仕上がりであるか入念にチェックしましょう。

Step5.開発

デザインが固まり次第、開発部門へ作業を引き継いで、以下の作業を実施します。

• フロントエンド開発
• バックエンド開発
• デザイナーとの協働

上記の中でも、デザイナーと開発者が協働することは大切なポイントです。多角的な視点で精査することで、欠落箇所がないか確認できます。

Step6.テスト・品質検証

プロダクトを構築後、ユーザビリティテストやバグフィックスなどを実行し、品質に問題点がないか検証します。仮に問題点や改善点がある場合は、フィードバックすることでプロダクトとしての完成度を高めます。

なお、プロダクトのローンチ後も、テスト・改良作業は継続しましょう。実際にユーザーが利用することで、可視化されていなかった問題点や改善点が報告されるケースもあるためです。

2.UX/UIデザインの改善ポイント

プロダクトのローンチ直後などは、UI/UXデザインに関する継続的な改善作業が欠かせません。UI/UXデザインを改善する際は、PDCAを繰り返すことによって、ユーザビリティの向上へとつなげられます。

その他、UI/UXデザインでは、以下の項目も改善ポイントとして有効です。

• CTAのデザイン見直し
• 入力フォームの省略化
• 入力フォームのゲージ表示の追加
• LP（ランディングページ）の導線設置
• ECサイトの構築

上記の中でも、商品やサービスを訴求するLPを設置すれば、CV（コンバージョン）の促進が見込めます。また、商品を販売するECサイトを構築する際は、掲載情報やデザインを工夫することで、ユーザーの購買率アップも期待できるでしょう。

3.UI/UXデザインを考える上で重要な指標

Web集客を考える上で、自社のWebメディアやECサイトなどを、Google検索で上位表示させることは重要な企業戦略の一つといえます。Googleでは、UXデザイン指標として「Core Web Vitals」を提唱しているため、その概要を把握しておくことで良質なコンテンツ作りにも活かせるでしょう。

そもそもWebサイトの健全性を示す重要指標は「Web Vitals」といわれており、「Core Web Vitals」はその中でも中心的な3つの要素を指します。

【Core Web Vitals】
1.LCP（Largest Contentful Paint ）
2.FID （First Input Delay）
3.CLS（Cumulative Layout Shift ）

1.LCP

LCPとは「ページの表示速度」を表す指標のことで、Googleでは読み込み速度が速いページほど優先的に表示させます。

LCPの指標では、2.5秒以内にページ読み込みできれば「良好」と評価される一方、4.0秒以上かかると「低速」と評価されるので注意しなければなりません。

2.FID

FIDとは、ユーザーがWebサイト上のリンクやCTAボタンなどをクリックした際、ブラウザが応答に要する時間を指します。

FIDの指標では、ページがインタラクティブ状態になるまで100ミリ秒以下であれば「良好」、300ミリ秒を超えると「低速」と評価されます。

3.CLS

CLSとは、Webサイトの読み込み中に、レイアウトがずれる現象を数値化した指標のことです。例えば、Webサイトを開いた際、文章と画像の表示タイミングがずれて途中で画面のレイアウトが変わると、ユーザー体験が損なわれてしまいます。

CLSでは「ズレが発生した表示領域の比率× 距離の比率」の計算式で数値を算出し、0.1以下で「良好」、0.25を超えると「低速」と評価されます。

Revisionでは、Webサービス全般を対象に、企画設計からUI/UXを重視したWebデザイン、写真撮影・動画制作までワンストップでサポートいたします。UI/UXの向上を目的とした既存Webサイトのリニューアルなども可能です。500社以上のWeb制作実績に基づき適切にサポートするので、ぜひご相談ください。

＞Web制作事業