仕事をスムーズに！伝わるワイヤーフレームの作り方

HPを制作する時に使われるワイヤーフレーム。しかし、クライアントや、ディレクター、デザイナーとの意思疎通で使われるワイヤーフレームですが、やり取りの上で問題となる時がしばしばあります。なぜ、そのような問題が起こるのかを分析し、スムーズなやり取りを出来る伝わるワイヤーフレームの作り方・注意点について話したいと思います。

ワイヤーフレームとは

ワイヤーフレームとは、「どこに、なにを、どのように配置するか」が書かれた「Webサイトやアプリの設計図」のことです。つまり、クライアントと制作者との目的や意思を共有する道具なのです。

ワイヤーフレームの目的

掲載情報の整理

何を乗せるのか、どこに乗せるのか、Webサイトというのはページ数が決まっている訳ではないので自由に配置することができます。しかし、自由だからこそどこに何を置くのか、どのページに置けば閲覧者が迷わずにスムーズに巡回出来るかをイメージしながら作る必要があります。

文章の内容の精査

ホームページの新規作成やリニューアルどちらにするにしても、ホームページには文章というものが不可欠です。しっかりと情報が伝わっているのか？内容は最新の情報なのか？これは、事実的な問題なのでデザインを作成する前に決定できる内容です。

優先順位の確認（大きさ、位置、どこを目立たせるか）

ここを目立たせたい、今後SNSを強化していきたいなど、事前にクライアント側で決定している事があるのであれば、ワイヤーフレームに落としこんでおく必要があります。

アイデアを形にする

最初の段階でクライアント側にこうしたいというイメージや要望があるのであれば、ある程度まではワイヤーでアイデアを形にしておく事も大切です。

ワイヤーフレームで起こる問題とは

皆さんも一回は体験したことはあるのでしょうか？ワイヤーだとイメージがわかない（クライアント側）、ワイヤー通りのものしか上がってこない（ディレクター側）、どこまで、形を崩していいのか判断できない？（デザイナー側）。Webサイトを制作するときに起こりうる問題。なぜ、このようなことが起こるのか、分析してみようと思います。

ワイヤーフレームの作成、確認時の注意点（ポジション別）

ではなぜこのようなことが起こるのか、またどこに注意をすればいいのか確認していこうと思います。

ワイヤーフレームの目的を認識する！？（クライアント側）

では、制作会社からワイヤーフレームの確認が来たときに起こるすれ違いはなぜ、起こるのでしょうか？それは、ワイヤーフレームで見るべきポイント、目的がしっかり共有されていないからではないからだと思います。モノクロだとしても、形として出てきたときに全体を通して物事を見てしまう、それが問題だと思います。しっかりと重点を置いて見るそれがポイントだと思います。

見るべきポイント
・掲載情報の整理
・内容文章の精査
・優先順位の確認（大きさ、位置、どこを目立たせるか）

注意点として、デザインやコーディングはひとつのもので成り立っているのではなく、いろんな要素が組み合わせってできているということを認識する必要があると思います。制作を行ってから方向転換をするというのは、簡単な話ではありません。なぜ、ワイヤーフレームを使って確認するのか、そこを考える必要があるのではないでしょうか？

ワイヤーフレームをデザインしない！？（ディレクター側）

上記で述べた通り、ワイヤーフレームで確認するのは情報、ページの目的をクライアントと共有することです。形を作ることではありません。しかしアプリ等の発達により簡単に形（意図のないデザイン）にすることができるようになりました。それが問題なのです。デザイナーにとっては、ワイヤーがデザインされていると、思考のなかで一度構築されたものを壊すという無駄な作業をしなくてはいけなくなります。なので、ワイヤーフレームはデザインしないようにするという意識が必要なのです。

また、何をどこに配置するのか、今回のサイトを制作する目的に合っているのか、サイトを利用する上で不便ではないか？などやはり一番理解しているのは当事者であるクライアント側だと思います。そこは、ディレクターがしっかりとコミュニケーションをとり、しっかりと要望を理解し、形にする必要があると思います。

関連記事 Webディレクターに必要なスキルとは

積極的なコミュニケーションをとる（デザイナー側）

そもそも、ワイヤーフレームというのはデザイナーが作った方がクライアントの意思などを直接理解することができ、いいものが作れると思います。しかし、効率化、分業制などディレクターを通さないといけないという時は、クライアントとのやり取りの経緯であったり、目的等の共有をしっかりしないと、方向性のブレが出てくるのではないでしょうか。

間にひとり人を挟むということを意識し、伝言ゲームにならないよう積極的にコミュニケーションをとり、クライアントの意向を理解する事が大切なのです。また、できるだけオリエンテーションや打ち合わせに参加し、ワイヤーフレーム以外から受け取れる情報も積極的に集めるのもいいかもしれません。

ワイヤーフレームを作る時のツール

それでは、ワイヤーフレームを作る時に使用するツールを紹介します。ワイヤーフレームは情報共有が目的なので、基本はどのツールを使っても作成する事ができます。営業よりの方であればPowerPointやExcel、デザイナーよりの方であればAdobeのXDなど普段使っており、操作のしやすいツールで作成するのが効率よく作成できるかと思います。

Excel

Windowsでは標準で入っているExcel。Excelを使うメリットはやはり使った方が多いというのが一番のメリットではないでしょうか？ただ、直感的に操作をする事は難しいので、情報の共有などであれば問題なく使えると思います。

PowerPoint

Excelと同様利用する機会も多いPowerPoint。Excelよりも自由度が高く、配置や大きさなどより具体的に指示が出せるのもPowerPointでワイヤーフレームを作る利点ではないでしょうか？

Adobe XD

デザイナーさんなどはよく利用しているAdobeですが、XDもワイヤーフレームを作るのに適しています。同じものをリピートする場合や、より具体的に・効率的にワイヤーフレームを作ることができます。

関連記事 Adobe XDってどうなの？アプリでコミュニケーションを円滑に

まとめ

ワイヤーフレームをしっかりと作っておかないと、後々やっぱり違ったなど無駄なやり直しをすることになります。また、方向性が決まらずデザインをやりながら軌道修正を行い、作っていくという流れではやはり良いものは作れないと思います。
無駄なやり取りを減らし、デザインやディスカッション等有効な時間に時間を使いたい。その為にはクライアント、ディレクター、デザイナーがしっかりと向き合い、信頼関係を築くコミュニケーションが必要だと思います。

ワイヤーフレームを作るときの注意点
・ワイヤーフレームとは、Webサイトやアプリの設計図
・見るべきポイント理解して見る
・ワイヤーフレームはデザインしない
・積極的にコミュニケーションをとる

上記の注意点を意識しながらワイヤーフレームを作っていくことで、結果的にスムーズに進んでいくのではないでしょうか？