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

by 松下ゆき

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

note inc. 内省の定義 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

note inc. まとめ 61

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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