SlideShare a Scribd company logo
1 of 43
デザイナーが価値を
発揮するための取り組み
息のなが〜いB2Bサービスで、
樋田 勇也
9/27 UX Cafe B2BサービスのUXデザインを語ろう
樋田 勇也
UX / UI デザイナー
制作会社でWebデザイナー/コーダー/ディレクターを経験後、
2016年にサイボウズ入社。
現在はクラウドサービスkintoneの担当デザイナー。
社内でプロトタイピングしまくるプロトタイピングおじさん。
「チームワークあふれる社会を創る」
チームあるところサイボウズあり
サイボウズの主なプロダクト
ビジネスアプリ作成クラウド グループウェア
メール共有ツール
Go Global
San Francisco
Ho Chi Min
Shanghai
Tokyo
Osaka
Matsuyama
グローバル開発本部 約200名
デザイングループ 10名
デザイナー リサーチャー アクセシビリティPG
デザイングループのミッション
Planning &
Design
アイデアを素早く形にする
Accessibility &
Global
世界中のすべての人に
チームワークを届ける
ところで
サイボウズ、20周年です!
6年2011年リリース
14年2003年リリース
15年2002年リリース
20年1997年リリース
息の長いB2Bサービスでは...
デザイナーの成果がわかりにくい
結果が出るのに時間がかかる
結果の相関関係がわかりづらい
息の長いB2Bサービスでは...
顧客は変化を求めない
使い慣れたUIを変えるな!
小さな改善にフォーカスしがち
モチベーションが湧きにくい
上流が遠くなる
プロダクトマネージャー エンジニア デザイナー
画面
よろしく!
こういう機能つ
くろう
実装するよ
画面とか
つくるよ
要件定義 仕様検討
デザイングループって
アイコンとかボタンとか
作る部署でしょ?
みんなの認識
デザイングループって
アイコンとかボタンとか
作る部署でしょ?
みんなの認識
デザイナーの下請け化
「サービス全体のUX」を考えることが難しくなる
Planning & Design!
これからはプランニングにシフトしよう
柴田(デザイングループ マネージャー)
リサーチ
プランニング
プロトタイプ を強化しよう!
積極的に外にでてリサーチ
Research
サイトビジット
企業に訪問して実際のユーザ
ーがサービスを使っている様
子を見せてもらう。
ユーザーが本当に抱えている
課題は何か?を探る
ユーザビリティテスト /
ヒアリング
改善の結果を具体的に確認
○ステップ減った
○%が使ってくれた…など
定量データも集める。
0 → 1 をつくる
Planning
アイデア創造
ワークショップ
ワークショップを
デザイナー主導で開催。
これまで開発に関わらなか
った部署からもアイデアを集
める。
実際にアプリを(社内)リリース!
Icepick
アイスブレイクアプリ
チームでゲームをクリアしてアイ
スブレイクできるアプリ
デザイナー×モバイルエンジニアで
PMと一緒に
プランニング
新しいプロダクトのための
プランニング活動をプロダ
クトマネージャーと一緒に
やる。
絵が描けるのは便利。
アイデアをすぐに形に!
Prototype
実装前のプロトタイピング / デザインが中心
開発要件検討 実装開始 リリース調査・コンセプト段階
プロトタイピング デザイン
これまで
なんとなくやりたいことを
イメージしてるんだけど… このプロダクトのバリューは
なんだろう?
プロダクトマネージャーの悩み
さくっとプロトタイプ
作ってみたよ
ユーザーのストーリーを
Before/Afterで映像に
してみたよ。
デザイナーが色んなプロトで解消する
プロトタイピングの手段が増えた
開発要件検討 実装開始 リリース調査・コンセプト段階
■ 先行プロト
•未来のアイデアを検討するためのプロトタイプ。
■ デザインプロト
•実装前にデザインを検討するプロトタイプ。
先行プロト
プロトタイピング デザイン
先行プロト
得意技を活かす
• コーディングができる
• ファシリテーションできる
• イラストが得意
• 資格を持っている …etc
開発プロセス全体でデザイナーは
活躍できる
開発要件検討 実装開始 リリース調査・コンセプト段階
先行プロト
プロトタイピング デザイン
リサーチ活動
いい感じの画面やアイコンを作ること
Design
Design
Research Planning Prototype
まだまだこれから
どうやったらよりよいUXが実現できるか?
はまだまだこれから。
最終的に「サイボウズのデザインプロセス」が
出来上がるのが目標。
デザイナーが下請け化してませんか?
まとめ
デザイナーが下請け化してませんか?
まとめ
開発プロセス全体でデザイナーは活躍できます。
サービス全体のUXを探求しましょう。
デザイナーが下請け化してませんか?
一緒にやってくれる人は「サイボウズ デザイングループ」で検索!
開発プロセス全体でデザイナーは活躍できます。
サービス全体のUXを探求しましょう。
まとめ

