KOBITブログ

優れたUX設計のために:ワイヤーフレームとプロトタイプで骨格と表層を作る

この記事は約 7分 で読めます。

Closeup of web designers prototyping responsive website for mobi

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
前回記事では、優れたUXを設計するための5つの要素のうち、2つ目の「要件」、3つ目の「構造」についてそれぞれご紹介しました。

今回は残り2つ、4つ目の「骨格」と5つ目の「表層」について、それぞれ説明していきたいと思います。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

第二回:UIとUXはどう違う?UXの基本と、優れたUXを構成する7つの要素

第三回:SEOからSXOへ?SEOとUI/UXの関係

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

第五回:優れたUX設計のための要件と構造:情報アーキテクチャとインタラクションデザイン

要素④ 骨格:ワイヤーフレームを作成する

Webサイトの構造を明らかにした後は、いよいよ具体的なUI(ユーザーインターフェース)の設計に入ります。情報アーキテクチャやインタラクションデザインに基づいて、ユーザーの理解や動作を促すようなデザインを作成します。

ワイヤーフレーム

インターフェースデザインは視覚的に理解できるよう手書きのスケッチなどを活用します。特定のペルソナがWebサイトを利用する場面に合わせて、提示するべき画面を適宜作成します。

Webサイトの見栄えを簡潔に記す雛形は「ワイヤーフレーム」と呼ばれます。何をどこに配置するかといった設計を、最低限の枠線だけで表現するものです。メニューやロゴ、コンテンツなどを配置し、サイトの骨格を決定します。

ワイヤーフレームはツールを使って簡単に作成できます。CacooやMoqupsといったWebサービスは無料または低価格でWebサイトの設計ができるので便利です。

cacoo

Cacoo(https://cacoo.com/lang/ja/home) 

moqups

Moqups(https://moqups.com/) 

ワイヤーフレームを作成する上で最も重要な要素の一つにナビゲーションが挙げられます。

ナビゲーションが整理されていないWebサイトでは、欲しい情報が見つからず、自分がどこにいるのか分からなくなってしまうからです。メニューをどこに、どのように提示するかがナビゲーションの容易さを決定します。

UIスタック

Webサイトの骨格を作成する際は、全ての画面について検討しなければ優れたUXが実現できません。

ECサイトで商品を検索し、購入する流れをワイヤーフレームで作成したとしましょう。検索結果が0件だった場合や、買い物カゴに商品を入れていない場合など、特殊なケースが網羅されていない場合が多々見受けられます。

コンピュータシステムには5つの状態が存在すると言われ、UIスタックと呼ばれています。UIスタックを考慮していないWebサイトはどんなに見栄えが優れていても、高いUXが提供できないのです。(参考:http://postd.cc/how-to-fix-a-bad-user-interface-part1/)

ui%e3%82%b9%e3%82%bf%e3%83%83%e3%82%af

理想状態

ユーザーがWebサイトの価値を享受できる正常な状態です。多くのWebサイト作成者は、この状態について十分に検討を重ねています。

エンプティ状態

初めてユーザーがWebサイトを使用する際には、データが何もありません。この状態で次に何をするべきかを適切に案内しなければ、ユーザーはWebサイトの利用を止めてしまうでしょう。どのような機能とコンテンツが加わり、価値を提供するのかをユーザーに周知する機会がエンプティ状態です。

また、自分のデータを全て消去した場合、検索結果が0件だった場合などもエンプティ状態に該当します。このような場合のUXを作りこむと、ユーザーの満足度が向上するでしょう。

エラー状態

予測していなかった操作をユーザーが行った場合など、エラー画面が提示されるWebサイトは多く見られます。

エラーが発生した場合に、どのように修復できるのか、何をすればよいかを明確に指示すると、エラーに遭遇したユーザーの不安を解消できます。特に、すでに保有している情報が消えてしまうような事態に陥らないよう、システムを設計するのが重要です。

また、入力フォームの値に不正がある場合のように、ユーザーに手間を取らせないよう、エラーがある場合はすぐに通知し、どう修正すればよいかを明示する必要があります。

パーシャル状態

エンプティ状態から理想状態へ至るまでの間に、中間の状態が発生する場合がよくあります。

例えば、ユーザーのプロフィール情報は多くの項目があるため、0個のエンプティ状態から完成させた理想状態の間にパーシャル状態が起きるのです。パーシャル状態にあるユーザーを理想状態へ促す仕掛けを組み入れておくと、ユーザーが本来の目的を達成し、満足感を得るのを助けます。

ロード状態

画面の読み込みやファイルのダウンロードに時間がかかり、途方に暮れた経験はありませんか?Webサイトに必要な情報が提供されるまでに時間がかかる際に、何を提示するかによって、ユーザーが離脱するか、待ってくれるかが変わってきます。処理が終了するまでの見込み時間をアニメーションで示す手法がよく使われます。

最近では、時間がかかる要素以外の部分を先に画面へ提示し、ユーザーに待っている印象を与えないようにするUX設計が増えてきました。

要素⑤ 表層:全てのデザイン要素を決定する

UX設計において最も具体的要素である視覚的デザインを決定します。色使いやボタンの形、質感、テキストの文言など、見栄えに関する要素を全て検討します。デザイン要素に関わる検討ポイントは主にUI(ユーザーインターフェース)に含まれるため、詳細については次回以降、UIの要素や方法論を解説する際に詳しく触れていきます。

デザイン要素を決定するためにプロトタイプ(試作品)を作成するのが推奨されます。プロトタイプは必要最低限の機能でありながら、使用感を確認するのに十分な機能のみを実装した製品です。

Webサイトに求められる全ての要件を実装するのは時間や予算がかかるため、簡易版であるプロトタイプを作成すると、間違った方向へ進む前にUXを確認して、正しい設計・実装へと修正できるようになります。

ワイヤーフレームでは限定的な機能・コンテンツで完成イメージの共有を行っていたのに対し、プロトタイプでは完成品に近い状態でUXを確認します。プロトタイプで作成したWebサイトを本番向けへと転用するケースもあります。

プロトタイプはツールを活用することができます。ProttやInVision、Adobe Experience Designといったツールが知られており、誰でもプロトタイプをすぐに始められるのがメリットです。

prott

Prott(https://prottapp.com/ja/) 

invision

InVision(https://www.invisionapp.com/) 

adobe-experience-design

Adobe Experience Design(http://www.adobe.com/jp/products/experience-design.html

まとめ

Webサイトは紙面とは異なり、多くの場合いくつもの階層が存在します。ですので、表面的なものだけでなく、画面を移動する経路が不自然でないか、読み込みは遅くないか、等、各ページの繋がりにも配慮する必要があります。

最近では気軽に試作し共有できるツールも数多く存在しますので、これらを活用しながら、ユーザーに優しいデザインを目指していきましょう。


CATEGORY:

さあ、KOBITをスタートしよう。