UIUXデザインのためのフレームワークとは?デザインの流れも解説!

毎日のように新しい用語が登場するマーケティングの世界ですが、ここ数年その重要性が叫ばれている言葉にUI/UXが挙げられます。ユーザーインターフェイスとユーザーエクスペリエンス。

それぞれの言葉の説明は他の記事に譲りますが、本質的な意味では「顧客のニーズを満たす」という言葉に収束されます。

CX=カスタマーエクスペリエンスという言葉もありますが、Webサイトにしろ、Webサービスにしろ、物理的なプロダクトにせよ、顧客のニーズを完全に満たしてあげることさえできれば、結果は自ずとついてくるということでしょう。

世界を変えたと言っても良いプロダクトの一つにAppleのiPhoneがあります。

従来の携帯電話のUI/UXを根底から覆したこのスマートフォンは世界中の携帯電話のあり方を変えました。

UIUXの成功例の最たるものと言えるでしょう。

本記事ではそのUIUXについて以下の3点をご紹介します。

・UIUXデザインをするときに大切なこと
・UIUXのフレームワークとは
・UIUXデザインのフレームワーク3選

貴方がどんな製品、サービスを扱っているにせよ、共通して活用できる情報となっておりますので、是非最後までご覧ください。

UIUXデザインをするときに大切なこと

まず第一に大事なことは「木を見て森を見ない」状態にならないように気をつけることです。

「UIUXデザイン」という言葉を聞くとつい近視眼的に、「デザイン」の部分に意識が行ってしまいます。

UIUXデザインはとても重要なポイントではありますが、マーケティングの一部です。

マーケティングの大前提を再確認しておこう

昨今UIUXの重要性が語られる製品やサービスのマーケティングのかなり大きな部分をWebマーケティングが担っています。

Webマーケティングの世界的権威といえば、GAFAがまず挙げられますが、やはりマーケティングにおいては検索エンジンを握っているGoogleの考え方が参考になります。

そのGoogleがWebマーケティングの基本理念とも言える、「Googleが掲げる10の事実」という考え方を公表しています。Webを使ったマーケティングをする際の大前提となりますので、まずここを確認しておきましょう。

  1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
  2. 1 つのことをとことん極めてうまくやるのが一番。
  3. 遅いより速いほうがいい。
  4. ウェブ上の民主主義は機能する。
  5. 情報を探したくなるのはパソコンの前にいるときだけではない。
  6. 悪事を働かなくてもお金は稼げる。
  7. 世の中にはまだまだ情報があふれている。
  8. 情報のニーズはすべての国境を越える。
  9. スーツがなくても真剣に仕事はできる。
  10. 「すばらしい」では足りない。
    すべてがUIUXに適用されるものではありませんが、「Webマーケティングの本質」と言える大事な項目なので是非頭に入れておきましょう。

UIUXに向けてピックアップするならば、1,3,5,7,8,10あたりでしょうか。

・徹底的にユーザー視点に立って
・ユーザーの予想以上の物を提供する

というところに収束していきます。

筆者がiPhoneに乗り換えたのはiPhone 3GSの時代ですが、決定的な理由は「フリック入力の圧倒的な速さ」でした。

従来の携帯電話の入力方法からすれば考えられないほどの効率的な入力方法で、友人からフリック入力を見せてもらった瞬間に購入を決意しました。

徹底的にユーザーの目線に立った結果、ユーザーが思いもつかないほどの「UIUX」を創り出すことに成功した好例です。

UIUXデザインのポイント

フリック入力のようなUIUXをつくりだすのは当然容易なことではありませんが、抑えておくべき重要なポイントは存在します。

・ユーザーが感じていることをヒアリング、調査すること
・徹底的に考え抜いたペルソナを設定すること
・潜在ニーズを満たしてあげること

ユーザーの意見に耳を傾け、ペルソナ=顧客像を描き、そのペルソナ本人が自覚はしていないけど、次の段階で求める「潜在ニーズ」を満たしてあげること。

Googleの検索結果やAmazonの「よく一緒に購入されている商品」などはユーザーニーズの先手を売っているからこそ、ユーザーに刺さるわけです。

とはいえ、そういったUIUXをゼロからデザインするのは至難の業なので、その助けとして、フレームワークを利用するわけです。

UIUXのフレームワークとは

漠然と考えていても良いUIUXをデザインすることはできませんので、先人の知恵の結晶とも言える「フレームワーク」を活用するのがセオリーと言えます。

フレームワークとは?

重要な部分なので基礎用語の説明も入れておきます。

フレームワークは意外と聞き馴染みのない言葉かもしれません。

では、マーケティングの3C、4Pはいかがでしょうか。こちらは聞いたことあるという方も多いのではないでしょうか。

3Cは経営戦略の方向性を決めるためにCustomer(顧客), Company(自社), Competitor (競合)を分析していくものです。

