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
良いデザインのためのマインドセットの作り方
Search
待島 亘
June 28, 2019
Design
4
2k
良いデザインのためのマインドセットの作り方
CSS Nite in Sapporo, vol.22
「デザインを語る夕べ」
2019年6月28日(金)
https://cssnite.jp/sapporo/vol22/
待島 亘
June 28, 2019
Tweet
Share
More Decks by 待島 亘
See All by 待島 亘
ウェブディレクターを救うBacklog
wattlaa
0
560
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
890
ヘルシーなウェブ制作を支える必修時短ツール
wattlaa
0
410
SNSで向き合おう!SNSマネージャー 認定試験初級を受けてみた話~待島編
wattlaa
1
390
やさしいBacklogの使い方
wattlaa
2
1.3k
時短&ストレス軽減!サイト制作・発注のコツ
wattlaa
0
180
クライアント提案 はじめの一歩
wattlaa
1
330
企画に煮詰まった時のアイデア発想のヒント10
wattlaa
1
540
クリエイティブに自信を持つ! 前向きサイトプランニング
wattlaa
1
330
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
150
PF_濵村ひろみ_202503
maru_design78
0
120
Haley's adventure chase
ivettetwin
0
100
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
100
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.3k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
線で考える画面構成
natsuume
1
840
今日から意識できるアクセシビリティ
fumiko
0
200
セブンデックス カルチャーブック
sevendex
1
9.1k
250131_product meetup
motokoishida
0
160
デザイナーとPMの両ロール_3つのポイント
toy1618
1
270
aya_murakami_portfolio
ayakaimi1101
0
1.5k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Scaling GitHub
holman
459
140k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Why Our Code Smells
bkeepers
PRO
336
57k
Practical Orchestrator
shlominoach
186
10k
It's Worth the Effort
3n
184
28k
Navigating Team Friction
lara
184
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Cult of Friendly URLs
andyhume
78
6.3k
Adopting Sorbet at Scale
ufuk
76
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Transcript
ྑ͍σβΠϯͷͨΊͷ ϚΠϯυηοτͷ࡞Γํ CSS Nite in Sapporo, vol.22 ʮσβΠϯΛޠΔ༦ʯ 2 0
1 9 . 0 6 . 2 8 @ T e n t o T e n S A P P O R O S T A T I O N Wataru Machishima
Γ࢝ΊΔͱΔؾ͕ग़Δ ͬͯຊͰ͠ΐ͏͔ʁ 2 Q.
ຊͰ͢ɻ 3 A.
ਓ͕ؒମΛಈ͔͢ͱɺ ͕࡞ۀʹ߹Θͤͨ׆ੑԽϞʔυʹೖΔɻ ͜ΕΛʮ࡞ۀڵฃʯͱ͍͏ɻ 4
ਓؒͷͷੑ࣭Λ͍͜ͳ͢ 5
6 ౡ ɹ·ͪ͠· ΘͨΔ גࣜձࣾGear8 ΣϒσΟϨΫλʔ ΣϒαΠτͷλʔήοτతɺ͑Δ͖ίϯςϯπͳͲɺ ϫʔΫγϣοϓΛ௨ͯ͠ΫϥΠΞϯτͱҰॹʹߦ͏اըઃܭ͕ಘҙɻ ը໘ઃܭXDɻλεΫཧToistͱBacklog͕͖ɻ ࢀՃͨ͠ΠϕϯτͷάϥϨί͕झຯɻ
هࣄΛॻ͘ͷ͕͔͔࣌ؒΔํɻ ࣗݾհ
7 GRAPHIC RECORDING EVENT & SEMINAR https://note.mu/wattlaa
8 1.ྑ͍σβΠϯΛ࡞Δͷʹඞཁͳͷ 2.ΔؾεΠονΛΦϯʹ͢Δ 3.ΞΠσΞΛੜΉɺΠϯϓοτɾΞτϓοτ 4.എதΛԡ͢ɺ͠ͳ͔ϚΠϯυηοτ 5.·ͱΊ ࣍ INDEX
9 ྑ͍σβΠϯΛ ࡞Δͷʹඞཁͳͷ SECTION 01
10 “ ΛσβΠϯ͢Δ ”
11 “ ΛσβΠϯ͢Δ ” https://www.vivivit.com/entries/keiei-design-sheet
12 “ ΛσβΠϯ͢Δ ” https://www.vivivit.com/entries/keiei-design-sheet
ྑ͍σβΠϯʹ ඞཁͳͷͬͯʁ 13
اը ΞΠσΟΞ ίϛϡχέʔγϣϯ εϐʔυ Ծઆͱݕূ ͍ ΦϦδφϦςΟ త ඒ͠͞ Θ͔Γ͢͞
ࡉ෦ͷͩ͜ΘΓ ϑϨʔϜϫʔΫ Ϟνϕʔγϣϯ ڥ ྔ
اը ΞΠσΟΞ Ϟνϕʔγϣϯ εϐʔυ Ծઆͱݕূ ͍ ྔ ΦϦδφϦςΟ త ඒ͠͞
Θ͔Γ͢͞ ࡉ෦ͷͩ͜ΘΓ ڥ ϑϨʔϜϫʔΫ ίϛϡχέʔγϣϯ ࠓ͜ͷลΓͷ͓
16 ΔؾεΠονΛ Φϯʹ͢Δ SECTION 02
ਓ͕ؒମΛಈ͔͢ͱɺ ͕࡞ۀʹ߹Θͤͨ׆ੑԽϞʔυʹೖΔɻ ͜ΕΛʮ࡞ۀڵฃʯͱ͍͏ɻ 17
ҰݟͨͷΛʮͨΓલʯͱͯ͠ ॲཧ͢ΔͷԠΛೃԽʢ͡ΎΜ͔ʣͱݴ͏ɻ ଏʹݴ͏ϚϯωϦԽɻ 18
ʮΊΜͲ͍͘͞ʯΛϚϯωϦԽͤ͞Δͱɺ ͦΕ͕श׳ʹͳΔɻ 19 伴ʹͳΔͷ͕ ୶ٿ
୶ٿʢͨΜͦ͏͖Ύ͏ʣͱ Δؾ͕ग़Δͱ͖ʹ׆ੑԽ͢Δͷ෦Ґɻ ҙࣝతʹಈ͔͢͜ͱ͕Ͱ͖ͳ͍͕ɺ ͷผͷ෦ҐΛಈ͔͢͜ͱͰ׆ੑԽͰ͖Δɻ 20
୶ٿΛಈ͔͢ 4ͭͷͷεΠον 21
22 B I E R BODY IDEOMOTOR EXPERIENCE REWARD Body
ମΛಈ͔͢ͱೖΔεΠονɻ ʮӡಈʯʹ͋Δɻ Reward ͝๙ඒշײʹΑΓೖΔεΠονɻ ʮςάϝϯλʯʹ͋Δɻ Experience ͍ͭͱҧ͏͜ͱΛ͢ΔͱೖΔ εΠονɻʮւഅʯʹ͋Δɻ Ideomotor ͳΓ͖Δ͜ͱʹΑͬͯೖΔɹɹ εΠονɻʮલ಄༿ʯʹ͋Δɻ
BODYεΠον • ͯ͘Կͨ͘͠ͳ͍࣌ɺ্ཱ͕ͪͬ ͯΈΔɻ • ݩؾ͕ͳ͍࣌ɺ࡞Γস͍Λͯ͠ΈΔɻ • σβΠϯ͕༕ᓔͰख͕͔ͳ͍࣌ɺ ΠϥϨΛ্ཱͪ͛ͯΈΔɻ 23
ମΛಈ͔͢ͱೖΔεΠονɻʮӡಈʯʹ͋Δɻ
EXPERIENCEεΠον μΠΤοτͷͨΊͷϥϯχϯάΛ • ԻָΛௌ͖ͳ͕ΒΔ • ΤϨϕʔλʔʹΒͣʹ֊ஈΛ͏ • ҰӺา͍ͯؼΔ 24 ͍ͭͱҧ͏͜ͱΛ͢ΔͱೖΔɻʮւഅʯʹ͋Δɻ
EXPERIENCEεΠον μΠΤοτͷͨΊͷϥϯχϯάΛ • ԻָΛௌ͖ͳ͕ΒΔ • ΤϨϕʔλʔʹΒͣʹ֊ஈΛ͏ • ҰӺา͍ͯؼΔ 25 ͍ͭͱҧ͏͜ͱΛ͢ΔͱೖΔεΠονɻ
ϚϯωϦԽʹؾ͍ͮͨΒ ͪΐͬͱͨ͠ҧ͍Λҙࣝ͢Δ ͚ͩͰΔؾ͕ͬͯ͘Δ
REWARDεΠον • ೲޙͷϏʔϧɺϘʔφεͰ ཱྀߦ • ͖ͳԻָΛௌ͘ • ๙ΊΒΕΔɺୡ͢ΔͳͲͷ ܗͷͳ͍͝๙ඒOK 26
͝๙ඒշײʹΑͬͯೖΔɻʮςάϝϯλʯʹ͋Δɻ
IDEOMOTORεΠον • ಌΕͷਓʹͳΓ͖Δ • ͳΓ͍ͨࣗʹͳͬͨ࢟Λ Πϝʔδ͢Δ 27 ͳΓ͖Δ͜ͱʹΑͬͯೖΔɻʮલ಄༿ʯʹ͋Δɻ
୶ٿ ʹ ΔؾεΠον 28
29 ΞΠσΞΛੜΉɺ ΠϯϓοτɾΞτϓοτ SECTION 03
ຊΛಡΉ͜ͱ तۀΛड͚Δ͜ͱ ԻָΛௌ͘͜ͱ 30 INPUT
υϦϧΛղ͘͜ͱ ϊʔτʹ·ͱΊΔ͜ͱ ༑ୡʹγΣΞ͢Δ͜ͱ 31 OUTPUT
32 INPUT OUTPUT 20% 80% Πϯϓοτ2ׂɺΞτϓοτ8ׂΛҙࣝ͢Δ
ޮతͳΞτϓοτ 33
৽ͨʹͬͨ͜ͱΛɺ 2िؒͰ3ճҎ্ΞτϓοτΛ͢Δͱɺ ʹهԱͱͯ͠ఆண͘͢͠ͳΔɻ 34
৽ͨʹͬͨ͜ͱΛɺ 2िؒͰ3ճҎ্ΞτϓοτΛ͢Δͱɺ ʹهԱͱͯ͠ఆண͘͢͠ͳΔɻ 35 ظؒ ճ
ࣖʹͯ͠ʮ͍͍ͳʯͱࢥͬͨใɺ ͍ظؒͷؒʹ ͳΜΒ͔ͷߦಈΛى͜͢͜ͱͰʹͳΔɻ 36
TWITTERޮత 37
͕͖ࣗͳਓɺଚܟ͢ΔਓΛϑΥϩʔ͢Δ ͕͖ࣗͳਓɺଚܟ͢Δਓ͕ ϑΥϩʔ͍ͯ͠ΔਓΛɺϑΥϩʔ͢Δ 38 INPUT
৮Εͨใʹؔ͢Δ ࣗͷߟ͑ΛπΠʔτ͢Δ ߟ͑ΛϒϩάnoteͳͲʹ·ͱΊͯ ͦΕΛπΠʔτ͢Δ 39 OUTPUT
40 എதΛԡ͢ɺ ͠ͳ͔ϚΠϯυηοτ SECTION 04
41 ߗ Ϛ Π ϯ υ η ο τ
͠ ͳ ͔ Ϛ Π ϯ υ η ο τ
ߗ ϚΠϯυηοτ ਓͷՁܾ·Γ͖ͬͨͷ ਓੜݡ͞ͷূ໌ͷ࿈ଓ ೳྗม͑Α͏͕ͳ͍ࢿ࣭ 42 ͠ͳ͔ ϚΠϯυηοτ ਓ͢Δͷ ਓੜ৽ֶ͍͠ͼͷ࿈ଓ
ೳྗࣗͰҭͯΒΕΔͷ
͠ͳ͔ϚΠϯυηοτΛ࡞Δ 1ճͰ100ͷͷΛੜΈग़͞ͳͯ͘OK ϑΟʔυόοΫΛड͚ͯਫ਼ΛߴΊ͍ͯ͘ ଞऀ͔ΒͷࢦఠΛͻͱͭͰྑ͍ͷͰड͚ೖΕΔ 43
44 ·ͱΊ SECTION 05
ྑ͍σβΠϯΛੜΈग़͢ʹɺ ৺ཧతڥΛ͑Δ͜ͱ͕ॏཁɻ ྑ͍ڥΛ࡞Γग़͢ʹɺ ਓؒͷͷΈηΦϦʔΛ ར༻͢Δͷ͕ޮతɻ 45
Ϟνϕʔγϣϯ͕Լ͕ͬͨ࣌ʹͦ͜ɺ ͷੑ࣭Λར༻͢Δ͜ͱͰ ࣗΛίϯτϩʔϧͰ͖Δɻ 46
ʑͷੜ׆ʹऔΓೖΕͯɺ ϕετͳ͋ͳͨΛσβΠϯ͠Α͏ɻ 47
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ Wataru Machishima HTTPS://WWW.FACEBOOK.COM/MACHISHIMA @WATTLAA HTTPS://NOTE.MU/WATTLAA FOLLOW ME, PLEASE!