ITごはん

ITを活用したい人、ITで何か作りたい人、そんなITでごはんを食べる人のためのブログ

ペーパープロトタイピングで成功する5つのポイント

はじめに

10年以上前の話になりますが、 当時所属していたSIerで、周りで出来ると噂の先輩エンジニアと2人で組んで、 提案+要件定義を行うという作業をしたことがありました。

当時はアジャイルだの、UXなんて言葉はなかったのですが、 社内では「HTML紙芝居」と呼ばれていた手法で、 プロトタイピングを行い、スピーディにユーザーとコミュニケーションをとっていました。

この「HTML紙芝居」とは、その先輩エンジニアが紙ベースで、画面のイメージを作り、 その画面イメージについて、ひたすら業界経験の浅い私がHTMLのタグを打っていくというものでした。 (画面遷移のリンクや、本番に近しいデータもベタ打ちで書いていました) 当時、毎週で何十枚、何百枚というHTMLを作成する苦行だったことを覚えています。

この方法は 後続工程(設計・コーディング〜)の段階になっても、 完成品のイメージをしっかりと擦り合わせができていますから、 手戻りも少なくユーザー・開発サイド両方でかなり評判が 良かったため、プロトタイピングの威力を身をもって実感しました。

さてさて、今回はそのようなプロトタイピングの中でも、 HTML紙芝居より更にスピーディで、最近流行りの紙のみで行うペーパープロトタイピングの ポイントについて整理してみます。

ペーパープロトタイピングとは何か

まず、ペーパープロトタイピングですが、 これは、紙に鉛筆書きで、ラフに画面イメージを書くことで、 完成品をイメージするというものです。 主に企画や、上流設計のタイミングで実施されることになります。

【ポイント①】スピードとコミュニケーションを重視する

プロトタイピングは、基本的にスピードを重視して下さい。 1日に数十枚の画面を作るぐらいのスピード感だと考えて下さい。

そして、早めにチームやユーザーと共有することです。 基本的にはペーパープロトタイピングでは、 スクラップ・アンド・ビルドです。 書いては、書き直し、書いては、書き直しを 行うことが、企画のブラッシュアップにつながります。 ですので、はやめにチームやユーザーと コミュニケーションに共有することが重要です。

【ポイント②】細部にこだわらない

例えば、フォントの大まかなサイズ感は決めたとしても、 具体的に何ピクセルかなどについては、ペーパープロトタイピングでは 深入りしません。

ペーパープロトタイピングの位置づけにもよるのですが、 後続作業で仕様書を作成するような場合では、 こういった細部は必要ありません。

もっというと、細部について記載してしまうと、 全体観を掴むという目的を阻害してしまします。 (議論の中で、そういった細部が議論の中心になってしまいます。)

【ポイント③】全体的な流れをしっかりつかむ

時折、一部の画面だけプロトタイピングするようなやり方が見受けられますが、 基本的には、もちろん、ラフなイメージで構いませんので、 全画面や、出来るだけ網羅的にアニメーション・シナリオを作成してください。

逆に、一部の画面では正しいことが、全画面でみたら、正しくないなんてことが 十分起こりえますので、しっかり全部の画面を作成してください。 ここで手を抜くと、プロトタイピングの意味がないぐらいです。

【ポイント④】便利なWebサービスを使わない

プロトタイピング用のWebサービスがいくつかありますので、 そちらをつかっている人も多いと思います。 賛否両論あるかと思いますが、これは使用しないほうがいいです。

一番大きな理由は、ペーパープロトタイピングの スピード感が失われてしまいます。 また、最初から用意されている機能やオブジェクトを、 使用しないような場合は、特にスピードが落ちてしまいます。

また、電子データとして、必要でしたら、 紙に書いて、スキャンしたほうが早いです。

【ポイント⑤】実際に見る画面サイズをベースにする

ペーパープロトタイピングを行うときに、 実際の利用する画面サイズをベースにして下さい。

思いの外、スマートフォンの画面は小さく感じることが多いですし、 大きい画面であれば、目線の動く距離なども、チェックすべき観点です。

終わりに

ペーパープロトタイピングのポイントは、スピーディに、ユーザー・チームメンバーと、 効果的にコミュニケーションをとるために、作成するのが要点です。 この点を抑えると、その有効性を実感できると思います。

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする