UZABASE創業期から10年いるエンジニアから見た「BtoB SaaSのUI/UXってなんだろう？」

Slide 1

Slide 1 text

UZABASE 創業期から10 年いるエンジニアから見た「BtoB SaaS のUI/UX って何だろう？」たけうちひでゆき @chimerast @chimerast 1

Slide 2

Slide 2 text

自己紹介たけうちひでゆき @chimerast 株式会社ユーザベース社内ニートチーフテクノロジスト全方位型エンジニア物理レイヤーからフロントエンドまで全職種の人と大体話を合わせられる @chimerast 2

Slide 3

Slide 3 text

だいたい金から逆算して考える人間 @chimerast 3

Slide 4

Slide 4 text

一応会社紹介株式会社ユーザベース ( 東証3966) ユーザベースは、「経済情報で、世界を変える」ことをミッションに掲げ、2008 年に設立しました。「世界中のビジネス情報をテクノロジーと専門家の力で整理し、ビジネスパーソンの生産性を高め、創造性を解放する事で世界に変革を起こしたい」という志をもって、企業・業界情報プラットフォーム「SPEEDA 」と、ソーシャル経済メディア「NewsPicks 」、日本最大級のスタートアップデータベース「entrepedia 」、B2B マーケティングプラットフォーム「FORCAS 」などを開発・運営しています。 @chimerast 4

Slide 5

Slide 5 text

UZABASE でのお仕事遍歴その1 過去 CTO 的ななにかとしてプロダクト立ち上げ担当 SPEEDA をゼロから作る NewsPicks をゼロから作る FORCAS をゼロから作る @chimerast 5

Slide 6

Slide 6 text

UZABASE でのお仕事遍歴その2 現在 CIO 的ななにかとしてプロダクトや会社の整理整頓後始末社内のIT による業務改善内部統制・セキュリティ関連ベンチャーキャピタリスト UB Ventures @chimerast 6

Slide 7

Slide 7 text

エンジニア / UI(?) / UX(?) 遍歴小学校1 年生の時に親にPC-8801 を与えられN88-BASIC で遊ぶ高校1 年生の頃(90 年代後半) 、DTP に目覚め学校のお金を使って運動会・文化祭のパンフレットを作り同高校として初めてデジタル入稿して業者を困らせる組版の話とか分かる高校2 年生の頃、本格的にプログラムを作る事に目覚める修士1 年生の頃、受託開発会社を起業してBtoB 、BtoC 、IoT 等々多数のプロダクトをゼロから作る仕事をする修士4 年生の時にUZABASE 創業期に参画 @chimerast 7

Slide 8

Slide 8 text

いわゆるパソコン大好き少年でした @chimerast 8

Slide 9

Slide 9 text

今日のお話 1. BtoB SaaS におけるUI/UX って何だろう？ 2. 社員も知らないUZABASE UI/UX 以前裏話 @chimerast 9

Slide 10

Slide 10 text

第一部 BtoB SaaS における究極の UI/UX ってなんだろう？副題: UI/UX 以前のお話し ( 広義でのUX) @chimerast 10

Slide 11

Slide 11 text

BtoB SaaS において顧客は何に対してお金を払ってるか？ @chimerast 11

Slide 12

Slide 12 text

便利な機能？使いやすいインターフェース？かっこいいインターフェース？ @chimerast 12

Slide 13

Slide 13 text

便利な機能？使いやすいインターフェース？かっこいいインターフェース？ @chimerast 13

Slide 14

Slide 14 text

時間を買っている情報・知見を買っている @chimerast 14

Slide 15

Slide 15 text

UZABASE のプロダクトにおける例 @chimerast 15

Slide 16

Slide 16 text

企業・業界情報プラットフォーム「SPEEDA 」 SPEEDA は、ビジネスパーソンの情報収集・分析における課題を解決する最先端のプラットフォームです。世界中の企業情報、業界レポート、市場データ、ニュース、統計、M&A などあらゆるビジネス情報をカバーしています。 @chimerast 16

Slide 17

Slide 17 text

@chimerast 17

Slide 18

Slide 18 text

@chimerast 18

Slide 19

Slide 19 text

@chimerast 19

Slide 20

Slide 20 text

@chimerast 20

Slide 21

Slide 21 text

@chimerast 21

Slide 22

Slide 22 text

創業者梅田・新野のお言葉高い給料をもらってる投資銀行の新人達がただ情報を集めてExcel/PowerPoint 作ってるのほんとお金と時間の無駄だと思うんだよねー @chimerast 22

Slide 23

Slide 23 text

@chimerast 23

Slide 24

Slide 24 text

ソーシャル経済メディア「NewsPicks 」 NewsPicks は、経済ニュースを業界人や専門家のコメントとあわせて読むことができるサービスです。国内外100 メディアのニュースのほか、 NewsPicks 編集部が作成するオリジナル記事も配信しています。 @chimerast 24

Slide 25

Slide 25 text

@chimerast 25

Slide 26

Slide 26 text

@chimerast 26

Slide 27

Slide 27 text

@chimerast 27

Slide 28

Slide 28 text

創業者梅田のお言葉なんかもっと気軽に専門家のダイレクトな意見が聞きたいなーそんな場所を作りたいんだよねー @chimerast 28

