こんにちは，株式会社SINAPの守谷です。

今回は，2009年7月24日（金）19:00からSINAPのオフィス内にて行われた勉強会，「ワイヤーフレームコミュニケーション研究会」第一回目の内容のレポートをお届けします。この研究会の企画をされたのは昨年「SINAP TALK Vol.2」でご講演いただいた株式会社エフエックスビイの原一浩さんです。

もともとこの研究会は，原さんがTwitter上で「デザイナーがひっぱられないワイヤーを素早く作る研究会をしたい」と発言されたのが開催のきっかけでした。

発言の瞬間には「ワイヤー」とは何かという言及はまずは置いておいて（※1），原さんをTwitter上でフォローしているワイヤー（フレーム）を「作る」側のディレクターをはじめ，ワイヤー（フレーム）から「デザインを起こす」側のデザイナーももちろん，大勢の人達が是非研究会を開催しようと原さんに同調していったのが始まりです。

※1

Twitterで反応を示した人たちの殆どが，ぼんやりと「ワイヤー」＝「ワイヤーフレーム」という認識を持っていたのは事実で（その場で言及されていた方ももちろん居ましたが），後に原さんご自身がイベント管理ページATNDにて「ワイヤー」＝「ワイヤーフレーム」であると補足説明されています（以降の表記は「ワイヤーフレーム」に統一します）。

会当日に「ワイヤーフレーム」という言葉の指すもの，及び働きなどまで言及しましたので後述します。

研究会の主なる議題は以下の通り。

そもそもワイヤーフレームとは何を差すのか（参加者の認識集め／意識合わせ），一言にワイヤーフレームとは言っていてもどんな種類があるのか（名称を含めての質問），こういう悩みが出るのは何故なのか，など。あらかじめ原さんがTwitterに配信された声などを基にまとめて下さっていて，そこから生まれた議題を中心に研究会が進められて行きました。

参加者は30名以上。その参加者全員が前向きに議題に向き合えるように，スライドの最初には研究会の心得（不安な意見も恐れず挙手する／人の話はちゃんと聞く／間違った事を言ってもあとでブログなどで酷評しない，など）が差し込まれたり，最初の議題では全員からの意見を広く拾えるように記入式にて意見を集るなど，色々な工夫の施された会でした。

まだ「ワイヤーフレームコミュニケーション研究会」の開催自体が一回目ですので，「ワイヤーフレームとはこうあるべき」という明確な意見や結論が出たわけではありませんが，第一回目の本会を見渡して印象的だった議題と見解を原さんが以下にまとめてくださいましたので，お届けします。

こんにちは，今回ワイヤーフレームコミュニケーション研究会を企画したエフエックスビイの原です。Twitterでワイヤーフレームに関する研究会がしたいとつぶやいたところ，あれよあれよという間に人が集まって開催された今回の会。まずは当日の参加者の割合から書いてみます。

ワイヤーフレームというと，デザイナーがディレクターから渡されるものというイメージがあります。ワイヤーフレームについて思い悩むことが多いディレクターが一番多い印象でした。デザイナーが3割くらい，発注側であるWeb担当者が1割ほどといった感じです。

会は，誰か知見者がノウハウを提供して話すセミナー形式ではなく，参加者全員で与えられた議題について話し合うフリーディスカッション形式で行われました。そのため，たまに脱線することは想定されましたし，用意されたテーマの順で進まないことは十分考慮されましたが，それはそれで良いかなくらいに考えてました。結果的には様々な意見が出，スムーズに進んだとおもいます。

今回話したトピックは以下の5つでした。

1. ワイヤーフレームって何ですか？
2. ワイヤーフレームにデザイナーが引っ張られてしまった経験は？
3. デザイナーが引っ張られないワイヤーフレームを作るにはどんな工夫が考えられるか？
4. コミュニケーションとしてのワイヤーフレームとドキュメントとしてのワイヤーフレームがある？
5. ワイヤーフレームの共通ガイドラインはあったほうがいいと思いますか？

