SlideShare a Scribd company logo
Opening Talk
-「ゼロからつくるUX」とは-
2
高井 勇輝
クリエイティブディレクター
早稲田大学卒業後、web広告のアカウントプランナーとして様々な業種に向けて提案・ディレ
クション・運用・納品までを4年担当。2012年、「プロジェクトデザイン講座」への参加を
きっかけにロフトワークに入社。
webディレクションをはじめ、企業の新規事業創出支援や空間ディレクション、アートプロ
ジェクトなど、オールラウンドに幅広いプロジェクトを手がける。答えのない新しいものを作
る際に、曖昧な部分も含めて大枠を捉え、ファシリテーションしながら推進するのが得意。
2012 / 9 - 2014 / 4 三井不動産株式会社
KOIL (Kashiwa-no-ha Open Innovation Lab)
トータルプロデュース
3
http://www.31ventures.jp/ventureoffice/koil/
カテゴリー
役割
アウトプット
スタートアップ
空間プロデュース
交通広告
千葉県柏の葉に創られた、日本最大級の「イノベーションセンター」。コワーキングスペー
ス、100名規模のカンファレンススペース、様々な工作機器を備えたプロトタイピングス
ペース、カフェスペース、オフィススペースなどを完備し、ソフト・ハード両面からイノベー
ションを起こすためのあらゆる仕組みを内包している。
空間
空間ディレクション
会員管理システム構築ディレクション
webサイト
パンフレット
会員管理システム
ロゴ/VI
プロジェクトマネジメント
コンセプト策定 サービスデザイン策定
2015 / 6 - 2016 / 9 茨城県庁 県北振興課
KENPOKU ART 2016
4
https://kenpoku-art.jp/
カテゴリー
役割
アウトプット
地域
webサイト
2016年秋に茨城県で初めて開催された国際芸術祭「KENPOKU ART 2016 茨城県北芸術祭」
のクリエイティブ制作全般を担当。アノニマスな「公式の価値観」を押し付けるのではな
く、様々な個人の「顔の見える主観の言葉」を軸に、様々なコンテンツの複合的な切り口
から、芸術祭および茨城県北地域の多様な価値・楽しみ方を提示した。
アート
アートディレクション情報設計
コンテンツ企画
クリエイティブ制作全般
ポスター
パンフレット パスポート
サイン オフィシャルグッズ
旅
コミュニケーション計画策定
プロジェクトマネジメント
2016 / 1 - 2016 / 9 株式会社資生堂
Shiseido SPOON
新規事業提案制度企画支援
5
カテゴリー
役割
アウトプット
ワークショップ
株式会社資生堂が新たに取り組んでいる、同社社内向けの新規事業提案制度(社内アクセ
ラレーションプログラム)の企画・実行を支援。全体設計、ワークショップの企画、設
計、進行、エントリーシートの作成、エントリーにあたりワークショップに参加できなかっ
た人のためのガイドブックなど、企画から実行段階まで幅広くサポートした。
新規事業
プログラム設計
ワークシート制作
ワークショップ企画
ガイドブック
イベント
ファシリテーション
プロジェクトマネジメント
2016 / 10 - 2017 / 7 Panasonic/CAFE COMPANY
100BANCH
トータルプロデュース
6
http://100banch.com/
カテゴリー
役割
アウトプット
新規事業
空間プロデュース
2018年にパナソニックが創業100周年を迎えることを機に構想がスタートし、これからの時
代を担う若い世代とともに、次の100年につながる新しい価値の創造に取り組むための施
設。空間ディレクションから各種クリエイティブ制作、プロジェクト公募プログラムの企
画運営までトータルでプロデュースした。
空間
空間ディレクション
会員管理システム構築ディレクション
webサイト 会員管理システム
ロゴ/VI
プロジェクトマネジメント
サービスデザイン策定
イベント
コンセプト策定
アートディレクション情報設計
プログラム設計
イベント企画運営
コンテンツ企画
コミュニケーション計画策定
サイン
ブランディングツール ムービー
7
8
どうアイデアやコンセプト
を形にすれば良いのか、
こちらに意識が向きがち
9
これらによって適切な

アウトプットの形が変わる

