Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
noteが目指す創作をつづけるためのエモーショナルデザイン
Search
松下ゆき
December 04, 2022
Design
0
7.8k
noteが目指す創作をつづけるためのエモーショナルデザイン
松下ゆき
December 04, 2022
Tweet
Share
More Decks by 松下ゆき
See All by 松下ゆき
オンライン採用イベント#大人の社会科見学 noteパート
yumatsushita
0
820
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
1
170
Cyber Heart Online Book
hjnasby
0
130
株式会社バクタム 会社説明資料
bactum
0
250
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
140
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
640
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
320
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
550
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
KATA
mclloyd
30
14k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Music & Morning Musume
bryan
46
6.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Applications with DynamoDB
mza
95
6.5k
Speed Design
sergeychernyshev
32
1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
1
note inc. 2 松下ゆき @yuki_doro note株式会社 デザイナー 2014-2018 Yahoo! Japan
2018.11- note
note inc. 本日の内容 noteにあげています! 3
4
どんなサービス? どんなイメージ?
6 デザイナーがよく記事書いてる… 白くてシンプル… 「クリエイティブ系」っぽい?… 手軽に文章を発信するなら…
note inc. エモーショナルデザイン 7
note inc. なぜ、エモーショナルデザイン? noteとエモーショナルデザイン 8 1 2
note inc. なぜ、エモーショナルデザイン? 9 1
10 80% なぜ、エモーショナルデザイン?
11 80% DLされた後使われなくなるAPP なぜ、エモーショナルデザイン?
12 「使えるから使う」の時代は終わった。 なぜならどのサービスも「使える」から
note inc. なぜ、エモーショナルデザイン? 「使える」 「使い続けたい」 13 プロダクトの魅力も必要になった
誰のためのデザイン? 「使いやすいデザイン」の重要さを 説いた エモーショナル・デザイン 使いやすさだけでなく「情動」のUX もプロダクトの魅力には必要 14 ノーマンにも変遷 なぜ、エモーショナルデザイン?
note inc. なぜ、エモーショナルデザイン? エモーショナルデザイン 15 =トーンと使い心地を通しポジティブな感情をもたらす デザインを行う
note inc. プロダクトは いかに「お気に入り」になるか? 16 なぜ、エモーショナルデザイン?
なぜ、エモーショナルデザイン? 17 おしゃれなあの人 が推してたペン、 気になる… わ〜かっこい い!!まさに欲し かったやつ!!! 使い心地も機能もよ くて気持ちいい!
いっぱい使っちゃう ライフスタイルに合っ てる!もっとカッコい い自分になれそう!
なぜ、エモーショナルデザイン? 18 本能レベル 人間の認知と情動に関する三つの処理 参照: ドナルド・A・ノーマン「エモーショナル・デザイン」 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地
機能設計 内省レベル 総合的にもたらされる 感情・状態
なぜ、エモーショナルデザイン? 19 おしゃれなあの人 が推してたペン、 気になる… わ〜かっこい い!!まさに欲し かったやつ!!! 使い心地も機能もよ くて気持ちいい!
いっぱい使っちゃう ライフスタイルに合っ てる!もっとカッコい い自分になれそう! 本能レベル 行動レベル 内省レベル 内省レベル
なぜ、エモーショナルデザイン? 20 いい内省=「こうありたい」自分に重なる
なぜ、エモーショナルデザイン? 21 本能レベル Airbnbのエモーショナルデザイン事例 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地 機能設計 内省レベル
総合的にもたらされる 感情・状態 クオリティの高い写真 画像が大きく旅の イメージが膨らむ 宿泊先を適切に条件絞 り込みが可能、ホスト ともクイックにチャッ トで連絡がとれる 魅力的な宿泊先が選べそう! 素敵な旅になるんだろうな! ワクワク感
note inc. 実は…デザイナーが潜在的に やってきたこと 愛せるプロダクトの理由は、合理性や機能性だけではない 22 なぜ、エモーショナルデザイン?
note inc. 愛は数値で説明しづらかった でも 愛せるプロダクトには理由がある 23
note inc. 24 なぜ、エモーショナルデザイン? 数値で目指す 「使いやすさ」 「感情」 を見越した設計 どっちも大事
note inc. 25 • 「使い続けたい」にはプロダクトの魅力も必要になった • エモーショナルデザインはそのアプローチのひとつ • 「本能(トーン)」「行動(使い心地)」から「内省(総合的な印象)」がもたら される
なぜ、エモーショナルデザイン? まとめ
note inc. noteとエモーショナルデザイン 26 2
note inc. エモーショナルデザインの必然性 27
28 noteとエモーショナルデザイン エモーショナルデザインは必須か? →NO。圧倒的な機能差や生活必須度で勝負できるのなら不要。 noteは強みのひとつに、エモーショナルデザインを選んできた。
note inc. noteのミッション だれもが創作をはじめ、 続けられるようにする。 29 noteとエモーショナルデザイン
note inc. 人はポジティブな感情にあると、 好奇心が高まり、より創造的になる 30 noteとエモーショナルデザイン
31 noteとエモーショナルデザイン ポジティブな感情が創作につながるはず 創作をミッションに掲げている以上、感情は避けて通れない要素
note inc. エモーショナルデザインの実践 32
エモーショナルデザインの実践 33 本能レベル もたらしたい内省を定義し、一貫して設計 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地 機能設計 内省レベル
総合的にもたらされる 感情・状態 設計に反映していく
エモーショナルデザインの実践 34 本能レベル noteの目指すエモーショナルデザイン 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地 機能設計 内省レベル
総合的にもたらされる 感情・状態 プレーンかつ柔らかく 優しい、使う人を選ば ないトーン 相対評価に寄りすぎな い機能設計 歩みを振り返れる 創作をつづけてる自分って なんだかいい感じ 作っている自分のことが好き
note inc. 内省の定義 35
36 noteとエモーショナルデザイン めざす内省(感情・状態)の言語化
37 noteとエモーショナルデザイン 創作をつづけてる自分って、なんだかいい感じ 作っている自分のこと、ちょっと好き 💞 もたらしたい内省
38 noteとエモーショナルデザイン 周りに比べて自分は全然ダメだ… ツールとしてイケてなくてテンション下がる… 💔 こんな内省はいやだ
note inc. 内省をふまえ トーンと使い心地を設計 39
エモーショナルデザインの実践 40 本能レベル noteの目指すエモーショナルデザイン 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地 機能設計 内省レベル
総合的にもたらされる 感情・状態 プレーンかつ柔らかく 優しい、使う人を選ば ないトーン 相対評価に寄りすぎな い機能設計 歩みを振り返れる 創作をつづけてる自分って なんだかいい感じ 作っている自分のことが好き 設計に反映していく
41 noteとエモーショナルデザイン 目指す設計方針の言語化 誰でも「自分のための創作の場」と思える 自分の作品に集中できる 創作するほどに、自分を肯定できる
42 noteとエモーショナルデザイン 目指す設計方針の言語化 誰でも「自分のための創作の場」と思える 自分の作品に集中できる 創作するほどに、自分を肯定できる
43 noteとエモーショナルデザイン 誰でも「自分のための創作の場」と思えるには? →エッジも、強いキャラも「ない」のが「いい」
44 視覚的なノイズの少なさによる、心地よさ 要素を絞っているからこそ、 どんな表現でも受け皿になる noteとエモーショナルデザイン
45 プレーン、でもやさしいビジュアルトーンとライティング イラストも、個性を立てすぎず心地よくなじむ トーンに 無機質すぎず、かつカジュアルすぎないライ ティング noteとエモーショナルデザイン
46 noteとエモーショナルデザイン 目指す設計方針の言語化 誰でも「自分のための創作の場」と思える 自分の作品に集中できる 創作するほどに、自分を肯定できる
47 noteとエモーショナルデザイン 自分の作品に集中するためには? →「周りと比べる」が目的にならないほうがいい
48 数字上の「人気記事」をフューチャーしすぎない noteとエモーショナルデザイン PVやスキ数上位ではなく、実際 に目を通して記事をピックアッ プ 「ランキング」UIはあえて不在に している
49 自分が取り組みたいジャンルで活動できる noteとエモーショナルデザイン 各ジャンルを明示し、さまざまなクリエイ ター自身が活動したい領域を発見できる ジャンルごとでの活動で挑戦できる取り組み
50 noteとエモーショナルデザイン 目指す設計方針の言語化 誰でも「自分のための創作の場」と思える 自分の作品に集中できる 創作するほどに、自分を肯定できる
51 noteとエモーショナルデザイン 創作するほどに、自分を肯定するためには? →反響は諸刃の剣なので取り扱いに注意。特に、否定的な反響は…
52 リアクションの機能バランス 明示的にサクッとできるリアクションは「ス キ」に絞っている コメントはあえて上に置きすぎず、さらにコメ ント時の「深呼吸」モーダルを表示 noteとエモーショナルデザイン
53 自身の歩みを振り返れる工夫 クリエイターそれぞれ、どれだけ の歩みがあったかを絶対評価で振 り返ることができる noteとエモーショナルデザイン
エモーショナルデザインの実践 54 本能レベル noteの目指すエモーショナルデザイン 五感で感じるトーン 色・形のフィーリング 行動レベル 実際の使い心地 機能設計 内省レベル
総合的にもたらされる 感情・状態 プレーンかつ柔らかく 優しい、使う人を選ば ないトーン 相対評価に寄りすぎな い機能設計 歩みを振り返れる 創作をつづけてる自分って なんだかいい感じ 作っている自分のことが好き 設計に反映していく
note inc. エモーショナルデザインの結果観測 55
note inc. エモーショナルデザインの 結果観測ってできるの? →選択肢はある 56 noteとエモーショナルデザイン
57 noteで行っている結果観測手法 定期アンケートでどういうイメージ・感情を得 ている人が多いのかを調査 インタビューによる定性的な反響分析 noteとエモーショナルデザイン
得られた成果① 「場としての雰囲気」が価値としてあげられ、 情緒的な項目への当てはまりが大きいほど、NPSも高くなった 58 noteとエモーショナルデザイン
得られた成果② インタビューでnoteについて 「やさしい反応が多く、治安が良い」「手軽に取り組めるし、書くこと の楽しさに目覚めた」という声が。設計が実感値に結びついている 59 noteとエモーショナルデザイン
note inc. 一歩一歩 積み上げている💪 60 noteとエモーショナルデザイン
note inc. まとめ 61
note inc. 62 • noteがエモーショナルデザインを選んでいる理由→プロダクトの強み作 り、「創作」での必須性 • どう実践してるか→「内省」を定義し、一貫した設計を各要素に取り入れ ていく •
結果観測は→アンケートやインタビューで「感情・イメージ」を定点観測 している noteとエモーショナルデザイン noteとエモーショナルデザイン
note inc. 「使いやすい」だけでは辿り着けない、 魅力あるプロダクト設計を 目指しています 63
note inc. 魅力あるプロダクトを 作るための学びに 少しでもなっていますように😌 ご静聴ありがとうございました‼ 64
note inc. いろんな角度で デザイナーが活躍している会社です💪 全力で募集中!!! 65 採用ページ https://open.talentio.com/r/1/c/note/pages/34186