SlideShare a Scribd company logo
1 of 41
Download to read offline
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
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デザイナーは話しやすいw)
• 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. 無断引用・転載禁止
最初で頑張り過ぎない
• やたら最初の頃元気が良くて、後から見なくな
る人がいるw
• 今作っているものが本当に正しいのか、常にチー
ムに問うのが役目
• 後からだって、ステークホルダーは押し込んで
くる
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

More Related Content

What's hot

BPStudy#97 世界に価値を創り出すエンジニアの技術
BPStudy#97 世界に価値を創り出すエンジニアの技術BPStudy#97 世界に価値を創り出すエンジニアの技術
BPStudy#97 世界に価値を創り出すエンジニアの技術Haruo Sato
 
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfuture
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfutureIT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfuture
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfutureYahoo!デベロッパーネットワーク
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作祐磨 堀
 
価値探索 -仮説検証の実践-
価値探索 -仮説検証の実践-価値探索 -仮説検証の実践-
価値探索 -仮説検証の実践-toshihiro ichitani
 
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのかヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのかYahoo!デベロッパーネットワーク
 
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~Mayuko Sekiya
 
20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西chachaki chachaki
 
あの日見たサービスの名前を僕達はまだ知らない
あの日見たサービスの名前を僕達はまだ知らないあの日見たサービスの名前を僕達はまだ知らない
あの日見たサービスの名前を僕達はまだ知らないtoshihiro ichitani
 
20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台chachaki chachaki
 
UMTPアジャイル開発における モデリング活用実践セミナー
UMTPアジャイル開発におけるモデリング活用実践セミナーUMTPアジャイル開発におけるモデリング活用実践セミナー
UMTPアジャイル開発における モデリング活用実践セミナーIwao Harada
 
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)Kazumichi (Mario) Sakata
 
止めるサービス開発、止めないサービス開発
止めるサービス開発、止めないサービス開発止めるサービス開発、止めないサービス開発
止めるサービス開発、止めないサービス開発toshihiro ichitani
 
【15-B-1】AmazonのDevOpsを支えるAWSクラウド
【15-B-1】AmazonのDevOpsを支えるAWSクラウド【15-B-1】AmazonのDevOpsを支えるAWSクラウド
【15-B-1】AmazonのDevOpsを支えるAWSクラウドYasuhiro Horiuchi
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年Hayashi Yuichi
 
PyCon JP 2015 keynote
PyCon JP 2015 keynotePyCon JP 2015 keynote
PyCon JP 2015 keynoteHaruo Sato
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築Hayashi Yuichi
 
今後求められるプロトタイピングスキル
今後求められるプロトタイピングスキル今後求められるプロトタイピングスキル
今後求められるプロトタイピングスキルkbysykhr
 
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudy
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudyはじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudy
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudyShinichi Nakagawa
 

What's hot (20)

BPStudy#97 世界に価値を創り出すエンジニアの技術
BPStudy#97 世界に価値を創り出すエンジニアの技術BPStudy#97 世界に価値を創り出すエンジニアの技術
BPStudy#97 世界に価値を創り出すエンジニアの技術
 
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfuture
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfutureIT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfuture
IT業界のリーディングカンパニーとして描く「少し先の未来」〜Yahoo! JAPANの事例を通して〜#a11yfuture
 
Emotional development
Emotional developmentEmotional development
Emotional development
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
 
価値探索 -仮説検証の実践-
価値探索 -仮説検証の実践-価値探索 -仮説検証の実践-
価値探索 -仮説検証の実践-
 
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのかヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのか
ヤフー株式会社はアクセシビリティ対応を
なぜ始めたのか、どう進めているのか
 
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
クライアントの要望にこたえるWebサービス開発 ~「らせん型ワークフロー」のススメ~
 
20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西
 
あの日見たサービスの名前を僕達はまだ知らない
あの日見たサービスの名前を僕達はまだ知らないあの日見たサービスの名前を僕達はまだ知らない
あの日見たサービスの名前を僕達はまだ知らない
 
20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台
 