「土台」になるもの
10
・VIデザイン
・コミュニケーションツール制作
・空間設計・サインデザイン
・家具/備品/設備ディレクション
 etc.
・リサーチ・コンセプトメイキング
・ストーリー構築・ネーミング
・プログラム企画・運用設計・事業計画
 etc.
UXを構成する5つのレイヤー
11
・VIデザイン
・コミュニケーションツール制作
・空間設計・サインデザイン
・家具/備品/設備ディレクション
 etc.
・リサーチ・コンセプトメイキング
・ストーリー構築・ネーミング
・プログラム企画・運用設計・事業計画
 etc.
何のために? どういう時に?
誰に向けて? 何を伝える?
UXを構成する5つのレイヤー
✕
12
でも、こちらを先に作らな

ければいけないことが多い…
ex. 工期、締切、発表日 etc.
13
これらは事前にFIXしない!

実際に運用しながら完成度が

高まっていくもの
14
先に詰めなければいけない
・リサーチ・コンセプトメイキング
・ストーリー構築・ネーミング
・プログラム企画・運用設計・事業計画 etc.
先に作らなければいけない
・VIデザイン・コミュニケーションツール制作
・空間設計・サインデザイン
・家具/備品/設備ディレクション etc.
このパラドックスが「ゼロイチ」の難しいところ
15
・リサーチ・コンセプトメイキング
・ストーリー構築・ネーミング
・プログラム企画・運用設計・事業計画
 etc.
・VIデザイン・コミュニケーションツール制作
・空間設計・サインデザイン
・家具/備品/設備ディレクション
 etc.
「どちらが先」という関係性ではなく、
螺旋状にお互いに行き来しながら
完成度を高めていくもの
CASE 1 : 100BANCH
17
100BANCHは、2018年にパナソニックが創業100周年を迎え
ることを機に構想がスタート、これからの時代を担う若
い世代とともに、次の100年につながる新しい価値の創造
に取り組むための施設。
1Fはカフェ・カンパニーが企画・運営する未来に向け新た
な食の体験を探求するカフェスペース「KITCHEN」、2Fは
様々なプロジェクトが同時多発的に展開するプロジェクト
メンバーのためのワークスペース「GARAGE」、3Fはパナ
ソニックが次の100年を創り出すためのコラボレーション
スペース「LOFT」の3フロアで構成。
活動の中心となるのは、「GARAGE Program」というアク
セラレーションプログラム。若い世代を中心としたプロジェ
クトチームに対して、各分野のトップランナーによるメ
ンタリングの機会を提供、この場所での活動を支援す
る。
未来をつくる実験区、
東京渋谷ヒャクバンチ
18
背景
きっかけは、2018年に迎えるパナソニックの創業100周年事業。これまでの100年をものづくりで時代を築いた企業が次の
100年をつくろうとするとき、自分たちだけでなく、外部とのオープンコラボレーションによって次をつくろうと考え、
その次の100年を担う若者との接点を持つため、東京に新拠点開設の相談を受けた。
アプローチ
物件の選定から場の在り方、そこで行われるコミュニケーション、それらを実現するツールだけでなく、「次の100年」
の可能性を秘めたプロジェクトの公募・アクセラレーションプログラムの企画運営までトータルでプロデュース。それら
に付随するコミュニケーションプランを策定し、各種クリエイティブの制作・実装に至るまでを総力戦で完遂した。
UXとしてのミッション
全体のUX、つまり「メインアクティビティに対してどんな人が関わり、どんなタッチポイントを経て100BANCHに訪れ、
去り、100BANCH以外での時間を過ごすのか」を考慮し、あらゆるタッチポイントを統合してひとつのサービスとして
ユーザ体験をデザインすること。
19
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
20
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
Point 1:ストーリーから