Slide 29

Slide 29 text

@chimerast 29

Slide 30

Slide 30 text

BtoB SaaS における究極のUX を考えてみる @chimerast 30

Slide 31

Slide 31 text

ボタンを押したら仕事が全て終わっている @chimerast 31

Slide 32

Slide 32 text

簡単にはとれない情報がそこにある @chimerast 32

Slide 33

Slide 33 text

@chimerast 33

Slide 34

Slide 34 text

@chimerast 34

Slide 35

Slide 35 text

1. ボタンを押したら仕事が全て終わっている 2. 簡単にはとれない情報がそこにあるこの二つのどちらかが満たされていれば顧客はお金を払ってくれる @chimerast 35

Slide 36

Slide 36 text

BtoB SaaS ではUI/UX を考える時にこの二つの条件はすごく大事 @chimerast 36

Slide 37

Slide 37 text

第二部 UZABASE 社員も知らない UZABASE UI/UX 以前の裏話的事例 @chimerast 37

Slide 38

Slide 38 text

事例１ SPEEDA には非常に長い間デザイナーはいなかった @chimerast 38

Slide 39

Slide 39 text

SPEEDA にデザイナーはいなかった 2008 年創業以来2015 年2 月まで SPEEDA にはデザイナーはいなかったエンジニアやプロダクト企画がお気持ちでデザインをやっていた注意一応、自己紹介でも書いたとおり、僕は組版の話とかわかるレベル別のエンジニアもデザインルールの勉強はしていた @chimerast 39

Slide 40

Slide 40 text

ここで得た知見（？？？）条件を満たしていれば、プロフェッショナル向けBtoB SaaS は多少UI がアレでも売れる SPEEDA は、1 アカウントを十数万円/ 月で昔からほぼ同じ価格値引き無しで絶賛販売中 @chimerast 40

Slide 41

Slide 41 text

待望のデザイナ採用とはいえ、プロフェッショナル以外に対しては、わかりやすいUI/UX が必要 2015 年2 月にUX Bridge vol.1 に登壇した広田が入社してくれてSPEEDA が綺麗になったプロではない事業会社向けに拡販のタイミング @chimerast 41

Slide 42

Slide 42 text

プロフェッショナル向けとそれ以外は求められるUI/UX が違うプロフェッショナル以外はシンプルなUI が必要それこそボタンを押したら答えが返ってくるプロフェッショナルは、複雑な使い方をしたいので様々な項目が必要 @chimerast 42

Slide 43

Slide 43 text

@chimerast 43

Slide 44

Slide 44 text

@chimerast 44

Slide 45

Slide 45 text

事例２ NewsPicks は足で営業して初期コアユーザ獲得をしていた @chimerast 45

Slide 46

Slide 46 text

NewsPicks は足で営業していた初期プロダクトは実はiPad 版しかなかった梅田の考えた初期ペルソナが朝食を食べながら優雅にソファーで新聞を読む層梅田はiPad を担いで業界著名人に使ってPick してくれとお願いしに行っていた人によってはiPad そのものをプレゼントしてた @chimerast 46

Slide 47

Slide 47 text

でも実はとても重要なこと忙しい人はそれくらい熱意を持って営業しないと使ってくれない NewsPicks は業務で活躍している忙しい人にコメントをたくさんして欲しかったちなみにSPEEDA というプロダクトがあったから、その忙しい人たちに話に行けたという事実は、今の社員はほとんど知らない( と思う) 梅田も忘れてる @chimerast 47

Slide 48

Slide 48 text

ここで得た知見（？？？） UI/UX 改善だけに頼りすぎない UI/UX 以外も獲得や継続率を上げる方法は沢山あるコミュニティ形成は対面も非常に重要ちなみに初期iPhone 版NewsPicks もエンジニアが考えた奇抜なデザインだったでもそこでしかとれない情報があったのでコアユーザは使い続けてくれた @chimerast 48

Slide 49

Slide 49 text

事例３最終的なUX を上げるために一時的にUX を下げる @chimerast 49

Slide 50

Slide 50 text

NewsPicks 実名登録サービス開始から2 年半ほどたった、2016 年2 月、NewsPicks で自分のコメントを人に読んでもらうのに実名を登録確認する作業を追加当然UX に大きく影響を与えるのは認識していた様々な肯定的・否定的なご意見もいただいた @chimerast 50

Slide 51

Slide 51 text

それでもなぜ踏み切ったかビジネスの世界は誰が何を言っているのかが非常に重要な世界長い目でユーザの体験を考えると全員実名でコメントしてもらうことが良い結果になると判断した今の状態を見るに正しい決断だったと思う @chimerast 51

Slide 52

Slide 52 text

ここで得た知見（？？？）プロダクトが最終的にどういう世界を目指したいのかを考えることはとても重要その世界でしか得られない体験は何かを考える @chimerast 52

Slide 53

Slide 53 text

本質的に伝えたかったこと @chimerast 53

Slide 54

Slide 54 text

「あったら便利」ではなく「ないと困る」体験の設計を目指す @chimerast 54

Slide 55

Slide 55 text

「ないと困る」サービスはそれが必要なユーザは離脱しない @chimerast 55