Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

松下ゆき
December 04, 2022

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

松下ゆき

December 04, 2022
Tweet

More Decks by 松下ゆき

Other Decks in Design

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