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 !

29. None