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
84
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.4k
Other Decks in Design
See All in Design
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
70k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
940
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
290
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
ito aya Portfolio
itoaya116
0
100
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
0
220
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.7k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
140
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
210
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
270
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Statistics for Hackers
jakevdp
797
220k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Six Lessons from altMBA
skipperchong
27
3.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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.
ࣰ࣭ా͞Μ͕ड͚͚·͢ɻ