hiromitz

WEBアプリケーション開発のためのプロトタイプ作成手法

2011-04-08 09:00:00

新しくbuilderにてブログを始めます。主にUXに関することやテクニカルな話題など、幅広く書いていこうと思っていますが、一回目のブログに何を書こうか迷いに迷い、まずは、昨年11月22日に情報デザイン研究室の主催で行われた第3回情報デザイン研究会で私が発表したことについて書こうと思います。

この第3回情報デザイン研究会自体は、各企業のHCDやUXに関する取り組みが主な話題。私も実際に会社で行っていることを「WEBアプリケーションにおけるUX」というテーマで発表しました。問題点としてよく上がるのが、HCD やUXについてはさまざまな手法や考え方がありますが、どの企業も取り入れるのに苦戦していたり、取り入れた場合でも、プロフェッショナルが集まって話し合いをするわけでもないので、想像していることがバラバラになりがちです。
特に新しい企画を考えるような場合は、ベースとなるものがないので何をもとに評価をしていいのかわからなくなる場合が多いと思います。

その際によくあるのが、企画者と呼ばれる人がPowerPoint等を使用して数十ページにも及ぶ資料を作成したり、画面繊維図やフローチャートなどの仕様書のようなものまで作成するのですが、そこまでしてもやっぱり各々の想像によるところが大きくなってしまうということがあると思います。

そこで私の場合は、必ず触れるものとしてプロトタイプを作成することにしています。

プロトタイプを作成する過程に関しては以下の通り。

  1. アイディアを考える
  2. アイディアを書き出す
  3. モックアップの作成
  4. プロトタイプの作成

やり方としては一般的だと思いますが、違うところはスピード。アイディア構想からプロトタイプまで、早くて一日、長くても一週間でプロトタイプを作成します。
プロトタイプをベースに話ができないと、どんなアイディアも各々の想像上の話になってしまうし、ましてやUXを考える場合だと、このアプリケーションがどういう風に動くのかを想像するしかないからです。



1. アイディアを考える

ここはただ考えるだけ。普段の仕事中や、情報収集をしているとき、または家に帰ってお風呂に入っているときなど。特に私の場合はお風呂に入っているときに、いいアイディアが出てくることが多いです。

2. アイディアを書き出す

アイディアをまとめる際には、WikiやMindMapを使います。そうすると自分の中での整理にもなるし、後で見たときに一目で確認することができます。

3. モックアップの作成

モックアップは基本的にノートにとることが多い。ここでは厳密な作り込みはせず、構成がわかる程度に止めておきます。

4. プロトタイプの作成

プロトタイプは、HTML5 / CSS3 / Javascript等、場合によっては簡単なPHPなどのサーバーサイドのプログラムも使用して、実際に動くものを作成します。
その他にも、私の場合は主に、jQuery / jQuery UI 、モバイルの場合はjQuery Mobileなどのすでにあるアーキテクチャーフレームワークを使ってプロトタイプのデザインをしたり、簡単なアニメーションを入れたりすることが多いです。

これだけでも実際のアプリケーションにかなり近いイメージのものができるので、マーケティングや営業など、制作ではない人でも実際に触って評価することができます。


ざっくりと書いてみましたが、冒頭にも書いたとおり、想像上で話をする場合と比較してプロトタイプをベースに評価をすることによって、UXの評価や企画自体の評価がしやすくなると思います。一度こういったやり方を取り入れてみてはいかがでしょうか?

WEBアプリケーション開発におけるUX(スライド)

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]