ワイヤーフレームコミュニケーション研究会

「ワイヤーフレームコミュニケーション研究会」第1回レポート

この記事を読むのに必要な時間:およそ 4 分

デザイナーが引っ張られないワイヤーフレームを作るにはどんな工夫が考えられるか?

ワイヤーフレームにまつわる制作サイドの問題を一通りリストアップしたところで,どんな風にこれらの問題を解決して行けばいいのかについて続いて話し合いました。様々な意見が出ましたが,⁠書き方」⁠方針」⁠ワークフロー」⁠コミュニケーション」の4つに分類してみます。

書き方の改善

ワイヤーフレームの書き方を改善することでよりよいコミュニケーションを実現しているという切り口での分類は下記のような意見がありました。

  • まずは字コンテを書く
    • 見出しは黒丸など,wiki記号で似せて作る
    • 広告系はワイヤーフレームなしのほうが喜ばれることがある
    • エディトリアルはラフありのほうが喜ばれる
  • H1とかの識別記号をしっかり書く
    • 色分けもしっかり意味付けする
  • ワイヤーフレームを画像データにする
    • 色分けはグレーを使う

方針の改善

そもそも方針を改めるということもありなのではという点においての下記のような意見もありました。

  • ワイヤーフレームすら書かない
  • ワイヤーはちょっと足りないくらいにしておき,クリエイティブ魂をゆさぶるようにする
  • ハイレベルのワイヤーフレームなのか,ローレベルの詳細ワイヤーフレームなのかはっきりさせる

ワークフローの改善

改善すべきは,ワイヤーフレーム自体ではなく,その使い方だったり生み出され方であるという側面から下記のような意見がありました。

  • マークアップからはじめる
    • ワイヤーフレームからビジュアルデザインに行かずマークアップへ行く
  • ワイヤーフレームで要件を決めてはいけない
    • インターフェース設計としてのみワイヤーフレームを使う
  • ビジネス側から作成するのかUIの専門家が作成するのかは,サイトの構成手順によって異なるかもしれない

ただし,⁠ワイヤーフレームで要件を決めてはいけない」という案に関しては「場所取りつまりゾーニングをどこで解決するか」という反論がありました。

コミュニケーションの改善

ワイヤーフレーム自体より,それを使ったコミュニケーション手法を改善するとうまくいくであろうという下記のような意見もありました。

  • 渡されたワイヤーフレームを最適なワイヤーフレームに書きなおして提出するとよい
    • ただし,ワイヤーフレームを渡す時はすでに要件が決まっているときもあり
  • ワイヤーフレーム単体で評価するのではなく,ちゃんとコミュニケーションがあるかどうかが重要である
    • フルFlashサイトではあまりワイヤーフレームを作らない
  • IA,D,ADもそれぞれワイヤーフレーム作成に参加し,両方がぶつけ合うのが大事だ
    • ワイヤーフレームは,画面のレイアウトを規定するものではない
    • AD,マークアッパー同士でワイヤーフレームを組む
    • キャンペーン系コンテンツではDとADの関係が逆転することもあり
  • レイアウト指示書として確実なものを渡すこと
    • ただし,変わる可能性があるものは伝える

コミュニケーションとしてのワイヤーフレームとドキュメントとしてのワイヤーフレームがある?

ワイヤーフレームと一口に言っても様々な目的があると思います。大きく分けると制作段階でWeb担当者やデザイナーとやりとりをするために使われるワイヤーフレームと,仕様書としてのワイヤーフレームがあるのではという部分に関して意見を聞いてみました。そのあときあがった意見を挙げておきます。

  • ワイヤーフレームを成果物(納品物)に入れている?
  • ワイヤーフレームは途中で破棄されるので入れていない
  • 仕様書と違って最新版に更新はされない
  • ワイヤーフレームは仕様書としては扱わない
  • 仕様書として入れる場合はワイヤーフレームは実製作中でも更新があればバージョンアップさせていく必要がある
  • ワイヤーフレームをブラッシュアップしたものがビジュアルに下りていく事はない
  • ワイヤーフレームといっても様々な目的がある
  • ビジュアルデザインのための利用
  • コンテンツ仕様書としての利用
  • インタラクションの検討材料として
  • クライアントによって,ドキュメントとして使うかどうか決める
  • 建築系で例えると
  • 建築の図面はJIS的なもので決まっているがワイヤーフレームにはない
  • ビルと建物で情報の粒度は違うかもしれないからワイヤーフレームでも案件によって記載内容は違ってくる
  • SIer業界では画面設計図がある
  • ただし,レイアウトがいらない点がワイヤーフレームと違う
  • 機能単位での記載なのでページ単位ではないことがある

