課題と向き合ったフリルのWebリニューアル

Transcript

1. ՝୊ͱ޲͖߹ͬͨ

   8FC൛ϑϦϧϦχϡʔΞϧ
   

   View Slide

2. 2
   Fablic, inc.
   Product Manager, Designer
   ࢁޱ༗༝ر
   @yuki930
   ϓϩϑΟʔϧ
   

   View Slide

3. 3
   ϑϦϧ '3*-
   ʮཉ͍͠ʯ͕Έ͔ͭΔϑϦϚΞϓϦ
   
   

   View Slide

4. View Slide

5. ϑϦϧ8FCϦχϡʔΞϧ

   ϓϩδΣΫτʹ͍ͭͯ
   5
   

   View Slide

6. 6
   ͣͬͱΞϓϦϑΝʔετͩͬͨϑϦϧ
   ௕Β͘ख෇͔ͣͩͬͨ8FC൛
   

   View Slide

7. 7
   ࠷దԽ͢Δ͜ͱͰ΋ͬͱྲྀೖऀ਺Λ૿΍ͤΔͷͰ͸ʜʁ
   8FC͸௕͍͍͋ͩ؆қతͳ΋ͷʹͳ͍ͬͯͨɻ
   ͣͬͱΞϓϦϑΝʔετͩͬͨϑϦϧ
   

   View Slide

8. 8
   ͣͬͱΞϓϦϑΝʔετͩͬͨϑϦϧ
   ؆қతͳ঎඼঺հϖʔδͱ͔ͯ͠͠ػೳ͍ͯ͠ͳ͔ͬͨɻ

   ߪೖ͍ͨ͠৔߹͸ΞϓϦμ΢ϯϩʔυˠొ࿥ˠ঎඼Λ୳͢ˠߪೖͱ͍͏εςοϓ
   8FCͷΈͰ׬݁͢Ε͹΋ͬͱߪೖ཰͸͕͋ΔͷͰ͸ʜʁ
   εςοϓ͕ଟ͍ʜ
   ʜ
   

   View Slide

9. 9
   ͣͬͱΞϓϦϑΝʔετͩͬͨϑϦϧ
   8FC͖͔͚ͬͷϢʔβʔɺ

   ΋ͬͱ૿΍ͤΔΜ͡Όͳ͍ʁ
   

   View Slide

10. 10
    νʔϜϝϯόʔ
    اըɾσβΠϯ
    ϑϩϯτΤϯυ
    αʔόʔαΠυ
    ࣮૷
    αʔόʔαΠυ
    ࣮૷
    ΞαΠϯ͞Εͨͷ͸໊
    ࢲ ͍͢͝ ͍͢͝
    

    View Slide

11. 11
    ͱ͸͍͑ɺͲΕ͙Β͍Մೳੑ͕͋Δʁ
    ݱঢ়෼ੳௐࠪ
    

    View Slide

12. 12
    ௐࠪͷ࣠
    ݕࡧྲྀೖͷ࠷େԽ
    ߪೖಈઢͷ࠷దԽ
    
    
    ·ͣ͸ϑϦϧͷݱঢ়Λ஌Δ
    ଞαΠτͷ܏޲΍੒௕཰Λௐ΂ͯϲ݄ޙʹ࣮ݱՄೳͳ஋Λ୳Δ
    ݱঢ়ͷϑϩʔͰͷߪೖίϯόʔδϣϯ཰Λ஌Δ
    &$αΠτͷίϯόʔδϣϯ཰Λௐࠪ͠ɺൺֱ͢Δ
    

    View Slide

13. 13
    ݕࡧྲྀೖͷ࠷దԽ
    ·ͣ͸ϑϦϧͷݱঢ়Λ஌Δ
    "OBMZUJDTΛ࢖ͬͯௐࠪ
    ݱঢ়Կਓ͙Β͍ͷ66͕͍Δͷ͔ʁ
    ྲྀೖܦ࿏ͷ಺༁͸ʁ
    ͲͷϖʔδάϧʔϓʹҰ൪ଟ͘

    ϥϯσΟϯά͍ͯ͠ΔʁͳͲΛ֬ೝ
    σʔλ͸ܧଓͯ͠௥͑ΔΑ͏ʹ͓ͯ͘͠
    

    View Slide

14. 14
    ݕࡧྲྀೖͷ࠷దԽ
    ϲ݄ޙͷ໨ඪͱͯ͠ݱ࣮తͳϥΠϯΛ୳Δ
    4JNJMBS8FCΛ࢖ͬͯௐࠪ
    ڝ߹ͷΞΫηε਺͸ͲΕ͙Β͍ʁ
    ྲྀೖܦ࿏͸ʁ
    ݱ࣮తͳ໨ඪϥΠϯ͸ʁ
    ࣮ݱՄೳͳ໨ඪ஋Λ୳Δ
    

    View Slide

