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
26
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
6.8k
手戻りの少ないレスポンシブデザインのチェックポイント
flatsato
0
42
コーダー白書 2016
flatsato
0
29
Other Decks in Design
See All in Design
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
320
Crisp Code inc. ブランドガイドライン
so_kotani
1
160
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
590
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.5k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
160
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
180
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.2k
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
100
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
1k
PF_濵村ひろみ_202503
maru_design78
0
120
「デザイン」を信じるには
iflection
0
180
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
We Have a Design System, Now What?
morganepeng
52
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
158
23k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
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ατϋϧϛ