人間漠然と考えていると思考が分散してしまうので、こういった「考えるべき項目」を最初から設定してあげるほうが良い結果が出ることが多く、そのための枠組みを「フレームワーク」と呼んでいます。

UIUXデザインのフレームワーク3選

予め申し上げておきますが、UIUXデザインは非常に奥が深く、完璧な正解は存在しない領域です。

そのため適用できるフレームワークも多岐に渡りますが、今回は特に重要だと思われるフレームワークを3つご紹介させていただきます。

MECE

マーケティング全般の文脈でもよく紹介されることの多いフレームワークですが、元々の英語が少々難しいこともあり、日本人にとっては非常に理解が難しいフレームワークであるようです。

ですが、その考え方は圧倒的に重要です。是非この機会に理解してしまいましょう。

MECEはMutually Exclusive, Collectively Exhaustiveの頭文字をとったものですが、平均的な英語力の日本人にとっては分かりづらいだけなので、とりあえず無視してOKです。

日本語で表すとするならば「漏れがなく、ダブリもない」ということです。

提供しているプロダクトに「漏れ」があればその部分を求めているユーザーはすべて失ってしまいますし、「ダブリ」があると飽きて離脱されてしまうだけでなく、自社のリソースの無駄遣いになります。

たとえばGoogleマップで現在地から目的地までのルート検索をした場合に、

・車
・公共交通機関
・徒歩
・自転車
・飛行機

のように全ての移動手段が出てくること、そして「徒歩とジョギング」というような重複が無いようなUIUXです。

普段何気なく使っているサービスが世界最高峰のものなので気づきづらいですが、こういった細かい部分まで作り込まれているのが優れたUIUXです。

デプスインタビュー

Depth Interview。Depthは「深度」を表す英単語ですが、1対1でより深いところまで聞き取るインタビューの手法です。

ユーザーニーズの特定やペルソナの設定をするためによく行われます。

マーケティング調査のためのインタビューはコスト面から一般的にはグループで行われることのほうが多いですが、一人に対して深堀りして聞いていくことで、より鮮明な情報や、ユーザー自身も気づいていなかった(そしていちばん重要な)潜在ニーズにたどり着くことが可能になります。

デプスインタビューについてだけでも詳述すると一つの記事なってしまいますが、非常にわかりやすい例があります。

スポーツ用品のシグネイチャーモデルです。

スポーツはある意味シンプルな世界なので、たとえばバットを作っているメーカーはイチロー氏や松井秀喜氏のようなトッププレーヤーと共同開発をします。

その道のトップとデプスインタビューを繰り返すことによって理想的なバットにとってのUIUXを作り上げていると考えると一般的なマーケティングにも落とし込みやすいでしょう。

スポーツ用品に限らず、パソコン用品やWebサービス、料理器具に至るまで様々な業界で行われていますので、是非参考にしていきましょう。

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

また横文字がでてきましたが、マーケティング用語はどうしても欧米から入ってくることが多いので、お許しください。

Cusutomer Journey Mapは「顧客が製品を見つけて購入して、人にすすめるまでの間にどういうポイントがあるか」を洗い出したものになります。(※1)

人の購買行動の流れを可視化したものとも言えますが、言葉で言われても分かりづらいので、「新卒の社会人がパソコンを買う」という想定で実際に作ってみました。

こうして表にまとめてみるとユーザーがどう考え、どこでメーカーやディーラーと接触し、そして販売側は何をするべきなのかが見えてきます。

「ひとつひとつを考えていくと全体像が見えてくる」というのがフレームワークを使う大きなメリットです。

まとめ

いかがでしたでしょうか。

本文中でもご紹介したとおりUIUXデザインはGAFAMのような世界トップクラスの企業が、世界トップクラスの人材をたくさん抱えて突き詰めている領域です。

全く新しいものを作るのは至難の業ですが、逆に言えば超良質なお手本が世の中にたくさんでてきているということでもあります。

是非今回の記事を参考にし、身近な優秀なプロダクトをフレームワークに落とし込むという練習をしてみて頂ければと思います。

その練習の成果が、貴社のビジネスのUIUXデザインの改善に少しでも助けになれば幸いです。




エンジニア募集中

株式会社キャパでは中途エンジニアの募集をしています。
私たちと一緒に働きませんか?
募集概要について詳しくは


◆参考文献:
※1 impress business media|カスタマージャーニーマップとは? UX向上を達成する7つの事例と作成方法
https://webtan.impress.co.jp/e/2014/03/24/16722

impress business media|UXデザインに役立つフレームワーク5選【すぐに使えるテンプレ付き】
https://webtan.impress.co.jp/e/2015/03/12/19422

MONGOROID|UX設計がブレない、Webサイト制作のフレームワークとは?【保存版】
https://www.mongoroid.com/blog/design/uiux_iuc20181106.html

関連記事一覧