UMTPアジャイル開発における モデリング活用実践セミナー
UMTPアジャイル開発におけるモデリング活用実践セミナーUMTPアジャイル開発におけるモデリング活用実践セミナー
UMTPアジャイル開発における モデリング活用実践セミナー
 
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)
Agile UX NYC 2012 Redux in Tokyo (#AgileUXNYC_ja)
 
止めるサービス開発、止めないサービス開発
止めるサービス開発、止めないサービス開発止めるサービス開発、止めないサービス開発
止めるサービス開発、止めないサービス開発
 
リーンキャンバス
リーンキャンバスリーンキャンバス
リーンキャンバス
 
【15-B-1】AmazonのDevOpsを支えるAWSクラウド
【15-B-1】AmazonのDevOpsを支えるAWSクラウド【15-B-1】AmazonのDevOpsを支えるAWSクラウド
【15-B-1】AmazonのDevOpsを支えるAWSクラウド
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年
 
PyCon JP 2015 keynote
PyCon JP 2015 keynotePyCon JP 2015 keynote
PyCon JP 2015 keynote
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
 
今後求められるプロトタイピングスキル
今後求められるプロトタイピングスキル今後求められるプロトタイピングスキル
今後求められるプロトタイピングスキル
 
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudy
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudyはじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudy
はじめてのLean Canvas〜最初のアイディアを言語化してみよう #bpstudy
 

Similar to ux_team_of_one

リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03Yahoo!デベロッパーネットワーク
 
近年若者のサーバー離れが深刻化しています
近年若者のサーバー離れが深刻化しています近年若者のサーバー離れが深刻化しています
近年若者のサーバー離れが深刻化していますf-shingo
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)Toru Yamaguchi
 
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPANパーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPANYahoo!デベロッパーネットワーク
 
マンガ駆動開発 第3版
マンガ駆動開発 第3版マンガ駆動開発 第3版
マンガ駆動開発 第3版Koji Hara
 
マンガ駆動開発のすゝめ
マンガ駆動開発のすゝめマンガ駆動開発のすゝめ
マンガ駆動開発のすゝめKazuhide Okamura
 
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)三島teNet第9回ワークショップ アジャイルな開発とは(公開版)
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)Yasui Tsutomu
 
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディングオタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング虎の穴 開発室
 
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」Hiroyuki Ohnaka
 
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3虎の穴 開発室
 
失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法VirtualTech Japan Inc.
 
マンガ駆動開発 第2版
マンガ駆動開発 第2版マンガ駆動開発 第2版
マンガ駆動開発 第2版Koji Hara
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Yossy Taka
 
マンガ駆動開発
マンガ駆動開発マンガ駆動開発
マンガ駆動開発Koji Hara
 
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。GuildWorks
 
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。toshihiro ichitani
 
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場Shota Suzuki
 
人と向き合うプロトタイピング
人と向き合うプロトタイピング人と向き合うプロトタイピング
人と向き合うプロトタイピングwariemon
 

Similar to ux_team_of_one (20)

リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
 
近年若者のサーバー離れが深刻化しています
近年若者のサーバー離れが深刻化しています近年若者のサーバー離れが深刻化しています
近年若者のサーバー離れが深刻化しています
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)
 
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPANパーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
 
マンガ駆動開発 第3版
マンガ駆動開発 第3版マンガ駆動開発 第3版
マンガ駆動開発 第3版
 
マンガ駆動開発のすゝめ
マンガ駆動開発のすゝめマンガ駆動開発のすゝめ
マンガ駆動開発のすゝめ
 
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)三島teNet第9回ワークショップ アジャイルな開発とは(公開版)
三島teNet第9回ワークショップ アジャイルな開発とは(公開版)
 
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディングオタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング
オタクエンジニアを熱くさせる!モチベーションをあげるチームビルディング
 
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」
2015/10/14 JJUGナイトセミナー「テスト駆動開発ここが聞きたい」
 
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
オタクエンジニアを熱くさせる!モチベーションと効率をあげるチームビルディング_20210611_TechDay#1_3
 
ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3
 
