こんにちは,
今回は,
もともとこの研究会は,
発言の瞬間には
- ※1
- Twitterで反応を示した人たちの殆どが,
ぼんやりと 「ワイヤー」 = 「ワイヤーフレーム」 という認識を持っていたのは事実で (その場で言及されていた方ももちろん居ましたが), 後に原さんご自身がイベント管理ページATNDにて 「ワイヤー」 = 「ワイヤーフレーム」 であると補足説明されています (以降の表記は 「ワイヤーフレーム」 に統一します)。
会当日に
研究会の主なる議題は以下の通り。
そもそもワイヤーフレームとは何を差すのか
参加者は30名以上。その参加者全員が前向きに議題に向き合えるように,
まだ
こんにちは,
ワイヤーフレームというと,
会は,
今回話したトピックは以下の5つでした。
- ワイヤーフレームって何ですか?
- ワイヤーフレームにデザイナーが引っ張られてしまった経験は?
- デザイナーが引っ張られないワイヤーフレームを作るにはどんな工夫が考えられるか?
- コミュニケーションとしてのワイヤーフレームとドキュメントとしてのワイヤーフレームがある?
- ワイヤーフレームの共通ガイドラインはあったほうがいいと思いますか?
流れとしては,
ワイヤーフレームって何ですか?
大きく分けると,
また,
※以下アンケート結果より印象的なものを抜粋
- ヒアリングで聞いたことをWebページで表現するとどうなる?
と言う提案図 - クライアントとの意識合わせを行うために必要なドキュメントの一つ
(画面要素, 機能について) - 画面内の要素群を定義し,
クライアント, ビジュアルデザイナー, エンジニア等と確認を進めるためのドキュメント, レイアウトを規定する場合とそうでない場合がある - サイトの
「なんとなくな形」 を共有するもの - 画面要素の整理:大きさ,
場所 (グーテンベルグダイヤグラム) - 画面遷移の整理,
チェック:ペーパープロトタイプとして。画面別の整理チェック。ナビゲーションのチェック - 以上の共有,
コミュニケーションツール
- 画面要素の整理:大きさ,
- 要素定義時のサイトの設計書
開発時の原稿
デザイナーへのレイアウト指示書 - 画面単位での設計図
「含む」:要素,配置
「含まない」:視覚表現
他のものはケースバイケースで - Webサイトのゾーニングを決めるもの
デザインの土台となるもの
要素を確定するもの(ほぼ)
デザイン前にサイトの構造を共有するもの - ページ
(コンテンツ) に必要な項目, 要素と, 重要度などを視覚化するもの。それを共有するもの。
大まかなレイアウトを検討するもの。 - 配置すべき情報を,
可能なかぎり抽象化したもの。
その,表現方法においての呼び名。
(目的から呼ぶときのストラクチャ,と場合によっては同じ意味となる)
ワイヤーフレームにデザイナーが引っ張られてしまった経験は?
さて,
- リンクの時,
左にブレットがあると, そのままデザインに取り込まる - 画像と文字の比率がワイヤーフレームのまま
- 細かく作ってしまったワイヤーフレームのエリア別の優先度強弱の色がそのままビジュアル的な濃淡になってしまった
- 色がついた線は,
ワイヤーフレームに慣れていない人はそのままの色でビジュアルに反映 - 比率もレイアウトもワイヤーフレームと同じになってしまった
- ワイヤーフレーム通りに作って欲しかったのに作られなかった
- 一案目のデザインはワイヤーフレームベースで,
ワイヤーフレームを崩したデザインをもう一案にすることがある
まとめてみると,