More Related Content

What's hot

デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザインMasayuki Uetani
 
BtoB新規事業を舵取りするためのユーザー調査
BtoB新規事業を舵取りするためのユーザー調査BtoB新規事業を舵取りするためのユーザー調査
BtoB新規事業を舵取りするためのユーザー調査英明 伊藤
 
エクスペリエンス・デザイン
エクスペリエンス・デザインエクスペリエンス・デザイン
エクスペリエンス・デザインSaori Baba
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方hidetoshi murohashi
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司schoowebcampus
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストMiwa Kuramitsu
 
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Keisuke Tsukayoshi
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターtake-it
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランSasaki Kouhei
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】schoowebcampus
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケAsami Yamamoto
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることMasahiko Yoshikawa
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-Satoru MURAKOSHI
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00Yusuke Kojima
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれAkiko Kurono
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割Kenichi Suzuki
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりtomoakitomono
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
 

What's hot (20)

デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
BtoB新規事業を舵取りするためのユーザー調査
BtoB新規事業を舵取りするためのユーザー調査BtoB新規事業を舵取りするためのユーザー調査
BtoB新規事業を舵取りするためのユーザー調査
 
エクスペリエンス・デザイン
エクスペリエンス・デザインエクスペリエンス・デザイン
エクスペリエンス・デザイン
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
 
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 

Similar to 息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み

意味をデザインするを考える
意味をデザインするを考える意味をデザインするを考える
意味をデザインするを考えるAya Tokuda
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Mari Kimura
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクションLINE Corporation
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
 
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8Koji Aihara
 
エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介Rie Tokumi
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験Daichi Aoki
 
新規サービス立ち上げ時のUX設計
新規サービス立ち上げ時のUX設計新規サービス立ち上げ時のUX設計
新規サービス立ち上げ時のUX設計Naomi Hirota
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインSaori Baba
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
 
20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terailoftwork
 
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)Kazumichi (Mario) Sakata
 
[Presentation]hc dsaloninkyoto2016
[Presentation]hc dsaloninkyoto2016[Presentation]hc dsaloninkyoto2016
[Presentation]hc dsaloninkyoto2016Yuichi Inobori
 
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830Toshiki Kunimitsu
 
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナーMikihiro Fujii
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 

Similar to 息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み (20)

意味をデザインするを考える
意味をデザインするを考える意味をデザインするを考える
意味をデザインするを考える
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
立ち上げ期のSaaSで大事にしている「UX」- UX Bridge vol.8
 
エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介
 
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
 
新規サービス立ち上げ時のUX設計
新規サービス立ち上げ時のUX設計新規サービス立ち上げ時のUX設計
新規サービス立ち上げ時のUX設計
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
 
事業とUXデザイン
事業とUXデザイン事業とUXデザイン
事業とUXデザイン
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai
 
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
 
[Presentation]hc dsaloninkyoto2016
[Presentation]hc dsaloninkyoto2016[Presentation]hc dsaloninkyoto2016
[Presentation]hc dsaloninkyoto2016
 
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
 
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
 
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
 
Kwc uxjam160831
Kwc uxjam160831Kwc uxjam160831
Kwc uxjam160831
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 

息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み