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
Sacss マークアップは下準備が80%
Search
サトウハルミ Harumi Sato
April 13, 2019
Design
0
28
Sacss マークアップは下準備が80%
SaCSS登壇資料
https://sacss.net/special21/
サトウハルミ Harumi Sato
April 13, 2019
Tweet
Share
More Decks by サトウハルミ Harumi Sato
See All by サトウハルミ Harumi Sato
Speaker Deck Sample
flatsato
0
7.1k
手戻りの少ないレスポンシブデザインのチェックポイント
flatsato
0
44
コーダー白書 2016
flatsato
0
36
Other Decks in Design
See All in Design
DC Style Redesign
mcduckyart
0
130
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
490
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
Liquid Iron
mcduckyart
1
110
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
140
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
2
280
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Navigating Team Friction
lara
187
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Speed Design
sergeychernyshev
32
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing for humans not robots
tammielis
253
25k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Documentation Writing (for coders)
carmenintech
72
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Designing Experiences People Love
moore
142
24k
Transcript
ϚʔΫΞοϓ Լ४උ͕ˋ ίʔσ ΟϯάઐϓϩμΫγϣϯ'-"5ατϋϧϛ ! ָΛ͢ΔͱΫΦϦςΟ্͕͕Δ
自己紹介 " גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
ϓϩϑΟʔϧ ατϋϧϛ גࣜձࣾ'-"5දऔక ϚʔΫΞοϓΤϯδχΞ ઐֶߍXFCඇৗۈߨࢣ -*,&ɿࣂ͍ݘεύϯ ߦಈࢦɿ ΤϯδχΞϥΠϑΛͨͷ͠Ή
ίʔσΟϯάઐ'-"5 "# $!! ϑϩϯτΤϯυશൠ ελοϑ໊ ίʔσΟϯάʹಛԽͨ͠डୗ੍࡞ձࣾ
ݸਓϫʔΫɿΠϕϯτొஃ ϚʔΫΞοϓʢ)5.-$44ʣ $44/JUFొஃਓ ϚʔΫΞοϓܥΠϕϯτਓ ւಓΠϕϯτਓ 8FCܥͷΠϕϯτొஃ༰ ɾ)5.-$44ॳڃʙ্ڃ ɾ࣮ફతͳۀͰ͑ΔϚʔΫΞοϓ ɾडୗ੍࡞ͷٕज़τϨϯυ ɾतۀͰ)5.-ΛֶͿֶੜ
ɾ)5.-ͷجຊΛֶΜͩޙͷಠֶͷίπ ٕज़ऀ͚ొஃ💻 ࣮ઓతͳ)5.-ɾ$44ͷઐՈ
ݸਓϫʔΫɿઐֶߍͷඇৗۈߨࢣ ܂σβΠϯݚڀॴ ݱͷΫϦΤΠλʔ ੍࡞τϨϯυΛऔΓೖΕͨतۀ σβΠφʔ͞ΜʹϚʔΫΞοϓΛڭ͑ͯ·͢ اۀͱ߹ಉतۀ ΦϦδφϧ 8FCΛमਖ਼ͤΑ ઐֶߍͷඇৗۈߨࢣ
なぜ Լ४උ͕ॏཁ͔🙌 גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
खൈ͖ʹͳΒͳ͍ʁ ࣌ؒΛ͔͚Δͱ ྑ͍ͷ͕Ͱ͖Δʁ 🤔 Լ४උͰָΛ͢Δͱ ΫΦϦςΟ্͕͕Δ
ௐཧ ఏڙ ϑΝϛϦʔϨετϥϯͷ߹ ࠐΈ Լ४උΛࡁ·͓ͤͯ͘
Լ४උͰϕʔε࡞ۀΛݮΒ͢ ্͛ ެ։ ϕʔε ϚʔΫΞοϓͷ߹
खଧ͕͍͍ͪͷ ʮڶഴʯͱʮ͏ͲΜʯ͚ͩ͆
҆ఆ࣭ εϐʔυ 61 ίετ μϯ खؒΛ ݮΒ͢ νϟϨϯδ ·ͳ͍ 作業を効率化して悩まない
=クオリティに時間を使える
下準備1 खॻ͖ίʔσΟϯά📝 גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
デザインだけを設計として コードを書いていた Լ४උφγࢠ /0ʂ )
手書きコーディングで 設計と手順を見える化 Լ४උΞϦࢠ 0,̇ *
視覚認知を 利用する Point!
ྫɿөըͷֆίϯς ຐঁͷٸศ ελδΦδϒϦֆίϯςશू cٶ࡚ॣcຊc௨ൢc"NB[PO IUUQTXXXBNB[PODPKQEQ ʮΞχϝࢦࣔʯʮԻʯʮॱ൪ʯʮεϐʔυʯ
ྫɿ$.ֆίϯς Ӭԕͷ$.मߦૐɺதౡ৴ͷֆίϯςू ʛΞʔτʛ&YDJUFJTN Τ ΩαΠτΠζϜ IUUQJTNFYDJUFDPKQBSUSJE@0SJHJOBM@ ʮඵʯʮηϦϑʯʮίϚׂΓʯʮঢ়گઆ໌ʯ
ͲΜͳ͜ͱΛॻ͘ʁ දࣔ+BWB4DSJQUΞχϝʔγϣϯ"1*ʹίʔυଆͰܾΊΔ͜ͱ ֬ೝ͋ͱͰਐߦ͢Δͱ͜ΖʹϝϞ Ή͚ͩʗΑ͠ͳʹਐߦʗ֬ೝ ༏ઌʗ୲ʗқ σβΠϯʗ༷Ͱܾ·͍ͬͯͳ͍࣮༰Λݟ͑ΔԽ GPOUTJ[FɺNBSHJOɺQBEEJOHɺXJEUIɺIFJHIUɺMJOFIFJHIU ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠
࣮ࡍͷखॻ͖ίʔσΟϯά ࡞ۀલʹݟ͑ΔԽ͓ͯ͘͠
📍༏ઌͱқΛચ͍ग़͢ 📍σβΠϯπʔϧͱͷԟ෮ΛݮΒ͢ 📍ݟ͑ΔԽͯ͠ཧ͢Δ 3つのメリット
下準備2 ετοΫ͢Δ📎 גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
イチからコードを 書いていた Լ४උφγࢠ - /0ʂ
50%ほどは 過去のストックコード Լ४උΞϦࢠ . 0,̇
自分の 型を決める Point!
͓͢͢ΊϑϨʔϜϫʔΫ .646#JJʢϜεϏʔʣ IUUQTHFUCPPUTUSBQDPN IUUQTCVMNBJP IUUQTRSBDHJUIVCJPNVTVCJJ IUUQTHFUCBTJTHJUIVCJP #6-."ʢϒϧϚʣ #PPUTUSBQ #BTJTʢϕʔγεʣ ࢀߟʹͯࣗ͠༻ʹΞϨϯδ
ࣗ࡞ϑϨʔϜϫʔΫ )5.-$44ɺNJYJO ϞδϡʔϧʹΧʔυɺҰཡ ೖྗܥʹ'03.ɺ8:4*8:( ϖʔδʹ'"2ɺϓϥΠόγʔϙϦγʔɺ ػೳ "1*ʹ(PPHMFϚοϓɺ:PV5VCFɺ'BDFCPPLຒΊࠐΈ 4/4Ϙλϯɺ*OTUBHSBNϑΟʔυ $.4ʹ8PSE1SFTTɺ.PWBCMF5ZQF݅ذɺλά IUUQTqBUTBUPHJUIVCJPUFNQIUNM
TQBOϩΰ </S> ࣗͷϑϨʔϜϫʔΫΛ࡞Ζ͏
📍ίϐϖͰѹతͳ࣌ؒॖ 📍ಉ͜͡ͱͰճ·ͳ͘ͳΔ 📍ࣗͷϫʔΫϑϩʔΛཧͰ͖Δ 3つのメリット
下準備3 ಁ͔͢🔍 גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
/0ʂ 0 デザインカンプを 並べて目視チェック Լ४උφγࢠ
1 0,̇ 透かしコーディングで チェックも同時に済ます Լ४උΞϦࢠ
モジュール 単位で進行 Point!
ಁ͔͠ίʔσΟϯά DPOUBJOFS σβΠϯΧϯϓΛॏͶͯίʔσ Οϯά
🤔 💡操作デモ
📍ψέϞϨɺNBSHJOɺGPOUTJ[F 📍ؒҧ͍୳ָ͕͠ʹͰ͖Δ 📍νΣοΫ࣌ؒେ෯ॖ 3つのメリット
下準備4 νΣοΫϦετΛ࡞Δ✅ גࣜձࣾ'-"5 ϚʔΫΞοϓ Լ४උ͕
/0ʂ ヌケモレ多し 時間も足りない Լ४උφγࢠ 4
0,̇ チェック項目を 意識しながら制作 ヌケモレ減った Լ४උΞϦࢠ 5
段階ごとに チェックする Point!
8)Ͱཧ͢Δ 8IPʢ୭͕ʣ୲ऀ 8IBUʢԿΛʣ)PXʢͲͷΑ͏ʹʣ༰Λॻ͘ 8IFOʢ͍ͭʣకஈ֊ʢ४උʗ։࢝ʗςετΞοϓʗຊ൪ެ։ʣ 8IFSFʢͲ͜Ͱʣ63-ɾΩϟϓνϟ ϫʔΫϑϩʔʹ͋ͬͨνΣοΫϦετ
ΧςΰϦྨ͢Δ ɾϓϩδΣΫτશମ ɾαʔόʔ ɾ$.4ʗγεςϜ ɾσβΠϯɾϞʔγϣϯ ɾίʔσΟϯάઃܭ ɾૉࡐཧ ɾ4/4 ɾӡ༻ ΧςΰϦผʹνΣοΫϦετΛ࡞Δ
߲ΛΧςΰϦྨ͢Δ
📍ψέϞϨɺNBSHJOɺGPOUTJ[F 📍࣭ͷόϥπΩ͕ͳ͘ͳΔ 📍νΣοΫ࣌ͷ߲ΛݮΒͤΔ 3つのメリット
ࣗͷϫʔΫϑϩʔΛ࡞͓ͬͯ͘ ָͯ͠ΫΦϦςΟʹ࣌ؒΛ͏ ·ͱΊ ϑϨʔϜϫʔΫ νΣοΫϦετ ಁ͔͠ ίʔσΟϯά खॻ͖ ίʔσΟϯά
😀5IBOLT ʮָΛ͢ΔͱΫΦϦςΟ্͕͕Δ ɹϚʔΫΞοϓԼ४උ͕ˋʯ ίʔσ ΟϯάઐϓϩμΫγϣϯ'-"5ατϋϧϛ