アクティビティに落とし込む
21POINT 1:ストーリーからアクティビティに落とし込む
マスターとなるユーザシナリオを最初に定める、という
より、ラフにポストイットでプロセスを並べ替えて、状
況に合わせて何度もシナリオをアップデートしていく。
そうすることで、今自分たちがしていることの確からし
さや抜け落ちていた視点を確認することができる。
メインのフロー、サブのフロー、イレギュラーなフロー…
など、「判断基準とネクストアクションを明示的にする」
という考え方で、ステップを細かく書き出して分岐を検
証しながら、条件分岐の穴を潰しつつ、整合性が取れて
いて、なおかつヒューマンエラーが起きないように組み
立てていき、抽出したアクティビティを実現できるように
空間やwebなどに反映していく。
シナリオのプロトタイプ

を繰り返し「検証の道具」
として活用する
22
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
23
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
Point 2:
「統合/可視化する」アウトプット
24POINT 2:「統合/可視化する」アウトプット
色々と断片的なアウトプットをしてはいても、それらを
統合する機会がないとチグハグになってしまうため、断片
的なプロトタイプと議論を繰り返すと同時に、情報を統
合した制作物のリリースをマイルストーンとして設定し、
外に見せる(検証する)機会を持つことが重要。
100BANCHでは、最初に世に出るティザーサイト(応募サ
イト)をオープンするために、関連する様々な制作物や
サービス、運営ルールを決めていったため、ティザーサ
イトの制作が大事なマイルストーンとして機能した。
特にwebサイトはあらゆる情報が統合されるハブになるた
め、サイトの情報設計をすることで、足りていない情報
や、統合すると違和感がある表現、クオリティの足りて
いない部分が発見できる。
情報の「ハブ」になる

アウトプットを、統合の

マイルストーンとして使う
Wireframe Design
25
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
26
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
Point 3:立ち戻る場所としての「合言葉」
27POINT 3:立ち戻る場所としての「合言葉」
伝え方のトンマナ、ポリシーを決める手段として、

「CCI(Core Communication Identity)」を作成。
これは外へのメッセージというより、何か判断に迷った
時に立ち返る価値観としてインナーでの合言葉のような
もの。イベントの設計をするときも、コンテンツの設計
をするときも「多様性が交差しているか?」という価値
基準で判断することで、ポリシーがブレないようにして
いる。
外に出さないメッセージなので、英語としての確からし
さや関係者への配慮なども考える必要がなく、ストレー
トな表現が可能。
制作物や仕組みがブレない
ように、CCIで価値観を

誰もが「見える化」する
- 相違・不一致を交わらせる -
CROSSOVER
THE VARIANCE
28
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
29
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
Point 4:
「磨き上げる」アウトプット
30POINT 4:「磨き上げる」アウトプット【ロゴ/VI/サイン】
空間設計やプログラムの運用フローと同じく、ロゴなど
のVIについても、「誰が、どう使うのか」を考慮すること
が重要。
デザインルールが複雑で、デザイナーにしか扱えないよう
なものになってしまっていると、運用に耐えられず、統
一したUXを提供できなくなってしまうケースが多い。そ
うならないためには、ゆるやかで開かれたデザインルー
ルの設計が必要。
100BANCHでは、アイソメトリックス図からインスピレー
ションを得た、「120度で交差する斜線」をビジュアルア
イデンティティーの最小単位として定義している。
「作って終わり」ではなく、

「続いていくためのデザイン」

をデザインする
120度の交差
31
線幅のバリエーション例
交差のバリエーション例
POINT 4:「磨き上げる」アウトプット【ロゴ/VI/サイン】
32POINT 4:「磨き上げる」アウトプット【ロゴ/VI/サイン】
33
100BANCHは、「GARAGE Program」とその拠点である
「2F:GARAGE」だけでなく、Panasonicがオフィスも構え
るイベントスペース「3F:LOFT」、CAFE COMPANYによる
新たな食体験を提供するカフェ「1F:KITCHEN」を含めた
総体的な活動体。
特設編集チームが手がける、横断的に活動を発信する質
の高いMAGAZINEや、様々な切り口で興味を想起させて
開かれた印象を与えるイベントページの在り方を考え、
100BANCH全体としての活動を発信しドライブしていける
webサイト、ここに掲載されることでプロジェクトのブラ
ンディングにつながるようなwebサイトを目指した。
プロジェクトをフックアップし、
活動をドライブさせるための

