ワイヤーフレームってなに？何のために必要なの？
ウェブディレクターになりたての皆さん。
「ワイヤーフレーム」って言葉は聞いたことありますか？。
簡単に言うと、ウェブサイトをデザインする前に書く模式図のようなものです。
ここでは、なぜワイヤーフレームを作るのかということを簡単に説明したいと思います。
ワイヤーフレームは何のためにあるのかというと、関係者全員でイメージを事前に共有するためです。
なので、一口にワイヤーフレームと言っても、「何を確認したいか」によって必要とされる粒度が異なって来ます。
では、何を確認するかと言えば簡単に言うと
- 大枠のイメージ
- デザイン上、必要な要素
- 機能面
の3つです。
大枠のイメージの共有
例えば、以下のような手書きのワイヤーフレームがあったとします。
これだけでも、なんとなく「ああ、2カラム形式のブログページね」というのは伝わってきますよね？
例えば打ち合わせの一番最初の段階で、クライアントが「記事ページは、よくある感じで。」と言ってきた場合、「ああ、じゃあこんな感じですか？」と言ってその場でこういう図を書いて確認できれば、両者のイメージのズレはだいぶ少なくなります。
1. 大枠のイメージの共有としては、この程度の粒度のワイヤーフレームで充分なのです。
デザイン上、必要な要素の洗い出し
ただ、「じゃあこれでデザインお願いね。」と渡されても、デザイナーさんも困ってしまいます。
2. デザイン上、必要な要素が洗い出されてないからです。
要素を洗い出すには、そのサイトの意図や方針をしっかりと確認することが必要です。
例えば
・公開日は必要？ 入れるとしたら日付だけ？時間も必要？
・記事タイトルの目安の長さはどれくらい？
・画像は毎回用意できる？どういう画像を用意する想定？
などはメディアの運用方針によっても違って来ますので、必要な要素やどこを強調すべきかなども変わってきます。
ディレクターはその辺りをクライアントと一緒に「こういう方針なら、ここをもっと大きく見せた方がいいですよね？」とか「それだけ更新頻度が多いなら、ここはもっと最新の記事を表示した方がいいですね」などを詰めていきながら、それを整理してワイヤーフレーム上に落とし込んでいきます。
上記の図だけだとそうした「意味」までは読み取れないので、これだけ渡されてもデザイナーさんは困ってしまうわけです。
機能面の精査
そして③の機能面に関しても同様で、右カラムの「他の記事」に関しても、ちょっと考えただけで
・最新記事
・ランキング
・関連記事
・最近見た記事
・最近検索された記事
などが思い浮かびます。
（他にも検索欄がいるのか、タグクラウドは必要かなども出てきます。）
この辺りもよく考えずに「とりあえず全部入れときゃいいじゃん！」といれるとユーザーのニーズも無い無駄な機能が盛りだくさんのごちゃごちゃして見づらいサイトになってしまいます。
いざ実装してみて「やっぱりこれいらない」「いや、やっぱりあれが必要だったな」という事態にならないためにも、事前になるべくイメージできるように、ワイヤーフレームに落とし込む必要があります。
まとめ
ワイヤーフレームの役割はなんとなくわかっていただけたでしょうか？
簡単に言うと、ウェブ制作では「やっぱりあれをこうしたい」というのが起こりがちですが、必要な場面に応じて、適切な粒度のワイヤーフレームを書くことで、だいぶ避けられるわけです。
クライアントも制作側もハッピーになれるかどうかは、ディレクター次第。
（僕も含めて）ディレクターの皆さんは頑張りましょう！
by 
