こんにちは!デザイナーのちかです。
みなさま、ワイヤーフレームってご存知ですか?
以前別の記事で、「デザインを作成する上で、ワイヤーフレームを作成するのはとても大事!」とご紹介しました。
・Webサイトのデザインってどうやって出来上がるの?(全体の流れ編)
https://plasol.co.jp/blog_post/web-design/
今回はもっと具体的に、ワイヤーフレームとはなにか、何故ワイヤーフレームが必要なのかについて、お話させていただきます。
一見無駄に見える工程ですが、とても重要な工程ですので是非ご覧いただければと思います。
ワイヤーフレームとは「デザインの設計図」
以前の記事でもご紹介いたしましたが、ワイヤーフレームとは「デザイン作成の前段階に必要な設計図」です。
デザインを作成する上で「どのような情報を載せるか」「情報にどのような優先順位をつけるか」「どの位置に情報を載せるか」という判断は、必ず必要になります。
そしてこの判断は「デザインの前段階で」制作会社とお客様との間ですり合わせをする必要があります。そうしないと、かなりのロスが出る可能性があるのです。
そのすり合わせを目に見える形にして行うのが「ワイヤーフレーム」です。
例えばデザイン段階で、
・制作会社側の考え
この情報は載せたほうがユーザーにより情報が伝わるから載せておこう。
・お客様側の考え
その情報はあまり重要じゃないんだけどな…なので載せなくても良い。
上記の様なやり取りが発生した場合。
ワイヤーフレームで事前に「載せる・載せない」の意思確認が事前にできていれば、上記のやり取りはそもそも発生しません。
また、デザイン段階で上記の様なやり取りが発生したという事は、「作らなくて良いデザインを作成してしまった」事になります。
その分工数が無駄になったと言ってもいいでしょう。
このような「無駄な工数」が積み重なってしまう事を防ぐ意味でも、事前にワイヤーフレームを作成して、認識のすり合わせを行う事は、スムーズに進行するうえでとても大事な工程です。
ワイヤーフレームは「デザインではない」
また、誤解されがちですが「ワイヤーフレーム=デザインではない」ということです。
あくまでワイヤーフレームはデザイン前の設計図。
各部品や全体のデザインの作り込みは「しない」のがほとんどです。
なので、ワイヤーフレームの段階でボタンや写真がグレーになってて全然イメージと違う!となっても、それはワイヤーフレーム段階であるから、というのをあらかじめご了承いただけますと幸いです。
もちろん、どういうイメージ・テイストのデザインが良い!こういう写真を配置してほしい!というご意見は、ワイヤーフレーム段階かデザイン段階で反映させていただきますので、どんどん頂きたいです!
ただ、「あくまでワイヤーフレーム」「あくまでデザインの前段階」というのを、念頭に置いておくとやり取りがスムーズになるのではないでしょうか。
ワイヤーフレームの役割を再確認
いかがでしたでしょうか?
改めて、ワイヤーフレームとは、
・掲載すべき情報が全て掲載されているか精査
・情報の優先順位の精査
・情報の位置の精査
を見える形にして、デザインに進む前に認識をすり合わせするための工程というのが、今回のお話で分かっていただけたのではないかと思います。
無駄な工数を省き、きちんと工数を割くべきところに割くためにも、ワイヤーフレームを作成することはとても大事な事です。
疎かにしがちですが、しっかりワイヤーフレーム時点からデザインの完成形をイメージして作成してみてはいかがでしょうか?