「発信源」となるwebサイト
POINT 4:「磨き上げる」アウトプット【WEBサイト(本番)】
34POINT 4:「磨き上げる」アウトプット【WEBサイト(本番)】
特に核となるコンテンツである各プロジェクトページで
は、「100年先の未来を豊かにする」プロジェクトの価値
を端的に伝えるため、特設編集チームによって編まれた
ミッションステートメントを大きく打ち出したほか、ス
テータスバーやインフォメーションバーを設け、活動進
捗の明示やコラボレーションを促進する工夫を取り入れ
た。
関連するイベントやMAGAZINE記事も掲載し、各プロジェ
クトページを見るだけで活動の意義や実績が伝わるよう
に設計している。
プロジェクトをドライブ

させるためのUI上の工夫
35
100BANCHの取り組みそのものはもちろん、100BANCHで
行われる様々な活動は、どれも未来に向けた多様な実験
で、誰も正解の分からないものばかり。
そのため、いわゆる「公式」的なメッセージングでは、
角の取れた抽象的で曖昧なメッセージになってしまうと
考え、プロジェクトリーダーや各メンター、イベント主
催者やMAGAZINE執筆者など、できるだけそのメッセージ
を発信する「個人」の顔と言葉が見える要素を随所に取
り入れ、意志のある具体的なメッセージングができるよ
うにしている。
個人の顔と言葉が見える、
意志のあるメッセージング
POINT 4:「磨き上げる」アウトプット【WEBサイト(本番)】
36
webサイトはあくまで100BANCHの活動を伝えるもの。渋谷
にある100BANCHというリアルな「場」で、今、どんな挑戦
的で刺激的な活動が起こっているのかを伝え、見る人に実
際に足を運んでその熱を体験してもらいたい。
そのため、プロジェクト/イベント/MAGAZINEには、それ
ぞれに象徴的なキーワードをタグとして設定。
各一覧ページのサブナビゲーションとして表示するだけで
なく、メニューにも「LATEST UPDATE」のタグを表示するこ
とで、「今100BANCHでホットなトピックスは何か」を端的
に表現している。
また、常時ヘッダーに渋谷の現在の天気と気温を表示する
ことで、100BANCHが実際に存在するリアルな「場」である
ことを印象づけている。
「今、そこで何が起こって

いるのか」を伝えるUI
POINT 4:「磨き上げる」アウトプット【WEBサイト(本番)】
37
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
38
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
Point 5:
早く、効率的に推進するための「基地」
39POINT 5:早く、効率的に推進するための「基地」
プロジェクトのスタートは実質2017年の1月。ネーミング
も決まっていないところから、3ヶ月でティザーサイトの
公開。空間やムービーの制作、オープニングイベントの準
備などを並行しながら、わずか半年でオープンまでこぎ
つける必要があったため、ウォーターフォール型ではな
く、スクラム型のプロジェクト進行を採用。
COOOP3は、限られた時間や条件の中で“フロー状態”を生
む「War room」という概念で生まれたフロア。クライア
ントもデザイナーも含めた全メンバーが同じ場で一緒に
考えて、議論して、形にするため、アイディアを説明する
ための「資料作り」も、相手から承認を取るための「打
ち合わせ」も不要になる。
すべてのメンバーが物理的
に同じ場所にいることで、

