uidesign UIプロトタイプテスト
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

UIプロトタイプテスト

UIデザイン|2020年10月15日

2020年10月15日
  • このエントリーをはてなブックマークに追加

今度は、作ったレイアウトを突き詰めていく作業です。

いくら試行錯誤してレイアウトを作っても、判断するのはユーザーです。
デザイナーはあくまでもデザイナーであり、ユーザーではありません。
プロならすぐわかることでも、ユーザーなら分からないこともあります。
デザイナーだからこそ、見落とす使い勝手の悪さも多々あるのです。

そこで力を発揮するのが、プロトタイプテストです。
UIをもう少し具体化して、ユーザーに使ってもらいます。
どんな商品でもサービスでも、使ってもらう以上のテストはありません。
直接触ってもらうことで、ユーザー視点で問題点を炙り出しましょう。

もしかしたら、この段階で致命的な思い違いがわかるかもしれません。
大きく修正が必要な箇所が発見されることもあるでしょう。
その都度、改善を繰り返しながら、最良のUIに近づけていきます。

大事なのは自分たちの立てた仮説を確かめ、改善し続けること。
地道なフィードバックと改善なくして高品質なUIはありえません。

プロトタイプを作る

プロトタイプと一言で言っても色々あります。
紙に書いてプロトタイプとするシンプルなもの。
実際にある程度作り込む本格的なもの。
その分類は、必ずこうすべき、という形があるわけでは無いのです。
あるとすれば、適材適所という言葉だけが当てはまります。

今回は、UIの操作感を検証していかなければなりません。
なので、ある程度触れる形のプロトタイプが必要です。
クリックすれば動くし、ページも遷移できる。
可能であればモーションもつけ、さわり心地も確かめられる。
完璧にする必要がありませんが、ある程度は必要です。

では、ある程度とは、どのくらいなのでしょうか。

基準は、レイアウトにざっくりと色付けするくらいで十分です。
装飾したり細かいデザインが必要なわけではありません。

しかし、色は視認性に対して大きな効果を発揮します。
色があるのと無いのとでは、使い勝手も大きく異なるでしょう。

加えて、もしモーションをつけられるなら、つけましょう。
ボタンを押したときや、画面の遷移における動き。
そうした動きは直接的に「触り心地」として伝わります。
動きがあることでディスプレイ上にも「感触」を与えられるのです。

例えば、スマートフォンで触れた時に凹むモーションをつけます。
すると実際には凹んでないのに凹んだ触感を受けるのです。

なお、難しければ、最初はモーションを省いても構いません。

優先順位としては、まずレイアウトと配色の確認です。
レイアウトと配色が的確でなければ、モーションも意味をなさないからです。
まずはレイアウトと配色を確かめることを優先しましょう。

では、プロトタイプを作るとき、どんな方法が使えるでしょうか。
ここでは2パターンの方法をお伝えします。

XD、Figmaなどのプロトタイピングツール

プロトタイピングツールと呼ばれるツールがあります。
その代表格がXDとfigmaです。
WEBサイトをデザインするときも良く使われますね。
すでに使われている方や、ご存知の方も多いでしょう。

XDはPhotoshopなども販売しているadobe社のツールです。
動作が軽く、直感的に使えるUIも素晴らしいです。
他にも、デザインしたページ同士でリンクをつなげたり。
簡単なアニメーションをつけることができたり。
さらに、共同作業やリアルタイムで制作画面をシェアしたりできます。

Figmaは最近、人気急上昇中のツールです。
特にデザインの共同作業機能が優れており、使いやすいです。
リンクやモーションをつけられるのはXDと同様。
さらに、面白いのがブラウザ上でも動作することです。
パソコンで使うアプリも、もちろんあります。
しかし、インストールされていなくてもブラウザがあれば利用可能。
プロジェクト管理も洗練されていて、快適に使えます。

2つの使い勝手は、自分で使って比較するのが良いでしょう。
大事なのは、どちらが自分にとって直感的で使いやすいかです。

ただ、最終的には両方とも使える様になることをおすすめします。

もちろん、メインで使うツールは決めるべきでしょう。
しかし、会社やチームによってツールが決められているケースもあります。
既存サイトの編集であれば、過去データが何で作られたかも重要です。
XDで作られているなら、XDを使って編集した方が楽なわけです。

最近はツールの多様化が進み、様々なツールでUIが作られるようになりました。
主要ツールは全て慣れておく必要がある、そんな時代になったのです。
最終的に、どんなツールでも使いこなすことをおすすめします。

