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
セブンデックス カルチャーブック
sevendex
0
4.3k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
550
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
NAHO SHIMONO_Portfolio2025
nahohphp
0
220
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
300
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
250
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
670
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
930
Building foundations 堅牢なデザイントークンの設計
hilokifigma
0
980
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
GraphQLとの向き合い方2022年版
quramy
44
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Code Review Best Practice
trishagee
67
18k
Typedesign – Prime Four
hannesfritz
41
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Agile that works and the tools we love
rasmusluckow
328
21k
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.
ࣰ࣭ా͞Μ͕ड͚͚·͢ɻ