枠の中でつくるか、枠をはみ出すか

ウェブサイトをつくろう。
まずはどんな情報を配置するのか、情報設計をしよう。。。よし、できた。
じゃぁ次は、ビジュアルをデザインしよう。
ちょっと待って。情報設計されたワイヤーフレームと、ビジュアルデザインされたもの。どんな違いがある？
ただ色をつけるだけのようなもの？それとも、大胆な変更があるもの？

意外と、情報設計されたものをどうビジュアルデザインするか、手を動かして学ぶ機会はないかもしれない。
どのくらい、枠を守らないといけないのだろう。どのくらい、枠をはみ出していいのだろう。
みんなで一緒に考えてみませんか。

参考記事

• 7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
• デザイナーはワイヤーの通りにデザインすべきかという議論は虚しいのでやめよう
• 実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート

こんな人は是非ご参加ください

• デザイナーとのコミュニケーションに悩んでいるインフォメーションアーキテクト
• インフォメーションアーキテクトとのコミュニケーションに悩んでいるデザイナー
• 情報設計をそれなりに実践している人

内容（予定）

19:15 受付開始 19:30 ワーク開始

インフォメーションアーキテクト組

【インプット】
・サービスブループリント
・サイトマップ（参照しないもアリ）
・本番サイト（参照しないもアリ）
【アウトプット】
・ワイヤーフレーム
・（サイトマップ）
・（デザイナーへの指示内容（口頭含む））

【タイムライン】
19:30 - 19:40 事前説明・会場説明
19:40 - 20:00 第一イテレーション：個人ワーク：資料読み込み
20:00 - 20:10 ペアふりかえり（KPT）
20:10 - 20:40 第二イテレーション：ペアワーク：ワイヤーフレーム／サイトマップ作成
20:40 - 20:50 ペアふりかえり（KPT）
20:50 - 21:20 第三イテレーション：IAペア + デザイナー1名のグループワーク：トップページビジュアル制作
21:20 - 21:30 グループふりかえり（KPT）
21:30 - 21:45 全体ふりかえり（時間あれば）

ビジュアルデザイナー組

【インプット】
・トンマナ（採用されなかったプランBのもの）
・ワイヤーフレーム
・サービスブループリント（参照しないものあり）
・サイトマップ（参照しないもアリ）
・本番サイト（参照しないもアリ）
【アウトプット】
・トップページのデザイン（書きかけ）

【タイムライン】
19:30 - 19:40 事前説明・会場説明
19:40 - 20:00 第一イテレーション：個人ワーク：資料読み込み
20:00 - 20:10 ペアふりかえり（KPT）
20:10 - 20:40 第二イテレーション：ペアワーク：デザイン制作
20:40 - 20:50 ペアふりかえり（KPT）
20:50 - 21:20 第三イテレーション：IAペア + デザイナー1名のグループワーク：トップページビジュアル制作
21:20 - 21:30 グループふりかえり（KPT）
21:30 - 21:45 全体ふりかえり（時間あれば）

共通

・別会場にて懇親会（ビール有り）＜エンドレス＞

持参して欲しいもの

・ノートPC（ビジュアルデザイナーは推奨。なければ紙での実施になります）

主催

・ちゃちゃき ：エクスペリエンスアーキテクト／エンジニア
・フジタジュンコ：インフォメーションアーキテクト

問い合わせ先

ちゃちゃき： chachaki@gmail.com