2013/06/26(水) に開催した スタートアップのデザイナー4人が語る、新しい価値を生み出すデザインプロセス http://eventregist.com/e/SoDjxLSoKmRO の登壇用スライドです。 スクーのウェブサイトを一例に、学生の「感情」を根拠としたデザインプロセスをひも解いていきます。 http://schoo.jp/

1. 2013.6.26(⽔水)
mixi本社 7F コラボルーム
スタートアップのデザイナー4⼈人が語る
新しい価値を⽣生み出すデザインプロセス

2. ⾃自⼰己紹介
経歴
2009年年 ヤフー株式会社⼊入社
Yahoo!トラベルのビジュアル制作
Yahoo!ボックスのビジュアル/コーディング
Yahoo!メールのUI設計/ビジュアル/コーディングなど
2012年年7⽉月 株式会社schoo⼊入社
上⽻羽 智⽂文（うえばともふみ）
趣味：⾳音楽とお菓⼦子作り／特技：⼀一⼈人カラオケ
https://www.facebook.com/thomweba

3. スクーでの仕事内容
社 内 業 務 デ ザ イ ナ ー と し て
上流流 機能定義
コンセプト設計
ワイヤーフレーム
デザインカンプ
コーディング
JavaScript
JSテスト
下流流 MVC組み込み
・Illustrator
・Photoshop
・HTML/CSS/JS
・PHP（MVCのV+C）
主な仕事
・仕様設計
・デザイン部⾨門
・グロースハック
上流流 経営⽬目標
KGI設定
KPI策定
仕様設計
制作（デザイン）
開発
リリース・運⽤用
下流流 データ取得・解析
上流流 経営⽬目標
KGI設定
KPI策定
仕様設計
制作（デザイン）
開発
リリース・運⽤用
下流流 データ取得・解析
上流流 機能定義
コンセプト設計
ワイヤーフレーム
デザインカンプ
コーディング
JavaScript
JSテスト
下流流 MVC組み込み

4. schoo WEB-campusって？

5. WEBに誕⽣生した新しい学校のカタチ！
学校
授業
試験／レポート
友達／部活動／
修学旅⾏行行／サークル／
全国⼤大会／試合
放課後の教室／
運動場／プール／
学部／学科／研究発表
などなど…..

6. 本⽇日のお話
本日はこの「校舎」を作るにあたって、
どのようなデザインのプロセスを経たか。
去年実施したリニューアルを事例に、
（クイズを交えて）
その失敗談と成功談の一部をお話したいと思います。

7. 本校舎Β版へのリニューアル
Β 版
2 0 1 2 年年 4 ⽉月 時 点
本 校 舎 Β 版
2 0 1 2 年年 1 0 ⽉月 時 点
●トップページ
●授業のお知らせ
●授業放送ページ
：動画＋チャット
＋双⽅方向性

8. 従来のスクーのイメージ
授業
出席
学⽣生たち
先⽣生

9. みんなで作る学校のイメージ
授業
コ
ミ
ニ
ケ
ー
シ
ン
出席
先⽣生
学⽣生たち

10. Q

11. QUIZ
この時期に実装した
次の３つの機能の中で、
効果がなかったものはどれでしょうか？

12. 1.「みんなの声」
【機能説明】
授業前に学⽣生同⼠士がコミュニケー
ションをとれる掲⽰示板機能
【設置場所】
・各授業ページ

13. 2.「受けたいボタン」
【機能説明】
Facebookの「いいね」のような
機能
【設置場所】
・授業の⼀一覧ページ
・各授業ページ

14. 3.「現地表⽰示システム」
【機能説明】
授業中のチャットを、
現地会場に映しだすツール
【設置場所】
・社内ツール

15. QUIZ:確認
この時期に実装した
次の３つの機能の中で、
効果がなかったものはどれでしょうか？
1.「みんなの声」
2.「受けたいボタン」
3.「現地表示システム」

16. 正解発表
デザインは
ユーザーの行動で証明される
→実際の結果から見ていきましょう

17. 3.「現地表⽰示システム」は成功
回答
質問数の増加
先⽣生
学⽣生
・先⽣生への質問が圧倒的に増加
・学⽣生の満⾜足度度も向上
（毎授業後のアンケートより）

18. 2.「受けたいボタン」も成功
質の向上
注⽬目
先⽣生
学⽣生
・授業の質の向上
・学⽣生の満⾜足度度も向上
（楽屋裏裏、毎授業後のアンケートより）

