UX Designer ♡ Engineer

UX Designer ♥ Engineer Kyohei Morimoto @basara669 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

About Me • これまで：営業だったりWebディレクター だったり • 現在：フロントエンドエンジニア • 仕事内容：HTMLやCSS、JavaScriptでの実装 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

ガチのエンジニア じゃないです Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

わかりやすくするために ちょっと極端に話します。 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

Agenda • 一人のフロントエンドエンジニアから見て • UX Team Of Oneからの脱却 • フロントエンドエンジニアとUXデザイナー Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

#1 一人のフロントエンド エンジニアから見て Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

エンジニアとのミスが起こる代 表なところ • UXデザイナー≠UIデザイナー • UIデザイン≠プロトタイピング Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UXデザイナー ≠ UIデザイナー • UXデザイナーは、ユーザーの期待する価値を提供する人 • • 価値が創出出来ない場合はUXデザイナーとしてNG UIデザイナーは、優れたインターフェースを作る人 • UXデザイナーの価値に辿りつけない様なUIを作ったら NG Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

プロジェクトによっては 混同してしまう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UXデザイナー ≠ UIデザイナー • 他の人から見るとどちらも同じデザイナーに見 えてしまう • 細かいUIを聞いてしまう （大抵の場合UXデザイナーは話しやすいｗ） • UIに埋没してUXに集中できない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

自分の役割や出来る事を ちゃんと伝える Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

プロトタイピング ≠ UIデザイン • プロトタイピングは価値を検証するためのもの • UIデザインは情報整理に近い Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

プロトタイピング ≠ UIデザイン • アウトプットが似ている場合もあるので、混同されな いようにちゃんと説明する必要性がある • UIデザインも出来るものと思って、UX以外の仕事も頼 んでしまう • 細かいUIデザインをやりながら、UXデザインは不可能 • UXとしての成果が出しにくい状況になってしまう Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

自分の役割や出来る事を ちゃんと伝える Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UXデザイナーに期待してること • 最強のカード「ユーザー」を持ってステークホ ルダーを倒すこと • • 機能を増やさないこと ユーザーの存在やニーズ、サービスの価値を 把握し、それを伝えてくれること Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

#2 UX Team of One からの脱却 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UXデザイナーに期待してること • 最強のカード「ユーザー」を持ってステークホ ルダーを倒すこと • • 機能を増やさないこと ユーザーの存在やニーズ、サービスの価値を 把握し、それを伝えてくれること Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

実際の評価 • 「何をしてるかわからない」 • 「いちいちうるさい」 • 「付箋貼ってる人」 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

伝える努力をする Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

資料は必須ではないが… • 模造紙と付箋じゃ伝わらない • 資料にすると後で残る • 開発中に参照できる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

専門用語使いすぎないで欲しい • • 「かすたまーじゃーにーまっぷ」とか言われ ても分かりません • 何のためのものかわからない • どう使って良いかわからない エンジニアだって関数を突然言わない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

未来や長期的な視点を見せる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

未来や長期的な視点を見せる • エンジニアもユーザーと一緒で短絡的な価値しか見えなかったりす る • 長期的な視点での価値をしっかり伝える • エンジニアも基本的なUIやUXは何となくわかる • • 「アラートは警告の色だから赤です」（ドヤァ）とかいらない 改善にとどまらない未来を見せて欲しい • そのプロジェクトの本来の目的、成功のイメージ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

最初で頑張り過ぎない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様作成 デザイン 開発 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様作成 デザイン 開発 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様作成 デザイン 開発 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様作成 デザイン 開発 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様作成 デザイン 開発 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

最初で頑張り過ぎない • やたら最初の頃元気が良くて、後から見なくな る人がいるｗ • 今作っているものが本当に正しいのか、常にチー ムに問うのが役目 • 後からだって、ステークホルダーは押し込んで くる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

#3 UXデザイナー × フロントエンドエンジニア Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

開発工程にも関わる • 仕様が追加・変更される時にちゃんと価値がある変更や追加なのかを検証 してほしい • • 仕様通り作れ無さそうとか良くある • • 無駄な仕様変更は、ユーザーだけでなく作る方もうれしい どうすれば今のリソースで同じ価値が提供出来るかのアドバイス欲しい 作っているものが触れるようになったら、ドンドンFBする • 触れられるように基本的なことは準備しておく Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

一緒にプロトタイピングする • 精度の高いプロトタイピングは技術力が必要だっ たりする • 何気にprottとかpixateとか難しい… • 技術的な要素をチームメンバーとして補ってもらう • リソースくれれば、JSでプロトタイピングとか やったるわ！ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

一緒にプロトタイピングする • どういうことに注意して作って欲しいかが、 かなり直接的に伝えることが出来る • 両者の知識や技術の壁を乗り越えることが出 来る • UXデザイナーの苦労が伝わる Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

まとめ Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

まとめ • UXデザイナーとして行動する • ユーザーにだけ目を向けずチームとちゃんと 向き合う • 「巻き込む」から「納得して行動してもらう」 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

UXデザイナーは苦難の道 • UXデザイナーは決してオシャレではない • 作業はかなり地味 • 調整ばかりだったり、気を使ってばっかり • 成果が見えるまでが長い • 履歴書にも書いても伝わらない Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

Thank you! Kyohei Morimoto @basara669 Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止