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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Maya Fujiwara
June 29, 2015
Design
0
90
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.7k
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
TWCP#21 UXデザインと哲学のはなし
shinn
0
270
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
250
AIでデザインをつくる:基礎編
kenichiota0711
3
2.5k
公開スライド)熊本市様-電子申請中級編
garyuten
0
840
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
uto
0
180
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
680
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
310
mount_company_profile
mount_inc
0
5k
Shaolin_Showdown
solmetts
0
290
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7.1k
Featured
See All Featured
Test your architecture with Archunit
thirion
1
2.2k
How to Ace a Technical Interview
jacobian
281
24k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
110
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
120
Paper Plane (Part 1)
katiecoart
PRO
0
4.3k
The Invisible Side of Design
smashingmag
302
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
55
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Building the Perfect Custom Keyboard
takai
2
690
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.
ࣰ࣭ా͞Μ͕ड͚͚·͢ɻ