無駄な「作業」がなくなる
40POINT 5:早く、効率的に推進するための「基地」
集中ワークDay webサイト設計
プレゼンテーション デザインスプリント
41
プロジェクトの流れ
ユーザシナリオ作成
コアプログラム企画
運用スキーム設計
ネーミング
空間設計
webサイト(ティザー)
ロゴ/VI/サイン
webサイト(本番)
CCI(Core Communication Identity)
War Room
CASE 2 : AOI FORUM
43
最先端の科学研究と、産・学・官・金の連携で、静岡
から世界に農業の革新を起こす「AOIプロジェクト」。
そしてその中心的役割を担う会員制のフォーラムが
「AOIフォーラム」。
最先端の次世代栽培実験装置を備えた“コワーキング・
ラボ”「AOI-PARC」をオープンイノベーションの拠点と
して、先端情報や会員同士の交流の機会を提供。また、
フォーラムを運営するAOI機構のコーディネーターが中
心となって、コンソーシアムの構築やビジネスマッチン
グなどプロジェクトの立ち上げを支援。
大学・研究機関や県内外の生産者・民間事業者とのビジ
ネスマッチング等により、「農・食・健」「農・商・工」
「産・学・官・金」を連携させ、最先端の技術をもと
に、新産業の育成や、新しい価値の創造を目指す。
静岡の農業が世界を変える。
ロマンに満ちた挑戦が始動。
44
背景
AOI機構自体も2017年4月に設立されたばかりで、「AOIプロジェクト」「AOI-PARC」「AOIフォーラム」という大枠のス
キームはあったものの、実際の活動体となるフォーラムの具体的な事業内容を詰めていく段階で、何から着手すべきか、
というところから立ち上げ支援の相談があった。
アプローチ
インタビュー等を通じたインプット、ビジネスモデルキャンバスを用いた相関関係の整理、リーフレットによるプロトタ
イピングというステップを通して、コミュニケーション戦略からwebサイト、リーフレット、ポスターなどのクリエイ
ティブ制作に落とし込み、AOIフォーラムの立ち上げをトータルでプロデュースした。
UXとしてのミッション
AOI機構のビジネスや活動を整理し、各アクティビティの整理整頓や、場合によっては不足しているアクティビティの洗い
出しもした上で、それらの活動をドライブさせるためのコミュニケーションツールに落とし込むこと。
45
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
46
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
Point 1:
情報を食べ尽くして「腹で考える」
47POINT 1:情報を食べ尽くして「腹で考える」
「ゼロイチ」とは言え、プロジェクトが立ち上がった経
緯やそこにある思いなど、何かしら足がかりになる情報
はあるはず。
大元の企画書やデスクトップリサーチで集めた関連記事、
ステークホルダーへのインタビューや現場の視察など、散
在していたり隠れていたりする情報をかき集めて足がか
りのインプットにする。
全体を俯瞰しながら、インプットと咀嚼を繰り返してい
くと、段々と情報が足りないところや、大事そうなポイ
ントがおぼろげに見えてくる。
作り始める前に、まずは

情報を集めて深く理解する
ことが重要
48POINT 1:情報を食べ尽くして「腹で考える」
49
頭の中で安易な「それっぽい」ロジックを組み立てていくのではなく、
身体の中で、より「確からしい」方向や感覚、「こうなったらいいな」
と感じるイメージやシーンを醸成していく
POINT 1:情報を食べ尽くして「腹で考える」
50
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
51
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
Point 2:フレームワーク
を用いて関係性を紡ぐ
52POINT 2:フレームワークを用いて関係性を紡ぐ
 【ビジネスモデルキャンバス】

  ビジネスモデルを9つの要素に分類し、各要素間の相互関係を

  1枚のキャンバスに示したもの。主に新しいビジネスの枠組み

  を考えるために用いられるフレームワーク。
53POINT 2:フレームワークを用いて関係性を紡ぐ
54POINT 2:フレームワークを用いて関係性を紡ぐ
   【顧客像】

    関連産業まで含むあらゆる人たち   最初にアプローチすべき3つの属性
   【提供価値】

    抽象的な「イノベーションの実現」  入会者に提供する具体的な3つの価値
   【顧客との関係】

    ???????????????   コラボプロジェクトの仲人 兼 助産師
