いいとこすぎて移住しちゃいました / LAMP壱岐
いいとこすぎて移住しちゃいました / LAMP壱岐
2015.01.05

Web制作者のためのワイヤーフレーム講座「役割と考え方」編

鮫島

オハヨウからオヤスミまで。ディレクターの鮫島です。
今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。

第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。
第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。

ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。

ワイヤーフレームとは

img_01

簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。
つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。

例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が合わないまま、「多分こうだろう」という感じで突貫で作られた家なんて絶対に住みたくありません。絶対ネジとか余ります。

ウェブサイトもそれと一緒で、設計図面がないまま制作が進むと、あるはずの部品がなかったり、言った言わないの修正に次ぐ修正が続いて、プロジェクトが大混乱になります。

プロジェクトの進め方がスピード重視のアジャイル開発である場合などは、ワイヤーフレームを作成しないこともありますが、基本的にはどのプロジェクトでも作成します。

ワイヤーフレームの役割

img_02

なぜワイヤーフレームが存在するかという点ですが、先にお伝えしたとおり「お客様や制作者とどのようなウェブサイトを制作するか認識を合わせるため」に存在します。

つまり、「ここはどういう機能だったっけ」という質問をされた場合、ワイヤーフレームを元に話をすれば認識のズレなく制作を進行することができます。

あと、運用フェーズに入った場合や、途中で他のメンバーに引き継ぐとなった場合、ワイヤーフレームがあれば無駄な手間なく引き継ぎができるという利点もあります。