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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
m-yoshiro
September 22, 2017
Design
3
690
開発初期からはじめるスタイルガイド
社内イベント `Designer's MTG #1 「失敗事例・成功事例」` で発表した資料です。
m-yoshiro
September 22, 2017
Tweet
Share
More Decks by m-yoshiro
See All by m-yoshiro
雑に出してみるデザイントークン適用率
myoshiro
0
190
デザイントークンの適用率計測とその活用
myoshiro
0
1.2k
画像の減色処理とOctree
myoshiro
1
430
CSS Houdiniであそぶ
myoshiro
0
200
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
260
わたしたちのコーディングのUX
myoshiro
1
310
Data Studio Community Visualizationを触ってみた
myoshiro
1
590
UIデザインと関わろう
myoshiro
0
560
Other Decks in Design
See All in Design
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
5.4k
Figma MCPを活用するためのデザインハンドブック
vivion
3
10k
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
230
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
200
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
170
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
330
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
190
デザインするために「多様性」について考える
iflection
0
230
Franks Myth
gfht1
2
440
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.5k
Storyboard Exercise: Chase Sequence
lynteo
1
240
CULTURE DECK/Marketing Director
mhand01
0
960
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
950
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
150
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
New Earth Scene 8
popppiees
1
1.7k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
820
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
630
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Thoughts on Productivity
jonyablonski
75
5.1k
Transcript
։ൃॳظ͔Β͡ΊΔ ελΠϧΨΠυ 1 ϗεςΟϯάࣄۀ෦σβΠφʔদຊ๕
2 দຊ๕ !CFOOLZPVHJSBJ d
ϜʔϜʔυϝΠϯʂΧʔτԽʂ wυϝΠϯൢചͷ ฮαΠτ wຊ/P
͓ͷ༰ ΧʔτԽͰͷಋೖͷ ϦϦʔεޙͷධՁͷ 4 ελΠϧΨΠυʹ·ͭΘΔ
ຊʹೖΔલʹ 5
ελΠϧΨΠυͱ ৭λΠϙάϥϑΟ σβΠϯϧʔϧͷఆٛ 6 σβΠϯɾઃܭͷҰ؏ੑΛอͭͨΊʹඞཁ 6*ɾίϯϙʔωϯτͷ σβΠϯύλʔϯҰཡ IUUQVYNBJMDIJNQDPNQBUUFSOTGPSNT IUUQTXXXMJHIUOJOHEFTJHOTZTUFNDPNHVJEFMJOFTUZQPHSBQIZ
ࠓճͷϙΠϯτ ࠓ·ͰɺϦϦʔεޙʹߏங͞ΕΔ͜ͱ͕ଟ͍ҹɻ ࠓճ ։ൃॳظ͔Βߏஙʂ 7 ʮελΠϧΨΠυͷߏஙλΠϛϯάʂʯ
ΧʔτԽͰͷಋೖͷ 8
ΧʔτԽϓϩδΣΫτ
w υϝΠϯΛෳߪೖͰ͖ΔΧʔ τػೳͷ։ൃ w ڥ͕ͭʹ͔ΕͯΔ w Χʔτػೳ3BJMT w طଘαΠτ1)1 ΧʔτԽϓϩδΣΫτ
ελΠϧΨΠυಋೖͷཧ༝ w $44ઃܭͷจԽΛ͔ࠜͤΔ w ػೳՃ͕සൟͳαʔϏεɻΤϯδχΞ͕ϑϩϯτ࣮ Ͱ͖ͨ΄͏͕ྑ͍ w υϝΠϯͷߪೖϑϩʔෳࡶɻॳظʹઃܭ͠ͳ͍ͱഁ͠ ͦ͏ɻ w
։ൃऀؒͷίϛϡχέʔγϣϯπʔϧͱͯ͠ظͯͨ͠ 11
ελΠϧΨΠυͷπʔϧબఆ 12
ελΠϧΨΠυͷπʔϧબఆ ಋೖ͍͢͜͠ͱ ૄ݁߹Ͱ͋Δ͜ͱ ͙͢ʹࣺͯΕΔ͜ͱ 13 ̏ͭͷબఆج४
'SBDUBM 14 IUUQGSBDUBMCVJME ಋೖ͍͢͜͠ͱ ૄ݁߹Ͱ͋Δ͜ͱ ͙͢ʹࣺͯΕΔ͜ͱ
15
ߏ w 3BJMTͷTBTTΛ͏ͨΊʹ(VMQͰUBTLΜͩ 16 3BJMT 'SBDUBM 4UZMFHVJEF (VMQ TBTT $44
(VMQͰελΠϧΨΠυΛىಈ͢Δͱ 3BJMTͷTBTT͔Β$44ΛCVJME
ఔ 17 σβΠϯ ϑϩϯτΤϯυ ελΠϧΨΠυ ϫΠϠʔɾϓϩτλΠϓ ڥߏஙɾ४උ ɾ$44ͷϕʔεઃܭߏங ɾίϯϙʔωϯτҰཡγʔτΛ࡞
ɾίϯϙʔωϯτ։ൃ Ͱ͖Δͱ͜ σβΠϯ σβΠϯͷөணख ɾΧϥʔɾλΠϙάϥϑܾఆ ɾίϯϙʔωϯτσβΠϯ ϖʔδσβΠϯ ֤ϖʔδͷαϯϓϧ࡞ 3BJMTө
18 ίϯϙʔωϯτͷΈ߹ΘͤελΠϧΨΠυͰઌʹ࡞
19 খ͍͞ίϯϙʔωϯτ͔Β େ͖ͳߏ
༨ஊ 20 ίϯϙʔωϯτҰཡγʔτΛ࠷ॳʹ࡞͢ΔͷΦεεϝ ݟੵΓ͍͢͠ λεΫͷࡉԽ શମײͷѲ ίϯϙʔωϯτઃܭͷԼॻ͖
21 ภࣥڰͷ͝ͱ͘ɺίϯϙʔωϯτΛϦετΞοϓ
22 ແࣄϦϦʔεʂʂ
ϦϦʔεޙͷධՁͷ 23
Α͔ͬͨ͜ͱ 24
σβΠφʔͱΤϯδχΞͷ ίϯϑϦΫτݮ 25 ! " ελΠϧΨΠυͰ ίʔσΟϯάʂ 3BJMTͰػೳ։ൃ ʹूதʂ ྫ͑ϩάΠϯը໘
όοΫͱϑϩϯτͷ։ൃڥ͕͔ΕͯΔͷͰόοςΟϯ ά͕ͳ͔ͬͨ
։ൃʹूதͰ͖Δ w ϓϩμΫτͷ༷ͷ੍ݶΛड͚ͣදࣔ֬ೝͰ͖Δ ྫ ϩάΠϯɺߪೖϑϩʔͳͲखଓ͖͕ඞཁͳը໘ 26 ! " ࡞ۀ͍ͨ͠ϖʔδΛ ͙͢ΈΕΔʂ
ϑΥϩʔ͕ݮͬͯ ։ൃʹूதͰ͖Δʂ
ϨϏϡΞʔબͼ͍͢ w ͜ΕΤϯδχΞʁσβΠφʔʁͱ͍͏໎͍͕ݮͬͨ w ڥ͕λεΫͷࡉԽΛଅ͢ϨϏϡʔϙΠϯτ͕໌֬ʹ ͳΔ 27 ! " ελΠϧΨΠυ্ͷߋ৽͔ͩΒ
σβΠφʹϨϏϡʔґཔ ػೳ։ൃ͕ϝΠϯ͔ͩΒ ΤϯδχΞʹϨϏϡʔґཔ
ίϛϡχέʔγϣϯऔΓ͔ͬͨ͢ w ٙ՝ΛελΠϧΨΠυΛΈͳ͕Β֬ೝͰ͖ͨ w Έͳ͕ΒΓͱΓ͢Δ͜ͱͰղܾ·Ͱ͕εϜʔζ 28 ! " ! !
" ςΩετϑΥʔϜͲ͜ʹ͓͘ͷʁ ͜͜Ͳ͏͢Δʁ
ஃͷσβΠϯमਖ਼ɾมߋʹରԠ ͔ͬͨ͢͠ w मਖ਼ରΛ͕͍͢͞͠ɻ w ίϯϙʔωϯτؒͷؔ࿈͕Έ͍͑͢ w मਖ਼ͷࡍʹదͳஅΛߦ͑ͨʢ͠ͷ͗͡Όͳ͍ରԠʣ 29 "
Ұ෦༷ΛΜΰϗΰϗʂ ͋ͷϘλϯϑΥʔϜͱϞʔμϧͰ ΘΕͯΔ͔Β ৽͘͠Ճ͠Α͏ʂ
30 ͜ͷؔੑͱ΄΅શͯͷΈ߹ΘͤΛ ၆ᛌͯ͠ΈΕΔ
ઃܭΛ่ͣ͞ϦϦʔεͰ͖ͨ w ஃͰ͖ͪΜͱରԠͰ͖ͨͷͰɺϦϦʔε࣌ઃܭ͕ ่Εͳ͔ͬͨʢ·ͬͨ͘Ͱͳ͍͚Ͳɻɻʣ 31 ! "
Α͔ͬͨ͜ͱ·ͱΊ 32 σβΠφʔͱ ΤϯδχΞͷ ίϯϑϦΫτݮ ։ൃʹूதͰ͖Δ ϨϏϡΞʔ બͼ͍͢ ίϛϡχέʔγϣϯ औΓ͔ͬͨ͢
ஃͷσβΠϯ मਖ਼ɾมߋʹ ରԠ͔ͬͨ͢͠ ઃܭΛ่ͣ͞ ϦϦʔεͰ͖ͨ
Α͔ͬͨ͜ͱ·ͱΊ 33 σβΠφʔͱ ΤϯδχΞͷ ίϯϑϦΫτݮ ։ൃʹूதͰ͖Δ ϨϏϡΞʔ બͼ͍͢ ίϛϡχέʔγϣϯ औΓ͔ͬͨ͢
ஃͷσβΠϯ मਖ਼ɾมߋʹ ରԠ͔ͬͨ͢͠ ઃܭΛ่ͣ͞ ϦϦʔεͰ͖ͨ ޮ্͕͕Δʂ ίϛϡχέʔγϣϯ ͕औΓ͍͢ ։ൃͷஃͰ ཧੑΛอͯΔʂ
՝ 34
՝ w ։ൃڥͰ͔͠ӾཡͰ͖ͳ͍ w ίϯϙʔωϯτͷॴΛ֮͑ͮΒ͍ w ຊՈͱ3BJMT͕ผڥͳͷͰελΠϧΨΠυ͕࿈ܞͰ͖ͳ͍ w TMJNͷม͕ඞཁ w
ελΠϧΨΠυͷ࡞Γ͕ଐਓԽͪ͠Όͬͨɻɻ 35 w ίετͱརӹͷόϥϯε
ίετͱརӹͷόϥϯε w ಋೖʹࡍͯ͠Ұ൪ͷ՝͔ w ࠓޙͷӡ༻Ͱ༗ޮੑΛࣔͤΔΑ͏ʹ͠ͳ͖Ό͍͚ͳ͍ 36
ελΠϧΨΠυΛॳظಋೖͯ͠Έͯ w ελΠϧΨΠυىͷ։ൃָ͕νϯʂ w ࠷ॳʹελΠϧΨΠυͰ࡞ΔΫη͕͍ͭͨ 37
ࢦ͢ελΠϧΨΠυʰυϦϒϯʱʂ 38 ελΠϧΨΠυ͕ϑϩϯτ։ൃͷىͱͳΔ
·ͱΊ w։ൃͷޮΞοϓʂ wίϛϡχέʔγϣϯʹ͑Δʁ wϦϦʔεͷஃʹڧ͍ʂ wελΠϧΨΠυΛ͏จԽ͕͖͍ࠜ͢ 39 ։ൃॳظ͔Βಋೖ͢Δͱʜ
·ͣؾܰʹ࢝ΊͯΈΔͱྑ͛͞ 40