WNT-Design
Design

サービスのユーザビリティを向上させる、UI/UXデザインの進め方

サービスのユーザビリティを向上させる、UI/UXデザインの進め方

こんにちは、デザイナーの古賀です!

私はWebサービスやスマホアプリなどのUI/UXデザインに携わることも多いのですが、そもそもプロジェクトの進め方について悩むという声をよく耳にします。UXデザインといえばカスタマージャーニーやペルソナといった言葉はよく聞きますが、実際何から手を付ければ良いものか迷いますよね…。
今回の記事では、ユーザビリティ向上のためによく使われる手法や調査方法から、それらを活用した具体的なケースまで、サンプルを交えながら紹介します。

こういう進め方もあるのだなと、参考になりましたら幸いです!

調査フェーズの重要さ

サービスの立ち上げやリニューアルを進める時には、ついつい分かりやすいグラフィックが欲しくなりますが、いきなり見た目の作り込みに入ることはオススメできません。

最初の調査フェーズで、目指す方針やユーザーの掘り下げをしてチームで共通認識を持たないと、後から「本当にこのデザインで良いんだろうか…?」「このサービスってどう使われるんだっけ…?」などと、判断基準がぶれてしまい、皆迷いを抱えながらプロジェクトが進行していくことになります。

特に調査フェーズに力を入れた方が良いのはこんなパターン

fig01

ユーザビリティ向上のために行う主な手法

それでは実際に、ユーザビリティ向上のための手法を簡単に紹介していきます。
厳密な定義はありませんが、それぞれの役割と流れはこちらの図を見ていただければイメージしやすいと思います。
fig02

ユーザビリティ評価

実際にサービスを使い、「使いやすさ」「信頼性」などの項目を立てて評価します。

目的

デザイナーなどUIに知見のある人が経験則に基づいて評価する「ヒューリスティック評価」は、具体的な改善点を抽出することに向いています。
それに対して一般的なユーザーに実際にサービスを使ってもらう「ユーザビリティテスト」は、リアルな潜在ニーズを抽出することに向いています。

効果

調査規模にもよりますが、比較的手軽に取り組むことができて、現状の課題や改善点を把握するのに有効です。
fig03

競合分析

マーケットを分け合うことになる競合他社に対する分析を行います。

目的・効果

自社と他社のサービスを比較することで、強みと弱みが明確になり、戦略が立てやすくなります。

期間

簡易的に行う場合は数日程度、協力会社に依頼して規模と精度を上げる場合は1ヵ月以上と想定したが良い場合もあります。

主な比較項目

・独自機能 ・デザインのトーン ・モバイル対応 ・サービス形態 ・ビジネスモデル など
fig04

ペルソナ策定

典型的なサービス利用者の人物像を、具体的に書き表してみます。

目的・効果

利用者の人物像が具体的になることで、チーム内での認識を揃えることができます。このペルソナを元にカスタマージャーニーを作り、サービスのタッチポイントを整理したり、「ペルソナが使ったらどうか?」という視点でプロトタイプを評価するのに有効です。

作り方

ターゲット属性の資料、ユーザーインタビュー、サイトの解析情報などを元に、人物像の骨組みを作っていきます。「30代女性」のような大まかな括りではなく、職業、収入、趣味、居住地…など詳細に設定してリアリティを上げるのがポイントです。ペルソナは作って終わりではなく、インタビュアーに共感できるか確認してもらったり、プロジェクトの進行中でも違和感を感じたら見直しましょう。
fig05

カスタマージャーニーマップ

ユーザーが商品・サービスそのものやニーズを認知してから、購買・利用に至るまでのプロセスを視覚化したものです。一連のプロセスの中でのユーザーの思考と行動、感情をマップ化します。

目的・効果

ユーザーの行動全体に目を向けることで、サービスを使っていない時も含めて全体を俯瞰して見ることができます。サービスのタッチポイントごとに、ユーザーが何を求めているのか整理するのに有効です。

