効果的なプロトタイプを早く作るコツ

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。

スゴいコツだ!というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。

使えるパレットを用意する
よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用PowerPoint用を利用すると手軽です。
テンプレートを用意する
OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリッド表示にしてあるファイルをあらかじめ用意しておけば、何度も設定する手間が省けます。
リンクを加える
PowerPointでもOmniGraffleでもハイパーリンクを加えて別のページへ移動することを可能にします。特定のオブジェクトの表示・非表示も可能なので、工夫次第でページ内の変化も表現することも出来ます。PowerPointであれば、マウスオーバーといった別のインタラクションにも異なるアクションを加えることが可能なのでさらに詳細な表現が可能です。
スタイルを合わせてペースト
文字の大きさや色など、同じスタイルを毎回設定するのは面倒なので、「スタイルを合わせてペースト」を活用。PowerPoint だと、「Ctrl + Shift + V」がありますが、OmniGraffle だとショートカットが割り当てられてないのが残念。

プロトタイプとして意外と使えるのが、Acrobatです。図形や UI 要素を PowerPoint や OmniGraffle のように軽快に描くことが出来ませんが、Acrobat に実装されている Form 要素を使えばビジュアルとしてだけでなく、テストとして使えるページになります。また、ムービークリップ (Flashも含) やサウンドも付け加えることが出来るので、マルチメディアを利用したサイトのテストにも活用出来ます。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。