知ってるようで知らなかった！Web制作でワイヤーフレームが担う役割と重要性
こんにちは、ソシャマノートのこのみです♪ときどきデザイン系ブログでみかける、海外のWebデザイナーがしたためたワイヤー・フレーム。眺めているだけでもとっても楽しくてインスピレーションをもらえるのでついつい見入っちゃいます（^-^*）
でもよくよく振り返るとワイヤーフレームの意義について、そこまで深く考えた事がなかったかもしれない（=o=;）！？
良いワイヤーフレームとは何なのか？もしかしたらワイヤーフレームがワークフローにおいてどういう役割を果たすのかを知れば、その重要性や制作の過程で気を付けるべき点がより具体的になるかもしれません。そんなわけで今日はワイヤーフレームについていろいろと調べてみました。
《記事内容》
・１ ： ワイヤーフレームとは？
・２ ： ワイヤーフレームを使うタイミング
・３ ： 組織の中でワイヤーフレームが果たす役割
・結論 ワイヤーフレームが重要な理由
それではさっそくいってみよう！(*’▽’*)ﾉ
１： ワイヤーフレームとは？
ワイヤーフレームはデザインカンプとは違い、色彩や詳細な配置は決めずに画面設計をする事です。いわばサイトの骨組みのようなものです。手描きのものからツールで描画されたものまで、種類はいろいろあります。ワイヤーフレームをしっかり作りこんでおくと、要素の抜けや不要な機能の実装などをあらかじめ防ぐ事ができるのでその後の作業がスムーズになると言われています。
２：ワイヤーフレームを使うタイミング
では、ワイヤーフレームの使いどころはいつからいつまでなのでしょうか？
ジェシー・ジェームズ・ギャレット氏（※１）はウェブサイトの設計を5つの過程に要約しています。
（※１：Ajax（Asynchronous JavaScript and XML）という言葉の生みの親として知られるWebコンサルティング会社アダプティブ・パスの創業者。ユーザー・エクスペリエンスの重要性を説いている人物としても有名）
転載元：The what, when and why of wireframes
ギャレット氏によれば、「Webサイトの構築は下から上に進むべき」とのこと
この図でいうとワイヤーフレームは”skeleton（骨格）”の4層目で使われると表されています。それまで練ってきた企画・設計を具現化する最初の作業です。
３： 組織の中でワイヤーフレームが果たす役割
冒頭でも少し触れましたが、ワイヤーフレームを作成することで要素の抜けや不要な機能を明確にすることができます。しかしプロジェクト単位で考えた時には、ワイヤーフレームはコミュニケーションを助ける役割もしています。
・これから作るサイトを理解しやすくなる
ワイヤーフレームを用いることでサイトのビジネスを理解することができ、ユーザーとプロダクトの間に関係性・対話を生むインターフェイスを考えやすくなる。
・プロジェクトのワークフローがスムーズになる
ビジュアルデザインに入る前に、機能性に関する検討をよくすることで開発コストを最小限にすることができる。レイアウトの変更も容易であるため実験的な配置換えや１つ１つの思考錯誤について率直な意見を述べやすいという利点もる。
・チームと関係者の議論を助ける
チームや関係者の間でサイトがビジネスゴールへ向かっているか、ワイヤーフレームを見ながら議論することができる。思考錯誤と検討の過程も見せる事ができる。視覚的な表現なので関係者も状況を捉えやすい。
・デザイナーと開発者を助ける
開発チームが具体的なビジュアルデザインに入る前に、ワイヤーフレームを用いて機能的な展開をすることで「サイトの概念」（サイトが担うビジネスの目的・ユーザーとのコミュニケーションなど）を視覚的表現に変換することができる。大幅な修正や機能の追加等を防ぐことにもなるため、開発コスト削減にもつながる。
ふむむ。連続するページの中で、ユーザーがサイト内でどう進んだらよいか、ページ上でナビゲーションやインタラクションを用いて導かなくてはいけない。チーム間での議論と検討を促進できるワイヤーフレームは、１つ１つの機能の意味や必要性を明確にするのを助けてくれるんだね。
結論 ワイヤーフレームが重要な理由
最後に結論として、ワイヤーフレームの重要性をまとめて締めたいと思います！
- その１：機能・仕様の立案が正確になる
- その２：チーム・メンバーの共同作業を促進する
- その３：開発コストをおさえることができる
- その４：インターフェイスの設計過程の変化を足跡のように残すことができる
- その５：結果としてプロジェクトの進行スピードを保つ事になる
ワイヤーフレームの質は、どれだけの検討をチーム・関係者の間で行えたかを表せるものと言えるかもしれません。
まさかここまで奥深いものだったとは！調べてみてとっても勉強になりました（*｀0´;）=3
（参考記事）
The what, when and why of wireframes