触れる・動くによって変わるデザインプロセス

5月26日、青森にて今後のWebサイト制作との向き合い方というイベントが開催されました。今回は これから求められるWebコミュニケーションスキルと題してプロトタイピングの基礎を解説しました。 CSS Nite in TAKAMATSU のとき「静的なカンプは過去の手法」と話しましたが、ではどうしたら良いのかを考えるキッカケとして本セミナーは参考になったかと思います。

「とりあえず見せて」の解釈について

人は誰しもアイデアをもっていると思います。
自分の頭の中ではハッキリしていたとしても、人に伝えることが出来なければアイデアは活かされることはありません。アイデアはどうすれば伝えることが出来るのでしょうか。

「話せば分かる」という言葉がありますが、そう簡単にはいかないのが現実。同業者で同じような知識を持っていたとしても、同じ言葉が違ったふうに解釈される場合があります。

Webサイトデザインのアイデアを伝えたい場合、Photoshop や Fireworks などを使ってカンプを作ることがあります。言葉ではなく絵としてアイデアを伝えることが出来ることから、多くの人にとって分かりやすい手法です。

分かりやすそうに見える静的なカンプですが、実は高いリテラシーを要求します。インタラクション、アニメーション、ソフトウェア/ハードウェアの状態や設定などを考慮しながら、絵を見る必要があります。プロフェッショナルなら出来て当然という見方もあるものの、すべての人がまったく同じような背景と期待をもって見ているとは限りません。クライアントであえば、さらに異なる視点で見ている可能性があります。

カンプの存在だけが、Webサイト制作のプロセスを遅くしているとは言えません。しかしカンプというあたかも完成したかのように思わせてしまう強力なコミュニケーションツールが、誤解を生み出す要因になっている場合もあると思います。アイデアを伝えるためにあるカンプが、時にはギャップを生み出していることもあります。

私は、人にアイデアを伝えるために何かを見せなければならないと思っています。しかし、それは静的なカンプを見せることではなく、触ったり動かしたりすることができるプロトタイプのようなものではないかと考えています。

プロトタイプを作ることは時間と手間をかけているだけのように見えますが、静的な絵を見せることで生まれるギャップを埋めることができる道具だと考えています。Webデザイン(そしてアプリデザイン)は モニターに映し出されているもの以外をデザインすることが大半ですから、モニターの外にある物事が意識できる『何か』を見せることで、ミスコミュニケーションを最小限に抑えることができると思います。

無理に定義しなくて良い

静的なカンプはミスコミュニケーションになりやすいから、Photoshop や Fireworks のようなグラフィックツールから作り始めるのは良くないというわけではありません。例えば Prototypesのようなアプリを使うと、静的なカンプを瞬時に操作可能なサイト/アプリに作り替えることができます。 PowerPoint や Keynote でも豊富なツールを使って本物に近いものを手軽に作れますし、インタラクティブなボタンやアニメーションを加えたりすることができます。

プロトタイプの作り方や定義に拘ることはありません。
プロトタイプと一言でいっても作る目的は毎回異なりますし、関わるメンバーが変われば、それに合わせて作り方も変えなくてはいけません。講義中に「カンプに動きを付けるなどプラスαみたいなところから始めれば良い」という話をしましたが、出来るところから触れることができるモノを作るようにしたら良いと考えています。

紙が良い、アプリが良い・・・作る前にペルソナがいるとか、様々な手法が提唱されているわけですが、時間・予算・目的などと照らし合わせて柔軟に作り始めれば良いと思います。わずかな時間でしたが、講義では使えそうな『武器』をたくさん紹介し、適材適所で選べれるようにするための考え方にフォーカスしました。

視覚は強力な感覚です。
だからこそ、ビジュアルは重要という考えは分かります。しかし、Webサイトやアプリは見た目だけでなく、触ったときの感覚、操作感なども同時に考えなくてはならず、こうした目に見えない感覚のほうが人の記憶に長く残る場合があります。目に見えないからこそ、早い段階から共有を始めなければならないですし、洗練させるための時間も必要とされるのかもしれません。

「プロトタイプが重要」というのは、特に目新しい考えではありません。他の業界では『当たり前』の工程です。分かってはいても、なかなか出来ない場合もあると思いますが、今回の講義や公開されている情報を通して、プロトタイプを初めてみようかなと思えたのであれば幸いです。

余談になりますが、デジタルハリウッド大学院で、講師をすることになりました。講義のテーマは『プロトタイプデザイン』で、青森での講演をじっくり深堀りする内容になるかと思います。今年の冬にスタートするので、まだまだ先ですが、何かしらの型でこのサイトで情報公開できたらと考えています。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

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