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
2.1k
良いデザインのためのマインドセットの作り方
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
610
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
1k
ヘルシーなウェブ制作を支える必修時短ツール
wattlaa
0
430
SNSで向き合おう!SNSマネージャー 認定試験初級を受けてみた話~待島編
wattlaa
1
410
やさしいBacklogの使い方
wattlaa
2
1.4k
時短&ストレス軽減!サイト制作・発注のコツ
wattlaa
0
200
クライアント提案 はじめの一歩
wattlaa
1
340
企画に煮詰まった時のアイデア発想のヒント10
wattlaa
1
560
クリエイティブに自信を持つ! 前向きサイトプランニング
wattlaa
1
340
Other Decks in Design
See All in Design
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
280
How to get a Tiger to Tulsa
mcduckyart
0
120
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
130
線で考える画面構成
natsuume
1
900
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
330
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
470
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
9.7k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
570
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.7k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Facilitating Awesome Meetings
lara
54
6.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fireside Chat
paigeccino
37
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Scaling GitHub
holman
461
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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!