15. 15
    ߪೖಈઢͷ࠷దԽ
    ΞΫηεͯ͠
    ʜ
    ̋̋̋̋̋̋̋̋ʜ̋̋
    ߪೖϘλϯΛԡ͠ %-ϖʔδ΁ߦ͖ %-ͯ͠ ߪೖ͢Δ
    ݱঢ়ͷϑϩʔͰͷߪೖίϯόʔδϣϯ཰Λௐࠪ
    

    View Slide

16. 16
    ߪೖಈઢͷ࠷దԽͷͨΊͷௐࠪ
    ݱঢ়ͷ཭୤ϙΠϯτͱίϯόʔδϣϯ཰Λચ͍ग़͢
    σʔλࢀরݩ
    ̋̋̋ਓ͕๚໰͍ͯͯ͠
    ̋̋̋ਓ͕ߪೖϘλϯΛԡ͍ͯͯ͠
    ̋̋̋ਓ͕ΞϓϦΛμ΢ϯϩʔυ͍ͯͯ͠
    ̋̋̋ਓ͕ձһొ࿥Λ͍ͯͯ͠
    ̋̋̋ਓ͕ߪೖΛ͍ͯ͠Δ͔
    

    View Slide

17. 17
    ߪೖಈઢͷ࠷దԽ
    &$αΠτͷΧʔτίϯόʔδϣϯ཰Λௐࠪ
    IUUQGUSBDPNKBCMPHPWFSTFBT
    &$αΠτͷΧʔτ์غ཰ͳͲͷσʔλΛௐࠪɺ

    ࢀߟ஋ͱ͍͔ͯͭ͘͠ϐοΫΞοϓ
    ݱঢ়ͷϑϦϧͷίϯόʔδϣϯ཰ͱൺֱ͠ɺ

    ͲͪΒ͕༏Ґͳͷ͔νΣοΫ
    

    View Slide

18. 18
    ௐࠪ෼ੳ
    ྲྀೖͱߪೖ·ͰͷΞΫγϣϯΛվળ͢Δ͜ͱͰ

    େ͖͘৳ͼΔݟࠐΈ͕͋Δͱ൑அͰ͖Δࡐྉ͕ू·ͬͨ
    ͜ΕΒͷ෼ੳ݁Ռ͔ΒࢦඪΛԾஔ͖͠ɺࢼࢉ
    

    View Slide

19. 19
    ࠓճͷϓϩδΣΫτͷ໨ඪ͕ܾఆ
    ݕࡧྲྀೖͷ࠷େԽ
    ߪೖಈઢͷ࠷దԽ
    
    
    ݄࣌఺ͰΦʔΨχοΫ66̋̋̋ਓΛୡ੒͢Δ
    վળʹΑ্͕ͬͯΔ܏޲Λ௫Ή
    8FC্Ͱߪೖ͕׬݁͢ΔΑ͏ͳ69Λఏڙ͢Δ
    ࢀߟ஋ͱͯ͠ग़ͨ͠&$αΠτͷίϯόʔδϣϯ཰Λࢦඪͱ͠ɺݱঢ়
    ͷίϯόʔδϣϯ཰͔Β̋ˋΞοϓΛ໨ࢦ͢
    

    View Slide

20. 20
    ໨ඪʹ޲͔͏ͨΊʹ

    ΍Δ΂͖͜ͱ΍Βͳ͍͜ͱΛܾΊΔ
    

    View Slide

21. 21
    ։ൃظؒ͸ϲ݄
    ࠓճͷΰʔϧ͸8FC͖͔͚ͬͰొ࿥ɾߪೖ͢ΔϢʔβʔΛ૿΍͢͜ͱ
    ֦ு͠΍͍͢ߏ଄ʹͯ͠૊Έ௚͢ݕࡧྲྀೖ૿Ճ
    ద੾ͳϖʔδΛ૿΍͢ݕࡧྲྀೖ૿Ճ
    ֤ϖʔδద੾ͳϫʔυ͕දࣔ͞ΕΔΑ͏ʹ͢Δݕࡧྲྀೖ૿Ճ
    ཉ͍͠঎඼Λݟ͚ͭΔˠొ࿥ˠߪೖ͢Δεςοϓͷ୹ॖొ࿥ऀ਺૿Ճ
    ΍Δ͜ͱ
    ΍Βͳ͍͜ͱ
    ొ࿥ɾߪೖ·ͰͷεςοϓҎ֎ͷ6*ͷ࠷దԽ
    ࡉ෼ͷσΟςΟʔϧ
    

    View Slide

