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

[スライド]第1回ワイヤーフレーム研究会のスライド

kara_d — Wed, 02 Sep 2009 07:11:56 +0000

第1回ワイヤーフレーム研究会のスライドを公開します。
下記リンクよりダウンロードください。

→第1回ワイヤーフレーム研究会のスライドをダウンロードする（PDF）

[議事録]コミュニケーションとしてのワイヤーフレームとドキュメントとしてのワイヤーフレームがある？

kara_d — Thu, 06 Aug 2009 13:08:18 +0000

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

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

kara_d — Thu, 06 Aug 2009 12:34:17 +0000

マークアップ: ワイヤーフレームからビジュアルデザインに行かずマークアップへ行く; 現在しない理由はそこまでスキルがないから
字コンテを書く: 見出しは黒丸など、wiki記号で似せて作っている; 広告はラフなしのほうが喜ばれる; エディトリアルはラフありのほうが喜ばれる
H1とかの識別記号をしっかり書く: 色分けもしっかり意味付けする
ワイヤーフレームすら書かない
ワイヤーフレームを画像データにする: 色分けはグレーを使う
ワイヤーフレームで要件を決めてはいけない？: インターフェース設計としてのみ使う; 反論：場所取りつまりゾーニングをどこで解決するか; 反論：サイトの構成手順によって異なるかもしれないビジネス側から作成するのかUIの専門家が作成するのか
ワイヤーフレームをデザイナーが切りなおす
渡されたワイヤーフレームを最適なワイヤーフレームに書きなおして提出: ただし、ワイヤーフレームを渡す時はすでに要件が決まっているときもあり
ワイヤーフレーム単体で評価するのではなく、ちゃんとコミュニケーションがあるかどうかが重要: フルFlashサイトではあまりワイヤーフレームを作らない
IA、D、ADもそれぞれワイヤーフレーム作成に参加する（両方がぶつけ合うのが大事）: ワイヤーフレームは、画面のレイアウトを規定するものではない; AD、マークアッパー同士でワイヤーフレームを組む; キャンペーン系コンテンツではDとADの関係が逆転することもあり
レイアウト指示書として確実なものを渡す: ただし、変わる可能性があるものは伝える
ハイレベルのワイヤーフレームなのか、ローレベルの詳細ワイヤーフレームなのかはっきりさせる
ワイヤーはちょっと足りないくらいにしておき、クリエイティブ魂をゆさぶるようにする

[議事録]ワイヤーフレームの共通ガイドラインはあったほうがいいと思いますか？

kara_d — Wed, 05 Aug 2009 23:18:41 +0000

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

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

kara_d — Wed, 05 Aug 2009 22:34:37 +0000

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

[議事録]ワイヤーフレームって何ですか？アンケート結果

kara_d — Fri, 31 Jul 2009 15:53:01 +0000

紙のみで構成されたレイアウトのラフを含む平面図
ワイヤー（線）で構成を表現したもの
作業、使用の要素を抽出してシンプルに表現したもの
一言で言えばサイトの「見取り図」
Webページのどこにどんな情報をのせるか簡単に記したもの
ヒアリングで聞いたことをWebページで表現するとどうなる？と言う提案図
お客さんには”レイアウト案”と言っています。
（内部的には）ページの幅や要素などの情報を共有するもの
サイトの完成系を共有するための設計資料・設計図
Webページの構成要素とそのレイアウトを簡易的に表したもの
クライアントとの意識合わせを行うために必要なドキュメントの一つ
（画面要素、機能について）
構成要素のざっくりとしたレイアウト、重みづけや機能を書き込んだ書類
画面の情報
レイアウトの情報
- どういうボタン配置にするか、ナビゲーションの情報
- 全体のレイアウトの情報
- 迷わないようにするやつ
- 情報の整理も
ページを構成する要素を線とテキストで表現しレイアウトしたもの。
画面内の要素群を定義し、クライアント、ビジュアルデザイナー、エンジニア等と確認を進めるためのドキュメント、レイアウトを規定する場合とそうでない場合がある
ページ内に配置する要素の役割を確認するもの
どういう要素がページ内にあって、どういう働きをするのかを関係者内で確認する為のもの
サイトの「なんとなくな形」を共有するもの
要素とプライオリティを示すもの。洗い出すもの。
たたき
案件の規模やフェーズによって使い方が変わってくる。
動線設計
情報設計
ページの設計図（建築的思想で）
概念の集約？
土台
1.画面要素の整理：大きさ、場所（グーテンベルグダイヤグラム）
2.画面遷移の整理､チェック：ペーパープロトタイプとして。画面別の整理チェック。ナビゲーションのチェック
3.以上の共有、コミュニケーションツール
要素定義時のサイトの設計書
開発時の原稿
デザイナーへのレイアウト指示書
紙やEXCELなどを使用し、特定のWebページ上に存在する要素を配置したもの。
画面単位での設計図
「含む」：要素､配置
「含まない」：視覚表現
他のものはケースバイケースで
プロジェクトに関わる人達の、共通のコミュニケーションツール。
主に表示要素の重要度を定義するもの。
Webサイトのゾーニングを決めるもの
デザインの土台となるもの
要素を確定するもの（ほぼ）
デザイン前にサイトの構造を共有するもの
ページ(コンテンツ)に必要な項目、要素と､重要度などを視覚化するもの。それを共有するもの。
大まかなレイアウトを検討するもの。
配置すべき情報を、可能なかぎり抽象化したもの。
その、表現方法においての呼び名。
（目的から呼ぶときのストラクチャ、と場合によっては同じ意味となる）
サイトの構造､構成を共有するもの？