CSS Nite in Osaka, vol.48

CSS Nite in Osaka, vol.48で発表したスライドです

Transcript

1. σβΠφʔͷ ੍࡞ݱ৔ Five Dimension Graphics ੉ޱཧܙ
2. ੉ޱɹཧܙ Seguchi Rie 1983೥େࡕੜ·Εେࡕҭͪɻ 5DG-Five Dimension Graphics-୅දɺσδλϧϋϦ΢ουେࡕߍߨࢣɻ ໿7೥੍ؒ࡞ձࣾͳͲͰ΢ΣϒσβΠφʔɺσΟϨΫλʔΛܦͯ2010೥ʹಠཱɻ ΢ΣϒαΠτ੍࡞΍ΞϓϦUIσβΠϯͳͲΛख͕͚Δɻঁੑ޲͚σβΠϯ͕ಘҙɻ ִिՐ༵ͷUstream൪૊ʮrie'sCafebarʯύʔιφϦςΟʔͱͯ͠์ૹதɻ ஶॻʰਓΛऒ͖͚ͭΔඒ͍͠΢ΣϒαΠτͷ࡞ΓํʱʢSBΫϦΤΠςΟϒʣɻ
3. ຊ೔ͷηογϣϯʹ͍ͭͯ ! εϥΠυࢿྉ͸ͷͪ΄Ͳެ։͞Ε·͢ ϑΥϩʔΞοϓϝʔϧͳͲͰ͓஌Βͤ͠·͢ ! ࣸਅࡱӨOKͰ͢ ϑϦʔૉࡐͰ͢ ! SNS࣮گ׻ܴͰ͢ ϋογϡλά #cssnite
4. ͜Μͳํ΁޲͚͓ͯ࿩͠·͢ ! WebΛ࢓ࣄʹ͍ͯ͠ΔσβΠφʔ ! WebσβΠφʔΛ໨ࢦ͍ͯ͠Δํ ! σβΠφʔͷকདྷʹෆ҆ͷ͋Δํ
5. ΞδΣϯμ σβΠϯʹೖΔલʹ σβΠϯ੍࡞ݱ৔ ศརαΠτͱπʔϧ 01. 02. 03.
6. σβΠϯʹೖΔલʹ 01 Preparation before Design
7. WebσβΠφʔͷ͠͝ͱ಺༰ͱ͸ ※ ૊৫΍νʔϜʹΑΓWebσΟϨΫλʔ΍ίʔμʔͳͲ෼ۀ੍Ͱ໾ׂ͕෼͔Ε͍ͯΔ͜ͱ΋ଟ͋͘Γ·͢ ৘ใઃܭ ϏδϡΞϧ ίʔσΟϯά CMSߏங
8. ΫϥΠΞϯτʹώΞϦϯά͠ɺ ϖʔδߏ੒΍ϨΠΞ΢τΛߟ͑Δ ৘ใઃܭ 3W1Hͷ๏ଇ Who ୭ʹ What ԿΛ Why ͳͥ How ͲͷΑ͏ʹ ϢʔβʔϑΝʔετΛΫϥΠΞϯτ㱻ΫϦΤΠλʔͰڞ༗
9. ώΞϦϯάͷํ๏ ΫϥΠΞϯτͷ ITϦςϥγʔʹΑͬͯ࠷దղ͕ҧ͏
10. ΫϥΠΞϯτλΠϓ ੍࡞஌͕ࣝ͋Δํ <୅ཧళɺ௚ΫϥΠΞϯτҎ֎ͳͲ> A B C WebΛগ͠஌͍ͬͯΔํ <WordPressࢦఆͯ͘͠ΔͳͲ> WebΛ΄΅஌Βͳ͍ํ <εϚϗ΋ѻ͑ͳ͍͘Β͍>
11. ΫϥΠΞϯτλΠϓ ੍࡞஌͕ࣝ͋Δํ <୅ཧళɺ௚ΫϥΠΞϯτҎ֎ͳͲ> A ɾαΠτϚοϓ΍ϫΠϠʔ͕طʹ༻ҙ͞Ε͍ͯΔ͜ͱ͕ଟ͍ ɾͲ͜·Ͱ֬ఆͳͷ͔Ͳ͜ΛఏҊ͢΂͖͔ߟ͑Δ ɾઐ໳༻ޠ͋Δఔ౓OK ɾͲΜͰΜฦ͕͠ଟ͍ͷͰখ֬͘͞ೝ͠ͳ͕ΒਐΉ
12. ΫϥΠΞϯτλΠϓ WebΛগ͠஌͍ͬͯΔํ <WordPressࢦఆͯ͘͠ΔͳͲ> B ɾͳͥWebΛ࡞Δͷ͔ɺͲ͏ͳΓ͍ͨͷ͔Λڞ༗͢Δ ɾiPad ProͱPencilͰͦͷ৔Ͱεέον͠ͳ͕ΒܾΊΔ ɾXDͰαΠτϚοϓ΍ϫΠϠʔΛ࡞Γ౎౓ఏҊ͢Δ ɾWordPressਪ͠ͳਓ͸ͳͥਪ͢ͷ͔ཧ༝Λฉ͘
13. ΫϥΠΞϯτλΠϓ WebΛ΄΅஌Βͳ͍ํ <εϚϗ΋ѻ͑ͳ͍͘Β͍> C ɾ·ͣ࿩Λฉ͘ ɾεέονϒοΫͱϖϯΛ࢖ͬͯͦͷ৔Ͱॻ͍͍ͯ͘ ɾେମͷϨΠΞ΢τΛܾΊͨΒσβΠϯʹೖΔ(ݟͳ͍ͱ෼͔Βͳ͍ରࡦ) ɾϨεϙϯγϒ͕Ͳ͏ͱ͔ΑΓPC͸͜ΕɺSP͸͜ΕɺͰݟͤΔ
14. XDΛ࢖ͬͨϫΠϠʔϑϨʔϜ DEMO தԝձܭηϛφʔϧʔϜ
15. σβΠϯ੍࡞ݱ৔ 02 Design production site
16. ৘ใઃܭʹج͖ͮɺ ػೳత͔ͭ໨తୡ੒ͷͨΊͷσβΠϯΛ࡞੒͢Δ ϏδϡΞϧ ҰຕֆΛ࡞Γࠐ·ͳ͍ ࡞Γࠐ·ΕͨҰຕͷσβΠϯΧϯϓΑΓ΋ εϐʔυײͷ͋ΔϓϩτλΠϓ͕ت͹ΕΔ
17. σβΠϯͳʹ͔͍ͭ·͔͢
18. Photoshop͕޷͖ὑ
19. PhotoshopΛ࢖ͬͨσβΠϯ DEMO தԝձܭηϛφʔϧʔϜ
20. σβΠφʔ͸ݟͤํͷϓϩ ෳࡶͳ΋ͷΛγϯϓϧʹ·ͱΊ Δ ೉͍͜͠ͱΛ؆୯ͦ͏ʹݟͤΔ
21. ΦϖϨʔλʔʹͳΒͳ͍͜ͱ σβΠφʔ͔ͩΒͰ͖ΔఏҊΛ੝ΓࠐΉ
22. ଎߈Ξ΢τϓοτΛڧΈʹ͢Δ ఱ࠽తͳσβΠϯྗ͕ͳͯ͘΋ ଎߈͸୭ʹͰ΋Ͱ͖Δ
23. ศརαΠτͱπʔϧ 03 Useful sites and Tools
24. Photoshop ΤΫεςϯγϣϯ ※஫ҙ※ Ҏલ͸ΤΫεςϯγϣϯϚωʔδϟʔ͔ΒΠϯετʔϧͰ͖·͕ͨ͠ ࠷৽൛(CC 2019)͸Ͱ͖·ͤΜɻݸผͰΠϯετʔϧ͢Δඞཁ͋Γ Adobe Layer Namer https://www.adobeexchange.com/creativecloud.details.1680.html Adobeެࣜɻը૾Ξηοτػೳͱ߹Θͤͯര଎ʹը૾Λ੾Γग़͢
25. Photoshop ΤΫεςϯγϣϯ CRAFT https://www.invisionapp.com/craft ը૾͋ͯͨΓϦϐʔτάϦου Έ͍ͨͳ͜ͱ͕Ͱ͖ͨΓ
26. ࣸਅૉࡐͱΠϥετૉࡐ ࣸਅAC https://www.photo-ac.com/ ΠϥετAC https://www.ac-illust.com/
27. σβΠϯࢀߟ muuuuu.org http://muuuuu.org/ RWDJP http://responsive-jp.com/
28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank you !