Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Yuki Haruyama

May 26, 2017
Tweet

More Decks by Yuki Haruyama

Other Decks in Design

Transcript

  1. ՝୊ͱ޲͖߹ͬͨ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ϓϩδΣΫτʹ͍ͭͯ
    5

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 12
    ௐࠪͷ࣠
    ݕࡧྲྀೖͷ࠷େԽ
    ߪೖಈઢͷ࠷దԽ


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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

  18. 19
    ࠓճͷϓϩδΣΫτͷ໨ඪ͕ܾఆ
    ݕࡧྲྀೖͷ࠷େԽ
    ߪೖಈઢͷ࠷దԽ


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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  21. 22
    ϦχϡʔΞϧεέδϡʔϧ
    ݄ ݄ ݄ ݄

    ొ࿥ߪೖػೳ։ൃ
    σβΠϯϚʔΫΞοϓ
    ։ൃʹ༩͑ΒΕͨظؒ͸໿ϲ݄
    ෼ੳ ௥Ճاը
    ௐࠪ෼ੳ
    ߪೖػೳ

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    σβΠφʔͱͯ͠͸

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

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

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

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

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

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

    View full-size slide

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

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

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

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

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide