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

プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分

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

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

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

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

筆者について

Photo of Yasuhisa Hasegawa

(@yhassy)

デザインやコンサルティングを通じてWebの仕事に携わる活動家。Webとデザインをキーワードに情報発信をしているだけでなく、各地でWebに関するさまざまなトピックで講演を行ったり、多数の雑誌で執筆に携わる。

この記事のコメント

  1. 1

    r.izumita

    ご存じと思いますが一応。
    OmniGraffleの「ペースとしてスタイルを合わせる」のショートカットですが、システム環境設定の「キーボードとマウス」の「キーボードショートカット」から設定できます。

    2009年4月13日 7:54
  2. 2

    ヤスヒサ

    @r.izumita
    確かに、その方法がありますね。言われるまですっかり忘れていました。ただ、OmniGraffle のほうでもあらかじめ割り当てて欲しいなぁ。

    2009年4月13日 6:08

コメントを投稿する