MENU ワイヤーフレーム・プロトタイプ

理想状態の実現に向けて、動きのあるアウトプットから、改善を行います。

定義した要件からそれらを情報設計し、ステークホルダーの確認を挟むアウトプットとして、ワイヤーフレームを作成します。サービスデザインを行う際に機能要件から直接UIに落とし込むと、作業の巻き戻しが発生したり、100%の価値提供を行えないUIを作る事になってしまいます。それを防ぐためにまずはワイヤーフレームを作成し、それを用いた簡易なプロトタイプの作成、テストを行います。そうする事でUIの作り込み作業が発生する前に、機能や使い心地の検証を行います。 ワイヤーフレームは要件の整理と漏れの担保、プロトタイプは要件の表現とその要件の要否の担保というように、それぞれの役割を分けて使用します。ワイヤーフレームはステークホルダーとの共通認識や調整をはかるために使用されるので、情報の正確さと簡易に構成を変更できるシンプルなデザインで作成します。対して、プロトタイプはテストとして活用するため、ワイヤーフレームに比べてデザインをある程度作り込み、動線の設計まで行います。これら二つのフレームワークを使い、迅速なサービスの骨格作成を行います。

要点を押さえた情報

ワイヤーフレームを作成する際、要点を整理し、お客様が伝えたい情報を構成に落とし込みます。ワイヤーフレーム作成の目的はあくまで情報を整理することなので、細かいデザインまで作らず、情報の精度と作成速度のみに焦点を当てることが重要です。それぞれのページやセクションで何をユーザーに伝えるべきなのかをミニマムな情報に絞って明記する事で、お客様とチーム間での共通認識が取れた構成をスピーディーに作成していきます。
ユーザーに優先順位を高く見せたいものは、ページの目立つ場所に配置し、よくアクセスするページへのリンクは固定ヘッダーに配置するなど、最終的な完成像を意識した情報配置もこのワイヤーフレーム内で設計します。

動線のつなぎ込み

ワイヤーフレームからプロトタイプに落とし込む際、事前に作成した情報設計をもとに画面遷移の動線を設定します。テストを行った後、修正箇所が発生する可能性が高いため、細かいディティールのデザインまでは行わず、テストを行うのに必要最低限の情報粒度までデザインを組むことで、テストと修正のサイクルを素早く回せるようにします。この時、デザインの粒度は細かく作らないものの、コンセプトや画面の動線が伝わるレベルのデザインは担保します。

要件と動線の改善

最後にプロトタイプが完成したら、それを元にユーザーテストを行います。そこでもらったフィードバックやヒアリングからその機能・サービスのニーズがそもそもあるのか、実際に使ってみて使いづらかった箇所などを模索します。そうして出てきた改善箇所を修正し、ユーザーからの反応がよくなるまでこのサイクルを繰り返します。
プロトタイピングは迅速に、数多くのサイクルをこなします。そうする事で、最終的にユーザーに寄り添った、質の高いアウトプットを迅速に出す事を可能とします。

提供メニュー MENU

上流の調査分析、ユーザー定義、UIデザインまで、提供できるUXデザインプロセスが多いからこそ、企業のあらゆる課題を解決できます。デザインプロセスをそのまま行うのではなく会社に合わせて最適なプロセスを組み提供するため、自社課題に合わせたオリジナルの最適解を提案しています。