人を巻き込む - css nite公式サイト...ワイヤーフレーム ビジュアルデザイン...
TRANSCRIPT
![Page 1: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/1.jpg)
![Page 2: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/2.jpg)
人を巻き込むワイヤーフレーム活用術
4つの活用法と問題の本質
![Page 3: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/3.jpg)
田島 ちはるDirector / Designer
企画・戦略など上流工程から関わるのが好き!
Twitter DesignHumore
Instagram everydesign.insta
制作プロダクション
代理店
インハウスデザイナー
フリーランス
![Page 4: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/4.jpg)
実績を乗せたスライドは写真撮影・SNSなどへのシェアは
お控えください
どんなことしてるか伝えるべく、実績を出します
![Page 5: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/5.jpg)
商業施設の販促
撮影禁止
![Page 6: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/6.jpg)
ブランドの販促
撮影禁止
![Page 7: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/7.jpg)
その他いろいろ…
撮影禁止
A 1/2
A 1/2
AA 1/3A 1/3
AA 1/3
A 1/2 A 1/2
![Page 8: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/8.jpg)
ニコッ
今日は、みなさんのワークフローにつまみ食い(ちょっと取り入れ)してもらえる
内容を心がけてきました
![Page 9: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/9.jpg)
おはなしの流れ
ワイヤーフレームの解体~再構築問題分析 01
解決案1 4つの役割を活用したワークフロー02
活用法 目的に合わせて自由な活用を03
解決案2 どこまで固めるか悩む について04
本質 闇の探り方05
![Page 10: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/10.jpg)
何はともあれ、本日のテーマ
ワイヤーフレーム
ビジュアルデザイン
ぎゃー!
ここをワイヤーフレームをとっかかりに考えます
![Page 11: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/11.jpg)
ワイヤーフレームの解体~再構築
01
問題分析
![Page 12: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/12.jpg)
ヒアリング
リサーチ
経 験 則
30名以上
本・サイト
デザインとディレクション
ワイヤーフレームの
マインドマップ
![Page 13: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/13.jpg)
![Page 14: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/14.jpg)
要は、情報を集めて何枚かの紙に
考えたことを書き出したのです
![Page 15: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/15.jpg)
よくあるワードから読み解くと
ワイヤー設計者
デザイナー
提案してくれない
言われた通りにした
言った通りにしてくれない
自分なりに考えた
コミュニケーショ
ン・ロス
![Page 16: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/16.jpg)
ワイヤーフレームは制作過程と人の間にある
出典:ウェブ戦略としての「ユーザーエクスペリエンス」
クライアント
制作チーム
![Page 17: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/17.jpg)
制作フローの間、人と人の間に生まれる闇
を、同じ立ち位置にあるワイヤーフレームという共通言語で
解消できないか
コミュニケーション・ロス
![Page 18: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/18.jpg)
クライアント
制作チーム
闇を解消するためにワイヤーフレームの役割を掘り下げた
![Page 19: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/19.jpg)
闇を解消するためにワイヤーフレームの役割を掘り下げた
クライアント
制作チーム
説得・説明
共有
引き出す
協力
![Page 20: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/20.jpg)
使いやすくするために、4つの役割に分けた!
協力
はじめにチームで
協力を
引き出す
意見を引き出し
すり合わせ
説得・説明
意図を魅力的に
伝える
共有
意図を共有する
同じ方向を見る
![Page 21: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/21.jpg)
手書き ツール
書き方として、この2つも、いいところを使い分け!
ざっくりワイヤー
かっちりワイヤー
![Page 22: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/22.jpg)
みんなで共有していくものをたった一人で作るなんてもったいない!
人を巻き込む
わーい!
![Page 23: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/23.jpg)
4つの役割を活用したワークフロー
02
解決案
![Page 24: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/24.jpg)
デザイナーを戦略に巻き込む気をつける点を拾っていく
![Page 25: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/25.jpg)
【手段1】 協力(制作チーム)
引き出す 説明・説得 共有
制作チーム
協力
クライアントにワイヤーフレームを出す前にチームで話し合う
![Page 26: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/26.jpg)
制作チーム
協力 思考からチームを巻き込む
最後に「できない」を防止
専門的な知識をもらえる
![Page 27: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/27.jpg)
制作チーム
相談するプロジェクターでホワイトボードにワイヤーフレームを映して
ざっくりワイヤーがおすすめ
もみやすい
![Page 28: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/28.jpg)
制作チーム
チームで、もんだ結果
これ、情報量多いかも
この流れだったら大丈夫だよ
今のデータベースにはその情報無いね~
時間をもらうか代案を…
![Page 29: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/29.jpg)
表示できる情報が変われば、デザインも見せ方や形が変わる
エンジニアの仕事もデザインに影響する
今のデータベースにはその情報無いね~
![Page 30: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/30.jpg)
戦略からデザイン・機能まで想定相違を早い段階で防ぐ
チームを巻き込む
わーい!
![Page 31: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/31.jpg)
クライ
アント
【手段2】引き出す(クライアント)
協力引き出す
共有説明・説得
制作の中間地点で意見を引き出す
![Page 32: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/32.jpg)
クライ
アント
思考からクライアントを巻き込む
大きな手戻りを減らす
言葉で足りない部分のすり合わせ
引き出す
![Page 33: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/33.jpg)
クライ
アント
引き出すクライアントに意図を伝え
ざっくりワイヤーがおすすめ
もみやすい
![Page 34: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/34.jpg)
クライ
アント
打ち合わせで、もんだ結果
この機能は時間が…代案もありますが
代案でOK!後で追加の検討も…
このページは店舗と連動しますか?
このページは、店舗で連動します!
![Page 35: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/35.jpg)
クライ
アント 他の媒体(実店舗等)がデザインにも影響します!
一貫性のあるビジュアルは「わかりやすさ」につながる
ウェブ 紙 店舗
このページは、店舗で連動します!
![Page 36: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/36.jpg)
クライ
アント
ウェブに限らず意見を引き出しておく他の媒体まで気にかけて、一貫性のあるビジュアルを意識する
どんなサイトだろう
どのお店だろう
どんなサイトだろう
どのお店だろうマーク マーク
![Page 37: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/37.jpg)
一緒に考えるタイミングを作り、すり合わせしてブレを防ぐ
意思を揃える
いいかんじ?
![Page 38: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/38.jpg)
クライ
アント
引き出す説明・説得
【手段3】 説明・説得(クライアント)
協力 共有
内容の説得・説明により、決断をしてもらう
![Page 39: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/39.jpg)
クライ
アント
説明・説得 決断をとって大きな変動を防ぐ
着地に向けて同じ方向を見れる
イメージを伝える
![Page 40: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/40.jpg)
クライ
アント
意図を伝えるプレゼンテーションでは形の話ではなく
かっちりワイヤーがおすすめ
説得しやすい
![Page 41: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/41.jpg)
御社が選ばれる理由がここなので、取り入れてます
なるほど!戦略があるんですね
サイトのイメージをご用意しました
いいとは思うんですけどイメージがわかないなあ
プレゼンテーションクライ
アント
![Page 42: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/42.jpg)
イメージボードを用意してもOKクライ
アント
デザイナーと相談して
出典:コソアドデザイン出典:トプカピ/クリケット
![Page 43: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/43.jpg)
制作チーム
引き出す 説明・説得共有
チームで意思疎通を図る。 提案して欲しい部分と、変えないで欲しい部分の線引きを行う
協力
【手段4】 共有(制作チーム)
![Page 44: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/44.jpg)
共有
制作チーム
戦略を伝え、意思疎通する
明確にイメージを伝える
線引きをハッキリさせる
![Page 45: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/45.jpg)
固まった内容をきっちり共有する私は余白をとって、意図を書き出し、口頭でも伝える
デザインには
理由がある
構造にも
理由がある
これの
意図うんぬん
制作チーム
かっちりワイヤーがおすすめ
説得しやすい
![Page 46: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/46.jpg)
制作チーム
線引きを心がける
いい見せ方があれば自由に変えて
構成やコピーも変わっていいんですか?
お客さんの意見はこう!私の意見はこう!
お客さんのそもそもの意見をまず理解!
![Page 47: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/47.jpg)
「言いなりの作業」もなんか違う…余白を詰めるときに質問し合う、細かな共有も大事
余白を作る
ちょうど良いスキマ
![Page 48: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/48.jpg)
思考の工程から人を巻き込むことでコミュニケーションロスを防ぐ
ワイヤーフレームは段階を追って成長するイメージです。
一緒の方向を見る
同じものを見てる
![Page 49: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/49.jpg)
目的に合わせて自由な活用を
活用法
03
![Page 50: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/50.jpg)
バラバラに使っても、もちろんOK
協力 引き出す 説得・説明 共有
はじめにチームで
協力を
意見を引き出し
すり合わせ
意図を魅力的に
伝える
意図を共有する
同じ方向を見る
![Page 51: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/51.jpg)
協力引き出す 説得・説明 共有
テンプレートを持参しての打ち合わせもOK
![Page 52: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/52.jpg)
プレゼン(綺麗なものを出すルールがある)タイプ
協力 説得・説明 共有引き出す
![Page 53: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/53.jpg)
デザイナーがワイヤーフレームを書くフローも想定できる
引き出す 説得・説明 共有共有
![Page 54: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/54.jpg)
ワークフローも伝え方も案件によって変わる自由にアレンジして活かしてもらえたら嬉しいです
手段は自由
ポケットに秘密道具
![Page 55: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/55.jpg)
どこまで固めるか悩むに、ついて
04
解決案
![Page 56: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/56.jpg)
使うサイトと見るサイトで固める部分を分ける
コーポレート、ブログポータルサイトなど
使うサイト
構造を決定する
キャンペーン、広告ランディングページなど
見るサイト
原稿を揃える
![Page 57: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/57.jpg)
使うサイト
ページの経路を繋ぐことも大切
例えば書籍
見るサイト
ビジュアルで伝えるのも大切
例えばポスター
各ページの関連性(つながり・構造)が変わる
![Page 58: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/58.jpg)
キャンペーン、広告ランディングページなど
見るサイト
原稿を揃える
コーポレート、ブログポータルサイトなど
使うサイト
構造を決定する
![Page 59: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/59.jpg)
デザイン フロントエンド
SEO検索エンジン最適化
と、いいこといっぱい構造を決定する
デザインを統一しやすい
整理されていることで効果的に
制作の加速、管理が楽になる
![Page 60: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/60.jpg)
建て替えを防ぐ!
使うサイトに関して構造を固めることが大事な一番の理由!
なんのことかというと…
![Page 61: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/61.jpg)
構造を固めることで大きな修正を防ぐ!装飾変更(模様替え)の修正なら負担が少ない
構造を固めて、模様替えで応えよう
建て替え?模様替え?
![Page 62: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/62.jpg)
コーポレート、ブログポータルサイトなど
使うサイトキャンペーン、広告
ランディングページなど
見るサイト
構造を決定する 原稿を揃える
![Page 63: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/63.jpg)
ビジュアル 情報設計
この兼ね合いが伝える力を増幅させる原稿は、デザインの理由、意図、根拠に繋がるのでしっかり!
デザインに理由ができる原稿を揃える
![Page 64: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/64.jpg)
Logo
言葉が「伝える」を変える
伝える秘密01○○○○○○○○○○
伝える秘密02○○○○○○○○○○
伝える秘密03○○○○○○○○○○
Testについて お得なプラン 事例ブログお問合わせLogo mail about plan blog
メインビジュアル
ガラッと変わる…
「デザイナーが情報設計までしてもいいのでは」というデザイナー側の意見もヒアリングであったので
![Page 65: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/65.jpg)
重要な部分を伝えるため原稿のアウトライン(大要、あらまし)を作る
1.この内容のタイトル 1-1.小見出し 内容内容内容…2.この内容のタイトル 1-1.小見出し 内容内容内容…
デザインラフをワイヤーフレームの代わりにしてもOK!作り込む前に相談
意図・優先したいことを伝えて進めることが大切
![Page 66: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/66.jpg)
いいと思うのです
ディレクター、デザイナー、プランナー、ライター、マーケター、営業がワイヤーフレームを描くこともあって
実際私もデザイナーでしたが、描いていました
![Page 67: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/67.jpg)
「何のため」「誰に」「何を」「どうやって伝える」か共有することがいい流れを生む
協力してもいいのです
伝達の経路・方法が大事
![Page 68: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/68.jpg)
闇の探り方
本質
05
![Page 69: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/69.jpg)
本当の闇は、どこなのか
知覚・感情・思考(コミュニケーション)のズレ?それは、ワイヤーフレームの段階で生まれたのか!?
![Page 70: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/70.jpg)
戦略のないワイヤーフレームを
もらってそもそも作り直しに
デザイナーの役割が曖昧
提案してもらえない、できない
クライアントの意図が
汲み取れてない伝えられてない
デザインするときに理由が見えない現実味がない
整合性が取れてない
![Page 71: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/71.jpg)
クライアント
制作チーム
出典:ウェブ戦略としての「ユーザーエクスペリエンス」
いっぱい闇があって最後に闇が集合したのでは?
![Page 72: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/72.jpg)
こんな風にしたくなりません?
つかない電球
効果を感じないワイヤーフレーム
つく電球
使いやすい他の手段
![Page 73: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/73.jpg)
スムーズに進行と共有をしたい…
もっといい方法もある?どこが問題?それは、案件やチームで変わっていく
きゃー
![Page 74: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/74.jpg)
何を伝えるか
どんな立場の人に
素材 価格 効果 見た目
潜在顧客
見込み顧客
顧客
ファン
スーパーファン
刺さる内容流れ媒体
戦略が「誰に、何を、どうやって」と考えるなら
![Page 75: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/75.jpg)
どんなカタチで関わりたいか
伝える相手
協力 情報開示 意思決定 情報共有
デザイナー
チーム
ディレクター
クライアント
プログラマー伝え方を考える手段も自由
ワークフローもそうかもしれない
![Page 76: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/76.jpg)
デザインは
でも設計の方法は人それぞれオペレーション?設計?企画?マーケティング?
営業?仕様書?企画?計画?マネジメント?
和訳すると
設計!ディレクションは もしかして 私たち 混ざってる?もしかして 私たち 混ざってる?
でも導き方は人それぞれ
和訳すると
導くこと!企画/戦略
ワイヤー作成
ヒアリング要件定義
スケジュール
プレゼン
マネジメント
マネタイズ
デザインマネジメント
飲みとか挨拶回りとか
コンセプト作成ブランディング
見た目をつくる作業
プロトタイピング
素材作成・選定
情報整理・設計
ユーザビリティコーディングデータ管理
たまにライティング
案件によってやることは変わるし混ざる
![Page 77: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/77.jpg)
それぞれの得意・不得意、やりたいこと…
デザイナー
戦略
制作
ビジュアルディレクター
マーケティングプランニング
マネジメント
トーク
![Page 78: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/78.jpg)
「こうあるべき」論の前に個人の考えを知る「誰がやるべきか」の前に「案件に何が必要か」洗い出す
必要なものに向き合う
キラっ
![Page 79: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/79.jpg)
やりたいこと、任せられること苦手なこと、一緒に乗り越えること成長のために努力できること
![Page 80: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/80.jpg)
対処療法は対処する場所がわからないとできないのでは!
闇の原因は案件とチームで変わる
本当に治る?
![Page 81: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/81.jpg)
チームと案件に合わせた考え方が闇を探る一つの方法であり、闇を拭う手立てになるのでは
![Page 82: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/82.jpg)
視点によって正負が変わるんですよね
良い方法も、ときと場合で悪くなるし
ニコッ うわあ…
![Page 83: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/83.jpg)
ニコッ
今日は、みなさんのワークフローにつまみ食い(ちょっと取り入れ)してもらえる
内容を心がけてきました
![Page 84: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/84.jpg)
おはなしの流れ
ワイヤーフレームの解体~再構築問題分析 01
解決案1 4つの役割を活用したワークフロー02
活用法 目的に合わせて自由な活用を03
解決案2 どこまで固めるか悩む について04
本質 闇の探り方05
![Page 85: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/85.jpg)
ワイヤーフレーム4つの役割
見るサイト使うサイト
今回ご紹介した方法も一つの手段ですいい手段をどんどん取り入れてください!
![Page 86: 人を巻き込む - CSS Nite公式サイト...ワイヤーフレーム ビジュアルデザイン ぎゃー!ここをワイヤーフレームをとっかかりに考えます ワイヤーフレームの](https://reader033.vdocuments.net/reader033/viewer/2022052018/6031413d6cd2fc1ccf19496e/html5/thumbnails/86.jpg)
良い制作をしましょう~