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
450
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
590
ヘルシーなウェブ制作を支える必修時短ツール
wattlaa
0
350
SNSで向き合おう!SNSマネージャー 認定試験初級を受けてみた話~待島編
wattlaa
1
300
やさしいBacklogの使い方
wattlaa
2
1.1k
時短&ストレス軽減!サイト制作・発注のコツ
wattlaa
0
140
クライアント提案 はじめの一歩
wattlaa
1
280
企画に煮詰まった時のアイデア発想のヒント10
wattlaa
1
470
クリエイティブに自信を持つ! 前向きサイトプランニング
wattlaa
1
290
Other Decks in Design
See All in Design
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.6k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
260
Mitra Manual
nnidhz
0
180
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
160
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
24
14k
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
430
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
240
PdMを始めたUIデザイナーのリアルな課題
muture
0
720
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
150
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
460
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Unsuck your backbone
ammeep
667
57k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Infographics Made Easy
chrislema
239
18k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
How to Ace a Technical Interview
jacobian
274
23k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
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!