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
CSSフレームワークでつながる、デザイナーとフロントエンドエンジニア
Search
Maya Fujiwara
June 29, 2015
Design
0
89
CSSフレームワークでつながる、デザイナーとフロントエンドエンジニア
2015/06/29にリブセンス社内勉強会Technightでの発表資料です。
Maya Fujiwara
June 29, 2015
Tweet
Share
More Decks by Maya Fujiwara
See All by Maya Fujiwara
定性調査と定量分析をMixする、Mixed methodsの活用事例と有効性 #pmconf2021
mayalfs
1
3.6k
Other Decks in Design
See All in Design
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
570
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.6k
Liquid GlassとApp Intents
touyou
0
450
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
220
「UXとUIの違い」v2
shirasu3
0
260
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
810
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
3k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
770
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Six Lessons from altMBA
skipperchong
29
4k
What's in a price? How to price your products and services
michaelherold
246
12k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Scaling GitHub
holman
463
140k
Transcript
$44ϑϨʔϜϫʔΫͰͭͳ͕Δɺ σβΠφʔͱϑϩϯτΤϯυΤϯδχΞ 2015.06.29 Maya Fujiwara For ‘Technight’ at Livesense Inc.
Introduction UI/UX Designer at Livesense inc. ϑδϫϥϚϠ
Introduction ͱ͋Δɺ %FTJHOFSͱ'SPOUFOEFOHJOFFS͋Δ͋Δ Designer Front-end engineer
Introduction ͜ͷσβΠϯͰ͓ئ͍͠·͢ɻ ʢࠓͷτϨϯυΛΓࠐΜͩ࠷৽ͷσβΠϯɺέؒ ҧ͍ͳ͍ʂૣ࣮ͯ͘͠ʂʣ Designer Front-end engineer
Introduction Designer Front-end engineer ϜϦͰ͢ɻ ʢ͜ͷϘʔμʔΛQYಈ͔͚ͩ͢Ͱɺ$44͕͏ߦ૿ ͑ΔΜͩΑʔɻ൚༻ੑߟ͑ΖʂͲΜͲΜෳࡶʹͳΔʂʣ
Introduction Designer Front-end engineer Ͳ͏͓ͯ͠ئ͍͠·͢ʂ ʢͰ͖ͳ͍Θ͚ͳ͍ͬ͠ΐʂʣ
Introduction Designer Front-end engineer ϜϦͰ͢ɻ ʢͰ͖ΔͰ͖ͳ͍ͷ͡Όͳ͍ΜͩΑʂ ࠓޙͷӡ༻ͷ͡Όʂʣ
Introduction Designer Front-end engineer ϜΩʔʂʂʂʂ
Introduction Introduction WT ൚༻ੑ σβΠϯੑ
Introduction Έ͍ͨͳ͜ͱ͕Α͋͘Δ̎৬छͰ͕͢ɺ ͓ޓ͍͕าΈدΕͨࣄྫΛհ͠·͢ɻ
Case study ΧϦϧ ݄ʹϦϦʔεͨ͠৽͍͠ିαΠτ ༩͑ΒΕͨظؒ̒िؒ ৄ͘͠ bཁ݅Λࣺͯͯݕূʹग़Α͏ɻିใαΠτΧϦϧͰͷԾઆ ݕূܕγεςϜ։ൃ`
Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά ฏߦͯ͠ߦ͏ ϑϩϯτ։ൃͷલఏ݅
Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά ฏߦͯ͠ߦ͏ ͜Εෆ͚҆ͩͲ ϑϩϯτ։ൃͷલఏ݅
Case study #PPUTUSBQͰٸ͍Ͱ࡞Δ ؒʹ߹Θͳ͍ͷͰɺσβΠϯͱϑϩϯτΤϯυίʔσΟϯά ฏߦͯ͠ߦ͏ ίϨةݥʂʂ ϑϩϯτ։ൃͷલఏ݅ ͜Εෆ͚҆ͩͲ
Case study ࠓ·Ͱͷ8PSLqPX Designer Front-end engineer σβΠϯͰ͖·ͨ͠ ͡Ό࣮͋࢝Ί·ʔ͢ Ұํ௨ߦ
Case study #PPUTUSBQΛ͏ࠓճͷ8PSLqPX Designer Front-end engineer ϞδϡʔϧͷΧελϚΠζσ βΠϯ͕Ͱ͖࣍ୈɺϞδϡʔ ϧผʹ14%Λ͠·͢ 8'Λϕʔεʹ#PPUTUSBQͷ
ϞδϡʔϧΛͬͯΈ࢝Ί ·͢ ಉ࣌ਐߦ
Case study Designer Front-end engineer Bootstrap͏͚ͲɺσβΠφʔ͕Bootstrapͷ ϧʔϧΛແࢹͨ͠σβΠϯ͖࣋ͬͯͨΒͲ͏͠ Α͏ɾɾɾ
Case study Designer Front-end engineer σβΠϯ͕ऴΘͬͯͳ͍ஈ֊ͰίʔσΟϯάΛ ࢝ΊͯΒͬͯɺ్தͰσβΠϯมߋͯ͠େख ΓˍΊͪΌΊͪΌౖΒΕͨΓͦ͠͏ɾɾɾ
Case study Designer Front-end engineer
Case study 1SPKFDUTUBSU ͱ͔ͳΜͱ͔ݴͬͯΒΕͳ͍͠
Case study σβΠϯϧʔϧΛҰॹʹߟ͑Δ πʔϧΛ׆༻ ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
Case study σβΠϯϧʔϧΛҰॹʹߟ͑Δ πʔϧΛ׆༻ ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
Case study 'SPOUFOEFOHJOFFS͕·ͣఏҊ Designer Front-end engineer
Case study 'SPOUFOEFOHJOFFS͕·ͣఏҊ Designer Front-end engineer ͜͏͍͏ײ͡ͰσβΠϯͰ͖·ͤΜ͔ʁ
Case study Designer Front-end engineer ϘλϯͷαΠζجຊɺ ̐ύλʔϯͰ͓ئ͍͠·͢ɻ
Case study Designer Front-end engineer ϘλϯͷαΠζجຊɺ ̐ύλʔϯͰ͓ئ͍͠·͢ɻ ϓϥΠϚϦΧϥʔ͕ܾ·Εɺτʔ ϯ4"44্Ͱനͱࠇ͕ࠞͥΒΕΔ ͷͰɺ৭ˋͷτʔϯͰࢦఆͰ͖
·ͤΜ͔ʁ
Case study ϓϥΠϚϦΧϥʔ͕ܾ·Εɺτʔ ϯ4"44্Ͱനͱࠇ͕ࠞͥΒΕΔ ͷͰɺ৭ˋͷτʔϯͰࢦఆͰ͖ ·ͤΜ͔ʁ Designer Front-end engineer ϘλϯͷαΠζجຊɺ
̐ύλʔϯͰ͓ئ͍͠·͢ɻ 'POUTJ[FQYQYQY ͷQYඈ͠ͰͰ͖·͔͢ʁ
Case study Designer Front-end engineer #PPUTUSBQͷϧʔϧʹԊΘͳ͍͜ͱ ͍͍͚ͬͯͲɺ·ͣ૬ஊɻ
Case study Designer Front-end engineer ͜͜ڧ͘ૌٻ͍ͨ͠ͷͰɺϧʔϧ ͔Β֎ΕͨσβΠϯʹ͍ͨ͠Ͱ͢ #PPUTUSBQͷϧʔϧʹԊΘͳ͍͜ͱ ͍͍͚ͬͯͲɺ·ͣ૬ஊɻ
Case study ൚༻తͰɺͭັྗతͳσβΠϯΛҰॹʹࡧ͢Δɻ Designer Front-end engineer
Case study σβΠϯϧʔϧΛҰॹʹߟ͑Δ πʔϧͷ׆༻ ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
Case study 14%ϑΝΠϧΛϦΞϧλΠϜͰγΣΞͰ͖Δ ‘Adobe creative cloud’
Case study Case study
Case study 4UPSBHFܦ༝ͰϦΞϧλΠϜ14%γΣΞ ϒϥβ্͔ΒϑΝΠϧͷϓϨϏϡʔ ϒϥβ্ͰϫϯΫϦοΫͰը૾ͷΓग़͠ όʔδϣϯཧFUD Adobe creative cloud "EPCFΞΧϯτ͕͋Δͱɺશ෦ແྉͰ͑Δʂ
Case study σβΠϯϧʔϧΛҰॹʹߟ͑Δ πʔϧͷ׆༻ ͍ͭ͘͜͠Β͍ͷίϛϡχέʔγϣϯ Points
Case study ͱʹ͔͘ʹਐḿڞ༗
̒िؒͷ ɹઓ͍ͷɾɾɾ
Case study ੜ·Εͨͷ
Case study ͦͦ͜͜#PPUTUSBQ͗͢ͳ͍ݟͨͰɺ #PPUTUSBQͷετϥΫνϟʔҡ࣋ͨ͠ ିαΠτ screen size 640 x1136 resolution
326 ppi (pixels per inch)
Case study ෭࢈
Case study Color scheme / SASS function $brand-primary: #38b16e; a
{ background-color: mix(#ffffff, $brand-primary, 20%); }
Case study Styleguide %button.btn.btn-default.btn- icon.btn-icon-train %button.btn.btn-default.btn- icon.btn-icon-area %button.btn.btn-default.btn- icon.btn-icon-search
Conclusion ײ
Conclusion ϦϦʔεʹؒʹ߹ͬͨɻ Designer Front-end engineer
Conclusion σβΠϯੑͱ൚༻ੑͷόϥϯε͕औΕͨ ϓϩμΫτʹͳͬͨɻ Designer Front-end engineer
Conclusion Designer Front-end engineer #PPUTUSBQΛͬͨϫʔΫϑϩʔͷதͰ ൃ͋͠͏ͷ͔ͱࢥ͚ͬͯͨͲɺ ҙ֎ͱ͓ޓ͍ͷཧղ͕ਂ·ͬͨɻ
Introduction WT ൚༻ੑ σβΠϯੑ
Conclusion Designer Front-end engineer σβΠϯͷҙࢥܾఆʹ ਂؔ͘Θͬͨ $44ϑϨʔϜϫʔΫ ΑΓ൚༻ੑͷߴ͍σβΠϯͱ ͳʹ͔ɺཧղ͕ਂ·ͬͨ
Introduction WT ൚༻ੑ σβΠϯੑ
Conclusion WT ൚༻ੑ σβΠϯੑ
Introduction ൚༻ੑ σβΠϯੑ
Conclusion ·ͱΊ
Conclusion ࣌ؒॖͷతͰ$44ϑϨʔϜϫʔΫΛ ಋೖ͚ͨ͠Ͳ Designer Front-end engineer
Conclusion ৬छΛ͑ͨίϛϡχέʔγϣϯͱཧղ͕ ੜ·ΕΔޮՌ͕͋Γ·ͨ͠ʂ Designer Front-end engineer
Conclusion ΑΓԣஅతͰϑϥοτͳ։ൃΛ࣮ݱ͢Δ ̍πʔϧͱͯ͠Φεεϝ͠·͢ɻ Designer Front-end engineer
$44ϑϨʔϜϫʔΫͰͭͳ͕Δɺ σβΠφʔͱϑϩϯτΤϯυΤϯδχΞ
THANK YOU.
ࣰ࣭ా͞Μ͕ड͚͚·͢ɻ