作成のポイント

  • ペルソナを先に作っておくことで、時系列で考える際も行動がイメージしやすくなります。
  • 年、月、日など、どのスパンで整理するかはサービス内容により異なります。
  • 「ユーザーにこう動いてほしい!」という期待ではなく、冷静にペルソナがどう動くかをイメージしましょう。
    fig06

モックアップ

モックアップとは、トランジションやジェスチャーなどの動きをつけて操作できる状態のものを指します。

目的・効果

  • 使い勝手を早い段階で検証できる。
  • 仕様書やテキストでは伝わりづらい、サービスのアイデアを見せる際に活用できる。
  • 操作性、機能を確認できる。

様々なタイプ

  • ペーパープロトタイプのように、紙とペンでアイデアをすばやく視覚化するもの
  • プロトタイピングツールを用い、画面遷移やボタンの動作を確認できるもの
  • 動作に必要な最小限の機能を実装した実際の操作感に近いもの
    など、目的によってリアリティを使い分ける必要があります。
※「モックアップ」「ワイヤフレーム」「プロトタイプ」等の用語の定義は、人によって解釈の幅が異なることが多いように感じます。お互いに何を想像しているか、具体的なイメージで擦り合わせましょう。

fig07

実際のプロジェクトでの活用例

では実際にこれらの手法をどのように活用していくか、ビーワークスで担当したUI/UXデザインの実施例を参考に紹介します。

※具体的なサービス情報や条件はアレンジして紹介させていただきます。

小売系ECサイトリニューアル

前提条件

  • スピード重視で進行する必要がある。
  • サイト内のパフォーマンスなど定量的な計測は行っておらず、また現段階からの計測も難しい。

進め方

短いスケジュールでデザインに入る必要があったため、競合調査とユーザーインタビューをコンパクトに行い、その分制作に時間を費やすという進め方を選択しました。
実際のユーザー像に近いペルソナを持つ社内メンバーに、簡易的なユーザーインタビューを行いました。これにより仮説検証しやすくなり、アウトプットまでの工程がスムーズになります。

実施した手法

fig08

CGMサービス新規立ち上げ

前提条件

  • 大まかなサービス概要やターゲットは決まっているが、具体的な機能要件やマネタイズの流れが未確定。
  • ジャンルの近いサービスが非常に少なく、メンバー間でアウトプットの共通認識が持てていない。

進め方

これからどんなサービスを作ろうとしているのか、全員の認識を揃えるために、簡易的なプロトタイプを先行した珍しい例です。
その後にペルソナ策定やカスタマージャーニーマップの作成を行い、り詳細な使われ方を定義しながらプロトタイプをブラッシュアップしていきました。

実施した手法

fig09

全部やる!ではなく何をやるかの選び方が大切

ユーザビリティ向上のための手法をいくつか紹介させていただきましたが、実際のプロジェクトでの活用例の通り、スケジュールや予算によって全部ガッツリやる!ということはかなり稀です。

また、例えば同じ「ユーザーインタビュー」でも、力のかけ具合でやることは大きく変わります。

  • 検証の精度を高めるために、時間と費用をかけて外部被験者を集めて実施するケース
  • スピードを優先して、関係者内でターゲットに近いユーザーを集めて実施するケース

特にサービスの立ち上げやリニューアルは背景や条件が多種多様なので、「これをやっておけばOK」と言える進め方はなかなかありません。
状況に応じて取り入れる手法をカスタマイズしていくことが大切ですね。

ビーワークスなら進め方から一緒に検討します!

ビーワークスではBtoCサービスから業務システムまで、Webサイトに掲載されている実績以外にも多種多様なUI/UXデザインを手掛けています。
要件がしっかり固まっていなくても、進め方から一緒に考えていくこともできますので、ぜひご相談ください!
ビーワークスについて詳しく知りたい方はこちら

thumb

記事が気に入ったらシェアしよう

この記事を書いたメンバー

古賀 国朗 デザイナー

Webを中心に色々なデザイン作っています。
新しいものが好きです。
漫画は毎週読んでます。

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 乙女座
  • 天秤座
  • 蠍座