ワイヤーフレームってなんで作るの?

制作・技術

こんにちは!デザイナーのちかです。
みなさま、ワイヤーフレームってご存知ですか?

以前別の記事で、「デザインを作成する上で、ワイヤーフレームを作成するのはとても大事!」とご紹介しました。

・Webサイトのデザインってどうやって出来上がるの?(全体の流れ編)
https://plasol.co.jp/blog_post/web-design/

今回はもっと具体的に、ワイヤーフレームとはなにか、何故ワイヤーフレームが必要なのかについて、お話させていただきます。
一見無駄に見える工程ですが、とても重要な工程ですので是非ご覧いただければと思います。

 

ワイヤーフレームとは「デザインの設計図」

以前の記事でもご紹介いたしましたが、ワイヤーフレームとは「デザイン作成の前段階に必要な設計図」です。

デザインを作成する上で「どのような情報を載せるか」「情報にどのような優先順位をつけるか」「どの位置に情報を載せるか」という判断は、必ず必要になります。
そしてこの判断は「デザインの前段階で」制作会社とお客様との間ですり合わせをする必要があります。そうしないと、かなりのロスが出る可能性があるのです。
そのすり合わせを目に見える形にして行うのが「ワイヤーフレーム」です。

例えばデザイン段階で、

・制作会社側の考え
この情報は載せたほうがユーザーにより情報が伝わるから載せておこう。

・お客様側の考え
その情報はあまり重要じゃないんだけどな…なので載せなくても良い。

上記の様なやり取りが発生した場合。
ワイヤーフレームで事前に「載せる・載せない」の意思確認が事前にできていれば、上記のやり取りはそもそも発生しません。

また、デザイン段階で上記の様なやり取りが発生したという事は、「作らなくて良いデザインを作成してしまった」事になります。
その分工数が無駄になったと言ってもいいでしょう。

このような「無駄な工数」が積み重なってしまう事を防ぐ意味でも、事前にワイヤーフレームを作成して、認識のすり合わせを行う事は、スムーズに進行するうえでとても大事な工程です。

 

ワイヤーフレームは「デザインではない」

また、誤解されがちですが「ワイヤーフレーム=デザインではない」ということです。

あくまでワイヤーフレームはデザイン前の設計図。
各部品や全体のデザインの作り込みは「しない」のがほとんどです。

なので、ワイヤーフレームの段階でボタンや写真がグレーになってて全然イメージと違う!となっても、それはワイヤーフレーム段階であるから、というのをあらかじめご了承いただけますと幸いです。

もちろん、どういうイメージ・テイストのデザインが良い!こういう写真を配置してほしい!というご意見は、ワイヤーフレーム段階かデザイン段階で反映させていただきますので、どんどん頂きたいです!
ただ、「あくまでワイヤーフレーム」「あくまでデザインの前段階」というのを、念頭に置いておくとやり取りがスムーズになるのではないでしょうか。

 

ワイヤーフレームの役割を再確認

いかがでしたでしょうか?
改めて、ワイヤーフレームとは、

・掲載すべき情報が全て掲載されているか精査
・情報の優先順位の精査
・情報の位置の精査

を見える形にして、デザインに進む前に認識をすり合わせするための工程というのが、今回のお話で分かっていただけたのではないかと思います。

無駄な工数を省き、きちんと工数を割くべきところに割くためにも、ワイヤーフレームを作成することはとても大事な事です。
疎かにしがちですが、しっかりワイヤーフレーム時点からデザインの完成形をイメージして作成してみてはいかがでしょうか?

制作・技術
follow
プロフィール
ちか

おいしい紅茶とお菓子があれば頑張れる、Webデザイナーです。
Webの最新トレンドや、実務で使えるテクニックまで、お役立ち情報を配信していきます!

follow
超インハウスWebサイト運用 to-ch(トーチ)