デザインテクノロジーの最前線 - 桐山孝司

m.c.t.ホーム > エクスペリエンスマガジン > デザインテクノロジーの最前線 - 桐山孝司 > SketchFlowでのプロトタイピング

2010.04.15SketchFlowでのプロトタイピング

マイクロソフトのユーザインタフェース開発環境Expression Blendが現在のバージョン3になってから、SketchFlowというプロトタイピングツールが含まれている。SketchFlowはインタラクティブなプロトタイプを作るのに必要な要素をうまく形にしていて、単独でもなかなか面白いツールである。

SketchFlowが役に立つのは、プログラミングに入る前にまずサイト全体の動きを検討する段階である。ここではできるだけ手早くプロトタイプを作って、改良に手間をかけた方がよい。ただ簡単な画面の遷移であればストーリーボードやペーパープロトタイピングなどスケッチベースの方法でよいが、少し複雑な動きになるとどうしてもニュアンスまでは表現できないので、結局別途ムービーを作ってみるか、実際に作り始めてから動きを見るしかなかった。

それに対してSketchFlowは、同じツールの中でアニメーション作りと詳細化ができるようになっている。例えば商品アイテムをショッピングカートに入れると合計金額が表示されるようなアニメーションを作るには、画面でそのアイテムをドラッグして軌跡を録画しておく。合計金額を表示する文字も、アニメーションの前後で透明から不透明に属性を変える。そしてこの操作に1秒かかるというようなタイミング情報を与えて再生すれば、プログラミングをしなくてもアニメーションで動きを再現できる。アニメーションを見れば意図が伝わるので、果たしてそのインタラクションが適切かどうかの判断が十分できるのである。SketchFlowではこのようにアニメーションを織り交ぜたプロトタイプを作ることを、ダイナミックプロトタイピングと呼んでいる。

またSketchFlowにはクリックできるボタンや選択リストなどの要素があらかじめ用意されているのだが、面白いのはそれらが手描き風のラフな線やフォントで表示されることである。まっすぐな直線やきれいなフォントだとそのまま完成形になると勘違いされて、まだ必要ないのに画面の見え方に目がいってしまう。そうならないためには明らかにプロトタイプだとわかるように、サインペンで描いたような線の方がよいわけである。実際、グラフィックツールで描いているにも関わらず線がラフだと、ここは1ピクセル太くというようなディテールがどうでもよくなるのが不思議である。

もうひとつSketchFlowがプロトタイピングツールとして面白い点は、コメント機能である。ちょうどAcrobatでPDF文書に後から修正やタグを付けられるように、SketchFlowのプロトタイプにも後からコメントを書き込むことができる。また、自分が書き込んだコメントをファイルに書き出してメールで送ると、先方で再びプロトタイプに読み込んで表示することもできる。SketchFlowで作られたプロトタイプは、実際にはリッチインターネットアプリケーション(RIA)の実行環境であるSilverlight上で実行される。SilverlightはMacOSにも対応しているので、SketchFlowで作ったプロトタイプはMacユーザでも実行したりコメントをつけたりできる。

これはAdobe Flexなど最近のインタフェースデザインツールとも共通するのだが、SketchFlowで扱うインタフェース記述はプログラムとは別になっていて、インタフェースデザインとプログラミングとが言語のレベルで分かれている。これによってデザイン作業がプログラム開発から切り分けやすくなっているのである。SketchFlowには他にも便利な機能があり、例えば各ページに共通するボタン群をコンポーネントとして一度定義しておくと、それを各ページに配置した後でコンポーネントを変えると各ページが一斉に変更できる。これはプログラミングでは普通にクラスとして構造化されていることだが、Flashのようなデザインとプログラムが一体化した環境ではなかなかプログラマの方が慣れにくかった面がある。SketchFlowはこのようなインタフェースの構造化が自然にできるようになると期待される。

SketchFlowはアニメーションを使ったプロトタイピングという分野を扱いやすくしてくれる可能性がある。ウェブブラウザだけでなくモバイル機器のアプリケーション開発などでもダイナミックプロトタイピングの必要性は高く、これからの発展が期待されるツールである。


sketchflow.jpg

SketchFlowで作ったプロトタイプをブラウザで実行している様子。右上のグレーの囲み枠と文字はプロトタイプらしさを出すために手描き風に表示されている。
Chris Bernard, Sara Summers: Dynamic Prototyping with SketchFlow in Expression Blend, Que (2010).