流れとしては，ワイヤーフレームについて議論する前に，"ワイヤーフレームという言葉について皆がどう認識しているんだろう？"という定義を確認しておくべきということで「ワイヤーフレームって何ですか？」というテーマで，まずは皆に付箋にそれぞれどういうものとしてとらえているかを書いて紙に貼っていただきました。その中で印象的なものをピックアップしていきます。

ワイヤーフレームって何ですか？

大きく分けると，ワイヤーフレームの認識としては，提案用途，設計作業用途，情報伝達および共有用途，仕様書用途というものがあるというのが今回のワークショップで参加者の認識として持っているというのが浮かび上がってきました。もちろんワイヤーフレームの学術的方面での定義は様々あると思いますが，少なくても現場でワイヤーフレームを使用している人たちにとっては上記用途を全てもしくは一部を潤滑にするために使用していることが伺えました。

また，どういうものをワイヤーフレームと定義しているかについても，細かなニュアンスの違いとして，レイアウト要素をどの程度定義しているかについては違いがありました。共通しているのは，線を多用してなるべく抽象化するということ，加えて視覚表現の領域までは定義しないということでした。

※以下アンケート結果より印象的なものを抜粋

• ヒアリングで聞いたことをWebページで表現するとどうなる？と言う提案図
• クライアントとの意識合わせを行うために必要なドキュメントの一つ（画面要素，機能について）
• 画面内の要素群を定義し，クライアント，ビジュアルデザイナー，エンジニア等と確認を進めるためのドキュメント，レイアウトを規定する場合とそうでない場合がある
• サイトの「なんとなくな形」を共有するもの
• 1. 画面要素の整理：大きさ，場所（グーテンベルグダイヤグラム）
  2. 画面遷移の整理，チェック：ペーパープロトタイプとして。画面別の整理チェック。ナビゲーションのチェック
  3. 以上の共有，コミュニケーションツール
• 要素定義時のサイトの設計書
  開発時の原稿
  デザイナーへのレイアウト指示書
• 画面単位での設計図
  「含む」：要素，配置
  「含まない」：視覚表現
  他のものはケースバイケースで
• Webサイトのゾーニングを決めるもの
  デザインの土台となるもの
  要素を確定するもの（ほぼ）
  デザイン前にサイトの構造を共有するもの
• ページ（コンテンツ）に必要な項目，要素と，重要度などを視覚化するもの。それを共有するもの。
  大まかなレイアウトを検討するもの。
• 配置すべき情報を，可能なかぎり抽象化したもの。
  その，表現方法においての呼び名。
  （目的から呼ぶときのストラクチャ，と場合によっては同じ意味となる）

ワイヤーフレームにデザイナーが引っ張られてしまった経験は？

さて，皆のワイヤーフレームの定義について確認した後は，本題の「ワイヤーフレームにデザイナーが引っ張られてしまった経験」となるわけですが，下記のような現場ならではという経験談がありました。

• リンクの時，左にブレットがあると，そのままデザインに取り込まる
• 画像と文字の比率がワイヤーフレームのまま
• 細かく作ってしまったワイヤーフレームのエリア別の優先度強弱の色がそのままビジュアル的な濃淡になってしまった
• 色がついた線は，ワイヤーフレームに慣れていない人はそのままの色でビジュアルに反映
• 比率もレイアウトもワイヤーフレームと同じになってしまった
• ワイヤーフレーム通りに作って欲しかったのに作られなかった
• 一案目のデザインはワイヤーフレームベースで，ワイヤーフレームを崩したデザインをもう一案にすることがある

まとめてみると，ワイヤーフレームに書かれていることが要素の種類を示す指示記号なのか表現の指示なのかの判別がつきにくいケースで多発しているようでした。また，伝える側としてのディレクター側の苦労と受け取り側のデザイナーの苦労についてもそれぞれ議論が行われ，うまくいっているケースについてはどんな時かなどが続いて語られました。