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
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
260
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
130
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
570
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
佐藤千晶|ポートフォリオ
chimi_chia
0
220
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
530
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
Featured
See All Featured
Visualization
eitanlees
149
16k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Side Projects
sachag
455
43k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Agile that works and the tools we love
rasmusluckow
331
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Building Applications with DynamoDB
mza
96
6.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Speed Design
sergeychernyshev
32
1.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
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.
ࣰ࣭ా͞Μ͕ड͚͚·͢ɻ