Webデザインのココ! 押さえておこう

2014/6/12 開催 ハッピーデジタル主催　＠マイコミ
allWebクリエイター塾　大本あかね

Transcript

1. 8FCσβΠϯͷίίʂ
 ԡ͓͑ͯ͜͞͏
2. http://all-web.org/
4. ΞδΣϯμ ❖ 8FCσβΠϯͱ͸ʁ
   ❖ $44Ͱ࡞ΔσβΠϯ
   ❖ ঁࢠ޲͚ͷσβΠϯϝιου
5. WebσβΠϯͱ͸ʁ 1SJOU 8FC
6. 1IPUPTIPQ
7. ໰୊
8. ໰୊
9. ւ֎Ͱ΋ಉ͜͡ͱΛ
10. εϚϗ஀ੜ
11. ϨεϙϯγϒWebσβΠϯ
12. WebͰͷσβΠϯ
13. σβΠϯʹUI
14. σβΠϯʹUI ❖ ৘ใઃܭ
    ❖ ૢ࡞ੑ
    ❖ ΤϞʔγϣϯʢײ৘ʣ
    ❖ ετʔϦʔςϦϯά
    ❖ ίϯςΩετઃܭɹɹ 6*ϢʔβʔΠϯλʔϑΣΠε
15. Google΋ॏཁͱ
16. https://developers.google.com/speed/pagespeed/insights/
18. Google΋ॏཁͱ ❖ ϐϯνΠϯΞ΢τͤ͞Δ
 6*͸εϐʔυ͕ૣͯ͘΋

    
    
    
    
    
    
    Λͤͯ͞൑அ͢Δ http://all-web-blog.blogspot.jp/2014/05/google.html BMM8FCΫϦΤΠλʔक़ͷϒϩάͰ຋༁͍ͯ͠·͢ ʴ ˎˎඵ
19. ϞόΠϧϑΝʔετ
21. มԽ͢Δ։ൃπʔϧ ❖ खॻ͖Ͱ6*Λ࡞੒
    ❖ ϢʔβʔಋઢΛઃఆ͢Δ
22. https://prottapp.com/
23. CSSͰ࡞ΔσβΠϯ http://codepen.io/heero/pen/wylhv
24. http://codepen.io/heero/pen/wylhv
25. CSS͸ઃܭ͕ॏཁ ❖
    σβΠϯ͸$44Ͱʂ
    ❖ 4B44ͳͲ࢖͏લʹઃܭํ๏Λֶ΅͏
    ❖ σβΠϯ࣮૷͕Ͱ͖Ε͹ݴ͍༁Ͱ͸ͳ͍ʂ
    ❖ ύϑΥʔϚϯεʹ΋഑ྀ͢Δ
26. ঁࢠ޲͚ͷσβΠϯϝιου σβΠϯͷཁૉͬͯͳʹʁ ʁ
27. ঁࢠ޲͚ͷσβΠϯϝιου ΧϥʔɺϨΠΞ΢τɺݟͨ໨ɹͳͲͳͲ σβΠϯͷཁૉͬͯͳʹʁ
28. ϨΠΞ΢τ ͳΜͷͨΊʹඞཁ ʁ
31. ϨΠΞ΢τ ❖ ݟ΍͘͢͢Δ
    ❖ ৘ใΛૣ͘ήοτͰ͖Δ
33. ϨΠΞ΢τ ❖ άϦοτΛἧ͑Δ
35. Before After
36. ݟͨ໨
37. ҹ৅Ͱਓ͸ߦಈ͢Δ
38. 20ʙ40ࡀ୅Λλʔήοτ
39. ڝ߹
40. λʔήοτʹΑͬͯมԽ
41. ঁੑ޲͚ ❖ Χϥʔ
    ❖ λΠϙάϥϑΟʔ
    ❖ ࣸਅ
 ɹɹɹɹɹɹɹɹɹͳͲ
46. σβΠϯͯ͠Έ·ͨ͠ʢসʣ
47. amzon WOMAN
48. λʔήοτ৭ͳͲ͸࠷ޙʹ ❖ ৘ใઃܭ
    ❖ ૢ࡞ੑʢ6*
    ʣ
    ❖ Ϣʔβʔಋઢʢΰʔϧઃఆʣ ΢ΣϒαΠτ͸ʢ৘ใऔಘʣ໨తΛ࣋ͬͯ͘Δഔମ
49. ·ͱΊ ❖ 8FCͱ͍͏σόΠεΛཧղ͠Α͏
    ❖ ࣌୅ʹ߹੍ͬͨ࡞ϑϩʔΛมߋ͍ͯ͜͠͏
    ❖ λʔήοτʹ߹Θͤͨద੾ͳσβΠϯΛߦ͓͏
50. པΒΕΔ8FC୲౰ऀʹͳΔ
    ɹ(PPHMF΢ΣϒϚελʔπʔϧʮ߈ུʯڭຊ
    ɹݕࡧΤϯδϯ্Ґදࣔ΍ݕࡧྲྀೖͷ૿ՃʹඞਢͷπʔϧΛ࢖͍͜ͳͤʂ