noteが目指す創作をつづけるためのエモーショナルデザイン

Transcript

1. 1
   

   View Slide

2. note inc.
   2
   松下ゆき @yuki_doro
   note株式会社 デザイナー
   2014-2018 Yahoo! Japan
   2018.11- note
   

   View Slide

3. note inc.
   本日の内容
   noteにあげています！
   3
   

   View Slide

4. 4
   

   View Slide

5. どんなサービス？
   どんなイメージ？
   

   View Slide

6. 6
   デザイナーがよく記事書いてる…
   白くてシンプル…
   「クリエイティブ系」っぽい？…
   手軽に文章を発信するなら…
   

   View Slide

7. note inc.
   エモーショナルデザイン
   7
   

   View Slide

8. note inc.
   なぜ、エモーショナルデザイン？
   noteとエモーショナルデザイン
   8
   1
   2
   

   View Slide

9. note inc.
   なぜ、エモーショナルデザイン？
   9
   1
   

   View Slide

10. 10
    80%
    なぜ、エモーショナルデザイン？
    

    View Slide

11. 11
    80%
    DLされた後使われなくなるAPP
    なぜ、エモーショナルデザイン？
    

    View Slide

12. 12
    「使えるから使う」の時代は終わった。
    なぜならどのサービスも「使える」から
    

    View Slide

13. note inc.
    なぜ、エモーショナルデザイン？
    「使える」
    「使い続けたい」
    13
    プロダクトの魅力も必要になった
    

    View Slide

14. 誰のためのデザイン？
    「使いやすいデザイン」の重要さを
    説いた
    エモーショナル・デザイン
    使いやすさだけでなく「情動」のUX
    もプロダクトの魅力には必要
    14
    ノーマンにも変遷
    なぜ、エモーショナルデザイン？
    

    View Slide

15. note inc.
    なぜ、エモーショナルデザイン？
    エモーショナルデザイン
    15
    =トーンと使い心地を通しポジティブな感情をもたらす
    デザインを行う
    

    View Slide

16. note inc.
    プロダクトは
    いかに「お気に入り」になるか？
    16
    なぜ、エモーショナルデザイン？
    

    View Slide

17. なぜ、エモーショナルデザイン？
    17
    おしゃれなあの人
    が推してたペン、
    気になる…
    わ〜かっこい
    い！！まさに欲し
    かったやつ！！！
    使い心地も機能もよ
    くて気持ちいい！
    いっぱい使っちゃう
    ライフスタイルに合っ
    てる！もっとカッコい
    い自分になれそう！
    

    View Slide

18. なぜ、エモーショナルデザイン？
    18
    本能レベル
    人間の認知と情動に関する三つの処理
    参照: ドナルド・A・ノーマン「エモーショナル・デザイン」
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    

    View Slide

19. なぜ、エモーショナルデザイン？
    19
    おしゃれなあの人
    が推してたペン、
    気になる…
    わ〜かっこい
    い！！まさに欲し
    かったやつ！！！
    使い心地も機能もよ
    くて気持ちいい！
    いっぱい使っちゃう
    ライフスタイルに合っ
    てる！もっとカッコい
    い自分になれそう！
    本能レベル 行動レベル 内省レベル
    内省レベル
    

    View Slide

20. なぜ、エモーショナルデザイン？
    20
    いい内省＝「こうありたい」自分に重なる
    

    View Slide

21. なぜ、エモーショナルデザイン？
    21
    本能レベル
    　Airbnbのエモーショナルデザイン事例
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    クオリティの高い写真
    画像が大きく旅の
    イメージが膨らむ
    宿泊先を適切に条件絞
    り込みが可能、ホスト
    ともクイックにチャッ
    トで連絡がとれる
    魅力的な宿泊先が選べそう！
    素敵な旅になるんだろうな！
    ワクワク感
    

    View Slide

22. note inc.
    実は…デザイナーが潜在的に
    やってきたこと
    愛せるプロダクトの理由は、合理性や機能性だけではない
    22
    なぜ、エモーショナルデザイン？
    

    View Slide

23. note inc.
    愛は数値で説明しづらかった
    でも
    愛せるプロダクトには理由がある
    23
    

    View Slide

24. note inc.
    24
    なぜ、エモーショナルデザイン？
    数値で目指す
    「使いやすさ」
    「感情」
    を見越した設計
    どっちも大事
    

    View Slide