22. 22
    ϦχϡʔΞϧεέδϡʔϧ
    ݄ ݄ ݄ ݄
    ೥
    ొ࿥ߪೖػೳ։ൃ
    σβΠϯϚʔΫΞοϓ
    ։ൃʹ༩͑ΒΕͨظؒ͸໿ϲ݄
    ෼ੳ ௥Ճاը
    ௐࠪ෼ੳ
    ߪೖػೳ

    ϦϦʔε
    ௥Ճ։ൃ
    ௐࠪ෼ੳ
    ϖʔδมߋରԠ
    4&0ରࡦ൛
    ϦϦʔε
    σβΠϯϚʔΫΞοϓ
    ઌߦͯ͠ϦϦʔε
    ։ൃʹ࣌ؒΛཁ͢Δػೳ͸ฒߦͯ͠։ൃ
    ࡉ͔͘վળΛ܁Γฦ͢
    ෼ੳ ௥Ճاը
    ϦϦ
    ʔε
    ϦϦ
    ʔε
    ௥Ճ։ൃ
    ݕࡧྲྀೖ
    ࠷దԽ
    ߪೖಋઢ
    ࠷దԽ
    ࠩ෼͸ਵ࣌औΓࠐΈ
    

    View Slide

23. 23
    ͭʹΘ͚ͯฒߦͯ͠ͷ։ൃ
    ·ͣ͸ઌߦͯ͠ྲྀೖ͕૿͑Δ܏޲͕͔ͭΊΔ͔Λখ͘͞ࢼ͢
    ݕࡧྲྀೖ࠷దԽͷͨΊͷ։ൃ
    4&0ରࡦʹ͍ͭͯ͸͜͏͢Ε͹࣮֬ʹޮՌ͕ݟࠐΊΔɺͱ͍͏΋ͷ͕͸͖ͬ
    Γ͍ͯ͠ͳ͍ͷͰɺখ͘͞ૣ͘ࢼͯ͠վળΛ܁Γฦ͢ํ਑Ͱܭը
    ݄ ݄ ݄ ݄
    ෼ੳ ௥Ճاը
    ௥Ճ։ൃ
    ௐࠪ෼ੳ
    ϖʔδมߋରԠ
    4&0ରࡦ൛
    ϦϦʔε
    σβΠϯϚʔΫΞοϓ
    ઌߦͯ͠ϦϦʔε ࡉ͔͘վળΛ܁Γฦ͢
    ෼ੳ ௥Ճاը
    ϦϦ
    ʔε
    ϦϦ
    ʔε
    ௥Ճ։ൃ
    ݕࡧྲྀೖ
    ࠷దԽ
    

    View Slide

24. 24
    ͭʹΘ͚ͯฒߦͯ͠ͷ։ൃ
    ྲྀೖΛ૿΍ͭͭ͠ɺߪೖͷମݧΛ࠷దԽ͍ͯ͘͠
    ߪೖಋઢ࠷దԽͷͨΊͷ։ൃ
    8FC্ͰߪೖΛ׬ྃͤ͞ΔͨΊʹ͸ɺձһొ࿥ػೳɺϩάΠϯػೳɺߪೖػೳ
    ͳͲ෇ਵ͢Δ͞·͟·ͳ։ൃ͕ඞཁͰɺ࠷୹Ͱ΋ϲ݄͸ඞཁ
    ݄ ݄ ݄ ݄
    ొ࿥ߪೖػೳ։ൃ
    σβΠϯϚʔΫΞοϓ
    ௐࠪ෼ੳ
    ߪೖػೳ

    ϦϦʔε
    ։ൃʹ࣌ؒΛཁ͢Δػೳ͸ฒߦͯ͠։ൃ
    ߪೖಋઢ
    ࠷దԽ
    

    View Slide

25. View Slide

26. 26
    ݁Ռ͸ʁ
    ໨ඪΛେ͖͘ΫϦΞʂ
    ݄࣌఺Ͱ
    ΦʔΨχοΫ66਺͸ഒ
    ొ࿥Ϣʔβʔ਺͸ഒ
    ઌߦͯ͠ग़͍ͯͨ͠ࣄʹΑΓ݄࣌఺Ͱ͙͢ʹޮՌ͕֬ೝͰ͖ͨʂ
    ߪೖίϯόʔδϣϯ཰͕վળͨ͜͠ͱʹΑΓɺΞϓϦ͚ͩͰ׬݁͢Δ69ΑΓେ͖͘վળʂ
    

    View Slide

27. 27
    ໨ඪ͸ୡ੒͕ͨ͠ʜ
    ҰํͰ

    σβΠφʔͱͯ͠͸

    ·ͩ·ͩ΍Γ଍Γͳ͍՝୊͕࢒Δ
    

    View Slide

