HELLO! WEB! TOKYO #1 ゼロから始めるWebデザイン

「ゼロからはじめるWebデザイン」をテーマにデザイナー向け勉強会が21cafeで開催されました。

Webデザイナーの仕事に興味がある、将来Webデザインの仕事に携わってみたいという方向けに開かれた勉強会での登壇資料。

Transcript

1. ࠤ౻
   λΧΞΩ Takaaki Sato LIGINC. Designer. HELLO! WEB! TOKYO #1 θϩ͔Β࢝ΊΔWebσβΠϯ
2. ࠤ౻
   λΧΞΩ Takaaki Sato ͸͡Ί·ͯ͠ɻ @sato_tkaaki LIGINC. House development team / Designer. 01
3. LIGͬͯͳΜͷձࣾͳͷʁ LIGͬͯʁ 02
4. LIGͬͯʁ ্໺ʹ͋Δ੍࡞ձࣾ ͪΐͬͱมΘͬͨ  03
5. ͬ͘͟Γઆ໌ 01ɾɾɾWeb੍࡞
   02ɾɾɾLIGϒϩά
   03ɾɾɾγΣΞΦϑΟε
   04ɾɾɾస৬
   05ɾɾɾγϣοϓ
   06ɾɾɾήετϋ΢ε LIGINC. 04
6. Web੍࡞ 05
7. LIGϒϩά 06
8. γΣΞΦϑΟε ͍͍ΦϑΟε 07
9. స৬(Poole) 08
10. γϣοϓ(LIGLIKE) 09
11. ήετϋ΢ε(LAMP) 10
12. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ϝϯόʔ͸ʁ 11
13. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ͍͍ͩͨ100ਓ͘Β͍ 12
14. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ࠭඿ʹຒ·ͬͯരস͢Δࣾ௕ 13
15. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ෦Լͷ෦԰Λ࠭඿ʹͯ͠രস͢Δࣾ௕ 14
16. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ܦඅͰউखʹϋϫΠ΁ߦ͘৽ଔ 15
17. ݸੑ๛͔ͱ͔ͦΜͳΜ͡Όͳ͍ɻ ͦͷଞ 16
18. ͜Μ͚ͩPR͢Ε͹े෼Ͱ͠ΐ͏ɻ ձࣾ঺հΦϫϦ 17
19. ࠤ౻λΧΞΩ
    24ࡀ Θͨ͠ͷ࢓ࣄ 18
20. ؆୯ʹݴ͏ͱ ޾͍ʹ΋σβΠφʔͱ͍͏ݞॻΛ͍͍ͨͩͯ
    ͓࢓ࣄ͓ͯ͠Γ·͢ɻ 19
21. House development team / Designer. LIGϒϩάͷσβΠφʔͰ͢ɻ 20
22. ࡞͍ͬͯΔ΋ͷ
    
    ΞΠΩϟον 21
23. ࡞͍ͬͯΔ΋ͷ
    
    όφʔ 22
24. ࡞͍ͬͯΔ΋ͷ
    
    ϝΠϯϏδϡΞϧ 23
25. ࡞͍ͬͯΔ΋ͷ
    
    ͦͷଞʙ೥լঢ়ͳͲ 1೥൒ɺ1ਓͰ΍͖ͬͯ·ͨ͠ɻ 24
26. σβΠφʔʹͳΔલ ࠓʹࢸΔ·ͰͷΘͨ͠
    
    Λͬ͘͟Γ࿩͠·͢ɻ 25
27. σβΠφʔʹͳΔલ ࡀʙࡀ 26
28. σβΠφʔʹͳΔલ ֆͷઌੜͩͬͨ૆෕฼͔Β
    ֆ͸ͳΜͨΔ͔Λڭ͑͜·Ε·ͨ͠ 27
29. σβΠφʔʹͳΔલ ࡀʙࡀ 28
30. σβΠφʔʹͳΔલ ʰ໺ٿʱ͔͠΍ͬͯͳ͍ʂ 29
31. ͭ·Γ σβΠφʔʹͳΔલ͸ ಛʹඒज़΍σβΠϯͷֶߍ΁͸ߦͬͯ·ͤΜ 30
32. ͦΜͳඇσβΠφʔͩͬͨΘ͕ͨ͠ ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔
    ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ 31
33. ͦΜͳඇσβΠφʔͩͬͨΘ͕ͨ͠ ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔
    ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ 32
34. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ ͖͔͚ͬ͸ 33
35. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ ֶੜ࣌୅ʹ࡞ͬͨ໺ٿνʔϜͷαΠτ 34
36. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ ͦͷଞʹԣஅນ΍ϩΰͷσβΠϯ΋खֻ͚·ͯ͠
    lͳʹ͔zΛ࡞Δ໘ന͞ͱୡ੒ײ 35
37. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ ͬ͘͘͢͟͝Γͱɺ
    σβΠφʔ͍͍ͬͯͳͬͯࢥ͍·ͨ͠ɻ 36
38. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ ࠓߟ͑Δͱʜ 37
39. ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔ lσβΠφʔzͱ͍͏ݞॻ͕΄͔͚ͬͨͩ͠ͳͷ͔΋ 38
40. ͦΜͳඇσβΠφʔͩͬͨΘ͕ͨ͠ ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔
    ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ 39
41. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ಛʹԿ΋΍ͬͯͳ͍ɻ 40
42. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ͩͬͯ 41
43. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ lσβΠφʔzͱ͍͏ݞॻ͕΄͔͚͔ͬͨͩͩ͠Β
    σβΠφʔͱ͍͏৬छʹಌΕͯͨ 42
44. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ σβΠφʔʂ 43
45. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ σβΠφʔʂ ͱҰݴͰ͍ͬͯ΋͞·͟·ͳͷʹɻ ຊ౰ʹແ஌ͩͬͨ %(σβΠφʔ ϓϩμΫτσβΠφʔ 6*
    σβΠφʔ ΞʔτσΟϨΫλʔ άϥϑΟοΫσβΠφʔ ΠϯςϦΞσβΠφʔ ۭؒσβΠφʔ ΤσΟτϦΞϧσβΠφʔ 69σβΠφʔ 44
46. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ͦΜͳࢲ͕ͱͬͨߦಈ͸ɺ 45
47. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ৽ଔͰೖͬͨձࣾͰͻͨ͢Β
    ʮσβΠφʔ͕΍Γ͍ͨʯͱ࠙ئ͠·ͨ͠ 46
48. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ͘͢͝׮༰ͳࣾ௕͞ΜͰɺ
    ʮ͍͍Αʯͬͯɻ 47
49. Կ͕ݴ͍͍͔ͨͱ͍͏ͱɺ
    ߦಈྗͬͯҰ൪େࣄͰ͢ΑͶͬͯ͜ͱɻ 48 ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ
50. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ͱ͍͏͜ͱͰ 49
51. ͦΜͳඇσβΠφʔͩͬͨΘ͕ͨ͠ ᶃͳͥσβΠφʔΛ໨ࢦͨ͠ͷ͔
    ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ 50
52. ᶄσβΠφʔʹͳΔͨΊʹԿΛ΍͔ͬͨ ʮσβΠφʔʹͳΓ͍ͨʯ
    ͱݴ͚ͬͨͩ 51
53. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ ͨͩ͠ 52
54. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ lͦΕz͸͋͘·Ͱ΋ݞॻͰ͢ 53
55. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ ࠓ͸ 54
56. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ ࣗ෼͸zԿ͕Ͱ͖ΔσβΠφʔzͳͷ͔ʁ 55
57. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ ࣗ෼͸zԿ͕΍Γ͍ͨσβΠφʔzͳͷ͔ʁ 56
58. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ z͍͍σβΠφʔzͱ͸Կͳͷ͔ʁ 57
59. ੖ΕͯσβΠφʔʹͳΕ·ͨ͠ zσβΠφʔzͱͯ͠ੜ͖͍ͯ͘ʹ͸ʁ 58
60. ೰Ήຖ೔Ͱ͢ ೔ʑ໛ࡧத 59
61. πέ͕ճͬͯ͘Δ͓͓ͧ σβΠφʔʹͳΔલͷ४උΛશવ΍ͬͯͳ͔ͬͨ෼ 60
62. πέ͕ճͬͯ͘Δ͓͓ͧ ࣮ࡍʹσβΠφʔͱͯ͠ಇ͖ॳΊ͔ͯΒ͸ 61
63. πέ͕ճ͖͓͓ͬͯͨͧ ͬͬͬ͘͢͝ɺٕज़Λຏ͖·ͨ͠ɻ
    ٕज़͸ཪ੾Βͳ͍ 62
64. ٕज़ྗ͕ͳ͍͜ͱʹ͸࢝·Βͳ͍ ۩ମతʹԿΛ΍͖ͬͯͨͷ͔͸ 63
65. ޙճ͠Ͱ͝ΊΜͳ͍͞ ύωϧσΟεΧογϣϯ
    ͱ
    ࠙਌ձͰ͓࿩Ͱ͖Ε͹ͱࢥ͍·͢ 64
66. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ·ͱΊ 65
67. ·ͱΊ 28 ɾLIGϒϩάͷσβΠφʔ
    ɾ3೥લ·Ͱ͸໺ٿ͔͠΍ͬͯͳ͔ͬͨ
    ɾͬ͘͟Γɺ࡞Δͷָ͍͠ͳ
    ɾσβΠφʔͬͯಌΕΔ
    ɾσβΠφʔͱ͍͏ݞॻ͸؆୯ʹखʹೖΔ
    ɾͳΜʹͤΑߦಈྗͬͯେࣄ
    ɾz͍͍zσβΠφʔʹͳΖ͏
68. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