25. note inc.
    25
    ● 「使い続けたい」にはプロダクトの魅力も必要になった
    ● エモーショナルデザインはそのアプローチのひとつ
    ● 「本能(トーン)」「行動(使い心地)」から「内省(総合的な印象)」がもたら
    される
    なぜ、エモーショナルデザイン？
    まとめ
    

    View Slide

26. note inc.
    noteとエモーショナルデザイン
    26
    2
    

    View Slide

27. note inc.
    エモーショナルデザインの必然性
    27
    

    View Slide

28. 28
    noteとエモーショナルデザイン
    エモーショナルデザインは必須か？
    →NO。圧倒的な機能差や生活必須度で勝負できるのなら不要。
    noteは強みのひとつに、エモーショナルデザインを選んできた。
    

    View Slide

29. note inc.
    noteのミッション
    だれもが創作をはじめ、
    続けられるようにする。
    29
    noteとエモーショナルデザイン
    

    View Slide

30. note inc.
    人はポジティブな感情にあると、
    好奇心が高まり、より創造的になる
    30
    noteとエモーショナルデザイン
    

    View Slide

31. 31
    noteとエモーショナルデザイン
    ポジティブな感情が創作につながるはず
    創作をミッションに掲げている以上、感情は避けて通れない要素
    

    View Slide

32. note inc.
    エモーショナルデザインの実践
    32
    

    View Slide

33. エモーショナルデザインの実践
    33
    本能レベル
    もたらしたい内省を定義し、一貫して設計
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    設計に反映していく
    

    View Slide

34. エモーショナルデザインの実践
    34
    本能レベル
    　　noteの目指すエモーショナルデザイン
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    プレーンかつ柔らかく
    優しい、使う人を選ば
    ないトーン
    相対評価に寄りすぎな
    い機能設計
    歩みを振り返れる
    創作をつづけてる自分って
    なんだかいい感じ
    作っている自分のことが好き
    

    View Slide

35. note inc.
    内省の定義
    35
    

    View Slide

36. 36
    noteとエモーショナルデザイン
    めざす内省（感情・状態）の言語化
    

    View Slide

37. 37
    noteとエモーショナルデザイン
    創作をつづけてる自分って、なんだかいい感じ
    作っている自分のこと、ちょっと好き
    💞 もたらしたい内省
    

    View Slide

38. 38
    noteとエモーショナルデザイン
    周りに比べて自分は全然ダメだ…
    ツールとしてイケてなくてテンション下がる…
    💔 こんな内省はいやだ
    

    View Slide

39. note inc.
    内省をふまえ
    トーンと使い心地を設計
    39
    

    View Slide

40. エモーショナルデザインの実践
    40
    本能レベル
    　　noteの目指すエモーショナルデザイン
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    プレーンかつ柔らかく
    優しい、使う人を選ば
    ないトーン
    相対評価に寄りすぎな
    い機能設計
    歩みを振り返れる
    創作をつづけてる自分って
    なんだかいい感じ
    作っている自分のことが好き
    設計に反映していく
    

    View Slide

41. 41
    noteとエモーショナルデザイン
    目指す設計方針の言語化
    誰でも「自分のための創作の場」と思える
    自分の作品に集中できる
    創作するほどに、自分を肯定できる
    

    View Slide

42. 42
    noteとエモーショナルデザイン
    目指す設計方針の言語化
    誰でも「自分のための創作の場」と思える
    自分の作品に集中できる
    創作するほどに、自分を肯定できる
    

    View Slide

43. 43
    noteとエモーショナルデザイン
    誰でも「自分のための創作の場」と思えるには？
    →エッジも、強いキャラも「ない」のが「いい」
    

    View Slide

44. 44
    視覚的なノイズの少なさによる、心地よさ
    要素を絞っているからこそ、
    どんな表現でも受け皿になる
    noteとエモーショナルデザイン
    

    View Slide

45. 45
    プレーン、でもやさしいビジュアルトーンとライティング
    イラストも、個性を立てすぎず心地よくなじむ
    トーンに
    無機質すぎず、かつカジュアルすぎないライ
    ティング
    noteとエモーショナルデザイン
    

    View Slide

46. 46
    noteとエモーショナルデザイン
    目指す設計方針の言語化
    誰でも「自分のための創作の場」と思える
    自分の作品に集中できる
    創作するほどに、自分を肯定できる
    

    View Slide