HTMLとCSSで具体化プロトタイプ

ただ、一方でプロトタイピングツールで全て作れるわけではありません。
特にモーションや、ツールとしての機能は実装できません。

しかし、より本番に近い形で試したいこともあります。
実際にモーションを加えたい、ツールとしての操作性を確認したい。

そんな時は、HTML ✕ CSS ✕ JavaScriptを使いましょう。
少し面倒くさいですが、よりリアルにプロトタイプ化できます。

実際にコードを書く時は、いくつかポイントがあります。
次の内容を意識するようにしましょう。

  • 本番にも流用できるようにつくる
  • いつでも変更しやすいように設計する
  • 実装するのはレイアウトとカラー中心
  • 可能であればモーションも
  • ツールであれば簡易的に使えるように

まず、せっかくコードを書くのですから、無駄にはできません。
本番でも似たコードを書くのなら、流用すべきです。
プロトタイプからすでに開発が始まっていると考えてください。
理想は、本番の時にそのまま装飾だけ施せば使えることです。

そして、UIテストは変更を前提として行うものです。
ユーザーに使ってもらって、何箇所も変更を加えるものです。
もしかしたら、根本的な変更が必要かもしれません。
いざ変更する時に、簡単に変更できるように設計しましょう。
現場でもささっと変えてしまえる状態がベストです。

また、今回は完璧なものを作るのではなくプロトタイプです。
実装する内容も、レイアウトとカラー中心でOKです。
モーションもあれば、より最適です。
しかし、先程も言ったとおり変更前提であることを忘れてはいけません。
シンプルにUIの操作感を確かめられたらOKなのです。
決して、作り込もうなんて思わないようにしてください。

もし、ツールとしてユーザーが使うアプリの場合。
簡易的に使えるように実装しましょう。
表面的なツールの機能をJavaScriptで再現できます。
フロントエンド側で出来る範囲内で、実装してみましょう。
よりリアルなプロトタイプテストが出来るはずです。

評価、改善

プロトタイプを作ったら、いよいよテストを始めましょう。
これまで積み重ねてきたデザインが、初めて評価されます。

試行錯誤して、今まで作り上げてきたことと思います。
それでも、数多くの穴が見つかると思ってください。

実際に使ってみてもらったら使いづらかった。
一般の人から見たら、迷うところがたくさんあった。

そんな発見が無数に見つかるかもしれません。

ただ、それもUIデザイン過程の1つなのです。
必ず必要となる工数だと考えてください。

一度作ったものを壊すのは、かなり面倒だと思います。
しかし、より良いアプローチがあるなら、壊すことを恐れてはいけません。
常に最良のアプローチを実装し続けるから、最良のUIになるのです。
今までは、到達点までの距離をなるべく縮めていたにすぎません。

恐れずに、フィードバックを受け止めましょう。
そして、面倒臭がらず、地道に改善し続けましょう。
地道な改善こそ、最良のUIに繋げる最短距離に他なりません。

ユーザーを集めてテストする

ユーザーの集め方は、インタビューと一緒です。
なるべく「本物のユーザー」に近いセグメントを集めましょう。
すでに公開されたサービスなら、既存のユーザーに声をかけましょう。
専用のコミュニティなど作るのも、良い方法です。

テストする場所は、カフェでもオフィスでも、自由で構いません。
ただし、テストだけに集中できる環境を作りましょう。

理想としては6畳以上の個室です。
とは言え、状況によって用意できないこともあるでしょう。
そんな時は、下記の内容を参考にして環境を選んでください。

  • うるさすぎないこと
  • 高速インターネット環境が整っていること
  • 相手の使っている様子を観察できる席であること(隣など)
  • 最低でも動画で記録できること
  • UIをテストしながらメモを取れるテーブルの広さがあること

この条件を満たしていれば、問題ありません。
逆に条件が満たされない場合、十分なテストが出来ないかもしれません。
なるべく条件を満たすように心がけましょう。

テストでチェックすること

では、いよいよテストを初めていきます。

テストには、必ず確認すべき評価基準があります。
今回ご紹介する基準に対して、素直な意見をもらいましょう。
ユーザーが高評価をつけるまで、改善を続けてください。

わかりやすく使いやすいか

まず、UIがわかりやすいか確認してください。
わかりやすく使いやすいことはUIにおいて最低条件です。
この項目を満たせない場合、長期的に使ってもらうのは難しいでしょう。

わかりやすいUIは、基本的にシンプルです。
オブジェクト指向で作ることで、必然的に分かりやすくシンプルになります。