失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法
 
マンガ駆動開発 第2版
マンガ駆動開発 第2版マンガ駆動開発 第2版
マンガ駆動開発 第2版
 
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
 
マンガ駆動開発
マンガ駆動開発マンガ駆動開発
マンガ駆動開発
 
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。
 
拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。拝啓、プロダクトオーナー様。
拝啓、プロダクトオーナー様。
 
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
 
人と向き合うプロトタイピング
人と向き合うプロトタイピング人と向き合うプロトタイピング
人と向き合うプロトタイピング
 
ヤフートップページでの機械学習#yjdsw1
ヤフートップページでの機械学習#yjdsw1ヤフートップページでの機械学習#yjdsw1
ヤフートップページでの機械学習#yjdsw1
 

More from Yahoo!デベロッパーネットワーク

ヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるかヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるかYahoo!デベロッパーネットワーク
 
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2Yahoo!デベロッパーネットワーク
 
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtcヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtcYahoo!デベロッパーネットワーク
 
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo!デベロッパーネットワーク
 
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtcヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtcYahoo!デベロッパーネットワーク
 
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtcYahoo!デベロッパーネットワーク
 
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtcPC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtcYahoo!デベロッパーネットワーク
 
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtcモブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtcYahoo!デベロッパーネットワーク
 
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcYahoo!デベロッパーネットワーク
 

More from Yahoo!デベロッパーネットワーク (20)

ゼロから始める転移学習
ゼロから始める転移学習ゼロから始める転移学習
ゼロから始める転移学習
 
継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator
 
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるかヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
 
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッションオンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
 
LakeTahoe
LakeTahoeLakeTahoe
LakeTahoe
 
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
 
Persistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability FeaturePersistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability Feature
 
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
 
eコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtceコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtc
 
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtcヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
 
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
 
ビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtcビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtc
 
サイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtcサイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtc
 
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtcヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
 
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtcYahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
 
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
 
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtcPC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
 
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtcモブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
 
「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc
 
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
 