ワイヤーフレームの共通ガイドラインはあったほうがいいと思いますか?

コミュニケーションとしてのワイヤーフレームというのであれば,当事者同士がそれぞれ理解出来るニュアンスであればよいということになりますが,仕様書としてのワイヤーフレームとなった場合,第3者が見ることも想定しなければならないはずです。そうなったときに,ひょっとしたらワイヤーフレームにも共通のガイドラインがあったほうが読む側,作る側双方にとってメリットがあるのかもしれません。そんなことを皆に聞いてみたところ,賛否様々な意見がありました。

以下に印象的だった意見を挙げてみます。

○あるほうがいい
  • 現状,ワイヤーフレームは作る人によってばらばらすぎる
  • なんらかの決まりが必要ではないか?
  • ワイヤーフレームのせいでコミュニケーションが阻害されているとよくない
  • ボキャブラリーとしての統一ならあり。リンクの書き方一つにしても決まりがあるとよい
  • ワイヤーフレームがコミュニケーションロスの原因になっていることもある
×無い方がいい
  • ワイヤーフレームは共通化できない
  • ワイヤーフレームっていう言葉の定義はあったほうがいい
×ないほうがいい
  • Webの未来を閉ざす可能性がある。ディレクターが引っ張られることもある
○あるほうがいい
  • 基準があったほうがいい。案件や会社の方針によってはそれらを無視すればいい
○あったほうがいい
  • 目的による粒度が異なっていい
  • 案件のタイプに応じて,仕様書による情報の粒度が異なるケースもある
○あったほうがいい
  • ワイヤーフレーム作成で見積りが出せるくらいまであったほうがいい
あってもなくてもいい
  • ワイヤーフレームの作り手にはメリットはあるのでは?
  • ワイヤーフレームの基準はデザイナーに分かりづらいかもしれない
  • ワイヤーフレームのガイドラインをデザイナーに求めるのは酷。ガイドラインが読めない可能性がある
どうだろう?
  • システムが絡む要件があったときにワイヤーフレームの基準があると便利
○あってもいい?
  • ワイヤーフレームはアジャイル性がメリット
  • ワイヤーフレームによるコミュニケーションの仕方は案件サイズによる

SINAPにて研究会が行われた後には,会場を変えて参加者による懇親会も行われました。

そちらの会場でも,本会に引き続いてのそれぞれの意見交換や,次回以降の議題の検討などが行われました。

全体の共通の思いとして,やはり今回一度きりで「ワイヤーフレーム」についてのそれぞれの意見を語り尽くすにはあまりに時間が少なかったのと,また,これっきりで議論を終えたくないという意見が沢山上がっていたように思います。懇親会の最後には全員が,今後も第二回,第三回…と引き続き議題を変えながら「ワイヤーフレームコミュニケーション研究会」を開催して行こうという思いをひとつに,第一回目の「ワイヤーフレームコミュニケーション研究会」は終了となりました。

今回のこの「ワイヤーフレームコミュニケーション研究会」の発案者であり会をモデレートして下さった原さん,またご参加者の皆さん,おつかれさまでした!

議事録など下記のサイトにて公開されていますので,併せてご確認ください。

参考サイト一覧

著者プロフィール

株式会社シナップ

シナップは,コミュニケーションをデザインする会社です。インターネットをコミュニケーション戦略の中心に据え,広告,各種プロモーション,Webサイト,モバイルサイトなどのプランニングから,デザイン,実制作までをトータルで実行するユニークな会社です。

SINAPでは勉強会・セミナー・懇親会などを開催する方に(一定の条件はありますが)会場を無償提供しています。有志だけの勉強会から,不特定多数の方を募るセミナーまでご利用頂けます。ご利用条件など詳細はWebサイトをご覧下さい。

URLhttp://sinap.jp/


原一浩(はらかずひろ)

株式会社エフエックスビイ/空飛ぶ株式会社。

1998年に独立し,Webデザイン事務所を開業。ウェブデザイン専門のメディアDesign Wedgeの発行を開始。ウェブデザイン業務の傍ら,海外のウェブデザインに関する情報発信および,研究,開発を行う。 「Web Designing」や「Web creators」などへの寄稿多数。

主な著書に,「プロセス オブウェブデザイン」「Flashでデザイン 差がつくBlogサイトの作り方」「FFmpegで作る動画共有サイト」「速習WebテクニックSmarty動的Webサイト構築入門」など十冊ほど。Web検定の委員も勤める。

URL:http://fxb.jp/
URL:http://soratobu.jp/

バックナンバー

ワイヤーフレームコミュニケーション研究会

  • 「ワイヤーフレームコミュニケーション研究会」第1回レポート