初心者向け 失敗しないプロトタイピング|共有のコツ

Pocket

こんにちは!今回のテーマは「初心者向け 失敗しないプロトタイピング|共有のコツ」です。

プロトタイピングツールを使ってWebサイトやアプリのプロトタイプを共有する際に起こりがちな失敗と回避方法をご紹介します。
このコツを押さえることでプロトタイピングをより効率的に行うことが出来ます。


プロトタイピングツールを使う時のコツ3選

プロトタイピングツールを使う時のコツは大きく分けて3つです。
「実機確認」「回遊できるようにする」「説明しすぎない」です。


実機確認

プロトタイピングツールを使って確認する時は、必ず実機確認を行ってください。
PC向けならPCで、スマホ向けならスマホでプロトタイプを確認します。スマホの場合は、可能であれば比率の違う複数の端末で確認するのが望ましいです。

どうして実機確認が必要なのかと言うと、実機だからこそ気が付けるポイントがあるからです。
ファーストビューやスクロールした時の印象や要素1つ1つのサイズ感など、本番環境と同等の状態で見ないと確認の意味を成さないことも…

よくある失敗が、プロトタイプを確認するためにメールでURLを共有した際、スマホ向けのページなのにPCでしか確認をしないケースです。
PCでも大枠のデザインや遷移の確認は出来ますが、実機で見た時の細かいニュアンスまでチェックすることが出来ません。

これを回避するために、プロトタイプを共有する最初の段階で、実機で確認するようプロジェクトメンバーに明確に伝えておいた方が良いです。


回遊できるようにする

ページ内を回遊するためのリンクを設置したり、目次ページを作ってください。

ページ数が多い場合、遷移に行き止まりがあったり、見たいページにすぐ遷移出来ないと、確認し辛くストレスになってしまいます。
それを防ぐために、最初のページに戻るリンクや目次ページを作り、回遊しやすいようにします。遷移に行き止まりを作らないようにするイメージです。

最初のページへ戻るためのリンクはヘッダーに仕込んだり、他のUIを邪魔しない形で設置すると分かりやすいです。
また、目次ページはページの項目(トップページ、会員登録、お問い合わせなど)が多い時に有効です。ボタン風にしても良いですし、箇条書きのテキストにリンクを付けるだけでも十分です。


説明しすぎない

プロトタイプの遷移やコンセプトについて説明しすぎないようにして下さい。
何故かと言うと、サービスに初めて触れる顧客と同じ立場に立つ必要があるからです。遷移を丁寧に説明しすぎて、UIチェックを阻害しないことが目的です。
顧客は何も知らない状態でサービスに触れるので、同じ立場になって考えないと適切なプロトタイピングは出来ません。

よくある失敗が、「このリンクを押すとCVページに飛ぶ」と言った遷移自体を説明してしまうことです。
ここまで説明してしまうと、このUIは分かりやすいのか?使いやすいのか?と言った純粋なUIチェックが出来なくなってしまいます。

場合にもよりますが、プロトタイプを確認する時にどこまで説明するかは事前に慎重に決めてください。
最低限の範囲としては、プロトタイピングツールの使い方に慣れていない人のために、基本的な操作方法を説明するだけでも十分です。


おわりに

いかがでしたでしょうか?
プロトタイピングがうまくいかないなとお悩みの方は、今回お話した3つのポイントに注意してみてください。

それではまた!デジマースのコンでした。

Pocket