柔軟性あるデザインプロセスへ移行するためのヒント

2013年04月05日　11時00分更新

文●長谷川恭久／could

ツイートする


電子書籍「エクスペリエンスポイント」の紹介ページを作ったときのプロセスがStorifyに掲載されています。スケッチからブラウザー上でデザインのアイデアを固めていく様子を見られます

ワイヤーフレームはWebデザインに必要か？

　ここ数年で Web とユーザーとの関わり方が劇的に変わり、開発環境も大きく変わりました。こうした中で、私たちが10年近く培ってきた設計・開発における“当たり前”を見直す時期に来ています。WebサイトやWebアプリケーションの設計・開発において必須といわれていた「ワイヤーフレーム」もそのひとつです。

「ワイヤーフレームは必須だ」と思って作っていることもあるかもしれません。しかし、ワイヤーフレームにはいくつかの課題があります。

　ワイヤーフレームは実物とかけ離れた存在であるため、描かれている内容を理解するにはWebサイトやWebアプリケーションへの深い理解が必要になります。ワイヤーフレームとサイトマップを見ればなんとなく全体構造を把握できますが、クライアントやテスターから有益なフィードバックを得るツールとしては見せ方が貧弱です。四角い箱が並んだワイヤーフレームを見ただけで、それがどのように動作し、コンテンツの量でどのように見え方が変わるのかを加味してワイヤーフレームを見られるのは、Webサイト制作の経験が豊かなプロフェッショナルだけかもしれません。

　機能・仕様を正確に詰めためにワイヤーフレームを使う場合もありますが、抽象的な図であるがゆえにミスコミュニケーションの発端になることもあります。インタラクションや本物のコンテンツが入ったときのどのようなルック＆フィールになるのか想像がしにくいので、実装し終わった後に「想像していたものと違う」という反応になることもあります。スケッチに比べれば成果物に近いように見えますが、インタラクション、コンテンツ、デザインなどさまざまな点から見て、成果物とはかけ離れた存在といえるでしょう。

　それでも、ワイヤーフレームが使われていたのは、チーム内でデザインの議論をするためのツールとしてワイヤーフレームが使えたからでしょう。しかし、アイデアの共有だけであれば、数十・数百ページにまとめたPDFやPowerPointにする必要はなく、紙やホワイトボードで十分です。

　数年前であればHTML/CSSでプロトタイプを作るコストが高かったことから、アイデアと成果物との間を繋げる役割としてワイヤーフレームが不可欠な存在でした。しかし、今では無料から使えるさまざまなCSSフレームワークによって、中小企業サイトのHTMLプロトタイプをわずかな時間で作れます。四角いボックスが並ぶワイヤーフレームより、ブラウザー上で実物とほぼ同じ動きと見え方をするプロトタイプのほうが制作者だけでなく、クライアントにとっても理解が深まるはずです。

　ワイヤーフレームが今後必要なくなるかといえば、ケースバイケースです。たとえば、従来のワイヤーフレームにインタラクションを加えたり、ダミーテキストではなく実際に使うテキストを入れたりするだけでも、ワイヤーフレームの効果が向上します。今後、制作者が考えていかなければならないのは、ワイヤーフレームを作ることが必須ではなく、新しいワークフローを導入することで別のコミュニケーションの手段が存在するということを理解し、実践してみることです。

ブラウザーを軸にした非同期開発

　マルチデバイス化がますます進み、スマートフォンと一言でいっても、4インチの小さな端末からタブレットに限りなく近い6インチの端末までさまざまです。画面解像度もデスクトップに匹敵するほどのものもあり、どのスクリーンサイズをターゲットにしてスマートフォンサイトを作れば良いのか判断が難しくなりました。スクリーンサイズだけでなく、インタラクションやハードウェア・ソフトウェアの機能を活用した見せ方・扱い方が多様化し、仕様書上での設計項目だけでは想定できないことも増えています。

　そこで、Webブラウザー上でデザイン・開発を進めていくワークフローが見直されてきています。CSSがデザインツールとして活用され始めた時期からWebブラウザー上でのデザインは注目されていましたが、ワークフローとして導入するのは難しいとされていました。しかし、ここ数年のフロントエンド開発環境の変化により、敷居は下がり、現実味のある手法になりつつあります。


従来は敷居が高かった HTML プロトタイプもBootstrapをはじめとした CSS フレームワークを活用することで早い実装が可能になりました

　たとえば、「Twitter Bootstrap」のようなCSSフレームワークを活用すれば、いち早く成果物に近い形をみんなで共有できるだけでなく、早い段階から技術検証やユーザビリティテストを実施できます。また、GitやSubversionといったソースコード管理システムを活用すれば、開発の進み具合を順に追うこともできます。

　Webサイト／Webアプリケーションは表層的なデザインとバックエンドも含めた技術をバランスよく考慮する必要があります。ユーザーが実際に触れる状態まで落とし込まなければ分からない不確定要素も少なくなく、それがミスコミュニケーションの基になることがあります。従来はデザイナーと開発者がメール・チャット・書類などを使いながら別々に生活物を作り込む作業をしていましたが、今後はWebブラウザーと、その周辺の技術を活用し、一緒になって開発を進めるスタイルになるでしょう。


CSS Frontend FrameworksではさまざまなCSSフレームワークを比較することができます。サポート状況やライセンスを比較しながら自分に合ったツールを見つけられます

◆

　2013年4月6日と4月7日に開催される Andy Clarke氏によるワークショプ「Fashionably Flexible」では、レスポンシブWebデザインを取り上げながら、Webブラウザー上でデザインする手法の紹介をします。ワイヤーフレームなしでどのようにデザインを進めていけばよいのか悩んでいる方は、ぜひこの機会に学んでみてはいかがでしょうか。