ブログ

デザイナーがワイヤーフレームを読む時気をつけていること

こんにちは、WebデザイナーのE.Kです。
Web制作では必ずと言っていいほど登場する「ワイヤーフレーム」。今回はデザイナー目線でワイヤーフレームをもとにデザインする時、どういうことに注意しているかをお話しします。

ワイヤーフレームとは下書きです

ワイヤーフレームとは簡単に説明するとWebサイトをつくるための設計図です。もっと簡単にいうと絵を描くときなんかに鉛筆で下書きしたりするそれと同じようなイメージです。
ワイヤーフレームを用意することで、お客様や制作者にどこに何をどのように置くのかを示し、Webサイトの全体像を共有することが可能です。

ワイヤーフレームを作成するのは、大まかに①ディレクターさん ②お客様 ③デザイナー本人 のいずれかです。
今回は①、②がワイヤーフレームを作成した場合でお話ししていきます。

ワイヤーフレームは”取扱注意”です

ワイヤーフレームを支給され、よーし良いものつくるぞ〜といよいよデザインへ!ワイヤーを見ながらデザインを進めていると

「あれ、なんだかうまくいかないな…」

となったことはありませんか?

ワイヤーフレームをもとにいきなりデザインに入るのは危険です。
せっかくたくさんの時間をかけてデザインしても、そのままでは下手するとディレクターさんに「ワイヤー通りのデザインが上がってきた…」などと悲しい言葉が返ってくることがあります。これはトラウマ級ですよね…!

ビジュアルは取り扱い危険です。
ワイヤーフレームであれどたくさんの要素やレイアウトの情報が入り込んでいます。
「ワイヤー通りのデザインが上がってきた…」の真相は、「ワイヤーフレームを模写し整えただけのデザインが上がってきた。」という意味だと思っています。

デザイン前が重要です

ではどうすればいいのか?

わたしはワイヤーフレームを見て、内容を読み込んで、そして一度ざっくりとした要素を紙に書き出します。
ワイヤーフレームから要素を取り出し、一度自分で考えてみます。
ワイヤーフレームは情報が多すぎて、ワーヤーフレーム上でどんなデザインにするか考えるとどうしても引っ張られてしまうんです。(しっかりと作り込んであるワイヤーは特に!)

要素を書き出した後は、一度ワイヤーフレームを忘れます。
それはもう忘却の彼方に飛ばします。えいっ!


そしてワイヤーを遠退かせたクリアな頭で改めて、その要素は本当にその場所でいいのか、なぜその配置なのかなどを自分の頭で考え直します。

(良い意味で)ワイヤーフレーム通りじゃないデザインとは、しっかりデザイナーも中身を考えて変えて良いところは変える・デザインするということだと思います。
また、ワイヤーフレームを支給いただいた段階でざっくりでも中身を確認し、内容や質問事項などを支給者に確認することが大事です。
もし、何から聞けば良いのかわからない!といった場合は「ワイヤーフレームの中で変えても良い場所、もしくは変えてはダメな場所はありますか?」と聞いてみるののも手だと思います。

確認もせずに、「こうしたほうがいいと思うから総取っ替えして要素入れました!」といった”良かれと思って勝手に”行い事後報告することと、今回私がお話しした”ワイヤーを一度忘れる”ことは意味が異なります。
そうしてしまうとワイヤーフレームを通してお客様と合意をとっていたのに、その合意が崩れます。
デザイナー的に”良かれと思って”入れ込むことは悪いことではありません!しかし、ディレクターさんやお客さんとのコミュニケーションも取りながらデザインを行うことがワイヤーフレームとの向き合い方だと思います。

まとめ

ワイヤーフレームは十人十色です。
ボックスだけ記載があるものから細かく整理してもうデザインでは?と言われるものまで…その分受け取るデザイナーの制作時の自由度も決まります。

究極どんなワイヤーが来ても良いんです、下書きなので。手書きでもエクセルでもXDなどデザインソフトでも。

ただデザイナーはそこから、引っ張られないように気をつけて、”ワイヤーを読み取って意味を考える・気になるところは相談する”といった作業を飛ばさないで欲しいなと思います。

そしてディレクターさんやお客様もちゃんと意図があって構造を考えてワイヤーフレームを作成しています。Web制作はチーム戦ですので、デザイナーが大幅に変えたいと思うのであればお互いをを思いやったうえでしっかり話し合う必要がありますね!素敵な制作ライフを!

PAGE TOP