みなさん、ワイヤーフレーム書いてますか??データサイドマーケティングの田中です。
ワイヤーフレームを高速で正しく書く技法については色々なところで議論されていますが、結局「なんで必要?」という思想はディレクター・デザイナーによってバラバラなような気がしています。今日はワイヤーフレームが必要な理由を私なりにまとめてみましたのでご紹介します。

ワイヤーフレームとは?

今回の読者の皆様には釈迦に説法もいいところではありますが、ワイヤーフレーム(WF)とは、システム開発(特にウェブサイト制作)において、デザインを起こす前のプロトタイプを作ることです。SketchAdobe XDなどのツールが有名ですが、手で書くことも可能です。骨組みを書いて、ユーザーと意識合わせをしたり、デザイナーとの打ち合わせで使い、細かいデザイン前の詰めを行ったりします。

なぜワイヤーフレームを作るのか。

これはもう哲学の領域です。結論から申し上げますと、私はワイヤーフレームはヴィジュアルコミュニケーションツールだと考えています。コミュニケーション、ということは相手がいて成立するものです。まずワイヤーフレームを誰が見るのか?どういう合意形成をゴールだと考えているのかを設計しないことには話が始まりません。今日はワイヤーフレームを引く前にターゲット別にどういう要素を押さえておくべきかについて書いていきます。

1.クライアント

受託開発であれば、クライアントにお見せする機会は最も多いはずです。(というか、クライアントが不在のままワイヤーフレームを念入りに作るケースもあまり無いはず。)
クライアントが知りたいのは、ブランディングとユーザーのアクション設計の二つであることが多いです。それぞれ、どういう点に注意すべきでしょうか。

1-1 ブランディング

ブランディングの構成要素は、ロゴやキャッチコピー、メインビジュアルなどが多くを占めます。着手前にクライアントにお願いをして使える素材をドサッと貰っておくのをオススメします。ギガファイル便は無料で使えるので受け渡しにオススメです。

準備ができたら、これらの要素を綺麗に整理していきます。整理の方法や原則は以下のコラムでご説明しておりますので、ぜひご覧ください。

1-2 ユーザーのアクション設計

ユーザーがサイト内でどういう行動を取るのかは、サイト制作の大きな目的の一つですので、ユーザーの目線や、どういう心情を抱くかを細かく設計することが大切です。
作ったワイヤーフレームのどの文章や写真がユーザーの心を揺さぶり、購買・資料請求・新規登録などに導かれるのか。

その基本的な心情変化を知らずにWebサイトを設計するのは極めて難しいです。全くこれを考えずにWebサイトを作るのであれば、それはもはやデザインと呼べないものになります。世の中のWebサイトには、骨組みはしっかりしているが、外装がイマイチなもの、逆に骨組みはボロボロだが、外装だけが綺麗なものの両方が存在しています。どちらにも与しないよう、ユーザーのアクションについてはチームで丁寧に考えてみることをオススメします。

*具体的なワイヤーフレームのご紹介は追って記事を追加しますね

2.デザイナー

続いて、デザイナーにとって必要な情報を整理します。まず、デザイナーとは、職務分掌(スコープ)を明確にしておくと良いでしょう。キャッチコピーのライティングまでデザイナーがやるのか?情報設計は?など、デザイナーとワイヤーフレームを引いているあなたとは仕事が重複しやすいからです。

今回デザイナーの職掌を、実際に渡したワイヤーフレームをデザインに落とし込む、というスコープだとすると以下のような情報が必要になるでしょう。

・ターゲット像(男性なのか女性なのか、年齢など)
・色の指定(ブランディングイメージや、クライアントが好む色などはあるか)
・フォントの指定(ヒラギノ系の力強さ、游ゴシックの滑らかさなのか、など)
・解像度の指定(Retina対応かどうか)

ここでポイントは、デザインを細かく指定しすぎない、ということです。デザイナーに依頼をかけているのであれば、そのデザイナーが力を120%発揮できるような環境を整えてあげるのがディレクションという仕事です。例えばワイヤーフレームに細かく色を付けたり、動きを凝りすぎたりすると、デザイナーが発想を飛躍させづらくなり、ディレクション時点で指定されたワイヤーフレーム通りにデザインをしなくてはなりません。こうなるとデザイナーが単なる作業者となってしまい、デザイナーの士気を一気に下げてしまうので、情報は渡しつつ、縛りすぎない適度な関係性構築が理想です。

悪い例

3.エンジニア

エンジニアが要求するポイントで、特にケアすべきなのは例外処理です。

上の例だけでも、以下の様な点を確認できていません。

・お知らせは最大いくつまで出力するのか。(4つ以上になるとどうなるのか)
・文字数はどこまでを想定しているか。(長すぎるとどうなるのか)
・コンテンツが無い場合はどうなるか(お知らせはありません、とか出るのか)
・ホバー時の想定はどうなるか(文字が太くなるのか、下線が出るのか)

この辺りをケアできていないと、確認工数が高くなり、遅延やさらにお金がかかったりと良いことが無いので、まずはわかっている範囲でしっかり想定の動きを書くようにしましょう。分からないことや相談したい点は、相談したい、と明記しておくと良いでしょう。

まとめ

ワイヤーフレームは、ターゲットによって大きく書き方を変える必要があります。
全て新調する必要は無いですが、「ワイヤーフレームどこ〜?」「これこれ〜」くらいの会話で終始しないよう、コミュニケーションする相手を見ながら整えていきたいところです。

データサイドマーケティング代表。大阪大学卒業後、デザイナー、広告代理店のクリエイティブディレクターを経験。企業や学術組織など100以上のサイトを手掛けた。得意なのはコンテンツ作成(だと勝手に思っている)。