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
CULTURE DECK/Frontend Engineer
mhand01
0
980
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
320
CULTURE DECK/Creative Director
mhand01
0
890
maki setoguchi
maki_setoguchi
0
720
Signull 団体説明資料
signull
0
380
社員の意識を高めたブランド浸透施策の裏側!
mixi_design
PRO
0
100
Shaolin_Showdown
solmetts
0
360
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
0
130
TWCP#21 UXデザインと哲学のはなし
shinn
0
310
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
130
Figma MCPを活用するためのデザインハンドブック
vivion
4
11k
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
120
Featured
See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
170
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
280
A better future with KSS
kneath
240
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
A Soul's Torment
seathinner
5
2.5k
ラッコキーワード サービス紹介資料
rakko
1
2.6M
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
220
Raft: Consensus for Rubyists
vanstee
141
7.4k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
9.9k
Color Theory Basics | Prateek | Gurzu
gurzu
0
250
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
220
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