Webサイトの作り方

Transcript

1. 8&#αʔϏε͕Ͱ͖Δ·Ͱ Plan, Sketch, Coloring, Decide Guideline, Comprehensive Layout, Coding ϏϏϏοτࣾ಺ษڧձ
   
2. Plan, Sketch, Decide Guideline, Comprehensive Layout, Coding ϓϥϯɺεέονɺΨΠυϥΠϯɺΧϯϓɺίʔσΟϯά
3. Plan
4. Plan ͲͷΑ͏ͳαΠτʹ͍͔ͨ͠ߟ͑Α͏
5. Plan ͬͦ͘͞ΞΠσΞΛͩ͠·͘Γ͍ͨͱ͜ͱ͕ͩɾɾɾ
6. Plan ͔͕͜͜͠͠Ұ൪೉͍͠
7. Plan ͩ͠·ͬͨ͘ΞΠσΞΛ·ͱΊΔͷ͕೉͍͠
8. Plan μϝͳ1MBO͋Δ͋Δ
   w ͩ͠·ͬͨ͘ΞΠσΞΛޙ͔Βݟฦͯ͠΋ɺzͳͥͦΕ ͕ॻ͍ͯ͋Δͷ͔z͕·ͬͨ͘෼͔Βͳ͍
   w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍
   w ΞΠσΞͷ਌ࢠؔ܎͕෼͔Βͣɺ·ͱ·Βͳ͍
9. Plan ͦΜͳͱ͖͸9NJOEΛ࢖͏
   IUUQKQYNJOEOFU
10. Plan 9NJOEͱ͸ɺ͍ΘΏΔϚΠϯυϚοϓπʔϧ
11. Plan ϚΠϯυϚοϓͱ͸ɺӳࠃͷڭҭऀτχʔɾϒβϯ͕։ൃͨ͠૑଄తͳࢥߟٕज़ Ͱ͢ɻ
    ࣗ෼͕ߟ͍͑ͨςʔϚΛࢴͷதԝʹֆͰඳ͖ɺ͔ͦ͜Β์ࣹঢ়ʹࢬΛ৳͹ ͯ͠ɺΩʔϫʔυ΍ΠϝʔδΛܨ͛ͳ͕Βɺൃ૝Λ޿͍͖͛ͯ·͢ɻ
    ϚΠϯυϚο ϓ͸ɺ೴ʹຊདྷඋΘΔ৘ใॲཧϓϩηεΛ׆༻ͨ͠ࢥߟ๏Ͱ͢ɻ
    ࣮ࡍʹඳ͍ͯΈ Δͱɺ୭Ͱ΋ࢥߟ͕੔ཧ͞Εɺ࣍ʑʹൃ૝͕Θ͍ͯ͘Δ͜ͱʹڻ͖·͢ɻ
12. Plan 9NJOEͷը໘
13. Plan 9NJOEΛ࢖͏ϝϦοτ
    w ڞ༗ָ͕
    w ͳͥͦͷൃ૝ʹͳ͔ͬͨΛτϨʔεͰ͖Δ
    w ΞΠσΞΛߏ଄ʹམͱ͠ࠐΊΔ
14. Plan ΞΠσΞΛ֊૚Խ͢Δ
15. Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏ଄ʹ౰ͯ͸Ί͍ͯ͘
16. Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏ଄ʹ౰ͯ͸Ί͍ͯ͘
    w Ұ൪࠷ॳͷϖʔδͰ͸ԿΛ͢Δͷ͔ɾɾɾ
    w ϖʔδ୯ҐͰ΍ΕΔ͜ͱͷܾఆΛ͢Δ
    w ͜͜ͰΞΠσΞΛ࡟Γ࢝ΊΔ
    w ͪͳΈʹɺʮཁ݅ఆٛʯͱݺ͹ΕΔ΋ͷʹ͍ۙ࡞ۀ
17. Plan ͜ͷ࡞ۀ͸ɺσΟϨΫτϦϚοϓ੍࡞ͱݺ͹ΕΔ
    αΠτͷઃܭਤΈ͍ͨͳ΋ͷͰ͢
18. Plan σΟϨΫτϦϚοϓ͸͖ͬͪΓͱͭ͘Ζ͏ɻ
    9NJOE΍$BDPPͳͲΛ࢖͏৔߹͕ଟ͍Ͱ͢ɻ
19. Plan ͜͜·Ͱ͕1MBOͰ͢ɻ1MBO͕͏·͍͔͘ͳ͍ͱɺ
    ࣍ͷ4LFUDIͰ͚͜ΔͷͰ஫ҙɻ