55
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
56
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
Point 3:「イタコ」になって、
「未来を予言するように」
プロトタイピングする
57POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
正解がまだ存在しない新しいものをつくる際は、コン
パスと地図を手に、先の見えない洞窟を一歩ずつ歩き
ながら道を確かめていくように、実際にプロトタイプ
を作って検証しながら、より「確からしい」方向へと
近づけていくしかない。
「ゼロイチ」において
プロトタイピングは必須
58
1.「テキスト」と「ビジュアル」両方の要素があること
テキストとビジュアル両方の要素があることによって、「ブランドの人格」の根幹となる言葉のトンマナだけでなく、
それらを表現するVIやカラースキームとセットでどう機能するかを検証することができる。そのセットで機能する形
が検証できたら、それをベースにしながら他のクリエイティブに横展開していくことで、体系的で統一感のあるデザ
インガイドラインを作っていくことができる。
2.一覧できるくらいの定形であること
ページを増やしていけるwebサイトや冊子では、いくらでも言いたいことを詰め込んでしまえるため、「結局本当に伝
えるべきことは何なのか」を検証することができない。webサイトであれば1ページ程度、紙であれば1枚程度など、一覧
できるくらいに限定された定形のフォーマットを選ぶことで、「どんな要素をどういう順番・面積で配置するのか」「伝
える上で大事なこと・優先度の高いことは何か」を精査することができる。
3.最小限のものであること
プロトタイプを作るのに時間をかけすぎてはいつまでも先に進めなくなってしまうので、なるべく少ない労力で作
れて、これらの検証ができる最小限のものであることが重要。そして、検証してアップデートするというフィードバッ
クサイクルをなるべく早く、たくさん回すことで、アウトプットの精度を高めていく。
・フライヤー
・ポスター
・リーフレット
・ティザーサイト
 etc.
POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
59
精度に直結する建設的な議論と検証をするための
プロトタイプだからこそ、高い精度が必要
POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
ダミーテキスト 実際を想定したテキスト
60
イタコのように、時にクライアントになりきって、時に
ユーザになりきって、集めた資料や情報の中にある使え
そうな言葉もどんどん取り入れながら、まるで「未来を
予言するように」書いていくことがポイント。
とは言え、いきなりクライアントやユーザになりきるこ
とはできないので、ここで精度の高いプロトタイピング
ができるようになるために、「誰よりも考え抜いた」と
思えるくらい自分ごと化することが必要。
どんな形であれ、まず目に見える形でアウトプットするこ
とで初めて、どこがどれくらい合っていて、どこがどれく
らいずれているのかが議論できるため、間違いを恐れず
にとにかく言葉や形にしていくことが大切。
クライアントやユーザに

なりきって書く
POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
61POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
Wireframe Design
62POINT 3:「イタコ」になって「未来を予言するように」プロトタイピングする
63
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
64
プロジェクトの流れ
デスクトップリサーチ
ステークホルダーインタビュー
現場の視察 等
ビジネスモデルキャンバス リーフレット
ポスター
webサイト
各種コンテンツ
各種プログラム
Point 4:バッチサイズを
上げながら展開していく
65POINT 4:バッチサイズを上げながら展開していく
leaflet : PrototypePoster
Favicon
Color Scheme
website
66POINT 4:バッチサイズを上げながら展開していく
leaflet : PrototypePoster
Favicon
Color Scheme
website
「ゼロイチ」のフェーズにプロトタイプと完成の境界はない。
どのアウトプットもプロトタイプの延長線上に展開しながら、

そしてフィードバックを得てアップデートを繰り返しながら、

ブランドとUXを強くしていく。
67
68
69
Message
-まとめとエール-
「ゼロイチ」に正解はない。
存在しない「正解」より、

言い切れる「好き」を信じる。
考え抜いた先の直感は、結構正しい。
そのためには、

誰よりも考え抜いて、熱を高めて、

自分ごと化しないといけない。
でも、本当は、一番自分ごととして

その情熱を持っているのは、

当事者であるプロジェクトオーナー。
その情熱に自信を。
好きを信じて決める勇気を。
Thank you!

More Related Content

What's hot

Wit wdm01
Wit wdm01Wit wdm01
Wit wdm01
wit
 
0からのwebディレクション講座 製作・開発編4.0
0からのwebディレクション講座 製作・開発編4.00からのwebディレクション講座 製作・開発編4.0
0からのwebディレクション講座 製作・開発編4.0
Kazuki Iwai
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
 
0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1 0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1
Kazuki Iwai
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
 
女性向けキャリアセミナー/自己紹介
女性向けキャリアセミナー/自己紹介女性向けキャリアセミナー/自己紹介
女性向けキャリアセミナー/自己紹介
Members_corp
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
Tomoko Nishina
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
Yusuke Kojima
 
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
Silent it/feast/drapology
 
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
満徳 関
 

What's hot (10)

Wit wdm01
Wit wdm01Wit wdm01
Wit wdm01
 