47. 47
    noteとエモーショナルデザイン
    自分の作品に集中するためには？
    →「周りと比べる」が目的にならないほうがいい
    

    View Slide

48. 48
    数字上の「人気記事」をフューチャーしすぎない
    noteとエモーショナルデザイン
    PVやスキ数上位ではなく、実際
    に目を通して記事をピックアッ
    プ
    「ランキング」UIはあえて不在に
    している
    

    View Slide

49. 49
    自分が取り組みたいジャンルで活動できる
    noteとエモーショナルデザイン
    各ジャンルを明示し、さまざまなクリエイ
    ター自身が活動したい領域を発見できる
    ジャンルごとでの活動で挑戦できる取り組み
    

    View Slide

50. 50
    noteとエモーショナルデザイン
    目指す設計方針の言語化
    誰でも「自分のための創作の場」と思える
    自分の作品に集中できる
    創作するほどに、自分を肯定できる
    

    View Slide

51. 51
    noteとエモーショナルデザイン
    創作するほどに、自分を肯定するためには？
    →反響は諸刃の剣なので取り扱いに注意。特に、否定的な反響は…
    

    View Slide

52. 52
    リアクションの機能バランス
    明示的にサクッとできるリアクションは「ス
    キ」に絞っている
    コメントはあえて上に置きすぎず、さらにコメ
    ント時の「深呼吸」モーダルを表示
    noteとエモーショナルデザイン
    

    View Slide

53. 53
    自身の歩みを振り返れる工夫
    クリエイターそれぞれ、どれだけ
    の歩みがあったかを絶対評価で振
    り返ることができる
    noteとエモーショナルデザイン
    

    View Slide

54. エモーショナルデザインの実践
    54
    本能レベル
    　　noteの目指すエモーショナルデザイン
    五感で感じるトーン
    色・形のフィーリング
    行動レベル
    実際の使い心地
    機能設計
    内省レベル
    総合的にもたらされる
    感情・状態
    プレーンかつ柔らかく
    優しい、使う人を選ば
    ないトーン
    相対評価に寄りすぎな
    い機能設計
    歩みを振り返れる
    創作をつづけてる自分って
    なんだかいい感じ
    作っている自分のことが好き
    設計に反映していく
    

    View Slide

55. note inc.
    エモーショナルデザインの結果観測
    55
    

    View Slide

56. note inc.
    エモーショナルデザインの
    結果観測ってできるの？
    →選択肢はある
    56
    noteとエモーショナルデザイン
    

    View Slide

57. 57
    noteで行っている結果観測手法
    定期アンケートでどういうイメージ・感情を得
    ている人が多いのかを調査
    インタビューによる定性的な反響分析
    noteとエモーショナルデザイン
    

    View Slide

58. 得られた成果①
    「場としての雰囲気」が価値としてあげられ、
    情緒的な項目への当てはまりが大きいほど、NPSも高くなった
    58
    noteとエモーショナルデザイン
    

    View Slide

59. 得られた成果②
    インタビューでnoteについて
    「やさしい反応が多く、治安が良い」「手軽に取り組めるし、書くこと
    の楽しさに目覚めた」という声が。設計が実感値に結びついている
    59
    noteとエモーショナルデザイン
    

    View Slide

60. note inc.
    一歩一歩 積み上げている💪
    60
    noteとエモーショナルデザイン
    

    View Slide

61. note inc.
    まとめ
    61
    

    View Slide

62. note inc.
    62
    ● noteがエモーショナルデザインを選んでいる理由→プロダクトの強み作
    り、「創作」での必須性
    ● どう実践してるか→「内省」を定義し、一貫した設計を各要素に取り入れ
    ていく
    ● 結果観測は→アンケートやインタビューで「感情・イメージ」を定点観測
    している
    noteとエモーショナルデザイン
    noteとエモーショナルデザイン
    

    View Slide

63. note inc.
    「使いやすい」だけでは辿り着けない、
    魅力あるプロダクト設計を
    目指しています
    63
    

    View Slide

64. note inc.
    魅力あるプロダクトを
    作るための学びに
    少しでもなっていますように😌
    ご静聴ありがとうございました‼
    64
    

    View Slide

65. note inc.
    いろんな角度で
    デザイナーが活躍している会社です💪
    全力で募集中！！！
    65
    採用ページ
    https://open.talentio.com/r/1/c/note/pages/34186
    

    View Slide