こんにちは、三郎です。
今回はディレクターの方々向けに、現場を炎上・事件にさせないためのワイヤーフレームを使ったコミュニケーション方法について書かせて頂きます。

はじめに

Webディレクターと呼ばれる人がよく作成する「ワイヤーフレーム」は、サイトを構築する上でのコミュニケーションツールとして使われます。案件によって、ワイヤーフレーム抜きにはサイトが作れないというのも存在するでしょう。
それ故に、悲しいことにワイヤーフレームにより開発の現場が炎上、案件が事件化してしまう時があります

炎上時によくあるフィードバックがこんな感じだと思います。

  • デザイナー「何を作ればいいかわからないんだけど????」
  • エンジニア「どういう仕様なの・・・使い物にならん・・・」
  • 企画者「なにこれ

なお、僕は全部言われました。思い当たる節のある方は、心中お察し申し上げます。。。

そんな炎上するワイヤーフレームを作ってしまわないように、この記事ではワイヤーフレームの定義と分類、そして関係者別にワイヤーフレームを使ったコミュニケーション例を紹介します。ワイヤーの作り方や伝え方で悩んでいるWebディレクターの方に少しでも参考になれば幸いです。

目次

ワイヤーフレームの再定義

4594617519_9f5da46a72_z
image by Serglo Ortega (flickr)

ワイヤーフレームの定義については検索すれば色々と出てきますが、この記事においての定義付けを一度したいと思います。

ワイヤーフレームは、単体のページを何らかの方法で視覚化したものであり、コンテンツやその特徴、配置が含まれる。

無茶苦茶広義です(プロトタイプもワイヤーフレームに含まれうる懸念があります)が、今回はこれで進める事にします。

用途で異なる、ワイヤーフレームの使い分け

ワイヤーフレームを作る方法は、手書きから専用ツールの利用と幅広いです。当然ながら出来上がるワイヤーフレームも多岐に渡りますが、大まかに2種類の用途に分かれると考えています。

アイデアを確認する

6777079593_8438a3b615_o(1)

ラフ画に近いです。制作の早い段階で作られます。企画の中身やコンテンツを検討したりするのに使われる事が多いと思います。デザインの話は、やっぱりラフ画なのであんまりできないかと。

設計図として利用する

140820_vas
レイアウトや仕様について、細かい所まで詰められています。デザイン・開発の直前のプロセスで作られます。
コンテンツの構成や文字数、表示パターンなどもある程度詰められ、デザインの話も、このワイヤーフレームを基にそれなりに出来るようになります。

この他にも、ワイヤーフレームとして「既に完成されたWebサイトに改修を加える前提で、一部のデザインを流用してアテを作成したもの」「ワイヤーフレーム兼仕上がりイメージ兼プロトタイプ(もはやワイヤーフレームで無い)」などが存在しますが、新規Webサイトの開発工程に置いて出てくるワイヤーフレームは大体上記2種類だと思います。

さて、これらを実際にどの様に活かしていくのでしょうか?次の項で説明します。

ターゲット別、ワイヤーフレームの作り方例

ここで、ワイヤーフレームを利用してWebサイトについての何かしらの項目を誰かに説明する場合に、相手別にどのようなワイヤーフレームを作成・共有していくのが好ましいかの例を幾つか紹介していきます。

ベテランWebデザイナー

f7146938eddc9c145cc1e24446f93846
(デザインに関して圧倒的に詳しいはずなので)企画と施策の要件を説明しつつ、参考となるサイトやドキュメントを共有することで、適切にデザインして頂けそうな気がしています。
大雑把なワイヤーを作成して、デザイナーとコミュニケーションするのを通して具体的な配置や色合い等を詰めるのもアプローチの一つだと思います。

歴浅めのWebデザイナー

c501f8fd056eaef95b31f5c24371208b
デザイナーとしての歴がどうしても浅いがため、比較的設計図に近いワイヤーフレームに詳しく指示を記述、説明する方針になりそうです。企画の話をどれくらいしていくかは本人の希望次第でしょう。
配色からフォントまで、出来る所は細かく書いていまうくらいのつもりでないと答えの出ない終わり無き迷路に突入、事件対策本部が設立してしまう可能性があります(僕は事件の容疑者となりました)。

エンジニア

b371cce7f5014869d0de115f2cd3d706
見た目ではなく、パーツの細かい挙動を記述する方向だと思います。
機能の特徴や状態の変化、エラーの発生条件や細かいインタラクションを中心に記述していきます(どこまで期待されているかにより、書く分量は異なりますが)。ボタンが押された時はこのクラス使って!などはワイヤー以降の話かも知れません。。

企画者

637a7ae57234ade7b6f0237353ff56a1
企画を実現するための施策が既に存在する場合は、それが適切に実現されうるかを中心に確認することとなります。
自分の場合はユーザーシナリオに関するドキュメントを用意した上で、それに沿ってコンテンツを配置、ワイヤーフレームを作成していくと思います。

まとめ

以上、大まかにワイヤーフレームの使い分け、及び伝え方の一例をいくつか挙げました。
なお、案件や関係者の人数などの諸条件により、用意するべきワイヤーフレームは大きく変わります。ここで記載された項目ははあくまでも例として捉えて欲しいです(テンプレ的な対応は必ず事故に繋がります)。

書いていて改めて思ったのが、「この方法を使えば誰にでも伝わる!」という魔法のワイヤーフレームは存在しないだろうという事です。
伝える相手に合わせ、柔軟にワイヤーフレームを書く。この姿勢が大事なのではないでしょうか。

超提案:炎上したワイヤーフレームをこう名づけたい

_人人人人人人人人人人人人_
> ヨガワイヤーフレーム <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