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
20
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.1k
手戻りの少ないレスポンシブデザインのチェックポイント
flatsato
0
34
コーダー白書 2016
flatsato
0
23
Other Decks in Design
See All in Design
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
610
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.8k
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
980
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
410
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
480
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
470
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
270
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
720
Featured
See All Featured
A Tale of Four Properties
chriscoyier
157
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Music & Morning Musume
bryan
46
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Building Your Own Lightsaber
phodgson
103
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Automating Front-end Workflow
addyosmani
1366
200k
How GitHub (no longer) Works
holman
311
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
A Philosophy of Restraint
colly
203
16k
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ατϋϧϛ