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
29
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.3k
手戻りの少ないレスポンシブデザインのチェックポイント
flatsato
0
45
コーダー白書 2016
flatsato
0
36
Other Decks in Design
See All in Design
AIで加速するアクセシビリティのこれから
magi1125
3
660
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Them Middle School Kids Pitch
stevie_vee
0
130
アクセシビリティに取り組むメリット
magi1125
2
240
mento Design Team Portfolio
mento0fficial
1
610
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
500
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
650
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
320
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.5k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
640
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
Music & Morning Musume
bryan
46
6.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Designing for humans not robots
tammielis
253
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why Our Code Smells
bkeepers
PRO
339
57k
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ατϋϧϛ