20. Sketch
21. Sketch ϖʔύʔϓϩτλΠϓΛͭ͘Ζ͏
22. ϖʔύʔϓϩτλΠϓͱ͸ɺ
    8FCϖʔδ΍ΞϓϦͷେ·͔ͳίϯςϯπ΍ϨΠΞ ΢τΛࢴʹखॻ͖ͨ͠΋ͷɻओʹϨΠΞ΢τͷ֬ೝɺϝχϡʔߏ੒ͷ֬ೝɺཁૉ ͷڧऑͷ֬ೝͳͲΛ໨తʹ࡞੒͢Δɻϖʔδຕͱͯ͠࡞੒͍ͯ͘͠ɻ Sketch
23. Sketch ཁ͸͜ΜͳͷͰ͢
24. Sketch
25. Sketch 1MBOͰͭͬͨ͘σΟϨΫτϦϚοϓΛ΋ͱʹɺ࣮ࡍͷαΠτ ΍ΞϓϦͷσβΠϯΛΠϝʔδͨ͠ϥϑεέονΛॻ͍͍ͯ ͜͏ɻ
26. Sketch ͜ͷεςοϓΛܦͳ͍ͱɺ͋ͱͰσβΠϯͷਗ਼ॻ σβΠϯΧ ϯϓ੍࡞ Λͨ͠ͱ͖ʹΤϯδχΞͱ͔σΟϨΫλʔ͔Βʮͳ ʹ͜ΕʂʯͱͳΔ͜ͱ΋ɾɾɾ
27. μϝͳ4LFUDI͋Δ͋Δ
    w ϖʔύʔϓϩτλΠϓΛݟͯ΋ɺͲͷϖʔδ͔͙͢ʹ ෼͔Βͳ͍
    w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍
    w ͖͋Β͔ʹ࣮ݱෆՄೳ Sketch
28. Sketch ͜͜͸εϐʔυॏࢹɻڞಉ࡞ۀऀ͕෼͔ΔϨϕϧͷ៉ྷ͞Ͱ े෼ɻ
29. Sketch ͻͱ௨Γॻ͖ऴΘͬͨΒɾɾɾ
30. Sketch ը໘ભҠਤͱݺ͹ΕΔ΋ͷΛͭ͘Γ·͢ɻ
31. ը໘ભҠਤͱ͸ɺը໘ͷߏ੒Λද͢ਤͷͻͱͭͰɺը໘͕ͦͷΑ͏ͳॱংͰදࣔ ͞ΕΔ͔ɺ͋Δ͍͸ը໘Ͳ͏͕ͦ͠ͷΑ͏ͳؔ࿈ੑΛ͍࣋ͬͯΔͷ͔Λࣔͨ͠ਤ ղͷ͜ͱͰ͋Δɻը໘ઃܭʹ༻͍ΒΕΔͷ΋Ͱɺը໘֊૚ਤͱڞʹද͞ΕΔ͜ͱ ΋গͳ͘ͳ͍ Sketch
32. Sketch ͋Δ෦ҐΛΫϦοΫ λοϓ ͨ͠ͱ͖ɺ࣍͸Ͳͷը໘ʹҠ ಈ͢Δͷ͔Λදͨ͠΋ͷɻ͜ΕΛͭ͘Δ͜ͱʹΑͬͯɺ Α͏΍͘αΠτ ΋͘͠͸ΞϓϦ ͷશମ૾͕͸͖ͬΓ͢ Δɻ
33. Sketch Ͳ͏΍ͬͯͭ͘Δ͔
34. Sketch ࢴΛฒ΂ͯܞଳͰࣸਅࡱͬͯɾɾɾͰ΋͍͍͚Ͳڞ༗ੑ ʹ೉͋Γ
35. ͦΜͳͱ͖͸1SPUUΛ࢖͏
    IUUQTQSPUUBQQDPN Sketch
36. ܞଳͰࡱͬͨϖʔύʔϓϩτλΠϓΛΞοϓϩʔυͯ͠ɺ ؆୯ʹը໘ભҠਤ͕࡞ΕΔ Sketch
37. Sketch
38. ࠷ޙʹɺڞಉ࡞ۀऀʹϨϏϡʔͯ͠΋Β͓͏ Sketch
39. ϨϏϡʔΛαϘΔͱͱΜͰ΋ͳ͍͜ͱʹɾɾɾ Sketch
40. ϨϏϡʔΛαϘΔͱɾɾɾ
    w ϝϯόʔ͔Βʮฉ͍ͯͳ͍ʯʮ஌Βͳ͍ʯϥογϡ
    w ࣮ݱෆՄೳͳઃܭͷ··ਐΉ͜ͱʹ
    w ΤϯδχΞ͕Կ࡞ͬͨΒ͍͍͔Θ͔Βͳ͍஍ࠈ
    w σβΠϯͷਗ਼ॻΛͭ͘Δͱ͖ʹΫοι͔͔࣌ؒΔ ͍ͪ ͍ͪݕ౼͠ͳ͕Β΍Δඞཁ͕͋ΔͨΊ Sketch