28. 28
    ҰํͰσβΠφʔͱͯ͠͸·ͩ·ͩղܾ͍ͯ͋͛ͨ͠՝୊΋ͨ͘͞Μ࢒Δ
    ຊ౰ʹ͜ͷφϏήʔγϣϯϝχϡʔͰྑ͍ͷ͔ʁͳͲࡉ͔͍෦෼·
    ͰϢʔβʔ໨ઢͰಥ͖٧ΊΔ͜ͱ͕Ͱ͖ͳ͔ͬͨ
    ϢʔβʔΠϯλϏϡʔͳͲΛॏͶͯಥ͖٧ΊΔ͜ͱͰ

    ·ͩ·ͩΑ͘Ͱ͖ΔϙΠϯτ͸ͨ͘͞Μ͋ͬͨ
    ߪೖʹࢸΔܦ࿏Ҏ֎ͷମݧͷ࠷దԽ
    

    View Slide

29. 29
    ҰํͰσβΠφʔͱͯ͠͸·ͩ·ͩղܾ͍ͯ͋͛ͨ͠՝୊΋ͨ͘͞Μ࢒Δ
    ࡉ͔͍ύʔπͷσΟςΟʔϧʹͩ͜ΘΓ͖Δ͜ͱ͕Ͱ͖ͳ͔ͬͨ
    σβΠφʔͱͯ͠͸͜ΕҎ্ແ͍σβΠϯͰग़͍ͨ͠ؾ࣋ͪ͸͋Δ
    σΟςΟʔϧ΁ͷͩ͜ΘΓ
    

    View Slide

30. 30
    ໨ඪͱ޲͖߹͏
    ࠓճͷ໨త͸ͳʹʁ
    

    View Slide

31. 31
    ໨ඪͱ޲͖߹͏
    8FC͖͔͚ͬͷϢʔβʔΛ૿΍͢ʂ
    ݕࡧྲྀೖͷ࠷େԽ
    ߪೖಈઢͷ࠷దԽ
    
    
    

    View Slide

32. 32
    ·ͩ·ͩ΍Γ͍ͨ͜ͱ͸͋ΕͲʜ
    ཧ૝͸͋ΕͲɺϦχϡʔΞϧ࣌ʹ

    ࠷ॳ͔Β͢΂ͯΛ׬ᘳʹ΍Γ͖Δͷ͸

    ࣌ؒతʹ΋ίετతʹ΋೉͍͠ɻ

    ·ͣ͸ͦͷ࣌ʑͷ໨ඪʹ޲͔͔ͬͯͬ͠Γͱ੒ՌΛग़͢ɻ

    ͖ͪΜͱͨ͠Ձ஋Λ࡞Γɺ

    σʔλΛݟͳ͕ΒվળΛॏͶͯΑΓߴΈΛ໨ࢦ͢ʂ
    ·ͣ͸໨ඪʹର͔ͯͬ͠͠Γ݁ՌΛग़͢
    

    View Slide

33. 33
    ͜ͷޙ8FCʹ΋஫ྗ͢΂͖ͱ൑அ͞Εɺ

    Ҿ͖ଓ͖։ൃ͕ܧଓ͍ͯ͠·͢ɻ

    ݱࡏ͸Ҿ͖ଓ͖৽ͨͳϝϯόʔͰ

    8FC൛ͷվྑ͕೔ʑਐΊΒΕ͍ͯ·͢ɻ
    ొ࿥ಋઢ΋ݟ௚͠Λߦ͍ɺ

    ͞Βʹେ͖͘ొ࿥཰Λ৳͹͢͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ
    ݁Ռ͕͍ͭͯ͘Ε͹·ͨνϟϨϯδͰ͖Δ
    

    View Slide

34. 34
    6*΍69ΛΑΓΑ͍ͯͨ͘͘͠Ίʹ͸༷ʑͳख๏͕͋Γ·͕͢ɺ

    ࠷ॳ͔Β͢΂ͯΛ࢖͍ɺ͢΂ͯΛ׎͑Α͏ͱͤͣ
    ҰาҰา࣮֬ʹɺͦͷ࣌࠷దͳखஈ΍ख๏Λ൑அͯ͠

    ͞ΒͳΔ੒௕Λ໨ࢦ͍͖͍ͯͨ͠ͱࢥ͍·͢
    ΰʔϧʹ߹ΘͤͯͭͲ࠷దͳखஈΛબ΅͏ʂ
    

    View Slide

35. 35
    'BCMJDͰ͸σβΠφʔʗΤϯδχΞΛੵۃ࠾༻தʂ
    

    View Slide

36. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide