CSS Nite in Osaka, vol.48

Ded7df43903e9a7be98a8b7eda4aac16?s=47 rie05
December 15, 2018

CSS Nite in Osaka, vol.48

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

Ded7df43903e9a7be98a8b7eda4aac16?s=128

rie05

December 15, 2018
Tweet

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