41. Sketch ࣍ͷϑΣʔζ͔Βຊ֨తͳσβΠϯͰ͢
42. Decide Guideline
43. Decide Guideline ໌ྎͳσβΠϯʹඞཁͳ΋ͷ
44. Decide Guideline σβΠϯΨΠυϥΠϯ
45. σβΠϯΨΠυϥΠϯ͕ͳ͍ͱɾɾɾ
    w )5.-Λ૊Ήͱ͖ʹɺϑΥϯταΠζ͕όϥόϥʹ
    w ڞಉ࡞ۀऀ͕ద౰ͳ৭Λ࢖ͬͪΌ͏
    w ༨ന͕͋ͬͯͳͯ͘ΩϞ͍
    w ࠶ݱੑ͕ͳ͍σβΠϯ
    w ࣌ؒΛ໌͚ͯ࡞ۀ͢Δͱ͖ɺຊਓ΋๨ΕΔ Decide Guideline
46. Decide Guideline ԿΛܾΊΔ͔
47. Decide Guideline Color Palette, Font, Font size, Margin size
48. Decide Guideline ΧϥʔύϨοτ͜Ε͚ͩԡ͑͞ͱ͚ฤ
49. Decide Guideline ࠇɺάϨʔɺϓϥΠϚϦΧϥʔΛͦΕͧΕ৭ܾͣͭఆ
50. Decide Guideline
51. Decide Guideline ͜Μͳײ͕͡ཧ૝
52. Decide Guideline جຊతʹ͸ͦͷ৭ͰΑ͠ɻ
    ৭͸૿΍ͯ͠΋͍͍͚Ͳɺ૿΍͗͢͠Δͱ
    Ϣʔβ͕໎͏ةݥੑ͕͋ΔͨΊ৻ॏʹɻ
53. Decide Guideline ϑΥϯτܾΊΑ͏ฤ
54. Decide Guideline ೔ຊޠϑΥϯτ
55. Decide Guideline ࢒೦ͳ͕ΒɺσόΠε͝ͱʹ࢖͑ΔϑΥϯτ͸
    ݻఆ͞Ε͍ͯΔɻ
56. Decide Guideline OS X, iOS
    ώϥΪϊ֯ΰ
    ώϥΪϊؙΰ
    0TBLB
    ᕟΰγοΫ
    Windows, Windows Mobile .4
    6*ΰγοΫ
    .4
    1ΰγοΫ
    .4
    1໌ே
    ϝΠϦΦ
    ᕟΰγοΫ
57. Decide Guideline ͭ·Γɺ.BDͰσβΠϯ͢Δ৔߹͸ώϥΪϊ֯ ΰҰ୒ͱͳΔɻώϥΪϊؙΰ͸͢͢Ί·ͤΜɻ
58. Decide Guideline ͡Ό͋ͳͥ͜ͷ࿩Λͯ͠Δ͔ͱ͍͏ͱɺԤจϑΥ ϯτ͸݁ߏࣗ༝ʹબ΂Δ͔Β
59. Decide Guideline
    Α͔ͭ͘ΘΕΔͷ͸ҎԼɻ
    Helvetica Neue Lato Roboto Slab ηϦϑମΛ࢖͏ʹͯ͠΋ɺͳΜ͔αϯηϦϑͬΆ͍ηϦϑ͕͔ͭΘΕΔ܏޲͋Γ
