このページの本文へ

これからのために制作ワークフローを見直そう

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

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

長谷川恭久/could

  • この記事をはてなブックマークに追加
  • 本文印刷
電子書籍「[エクスペリエンス ポイント](http://www.yasuhisa.com/book/exp/)」の紹介ページを作ったときのプロセスが [Storify](http://storify.com/yhassy/story-1) に掲載されています。スケッチからブラウザー上でデザインのアイデアを固めていく様子を見られます
電子書籍「エクスペリエンス ポイント」の紹介ページを作ったときのプロセスがStorifyに掲載されています。スケッチからブラウザー上でデザインのアイデアを固めていく様子を見られます

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

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

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

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

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

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

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

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

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

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

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

電子書籍「[エクスペリエンス ポイント](http://www.yasuhisa.com/book/exp/)」の紹介ページを作ったときのプロセスが [Storify](http://storify.com/yhassy/story-1) に掲載されています。スケッチからブラウザー上でデザインのアイデアを固めていく様子を見られます
従来は敷居が高かった HTML プロトタイプもBootstrapをはじめとした CSS フレームワークを活用することで早い実装が可能になりました

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

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

[CSS Frontend Frameworks](http://usablica.github.com/front-end-frameworks/compare.html) では様々な CSS フレームワークを比較することができます。サポート状況やライセンスを比較しながら自分に合ったツールを見つけられます
CSS Frontend FrameworksではさまざまなCSSフレームワークを比較することができます。サポート状況やライセンスを比較しながら自分に合ったツールを見つけられます

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

Fashionably Flexible

日時
2013年4月6日(土)/2013年4月7日(日)09:30 〜 18:00
主催
Web Directions East LLC
スピーカー
Andy Clarke
詳細/申込み
http://andy2013.get-responsive.net/
※2013年4月4日現在満席です。

カテゴリートップへ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. いまから本気で取り組む!SVGの入門から活用に役立つ記事9連発まとめ 13
  4. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 11
  5. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング