修正などを最小限に抑えるプロトタイピング

プロトタイピングとは、サンプルを使い実際に動かし試す作業のことです。動かすというのは、このボタンをクリックするとこのページに飛ぶといったことです。

 

• プロトタイプ
• プロトタイピング
• ユーザビリティテスト
• まとめ

 

プロトタイプ

プロトタイプとは動かし試すために使うサイトのサンプルですね。まずは、プロトタイプとして使えるものを挙げていきます。

• ワイヤーフレーム
• モックアップ
• HTML,CSSで作る

以下はプロトタイプのイメージです。左がワイヤーフレーム、右がモックアップとHTML実装です。

このイメージからもわかるように、それぞれ完成品への近さの違いがあります。ワイヤーフレームは骨組みという感じですね。それに対し、モックアップは色や画像が入っています。更にHTML実装の方は色や画像の他、コードも書いていくので完成品により近いです。

完成品に近いといいましたが、デザイン面は完璧に作る必要はありません。プロトタイプを使う目的は、サイトの使い勝手などの検証だからです。

使い分け

使い分けについては、以下のような制作期間やコンテンツ・ページ数や

ワイヤーフレーム	期間【長】/ コンテンツ量【少】
モックアップ	期間【中】/ コンテンツ量【中】
HTML,CSS	期間【短】/ コンテンツ量【多】

プロジェクトの内容によって決めると良いかと思います。たとえば、クライアントに提示するのであればモックアップのように、画像などが入っている方が分かりやすいかもしれません。

プロトタイピング

プロトタイピングとは、実際の動きを通して問題点を見つける作業のことです。つまり検証ですね。まずプロトタイピングの為のツールをいくつか紹介していきます。

ツール

ソフトやウェブ上でプロトタイピングを行う事が出来ます。ではいくつか挙げてみます。

• Adobe「XD」
• Prott
• Marvel

など様々なツールがあります。

手順

では今回例として「Prott」というサービスでプロトタイピングを行ってみます。プロトタイプは「ワイヤーフレーム」を使用します。

https://prottapp.com/ja/

ではまずワイヤーフレーム画像をアップロードします。そしてワイヤーフレームの中のコンテンツを線で結んでいきます。これは「ここをクリックすると、ここに飛ぶ」というリンクを可視化しています。

全てつないだら準備完了です。ではまず遷移図を見てみましょう。

このようにリンクしている部分が線で繋がれています。では、実際に動かしてみます。「ヘアスタイル」というボタンをクリックすると「ヘアスタイル」一覧ページに画面遷移します。このように実際に試しながらサイトの動きを確認する事が出来ます。

ユーザビリティテスト

ユーザビリティテストとは、自分以外の人に実際サイトを使ってもらう形で改善点を見つける作業のことです。たとえば被験者に予約を行うという目的を与え、実際にサイトで予約を行う作業をしてもらいます。

そして感想などを聞き、改善に役立てていきます。ユーザビリティテストにはいろいろなやり方があります。実際に被験者と同じ場所に立ち会って行う方法や遠隔で行う方法などです。

では、先ほどの美容室の例でテストを行ったとします。以下は「ヘアスタイル」の詳細ページです。

この中に「利用メニュー」という項目があります。これは、このページのヘアスタイルがどのようなメニューによって出来るかという項目です。

このヘアスタイルを気に入った場合に被験者はメニューの金額を知りたくなったとします。しかし現時点ではメニュー名にはリンクが貼られていません。ですので金額の確認はグローバルナビゲーションの「メニュー」をクリックする必要があります。

しかし被験者は、メニュー名部分がボタンの様なデザインの為、リンクが貼られていると思いクリックしたとします。ですが、何も起こりません。これでは被験者は分かりずらいと感じるかもしれませんね。

このように問題点を見つけ改善することが、ユーザーの離脱を防ぐことに繋がっていきます。

まとめ

プロトタイピングとは、サンプルを使い実際に動かし試す作業のことであり、そのサンプルをプロトタイプと呼びます。

これは、実際に試すことで事前に問題点を見つけ出すことが出来るというメリットがあります。問題点を見つけ改善することが、ユーザーの離脱を防ぐことに繋がっていきますのでしっかりとこの作業を行っていきましょう。