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

理想のデザインプロセスについて考える〜EC-CUBE 4の管理画面デザインで学んだデザインプロセスの面白さ・難しさ

Fukazawa Kojiro
November 24, 2018

理想のデザインプロセスについて考える〜EC-CUBE 4の管理画面デザインで学んだデザインプロセスの面白さ・難しさ

2018年11月24日のFRONTEND CONFERENCE 2018で発表したセミナーのスライドです。EC-CUBE 4の管理画面をデザインした経験を振り返り、そのプロセスについてお話しました。

Fukazawa Kojiro

November 24, 2018
Tweet

More Decks by Fukazawa Kojiro

Other Decks in Design

Transcript

  1. ཧ૝ͷσβΠϯϓϩηεΛߟ͑Δ
    &$☕$6#& ͷ؅ཧը໘σβΠϯͰֶΜͩ
    σβΠϯϓϩηεͷ໘ന͞ɾ೉͠͞
    '30/5&/%$0/'&3&/$&ɹɹ,PKJSP'VLB[BXBɹɹ

    View full-size slide

  2. ਂ୔޾࣏࿠
    େࡕࡏॅɺ
    ϑϦʔϥϯε
    ΢ΣϒσβΠφʔ
    اը
    ɾ
    ϥΠςΟϯά
    ɾ
    σΟϨΫγϣϯ
    σβΠϯ
    ɾ
    )5.-$44ίʔσΟϯά
    $.4ͷઃܭ࣮૷ͳͲ
    ϑΧβϫ
    ɾ
    ί΢δϩ΢
    !LPKJSPGVLB[BXB
    !XJUDI@EPLUPS

    View full-size slide

  3. ʮ&$
    ʖ
    $6#&ʯ
    ؅ཧը໘σβΠϯ

    View full-size slide

  4. ͝ଘ஌Ͱ͔͢
    ʁ

    ʮ&$
    ʖ
    $6#&ʯ
    ɾ ೥ެ։
    ɾΦʔϓϯιʔεɾιϑ
    τ΢ΣΞʢ(1- ͱ঎༻ϥΠηϯεͷ
    σϡΞϧϥΠηϯεʣͱͯ͠ެ։͞Εͨ &$ αΠ
    τ޲͚ $.4
    ɾࠃ࢈ &$ αΠ
    τ޲͚ $.4 ͷ୅දతϒϥϯυ
    ɾ։ൃΛओಋ͢Δͷ͸େࡕͷιϑ
    τ΢ΣΞϝʔΧʔͰ͋Δ
    גࣜձࣾϩοΫΦϯ

    View full-size slide

  5. ࠓ೔͓࿩͍ͨ͜͠ͱ
    ɾ໿ ೥ؒɺ&$$6#& ؅ཧը໘ͷ 6* σβΠφʔͱͯؔ͠Θͬͨ
    ɾཧ૝ͱ͍ͯ͠Δϓϩηεʹ͸·ͩ·ͩԕ͍
    ɾσβΠφʔͷࢹ఺ͰৼΓฦΓͳ͕Βɺͱ͘ʹσβΠϯϓϩηεʹ
    ͍ͭͯ൓ল

    View full-size slide

  6. ΞδΣϯμ
    ɾ&$$6#& ؅ཧը໘ͷಛ௃
    ɾࢲ͕࣮ફ͍ͨ͠ཧ૝ͷσβΠϯϓϩηε
    ɾ͜ͷϓϩδΣΫ
    τͰ੒͠਱͔͛ͨͬͨ͜ͱ
    ɾσβΠφʔࢹ఺͔Βݟ͓͓ͨ·͔ͳϓϩδΣΫ
    τͷྲྀΕ
    ɾͰ͖ͨ͜ͱɺͰ͖ͳ͔ͬͨ͜ͱ
    ɾ͜Ε͔Βͷ͜ͱ

    View full-size slide

  7. &$$6#&؅ཧը໘ͷಛ௃

    View full-size slide

  8. &$$6#&ܥϕʔεʹੵۃతվળ
    &$$6#& &$$6#&

    View full-size slide

  9. Ұը໘ʹ͓͞ΊΔ৘ใྔ૿ˢ

    View full-size slide

  10. Ұཡϖʔδ͔Βͷૢ࡞ΛΑΓ؆୯ʹ

    View full-size slide

  11. ओཁ6*ͷίϯϙʔωϯ
    τԽɺ
    ମݧͷ౷Ұ

    View full-size slide

  12. ख़࿅౓ͷ௿͍Ϣʔβʔ΁ͷ഑ྀ

    View full-size slide

  13. ࢲ͕ߟ͑Δ
    ཧ૝ͷσβΠϯϓϩηεͷࠜຊ

    View full-size slide

  14. લఏͱͯ͠
    ͲͷҊ݅ʹ΋࢖͑Δ
    ʮཧ૝ͷϓϩηεʯ͸ଘࡏ͠ͳ͍

    View full-size slide

  15. σβΠ
    ϯ
    Λ
    ʮΈΜ
    ͳʯ
    Ͱͭ
    ͘
    Δ

    View full-size slide

  16. ʮΈΜͳʯ
    ͬͯ୭
    ʁ
    1.
    ΫϥΠΞϯτ σβΠφʔ γεςϜ؅ཧऀ ϓϥάΠϯ։ൃऀ γϣ
    οϓϚελʔ
    ϑϩϯτΤϯυΤϯδχΞ
    όοΫΤϯυΤϯδχΞ
    νʔϜ Ϣʔβʔ

    View full-size slide

  17. ΈΜͳͰσβΠϯɺ
    Մೳͳͷ
    ʁ
    ҙݟΛݴ͏ਓ͕૿͑Δ΄Ͳ
    ϓϩδΣΫ
    τͷෆ࣮֬ੑ͕૿͢

    View full-size slide

  18. ݶΒΕͨϦιʔεͰ
    Ͳ͏ෆ࣮֬ੑͱઓ͏͔

    View full-size slide

  19. Ϧʔϯ
    ɾ
    ελʔτΞοϓ
    ɾىۀΛ҆શʹ͓͜ͳ͏ͨΊͷ
    ϑϨʔϜϫʔΫ
    ɾ ೥ʹىۀՈͷΤϦ
    οΫɾ
    Ϧʔε͕ߟҊɾൃද
    ɾෆ࣮֬ੑ͕ߴ͍ϓϩμΫ
    τͷ
    σβΠϯʹ΋Ԡ༻Ͱ͖Δ
    Photo by JD Lasica (CC BY 2.0)

    View full-size slide

  20. ɾΞΠσΞΛͰ͖Δ͚ͩ଎͘
    Χλνʹ͢Δ
    ɾ.71ʢ.JOJNVN7JBCMF
    1SPEVDUʜ࣮༻࠷খݶͷ঎඼ʣ
    Λͭ͘Δ
    ɾϓϩτλΠϓʹݴ͍׵͑ΒΕΔ
    ΞΠσΞ
    ੡඼
    σʔλ
    ߏங
    ֶश
    ଌఆ
    Ϧʔϯ
    ɾ
    ελʔτΞοϓͷαΠΫϧ

    View full-size slide

  21. ɾ.71 ΛΞʔϦʔΞμϓλʔʹ
    ݟͤɺσʔλΛಘΔ
    ɾσʔλʹֶͼɺվળͷͨΊͷ
    ΞΠσΞΛੜΉ
    ɾվળ͞Εͨ΋ͷΛ·ͨͭ͘Δ
    ΞΠσΞ
    ੡඼
    σʔλ
    ߏங
    ֶश
    ଌఆ
    Ϧʔϯ
    ɾ
    ελʔτΞοϓͷαΠΫϧ

    View full-size slide

  22. ɾֶͼͳ͕ΒਐΉɾਐΉ͜ͱͰ
    ͞ΒʹֶͿ
    ɾमਖ਼ͷ࿈ଓ͕લఏ
    ɾະ׬੒඼Ͱ͋Δ͜ͱΛલఏʹ
    ͯ͠ʮΈΜͳʯͰϨϏϡʔ
    ɾͰ͖Δ͚ͩ଎͘ճ͢
    ΞΠσΞ
    ϓϩτλΠϓ
    σʔλ
    ߏங
    ֶश
    ଌఆ
    ϓϩμΫ
    τͷσβΠϯʹ΋༗ޮ

    View full-size slide

  23. ɾϞμϯͳσβΠϯπʔϧͷొ৔
    ɾ4LFUDIɺ9%ɺ'JHNB ͳͲ
    ɾΤϯδχΞ͕͍ͳͯ͘΋؆қͳ
    ϓϩτλΠϐϯά͕Ͱ͖Δ
    ɾγϯϘϧʹΑΔσβΠϯσʔλ
    ͷߏ଄Խˠมߋʹڧ͍
    ϦʔϯͳσβΠϯ͕Մೳʹͳͬͨഎܠ

    View full-size slide

  24. &$$6#&σβΠϯͷྲྀΕ

    View full-size slide

  25. ɾ ೥ ݄ΩοΫΦϑʢެ։͸ ೥य़༧ఆͩͬͨʣ
    ɾʙ िʹҰ౓ɺσβΠϯϨϏϡʔΛϦΞϧʹू·ͬͯ܁Γฦ͢
    ɾࢀՃऀ͸גࣜձࣾϩοΫΦϯͷϓϩμΫ
    τϚωʔδϟʔɾ։ൃਞɾ
    σβΠφʔਞɾͦͯ͠ࢲ
    ɾಉ࣌ʹσβΠϯΨΠυ΋੍࡞։࢝
    ΩοΫΦϑʙϑΝʔε
    τ
    ɾ
    σβΠϯ੍࡞
    ೥݄ʙ݄

    View full-size slide

  26. ໿ը໘෼ͷσβΠϯΛ
    ϨϏϡʔΛ܁Γฦ͠ͳ͕Β੍࡞

    View full-size slide

  27. ϓϩτλΠϐϯά͸*O7JTJPOΛར༻

    View full-size slide

  28. ɾ͜͜ͰఆظϛʔςΟϯά͸Ұ୴ऴྃ
    ɾ֤ίϯϙʔωϯ
    τͷσβΠϯεϖοΫͷ੔ཧͱڞ༗
    ɾσβΠϯʹ͓͚Δݒ೦఺ͷަ׵ͱରԠ
    ɾϞοΫͷνΣ
    οΫͱϑΟʔυόοΫ
    ϑϩϯ
    τΤϯυνʔϜʹΑΔϞοΫ੍࡞
    ೥݄ʙ

    View full-size slide

  29. ɾ ೥ ݄&$$6#&OЋ൛ެ։
    ɾϢʔβʔϑΟʔυόοΫʹΑΔػೳมߋ
    ɹ஫จपΓͷػೳɾը໘ઃܭͷେ෯มߋ
    ɹϒϨΠΫϙΠϯ
    τͷมߋͱϨεϙϯγϒͳσβΠϯͷඍௐ੔
    ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆
    Ћ൛ެ։
    ɾ
    ։ൃ͕ຊ֨Խ
    ೥݄ʙ

    View full-size slide

  30. ɾ໨ۄػೳͷͻͱͭɺΦʔφʔζε
    τΞͷ؅ཧը໘૊ΈࠐΈ
    σβΠϯʜϓϥάΠϯ͕؅ཧը໘͔ΒΠϯε
    τʔϧՄೳʹ
    ɾҰํͦͷଞͷը໘͸ػೳΛ 'JY
    ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆
    Ќ൛ެ։ɻ
    ։ൃόʔδϣϯ͸O͔Β΁
    ೥݄ʙ

    View full-size slide

  31. ਖ਼ࣜϦϦʔεʹΉ͚ͯυΩϡϝϯ
    τ੍࡞
    ೥݄ʙ

    View full-size slide

  32. ഑෍༻σβΠϯσʔλ
    ʢ4LFUDIʣ

    View full-size slide

  33. σβΠϯΨΠυ
    ʢ1%'ʣ

    View full-size slide

  34. &$$6#&ਖ਼ࣜϦϦʔε
    ೥݄೔

    View full-size slide

  35. Ͱ͖ͨ͜ͱɺ
    Ͱ͖ͳ͔ͬͨ͜ͱ

    View full-size slide

  36. มߋʹڧ͍σβΠϯσʔλͷ࣮ݱ
    ɾγϯϘϧʹΑΔߏ଄ԽʹΑͬͯมߋʹڧ͍σβΠϯΛ࣮ݱ
    ɾجຊϑΥϯ
    ταΠζͷมߋʹ΋࠷௿ݶͷ޻਺ͰରԠ
    ɾͲ͔͜ͰγϯϘϧͷσʔλΛյ͢ͱશମʹѱӨڹ͕ग़Δ

    View full-size slide

  37. Ϣʔβʔମݧ΁ͷੵۃతؔ༩
    ɾϥϕϦϯάΛඇΤϯδχΞ޲͚ʹೈԽ
    ɾΠϯλϥΫςΟϒͳςΩε
    τʹରͯ͠ੵۃతʹಇ͖͔͚Δ
    ɾπʔϧνοϓͷඞཁͳՕॴͷચ͍ग़͠ͱจݴͷϥΠςΟϯά

    View full-size slide

  38. ϦʔϯͳσβΠϯ͸ݶఆత࣮ફʹ

    View full-size slide

  39. ɾ1.ɾΤϯδχΞɾσβΠφʔ͕
    සൟʹձͬͯσβΠϯϨϏϡʔ
    ɾϛʔςΟϯάͰ্͕ͬͨ໰୊఺͸
    ϛʔςΟϯάͷ͏ͪʹݕূ
    ɾϛʔςΟϯά͕ऴΘͬͨΒ ׂͷ
    मਖ਼͕׬͍ྃͯ͠Δ
    ఆྫϛʔςΟϯά͕༗ޮʹ࡞༻
    σβΠϯϑΣʔζ

    View full-size slide

  40. ҙਤΛ఻͑Δʹ͸ग़ͤͨ
    ΋ͷ͕଍Γͳ͍ʜʢͰ΋
    ๩͍͠ʜʣ
    ͳʹΛ͍ͭ·Ͱʹ
    ࢧڅͯ͠΋Β͑Δ͔ͳ
    ʁ
    ൺֱͯ͠ϑϩϯ
    τΤϯυ։ൃνʔϜͱͷ
    ίϛϡχέʔγϣϯີ౓ΛͱΕͳ͔ͬͨ
    ϑϩϯτΤϯυ։ൃϑΣʔζ

    View full-size slide

  41. ͪΐ
    ͬͱσβΠϯ
    ௚͍ͨ͠ͳʔ
    όά͕͋ͬͨΑʔ
    ͜͜௚ͤͳ͍
    ʁ
    ɾνέο
    τͷࢁͱ֨ಆ͢Δຖ೔
    ɾϢʔβʔௐࠪͰ·ͨ૿͑Δνέο
    τ
    ๩͍͠
    ʂ
    ϓϩμΫ
    τ΁ͷΞΫηε͕ࠔ೉ʹ
    ։ൃ͕ຊ֨Խ

    View full-size slide

  42. ϓϩδΣΫ
    τશମͰճ͢ͷ͸೉͍͠

    View full-size slide

  43. ϑΣΠζ͝ͱʹճͤͳ͍͔
    ˠ ˠ
    ˠ
    σβΠϯ ϑϩϯ
    τΤϯυ
    ։ൃ
    ։ൃ࣮૷

    View full-size slide

  44. ͍΍ɺ
    ΍͸Γ೉͍͠
    ˠ ˠ
    ˠ
    σβΠϯ ϑϩϯ
    τΤϯυ
    ։ൃ
    ։ൃ࣮૷

    View full-size slide

  45. ɾεϓϦϯ
    τʢҰఆͷ୹͍։ൃظؒʣ͝ͱʹσβΠφʔϨϏϡʔΛ
    ೖΕΔͳΒɺ࠷ॳ͔Βҙࣝ߹ΘͤΛ
    ɾͲ͏͍͏σβΠϯͷ΍ΓํΛ͍͔ͨ͠ɺे෼ʹνʔϜͱ
    ࿩͋͠Θͳ͚Ε͹ɺͦͷͱ͓Γʹ͸ಈ͔ͳ͍ʢ౰ͨΓલʣ
    ൓ল

    View full-size slide

  46. ͜Ε͔Βͷ͜ͱ

    View full-size slide

  47. ɾΉ͠ΖվળͷαΠΫϧ͕ඞཁʹͳΔͷ͸͜Ε͔Β
    ɾ֤஍ͰߦΘΕΔϢʔβʔϛʔτΞοϓΠϕϯ
    τ
    ɾܶతʹ૿͑ΔϢʔβʔϑΟʔυόοΫ΁ͷରԠ
    ɾϦϦʔεόʔδϣϯͰ͸࣮ݱͰ͖ͳ͔ͬͨσβΠϯ্ͷ
    ࡉ͔͍վળ఺ʹ౿ΈࠐΈ͍ͨ
    &$$6#&ͷ։ൃ͸ͭͮ͘

    View full-size slide

  48. ɾ͓΋ʹϓϥάΠϯ։ൃऀͷҙݟΛฉ͖ΑΓ࣮༻తͳΨΠυʹ
    ɾ&$$6#& ؅ཧը໘ͷσβΠϯ͔ΒଐਓੑΛͰ͖Δ͔͗Γ
    গͳ͍ͨ͘͠
    ɾΨΠυͷվగɺ഑෍͢ΔσβΠϯσʔλͷϒϥογϡΞοϓ
    ଐਓੑͷগͳ͍σβΠϯʹ

    View full-size slide

  49. ɾ4LFUDI ൛ʹՃ͑ɺ9% ൛ͷ؅ཧ
    ը໘σβΠϯσʔλΛ੍࡞
    ɾγϯϘϧͷॊೈੑʹ͔͚Δ͕ɺΑ
    Γଟ͘ͷਓʹ͞Θͬͯ΋Β͑Δϓ
    ϥο
    τϑΥʔϜ
    ɾ໨ࢦͤɺࠓ೥தͷެ։
    9%൛؅ཧը໘σβΠϯσʔλ

    View full-size slide

  50. ɾ
    ʮࢲ͸ʯϦʔϯͳσβΠϯϓϩηεʹڵຯΛ΋͍ͬͯΔ
    ɾૣ͘ΧλνʹͰ͖Δͷ͸΍͸Γ͍͍͜ͱ
    ɾνʔϜ͕ूͬͯίϛϡχέʔγϣϯΛऔΕΔ͜ͱ͸͍ͥΜେ੾
    ɾ1. ͱσβΠφʔͱ։ൃਞ͕ҰମʹͳͬͯαΠΫϧΛճ͢͜ͱ͸
    ೉͍͠
    ɾࠓޙͷϓϩμΫ
    τվળϑΣΠζʹ૬Ԡ͍͠ϓϩηεΛνʔϜͷ
    օ͞·ͱߟ͍͑ͨ

    View full-size slide

  51. ʮΈΜ
    ͳͰσβΠ
    ϯʯ
    ͢
    Δ
    ͨΊʹ
    σβΠ
    φʔ͕ߩݙͰ
    ͖
    Δ
    ෼໺͸࣮֬ʹ޿͕ͬ
    ͍ͯ
    Δ

    View full-size slide

  52. ͋ͳͨͷσβΠ
    ϯ
    ϓϩ
    η
    εɺ
    ͥͻڭ͑
    ͯ
    ͘
    ͩ͞
    ͍

    View full-size slide

  53. ͓ΊͰͱ͏͍͟͝·͢
    ʂ

    View full-size slide

  54. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    !LPKJSPGVLB[BXB !XJUDI@EPLUPS

    View full-size slide