0からのwebディレクション講座 製作・開発編4.0
0からのwebディレクション講座 製作・開発編4.00からのwebディレクション講座 製作・開発編4.0
0からのwebディレクション講座 製作・開発編4.0
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
 
0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1 0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
女性向けキャリアセミナー/自己紹介
女性向けキャリアセミナー/自己紹介女性向けキャリアセミナー/自己紹介
女性向けキャリアセミナー/自己紹介
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
 
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
企業経営におけるビジネスとデザイン日本マーケティング融合のための方法論の追求
 
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
[ITビジネスセミナー] 現役プロダクトマネージャーが語る、日本企業におけるプロダクトマネージャーの課題と今後の展望 #postudy
 

Similar to ゼロから構築するUXのプロセスと方法論

Xデザイン学校で楽しむ大人の学び(2017年 ver)
Xデザイン学校で楽しむ大人の学び(2017年 ver)Xデザイン学校で楽しむ大人の学び(2017年 ver)
Xデザイン学校で楽しむ大人の学び(2017年 ver)
Hitomi Yamagishi
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki
 
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのかワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
Hitomi Yamagishi
 
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.010からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01Yusuke Kojima
 
【SDNJ】Ligtning talk on sdnj meetup#4
【SDNJ】Ligtning talk on sdnj meetup#4【SDNJ】Ligtning talk on sdnj meetup#4
【SDNJ】Ligtning talk on sdnj meetup#4
Yuichi Inobori
 
0からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.00からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.0
Kazuki Iwai
 
TECH_SALON プロダクト開発部 8/3
TECH_SALON プロダクト開発部 8/3TECH_SALON プロダクト開発部 8/3
TECH_SALON プロダクト開発部 8/3
TECH SALON
 
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
Chiharu Kodama
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
 
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
 
Filament sumi 001
Filament sumi 001Filament sumi 001
Filament sumi 001
Filament Inc
 
意味をデザインするを考える
意味をデザインするを考える意味をデザインするを考える
意味をデザインするを考える
Aya Tokuda
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
 
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
Takashi Fujimoto
 
広研塾(西田)
広研塾(西田)広研塾(西田)
広研塾(西田)Naoki Matsuda
 
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
耀 辻井
 
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
Yasunori Kihara
 
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
chachaki chachaki
 

Similar to ゼロから構築するUXのプロセスと方法論 (20)

Xデザイン学校で楽しむ大人の学び(2017年 ver)
Xデザイン学校で楽しむ大人の学び(2017年 ver)Xデザイン学校で楽しむ大人の学び(2017年 ver)
Xデザイン学校で楽しむ大人の学び(2017年 ver)
 
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
 
ワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのかワークショップとUX ――なぜ今ワークショップが重要なのか
ワークショップとUX ――なぜ今ワークショップが重要なのか
 
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.010からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
 
【SDNJ】Ligtning talk on sdnj meetup#4
【SDNJ】Ligtning talk on sdnj meetup#4【SDNJ】Ligtning talk on sdnj meetup#4
【SDNJ】Ligtning talk on sdnj meetup#4
 
0からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.00からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.0
 
TECH_SALON プロダクト開発部 8/3
TECH_SALON プロダクト開発部 8/3TECH_SALON プロダクト開発部 8/3
TECH_SALON プロダクト開発部 8/3
 
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
時代の変化と私にとってのデザイン ― UI Crunch for YOUTH U25 2016
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
 
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
 
Filament sumi 001
Filament sumi 001Filament sumi 001
Filament sumi 001
 
意味をデザインするを考える
意味をデザインするを考える意味をデザインするを考える
意味をデザインするを考える
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
【横浜型リビングラボ】子育てママ☆リビングラボの事例紹介
 
広研塾(西田)
広研塾(西田)広研塾(西田)
広研塾(西田)
 
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
外部パートナーと二人三脚で実現した、デザイン組織の立ち上げ.pdf
 
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
DevRel Meetup #48 〜DevRelと転職_採用〜 「コミュニティ参加がキャリア形成に与える影響」 20191204
 
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
2020年01月24-25日 「仮説検証型UXデザイン特論」 講義資料 @産技大講義
 

ゼロから構築するUXのプロセスと方法論