UTWS

ワイヤーフレーム作成の悩み

2019年2月4日

Webディレクション

ワイヤーフレーム

私はWebサイト制作の際、ワイヤーフレームを作成することが多いです。

ワイヤーフレーム作成ツールとして一般的なのは、やはりパワーポイント(以下、パワポ)ですね。
最近ではAdobe XD(以下、XD)が盛り上がりを見せているので、XDを使用されている方も多いのではないでしょうか。

パワポより詳細な画面設計がしやすいので、私もXDでワイヤーフレームを作成することがあります。

便利なXDですが、他者にデザインを任せたときに、ワイヤーフレームと変わらないレイアウトでデザインが仕上がってくることがありました。

どうやらワイヤーフレームを作り込みすぎた場合、経験の浅いデザイナーだとワイヤーフレームの枠を超えないデザインをしてしまうことがあるようです。
(単に私のワイヤーフレームの問題だったりして…)

そこで私はデザイナーに、どのようなワイヤーフレームならデザインがしやすいかを尋ねました。
回答を端的にいうと「必要な要素は置きつつ、作り込みすぎないでほしい」とのことでした。

要は、部品まで細かくXDで作成すると、そのようにデザインをしてほしいのか?と勘違いする人もいるから、ということです。

そこで私は、ワイヤーフレームを作る際は以下のように考えることにしました。

1)サイトに必要な要素は盛り込むが、漠然とつくる(あくまで項目を四角く囲むレベル)
2)画像の箇所は色を変更したり、画像とわかるようテキストを添えるだけ
3)ボタンには矢印などをつけ、クリッカブルであることを表現するだけ(具体的な装飾はしない)
4)一度デザイナーに見せて、ダメ出しされてみる

当然といえば当然な内容ですね。しかし、これらは人それぞれの感性によって基準が変わるため、結局はデザイナーと一緒にデザインしやすい落とし所を考えることが大事であると実感しました。

それによって、私自身のワイヤーフレームの作り込み具合も変わっていった気がします。

ツールが進化して便利になる一方、それに甘えてコミュニケーションを疎かにしてはいけないと感じました。
今後もコミュニケーションを欠かさず、制作していきたいものです。