60. Decide Guideline ϑΥϯταΠζΛܾΊΑ͏
61. Decide Guideline ར༻͢ΔϑΥϯταΠζ͸ݫ֨ʹܾఆ͢Δ
62. Decide Guideline Զ͕Α͘࢖͏'POU
    TJ[F
    QY
    QY
    QY
    QY
    QY
    QY
    QY
    QY ͷഒ਺
63. Decide Guideline ༨നαΠζͱϘοΫεαΠζΛܾΊΑ͏
64. Decide Guideline ͨͱ͑͹ɺϘοΫεؒͷڑ཭ͳͲ͸͜͜ͰܾΊ ΔͱΑ͍
65. Decide Guideline Զ͸ͷഒ਺Λ࢖͍ͬͯ·͢
    QY
    QY
    QY
    QYͳͲΛΑ͘࢖͍·͢ 314px 314px 314px QY QY
66. Decide Guideline Կͷഒ਺Ͱ΋͍͍͚ͲɺͳΜΒ͔ͷഒ਺ʹ͢Δ ͱͱͨΜʹ੔߹ੑͷऔΕͨσβΠϯʹͳΔͨΊɺ ഒ਺Λ࢖ͬͯσβΠϯ͢Δ͜ͱΛ͓͢͢Ί͠· ͢ɻ
67. Comprehensive Layout
68. Comprehensive Layout ͍Α͍Αɺ׬੒඼ͱಉ͡ݟͨ໨Λͭ͘Δ޻ఔ
69. Comprehensive Layout σΟϨΫτϦϚοϓͱϖʔύʔϓϩτλΠϓ͕͋Ε͹
    ଎߈Ͱ׬੒ͤ͞Δ͜ͱ͕Մೳ
    ٯʹ͜͜Ͱ͕͔͔࣌ؒΔͬͯ͜ͱ͸े෼ʹܾΊ͕ͳ͞Εͯͳ͔ͬͨͱ͍͏͜ͱ
70. Comprehensive Layout ڞ༗ੑΛߟྀ͠ɺ*MMVTUSBUPS͔1IPUPTIPQ͍ͣΕ͔Ͱߦ͓͏
71. Comprehensive Layout Χϯϓͷ੍࡞ϧʔϧ
72. Comprehensive Layout ෦඼͔Βͭ͘Δ
73. Comprehensive Layout μϝͳ$PNQSFIFOTJWF
    -BZPVU͋Δ͋Δ
    w ϘλϯͳͲͷ෦඼ʹ͔͔Δυϩοϓγϟυ΢͕όϥό ϥ
    w ෦඼ͷ৭ͷ࢖͍෼͚͕࿦ཧഁ୼
74. Comprehensive Layout ͜Μͳ͜ͱΛආ͚ΔͨΊʹ෦඼͔Βͭ͘Δ
75. Comprehensive Layout ͬͦͭͬͯ͘͘͞ΈΑ͏
76. Coding
77. Coding Ұ൪ͱ͖ͬͭʹ͍͘Ͱ͋Ζ͏αΠτͷͭ͘Γํ
78. Coding )5.-ͷίʔσΟϯάΛߦ͏
79. Coding ·ͣ͸ྲྀΕ͔Β
80. Coding  ࡞ۀϑΥϧμΛͭ͘Δ
     ࡞ۀϑΥϧμͷதʹJOEFYIUNMͱ͍͏ϑΝΠϧΛͭ͘Δ
     ͦͷϑΥϧμͷதʹɺKT
    JNBHFT
    DTTͱ͍͏ͭͷϑΥ ϧμΛͭ͘Δ
     ͬͦ͘͞ίʔσΟϯάελʔτʂ
81. Coding ɾɾɾͷલʹ
82. Coding 
    
83. Coding ಓ۩Λଗ͑Α͏
84. Coding ಓ۩ͱ͸ɺΤσΟλ ௒͍͢͝ϝϞாͷ͜ͱ
85. Coding ࠓҰ൪Ξπ͍ΤσΟλ͸͜Ε
    Atom https://atom.io/
86. Coding ϓϥάΠϯΛೖΕ·͘Ζ͏
87. Coding pMFJDPOT
    QSPKFDUNBOBHFS
    UFSN
    BVUPDPNQMFUFQMVT
    USBJMJOHTQBDFT
    NJOJNBQ
    KBQBOFTFXSBQ
    BUPNDPMPSIJHIMJHIU
    BVUPJOEFOU ͲΜͳπʔϧ͔͸ɺ
    ޱ಄Ͱ࿩͠·͢
88. Coding ίʔσΟϯάͷجຊ
89. Coding Ͳ͜·ͰΠϝʔδͯ͠)5.-Λ૊ΊΔ͔͕উෛ
90. Coding ͔͜͜Βઌ͸ؤுͬͯίʔσΟϯά͢ΔͷΈͰ͢ɻ
91. Coding ίπͱ͔͋Μ·Γͳ͍Ͱ͢ɻ
92. Coding ͪͳΈʹɺαΠτΛެ։͢Δʹ͸ɺ
    ͞ΒʹʮσϓϩΠʯͱ͍͏޻ఔ͕ඞཁ
93. σϓϩΠͱ͸ɺιʔείʔυΛαʔόʹίϐϖͯ͠ੈքதͷਓ͕ݟΕΔঢ়ଶʹ͢ Δ͜ͱͰ͋Δɻ Coding
94. Coding ࣗ෼ͷ1$ͷத͚ͩʹιʔείʔυΛஔ͍͓͍ͯͨΒɺ
    ࣗ෼Ұਓ͔͠ݟΕͳ͍ɻ
    ނʹσϓϩΠ͕ඞཁɻ
95. Coding Ξοϓϩʔυͱࣅͨ֓೦ͩͱࢥ͍ͬͯͩ͘͞ɻ
    ͱ͍͏͔΄΅Ұॹɻ
96. Thank You!