ux_team_of_one

  • 1. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UX Designer ♥ Engineer Kyohei Morimoto @basara669
  • 2. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 About Me • これまで:営業だったりWebディレクター だったり • 現在:フロントエンドエンジニア • 仕事内容:HTMLやCSS、JavaScriptでの実装
  • 3. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ガチのエンジニア じゃないです
  • 4. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 わかりやすくするために ちょっと極端に話します。
  • 5. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Agenda • 一人のフロントエンドエンジニアから見て • UX Team Of Oneからの脱却 • フロントエンドエンジニアとUXデザイナー
  • 6. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 #1 一人のフロントエンド
 エンジニアから見て
  • 7. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 エンジニアとのミスが起こる代 表なところ • UXデザイナー≠UIデザイナー • UIデザイン≠プロトタイピング
  • 8. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UXデザイナー ≠ UIデザイナー • UXデザイナーは、ユーザーの期待する価値を提供する人 • 価値が創出出来ない場合はUXデザイナーとしてNG • UIデザイナーは、優れたインターフェースを作る人 • UXデザイナーの価値に りつけない様なUIを作ったら NG
  • 9. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 プロジェクトによっては 混同してしまう
  • 10. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UXデザイナー ≠ UIデザイナー • 他の人から見るとどちらも同じデザイナーに見 えてしまう • 細かいUIを聞いてしまう
 (大抵の場合UXデザイナーは話しやすいw) • UIに埋没してUXに集中できない
  • 11. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 自分の役割や出来る事を ちゃんと伝える
  • 12. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 プロトタイピング ≠ UIデザイン • プロトタイピングは価値を検証するためのもの • UIデザインは情報整理に近い
  • 13.
  • 14.
  • 15. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 プロトタイピング ≠ UIデザイン • アウトプットが似ている場合もあるので、混同されな いようにちゃんと説明する必要性がある • UIデザインも出来るものと思って、UX以外の仕事も頼 んでしまう • 細かいUIデザインをやりながら、UXデザインは不可能 • UXとしての成果が出しにくい状況になってしまう
  • 16. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 自分の役割や出来る事を ちゃんと伝える
  • 17. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UXデザイナーに期待してること • 最強のカード「ユーザー」を持ってステークホ ルダーを倒すこと • 機能を増やさないこと • ユーザーの存在やニーズ、サービスの価値を
 把握し、それを伝えてくれること
  • 18. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 #2 UX Team of One
 からの脱却
  • 19. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UXデザイナーに期待してること • 最強のカード「ユーザー」を持ってステークホ ルダーを倒すこと • 機能を増やさないこと • ユーザーの存在やニーズ、サービスの価値を
 把握し、それを伝えてくれること
  • 20. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 実際の評価 • 「何をしてるかわからない」 • 「いちいちうるさい」 • 「付箋貼ってる人」
  • 21. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 伝える努力をする
  • 22. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 資料は必須ではないが… • 模造紙と付箋じゃ伝わらない • 資料にすると後で残る • 開発中に参照できる
  • 23. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 専門用語使いすぎないで欲しい • 「かすたまーじゃーにーまっぷ」とか言われ ても分かりません • 何のためのものかわからない • どう使って良いかわからない • エンジニアだって関数を突然言わない
  • 24. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 未来や長期的な視点を見せる
  • 25. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 未来や長期的な視点を見せる • エンジニアもユーザーと一緒で短絡的な価値しか見えなかったりす る • 長期的な視点での価値をしっかり伝える • エンジニアも基本的なUIやUXは何となくわかる • 「アラートは警告の色だから赤です」(ドヤァ)とかいらない • 改善にとどまらない未来を見せて欲しい • そのプロジェクトの本来の目的、成功のイメージ
  • 26. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 最初で頑張り過ぎない
  • 27. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 仕様作成 デザイン 開発
  • 28. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 仕様作成 デザイン 開発
  • 29. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 仕様作成 デザイン 開発
  • 30. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 仕様作成 デザイン 開発
  • 31. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 仕様作成 デザイン 開発
  • 32. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 最初で頑張り過ぎない • やたら最初の頃元気が良くて、後から見なくな る人がいるw • 今作っているものが本当に正しいのか、常にチー ムに問うのが役目 • 後からだって、ステークホルダーは押し込んで くる
  • 33. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 #3 UXデザイナー 
 × フロントエンドエンジニア
  • 34. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 開発工程にも関わる • 仕様が追加・変更される時にちゃんと価値がある変更や追加なのかを検証 してほしい • 無駄な仕様変更は、ユーザーだけでなく作る方もうれしい • 仕様通り作れ無さそうとか良くある • どうすれば今のリソースで同じ価値が提供出来るかのアドバイス欲しい • 作っているものが触れるようになったら、ドンドンFBする • 触れられるように基本的なことは準備しておく
  • 35. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 一緒にプロトタイピングする • 精度の高いプロトタイピングは技術力が必要だっ たりする • 何気にprottとかpixateとか難しい… • 技術的な要素をチームメンバーとして補ってもらう • リソースくれれば、JSでプロトタイピングとか やったるわ!
  • 36. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 一緒にプロトタイピングする • どういうことに注意して作って欲しいかが、 かなり直接的に伝えることが出来る • 両者の知識や技術の壁を乗り越えることが出 来る • UXデザイナーの苦労が伝わる
  • 37. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 まとめ
  • 38. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 まとめ • UXデザイナーとして行動する • ユーザーにだけ目を向けずチームとちゃんと 向き合う • 「巻き込む」から「納得して行動してもらう」
  • 39. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UXデザイナーは苦難の道 • UXデザイナーは決してオシャレではない • 作業はかなり地味 • 調整ばかりだったり、気を使ってばっかり • 成果が見えるまでが長い • 履歴書にも書いても伝わらない
  • 40.
  • 41. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Thank you! Kyohei Morimoto @basara669