19. 1.「みんなの声」
コ
ミ
ニ
ケ
ー
シ
ン
・
・
？
先⽣生
学⽣生
・投稿数が全く伸びなかった
1.「みんなの声」は失敗…

20. 正解発表
正解は
1
でした

21. なぜ「みんなの声」は不不発に？
• UIがよくないのでは？
• どんな内容を書き込めばいいのか伝
わっていないのでは？
• 授業を受けたいだけで、コメントする
ことなど求めていないのでは？
• 誘導が張られていないからでは？
などなど…

22. 微調整：サンプル⽂文⾔言を⼊入れてみる
⽅方向性を提⽰示！

23. 微調整：投稿する内容を縛ってみる
質問に特化した機能へ！

24. 施策の結果
全く変化なし

25. ⽴立立ち返って考える
「みんなで作る学校」を表現するため
「みんなの声」の目的
「他にも楽しみにしている学生がそこにいる」
という感情を持ってもらうため

26. ⽴立立ち返って考える
「みんなで作る学校」を表現するため
「みんなの声」の目的
「他にも楽しみにしている学生がそこにいる」
という感情を持ってもらうため
投稿の中⾝身よりも、
投稿を出してもらうこと
⾃自体が⼤大事！

27. 簡単になった問題
投稿を促すために必要なものとは？
＜UI改修の例例＞
• ページのファーストビューに持ってくる
• 投稿ボタンを⼤大きくする
• トップページでみんなの投稿を⾒見見えるようにする
• ⾊色を変えて、もっと⽬目⽴立立たせるようにする
• などなど….

28. 簡単になった問題
投稿を促すために必要なものとは？
＜UI改修の例例＞
• ページのファーストビューに持ってくる
• 投稿ボタンを⼤大きくする
• トップページでみんなの投稿を⾒見見えるようにする
• ⾊色を変えて、もっと⽬目⽴立立たせるようにする
• などなど….

29. 何を「デザインの根拠」とするか
デザインの最初の⼀一歩は、
何を作るかではなく、
何を根拠として作るか。
学⽣生の「感情」を根拠としてみました。
例例）
・データ
・セオリー
・ユーザー調査
・流流⾏行行

30. 最も投稿したい瞬間はいつだろう？
サイトを遷移してきた学生のモチベーションが一番高い瞬間。
つまりは「スクーの授業面白そう！」と思っている瞬間を狙えば、
何かしら投稿してくれそうです。
モチベーションの高さ
ココ！
サイトのページ遷移

31. 最も投稿したい瞬間はいつだろう？
サイトを遷移してきた学生のモチベーションが一番高い瞬間。
つまりは「スクーの授業面白そう！」と思っている瞬間を狙えば、
何かしら投稿してくれそうです。
モチベーションの高さ
サイトのページ遷移
=受けたいボタン
を押した瞬間

32. 2.「受けたいボタン」
【機能説明】
Facebookの「いいね」のような
機能
【設置場所】
・授業の⼀一覧ページ
・各授業ページ

33. くっつけました

34. 2.「受けたいボタン」＋「みんなの声」
ボタンを押したらテキストボックスを表⽰示

35. 結果

36. 投稿数が急増
機能リリース
多い時は
85件も！
投稿数
各授業

37. 授業への出席率率率も増加
出席率（実際の出席者数/受けたいボタン数）
機能リリース
受けたいボタン数
出席率率率
100%
200%
0%
例例）受けたいボタン＝200⼈人、実際の出席数＝100⼈人の場合、
出席率率率=50%
例例）飲み会に誘われたときの
「あの⼈人がいくなら私も⾏行行く」的な現象

38. 「みんなの声」が⽣生き返った
お
互
い
が
存
在
を
確
認
し
あ
う
先⽣生
学⽣生
形を変える事で
（デザインの⼒力力で）
達成できた

39. 【おまけ】これって、どこかで⾒見見たような？

40. FACEBOOKのいいねモジュールと⼀一緒！？
デザインの正解は
同じところにたどり着く？

41. そして次の機能へと…
授業のありかたを
変えた新機能！
次のヒット機能に活かせた
（本⽇日は時間により割愛）

42. http://schoo.jp/
全9職種採⽤用募集中です！
ご清聴ありがとうございました。