もし何度改善しても分かりにくい場合、構造から間違っているかもしれません。
オブジェクト指向で作られているか、確認してみてください。

マニュアルを多用せずに使えるか

念の為、ヘルプやマニュアルを用意したほうが良いです。
作って損になることはありません。

しかし、マニュアルに頼らないと使えない場合はダメです。
マニュアルを使わなくても使いこなせるように作りましょう。

良いUIは説明を聞かなくても、直感的に使えるものです。
直感的に使えるようになるまで、ブラッシュアップしてください。

狙い通りの反応か

自分自信で「こう使ってくれるだろう」という仮説があるはずです。
想像どおりの使い方をしてくれるまで、改善しましょう。
予期しない迷いや使いづらさがあったら、細かく改善を続けます。

ちょっとしたボタンの配置位置が違うのかもしれません。
説明や注釈が、意図しない受け取り方をされているのかもしれません。
想像どおりに進まない原因は様々です。
しかし、細かく改善し続けることで理想に近づきます。
意図した通りの使い方になるまで改善を続けましょう。

ただ、意図しない使い方が、すべてNGなわけではありません。
もしかすると、思い当たらなかったヒントになることもあります。

サービスの新しい使い方を発見したり。
UIの改善策を導き出せたり。
意図しない使い方は、同時にヒントだと考えましょう。
すべての情報に価値があるのです。

操作感は心地よいか

モーションがある場合、特にチェックする項目です。

触った感じの操作感、モーションは、心地よさを与えるでしょうか。
逆にUIを使う時の邪魔になったりしないでしょうか。

いくら作り込まれたモーションでも、操作の邪魔なら無意味です。
時々、作り込みすぎて、逆に邪魔になるモーションもあります。
何かをクリックした時、モーションに数秒使われたらどう思いますか?
いくら動きが凝っていても「早くしてくれ」とストレスになります。

モーションを入れる時は、下記の内容に注意してみてください。

  • ユーザーが期待するものになっているか
  • 動きが一貫してるか
  • デザインのストーリーに沿っているか
  • デザインと関係し合いユーザーの意思決定に影響を与えているか

ユーザーが求めない自己満足になってはいけません。
動きにバリエーションがありすぎても鬱陶しいだけです。
デザインの意図に合わなくても違和感になります。
本来のデザインにとって相乗効果にならなければ無意味です。

格好いいだけで良いモーションにはなりません。
本来、ユーザーがしたいことの邪魔になってはならないのです。
UIの本質を考え、シンプルにデザイン意図に沿った動きにしましょう。

プロトタイプテストで気をつけること

少し、「共感とタスク分析」の内容と被るかもしれません。
なぜならプロトタイプテストもインタビューの一種だからです。

まずはインタビューの基本を守ってください。
記録媒体の準備や相手との接し方。
「共感とタスク分析」の項目で扱った内容は抑えましょう。
その上で、今回お話する内容を取り入れてください。

ラポールの形成や、記録環境、話し方。
インタビューの基本が無ければ、今回の内容は活きません。
改めて「共感とタスク分析」の項目を読み返してみてください。

ユーザーと一緒に作る

UIを始め、サービスは基本的に「共創」です。
開発者だけでなく、ユーザーと一緒に作り上げていくものです。
これは、単純にユーザーから意見を集めるという話ではありません。
一緒にプロトタイプやUIを設計してもらうという話です。

使っていて、もしユーザーが違和感を感じたなら。
理想的なUIを紙に書き起こしてもらうのも良いでしょう。
ツールが使えたりコードをいじれるなら、修正してもらっても構いません。
言われた通りにとなりでUIを改善してみるのもありでしょう。
ただし、必ずバックアップはとっておいてください。

このように、ユーザーに直接手を動かしてもらうのです。
一緒に話し合い、まるでボードメンバーのように接しましょう。
ユーザーはチームの一員だと思ってください。
一緒にサービスを作る仲間なのです。
そこまで引き込むからこそ、本当にニーズを捉えることができます。

ユーザーも、最初は案外適当なものです。
なんとなく感じた、本質的でない意見を発言しがちです。
仲間として踏み込んでもらうからこそ、より自分ごととして考え始めます。
結果的にUIにとって価値のある意見になるでしょう。

じっくり観察する

ユーザーが使っている様子を、隣で観察しましょう。
環境探しで「出来れば隣にいける場所がいい」のはこのためです。

隣でじっくりと見て、気になった箇所があれば訪ねてください。

