タイトル

「UIデザイン捕物帖 〜デザインフェーズにおけるワイヤーフレームとの付き合い方〜」

開催日時・会場

2017年9月16日（土）14:00〜18:00
plug078 コワーキングスペース スタジオB（新神戸）

開催主旨

ウェブサイトを制作する際、ビジュアルデザインをどう決定し、どう進めていますか？
チームで案件に関わる場合や、規模によってはウェブデザイン全般をひとりでこなすフリーランスのデザイナーもいるでしょう。
いずれの場合も、ビジュアルデザインの大元になるワイヤーフレームを、クライアントの要望やコンテンツの内容にもとずいて描き、検討を重ねた上で全体、細部のデザインを作り込んでいくのではないかと思います。

ワイヤーフレームから実際のビジュアルに落とし込むときに問題になることがいつくかあり、多くのデザイナー、ディレクター、また発注側の担当者が経験したことがあるはずです。
ワイヤーフレームに関する諸問題にどう対処しているのかを探るセミナーイベントとして、都内版のCSS Niteで 9月30日（土）にCSS Nite LP53「ワイヤーフレームとビジュアルデザインの間の暗くて深い闇」が開催されます。

今回の神戸版では、都内版に先駆け、松田 直樹さん（まぼろし）を講師に「UIデザイン捕物帖 〜デザインフェーズにおけるワイヤーフレームとの付き合い方〜」と題しワークを交えじっくりと取り組みます。
松田さんは、Vol.11（2015年7月）に「これからのWebサイト設計 & SVG」という技術よりの内容で登壇いただきました。今回は、どういう思考プロセスで、ビジュアルに落とし込むのか、ワイヤーフレームから何をどう読み取っているのかを、聞いてみたいと思います。

おそらく人によって方法はさまざまで、正解のない内容ですが、第一線で活躍する、まぼろしのデザイナー松田さんの場合どうなのか、みなさん興味ないですか？

以下、松田 直樹さんからのコメントです。

---
ペルソナ設計、カスタマージャーニーマップ、ワイヤーフレーム、プロトタイプなど、実際のビジュアル制作を行うデザインフェーズに至るまでに用意される情報は多々あります。

「ワイヤー通りにデザインを起こしたら、なにか違う感じがする」
「ワイヤーから逸脱したら差し戻された」

...など経験があるのではないでしょうか。
デザインフェーズではこれらの情報をどう読み解き、どう付き合えば効率の良い制作ができるのでしょうか？

今回のセッションでは、ワイヤーフレームの存在意義の再確認やデザインに落とす際の判断の仕方などを忌憚（きたん）なく紹介いたします。

ハンズオンでは、仮のワイヤーフレームを用いてグループ内で簡単なデザインを起こしてみましょう。グループ間での違いなどから「気づき」を得られるワークを目指します。

学習する内容

1. 中間成果物の種類
2. なんのためのワイヤーフレーム？
3. デザイン作業の前に仕入れておく情報
4. デザイナーとしてのコミュニケーション
5. 情報設計と構造設計、画面設計
6. コンテンツの主役を決める
7. UIデザインへの落とし込みポイント
8. マイクロインタラクション
9. ユースケースと学習コスト
10. 工数との兼ね合い

グループワークと発表

• 提供されたワイヤーフレームを読み解く
• デザインへの落とし込み
• グループ間の違いからの気づき

※ワーク内でAdobe XDを使う場面を予定しています。ノートパソコンにXDをインストール可能な方はご持参ください。（必須ではありません。ない方は紙とペンで行います。）

こんな方におすすめ

• ワイヤーフレームを見て、迷ってしまう方
• 理論武装していきたいデザイナー
• ディレクター、エンジニアとうまく協業したい他職種
• 上記の逆のケースの方

松田さんの最新書籍（共著）

『Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像』（エムディエヌコーポレーション）：こもりまさあき・栄前田 勝太郎・坂上 北斗・塚口 祐司・前川 昌幸・松田 直樹（著）2017年9月20日発売