例えば、WEBサイトをスクロールするとします。
すると、時々、手と目が止まる箇所があるはずです。

少し間を置いて「どうして手を止めたか」聞いてみましょう。
すると、具体的な答えを貰うことができるのではないでしょうか。

セクション名に興味を惹かれたかもしれません。
単純に、読みづらかっただけかもしれません。
知らない言葉が出てきて気なったのかもしれません。

人それぞれ、手を止める理由は様々です。
ツール形式のUIであれば、操作に迷う箇所がいくつもあるでしょう。
それを逐一メモを取りながら、訪ねてみてください。
どうして、そこで迷ったのか確認する必要があります。

隣で使う様子を観察していると、様々なことに気づきます。
マーケティングで言うエスノグラフィーにも似ています。
じっと観察して、気づいたことを有益な情報に変えていく。
観察が、想像以上の発見を与えてくれるでしょう。

すべての意見を取り入れない

ユーザーとの共創重視であることは外せません。
しかし、当然、全て的確な意見ばかりではないのです。

  • 反映したら、ブランドが崩れてしまう
  • 機能ばかり増えて、何がしたいのが分からなくなる
  • 一部の人だけには有効だけど、大多数の人には無意味

特に、こうした意見は反映させるべきではありません。

ただ、そのうち価値が出る時もあるので、データに留めておきます。
全ての意見は有益ですが、タイミングも重要なのです。
導入のタイミングを間違えれば、大きな失敗に繋がることもあります。

だからこそ、的確な取捨選択は必要です。
どの意見を今取り入れるべきなのか、良く考えましょう。

上手く意見を整理できない場合もあるかもしれません。
そんな時は、フィードバックマップを使ってみるのも良いでしょう。
一通り意見をまとめ、リスト化してみることで、冷静に精査できます。
もしフィードバックマップがややこしければ、単純にリスト化でも構いません。

意見を整理し、何が今必要なのか、冷静に判断しましょう。
すべての意見や要望を取り入れられるほど、UIは万能でもありません。
その中で、何が最良なのかを取捨選択することが大事です。

言葉の裏にある本質的なニーズを探る

ユーザーの言葉には、多くの場合、裏に隠された欲求があります。
人間は本当に欲しいものは20%しか言語化できないとも言われます。
そして使いやすさの判断はできても、UIデザインのプロではありません。
だからこそ、UIデザイナーの出番なのです。

例えば、ユーザーがレシピアプリに対して、こう言ったとします。
「レシピの説明がわかりづらい。もっとわかりやすくしてほしい」
一見これは、レシピの文章をわかりやすくすれば良いと捉えられます。
ユーザーも、レシピの文章をどう変えるか考え出すかもしれません。

しかしUIとしての解決策は他にもあります。
文章を変えるというより「わかりやすくする」が本質的なニーズです。
文章を変えることは、わかりやすくする方法の1つにすぎません。
無数にある対策の1つでしかないのです。
では、どうすれば、よりわかりやすくなるのでしょうか。

分かりやすくするなら「説明動画」を入れることもできます。
UIデザイナーは職業柄、数多くのUIを見ることになるでしょう。
だからこそ、頭の中に引き出しも溜まっていくはずです。

ユーザーの意見をそのまま受け入れて良いこともあります。
しかし、その多くが「原石」だと思ってください。
磨けば光るけれど、そのままだと価値にならない。
だからこそUIデザイナーだからこその解決策を作り出すのです。

完成は存在せず、常に改善を続けること

よく、どこまでやったらUIは完成かという話が出ます。
ところがUIに完成は存在しません。
一時的な到達点はあっても完成ではないのです。
むしろ、改善し続けることが前提を考えてください。

例えば、今の時代に10年前のFacebookのUIが適切だと思いますか?
10年前のサービスのUIが、今でも同じ感覚で使われているでしょうか。

そんなことは、まずありえません。

時代が変わればUIも変わるのです。
新しいデバイスが生まれ、新しい理論も生まれます。
そして人の感覚もどんどん変化します。

昔は使いやすいと思われたサービスも、じきに時代遅れになります。
そのまま何も変化しないなら、淘汰されるでしょう。
時代や感覚の変化と共に、UIも改善し続けていく。
だからこそ、完成することは無いのです。

STARTOUTのUI自体、まだまだブラッシュアップしきれていません。
だからこそ、常日頃、次のUIを模索し、改善を続けています。
今後も改善は止まることはありません。

UIに完成はないのです。
いつでもユーザーの声を聞き、変化していく。
常に追求し続けるべき存在だということを意識しておきましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら