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

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

Transcript

1. ཧ૝ͷσβΠϯϓϩηεΛߟ͑Δ &$☕$6#&
    ͷ؅ཧը໘σβΠϯͰֶΜͩ σβΠϯϓϩηεͷ໘ന͞ɾ೉͠͞ '30/5&/%
   $0/'&3&/$&
   ɹɹ,PKJSP
   'VLB[BXBɹɹ
2. ਂ୔
   ޾࣏࿠ େࡕࡏॅɺ ϑϦʔϥϯε ΢ΣϒσβΠφʔ اը ɾ ϥΠςΟϯά ɾ σΟϨΫγϣϯ σβΠϯ ɾ )5.-
   
   $44ίʔσΟϯά $.4ͷઃܭ࣮૷ͳͲ ϑΧβϫ ɾ ί΢δϩ΢ !LPKJSPGVLB[BXB !XJUDI@EPLUPS
4. ʮ&$ ʖ $6#&
   ʯ ؅ཧը໘σβΠϯ
5. ͝ଘ஌Ͱ͔͢ ʁ
   ʮ&$ ʖ $6#&ʯ ɾ ೥ެ։ ɾΦʔϓϯιʔεɾιϑ τ΢ΣΞʢ(1- ͱ঎༻ϥΠηϯεͷ σϡΞϧϥΠηϯεʣͱͯ͠ެ։͞Εͨ &$ αΠ τ޲͚ $.4 ɾࠃ࢈ &$ αΠ τ޲͚ $.4 ͷ୅දతϒϥϯυ ɾ։ൃΛओಋ͢Δͷ͸େࡕͷιϑ τ΢ΣΞϝʔΧʔͰ͋Δ גࣜձࣾϩοΫΦϯ
6. ࠓ೔͓࿩͍ͨ͜͠ͱ ɾ໿  ೥ؒɺ&$$6#& ؅ཧը໘ͷ 6* σβΠφʔͱͯؔ͠Θͬͨ ɾཧ૝ͱ͍ͯ͠Δϓϩηεʹ͸·ͩ·ͩԕ͍ ɾσβΠφʔͷࢹ఺ͰৼΓฦΓͳ͕Βɺͱ͘ʹσβΠϯϓϩηεʹ ͍ͭͯ൓ল
7. ΞδΣϯμ ɾ&$$6#&
    ؅ཧը໘ͷಛ௃ ɾࢲ͕࣮ફ͍ͨ͠ཧ૝ͷσβΠϯϓϩηε ɾ͜ͷϓϩδΣΫ τͰ੒͠਱͔͛ͨͬͨ͜ͱ ɾσβΠφʔࢹ఺͔Βݟ͓͓ͨ·͔ͳϓϩδΣΫ τͷྲྀΕ ɾͰ͖ͨ͜ͱɺͰ͖ͳ͔ͬͨ͜ͱ ɾ͜Ε͔Βͷ͜ͱ
8. &$$6#&
   
   ؅ཧը໘ͷಛ௃
9. &$$6#&
   ܥϕʔεʹੵۃతվળ &$$6#&
    &$$6#&
   
10. Ұը໘ʹ͓͞ΊΔ৘ใྔ૿ˢ
11. &$$6#&
    ܥ
12. &$$6#&
    
13. Ұཡϖʔδ͔Βͷૢ࡞ΛΑΓ؆୯ʹ
14. ओཁ6*ͷίϯϙʔωϯ τԽɺ ମݧͷ౷Ұ
15. ख़࿅౓ͷ௿͍Ϣʔβʔ΁ͷ഑ྀ
16. ࢲ͕ߟ͑Δ ཧ૝ͷσβΠϯϓϩηεͷࠜຊ
17. લఏͱͯ͠ ͲͷҊ݅ʹ΋࢖͑Δ ʮཧ૝ͷϓϩηεʯ͸ଘࡏ͠ͳ͍
18. σβΠ ϯ Λ ʮΈΜ ͳʯ Ͱͭ ͘ Δ
19. ʮΈΜͳʯ ͬͯ୭ ʁ 1. ΫϥΠΞϯτ σβΠφʔ γεςϜ؅ཧऀ ϓϥάΠϯ։ൃऀ γϣ οϓϚελʔ ϑϩϯτΤϯυΤϯδχΞ όοΫΤϯυΤϯδχΞ νʔϜ Ϣʔβʔ
20. ΈΜͳͰσβΠϯɺ Մೳͳͷ ʁ ҙݟΛݴ͏ਓ͕૿͑Δ΄Ͳ ϓϩδΣΫ τͷෆ࣮֬ੑ͕૿͢
21. ݶΒΕͨϦιʔεͰ Ͳ͏ෆ࣮֬ੑͱઓ͏͔
22. Ϧʔϯ ɾ ελʔτΞοϓ ɾىۀΛ҆શʹ͓͜ͳ͏ͨΊͷ ϑϨʔϜϫʔΫ ɾ ೥ʹىۀՈͷΤϦ οΫɾ Ϧʔε͕ߟҊɾൃද ɾෆ࣮֬ੑ͕ߴ͍ϓϩμΫ τͷ σβΠϯʹ΋Ԡ༻Ͱ͖Δ Photo by JD Lasica (CC BY 2.0)
23. ɾΞΠσΞΛͰ͖Δ͚ͩ଎͘ Χλνʹ͢Δ ɾ.71ʢ.JOJNVN
    7JBCMF
    1SPEVDUʜ࣮༻࠷খݶͷ঎඼ʣ Λͭ͘Δ ɾϓϩτλΠϓʹݴ͍׵͑ΒΕΔ ΞΠσΞ ੡඼ σʔλ ߏங ֶश ଌఆ Ϧʔϯ ɾ ελʔτΞοϓͷαΠΫϧ
24. ɾ.71 ΛΞʔϦʔΞμϓλʔʹ ݟͤɺσʔλΛಘΔ ɾσʔλʹֶͼɺվળͷͨΊͷ ΞΠσΞΛੜΉ ɾվળ͞Εͨ΋ͷΛ·ͨͭ͘Δ ΞΠσΞ ੡඼ σʔλ ߏங ֶश ଌఆ Ϧʔϯ ɾ ελʔτΞοϓͷαΠΫϧ
25. ɾֶͼͳ͕ΒਐΉɾਐΉ͜ͱͰ ͞ΒʹֶͿ ɾमਖ਼ͷ࿈ଓ͕લఏ ɾະ׬੒඼Ͱ͋Δ͜ͱΛલఏʹ ͯ͠ʮΈΜͳʯͰϨϏϡʔ ɾͰ͖Δ͚ͩ଎͘ճ͢ ΞΠσΞ ϓϩτλΠϓ σʔλ ߏங ֶश ଌఆ ϓϩμΫ τͷσβΠϯʹ΋༗ޮ
26. ɾϞμϯͳσβΠϯπʔϧͷొ৔ ɾ4LFUDIɺ9%ɺ'JHNB ͳͲ ɾΤϯδχΞ͕͍ͳͯ͘΋؆қͳ ϓϩτλΠϐϯά͕Ͱ͖Δ ɾγϯϘϧʹΑΔσβΠϯσʔλ ͷߏ଄Խˠมߋʹڧ͍ ϦʔϯͳσβΠϯ͕Մೳʹͳͬͨഎܠ
27. &$$6#&
    σβΠϯͷྲྀΕ
28. ɾ ೥  ݄
    ΩοΫΦϑʢެ։͸  ೥य़༧ఆͩͬͨʣ ɾʙ िʹҰ౓ɺσβΠϯϨϏϡʔΛϦΞϧʹू·ͬͯ܁Γฦ͢ ɾࢀՃऀ͸גࣜձࣾϩοΫΦϯͷϓϩμΫ τϚωʔδϟʔɾ։ൃਞɾ σβΠφʔਞɾͦͯ͠ࢲ ɾಉ࣌ʹσβΠϯΨΠυ΋੍࡞։࢝ ΩοΫΦϑʙϑΝʔε τ ɾ σβΠϯ੍࡞ ೥݄ʙ݄
29. ໿ը໘෼ͷσβΠϯΛ ϨϏϡʔΛ܁Γฦ͠ͳ͕Β੍࡞
30. ϓϩτλΠϐϯά͸*O7JTJPOΛར༻
31. ɾ͜͜ͰఆظϛʔςΟϯά͸Ұ୴ऴྃ ɾ֤ίϯϙʔωϯ τͷσβΠϯεϖοΫͷ੔ཧͱڞ༗ ɾσβΠϯʹ͓͚Δݒ೦఺ͷަ׵ͱରԠ ɾϞοΫͷνΣ οΫͱϑΟʔυόοΫ ϑϩϯ τΤϯυνʔϜʹΑΔϞοΫ੍࡞ ೥݄ʙ
32. ɾ ೥  ݄
    &$$6#&
    O
    Ћ൛ެ։ ɾϢʔβʔϑΟʔυόοΫʹΑΔػೳมߋ ɹ
    ஫จपΓͷػೳɾը໘ઃܭͷେ෯มߋ ɹ
    ϒϨΠΫϙΠϯ τͷมߋͱϨεϙϯγϒͳσβΠϯͷඍௐ੔ ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆ Ћ൛ެ։ ɾ ։ൃ͕ຊ֨Խ ೥݄ʙ
33. ɾ໨ۄػೳͷͻͱͭɺΦʔφʔζε τΞͷ؅ཧը໘૊ΈࠐΈ σβΠϯʜϓϥάΠϯ͕؅ཧը໘͔ΒΠϯε τʔϧՄೳʹ ɾҰํͦͷଞͷը໘͸ػೳΛ 'JY ɾϲ݄΄ͲνʔϜϛʔςΟϯά෮׆ Ќ൛ެ։ɻ ։ൃόʔδϣϯ͸O͔Β΁ ೥݄ʙ
34. ਖ਼ࣜϦϦʔεʹΉ͚ͯυΩϡϝϯ τ੍࡞ ೥݄ʙ
35. ഑෍༻σβΠϯσʔλ ʢ4LFUDIʣ
36. σβΠϯΨΠυ ʢ1%'ʣ
37. &$$6#&
    
    ਖ਼ࣜϦϦʔε ೥݄೔
38. Ͱ͖ͨ͜ͱɺ Ͱ͖ͳ͔ͬͨ͜ͱ
39. มߋʹڧ͍σβΠϯσʔλͷ࣮ݱ ɾγϯϘϧʹΑΔߏ଄ԽʹΑͬͯมߋʹڧ͍σβΠϯΛ࣮ݱ ɾجຊϑΥϯ ταΠζͷมߋʹ΋࠷௿ݶͷ޻਺ͰରԠ ɾͲ͔͜ͰγϯϘϧͷσʔλΛյ͢ͱશମʹѱӨڹ͕ग़Δ
41. Ϣʔβʔମݧ΁ͷੵۃతؔ༩ ɾϥϕϦϯάΛඇΤϯδχΞ޲͚ʹೈԽ ɾΠϯλϥΫςΟϒͳςΩε τʹରͯ͠ੵۃతʹಇ͖͔͚Δ ɾπʔϧνοϓͷඞཁͳՕॴͷચ͍ग़͠ͱจݴͷϥΠςΟϯά
43. ϦʔϯͳσβΠϯ͸ݶఆత࣮ફʹ
44. ɾ1.ɾΤϯδχΞɾσβΠφʔ͕ සൟʹձͬͯσβΠϯϨϏϡʔ ɾϛʔςΟϯάͰ্͕ͬͨ໰୊఺͸ ϛʔςΟϯάͷ͏ͪʹݕূ ɾϛʔςΟϯά͕ऴΘͬͨΒ  ׂͷ मਖ਼͕׬͍ྃͯ͠Δ ఆྫϛʔςΟϯά͕༗ޮʹ࡞༻ σβΠϯϑΣʔζ
45. ҙਤΛ఻͑Δʹ͸ग़ͤͨ ΋ͷ͕଍Γͳ͍ʜʢͰ΋ ๩͍͠ʜʣ ͳʹΛ͍ͭ·Ͱʹ ࢧڅͯ͠΋Β͑Δ͔ͳ ʁ ൺֱͯ͠ϑϩϯ τΤϯυ։ൃνʔϜͱͷ ίϛϡχέʔγϣϯີ౓ΛͱΕͳ͔ͬͨ ϑϩϯτΤϯυ։ൃϑΣʔζ
46. ͪΐ ͬͱσβΠϯ ௚͍ͨ͠ͳʔ όά͕͋ͬͨΑʔ ͜͜௚ͤͳ͍ ʁ ɾνέο τͷࢁͱ֨ಆ͢Δຖ೔ ɾϢʔβʔௐࠪͰ·ͨ૿͑Δνέο τ
    ๩͍͠ ʂ ϓϩμΫ τ΁ͷΞΫηε͕ࠔ೉ʹ ։ൃ͕ຊ֨Խ
47. ϓϩδΣΫ τશମͰճ͢ͷ͸೉͍͠
48. ϑΣΠζ͝ͱʹճͤͳ͍͔ ˠ ˠ ˠ σβΠϯ ϑϩϯ τΤϯυ ։ൃ ։ൃ࣮૷
49. ͍΍ɺ ΍͸Γ೉͍͠ ˠ ˠ ˠ σβΠϯ ϑϩϯ τΤϯυ ։ൃ ։ൃ࣮૷
50. ɾεϓϦϯ τʢҰఆͷ୹͍։ൃظؒʣ͝ͱʹσβΠφʔϨϏϡʔΛ ೖΕΔͳΒɺ࠷ॳ͔Βҙࣝ߹ΘͤΛ ɾͲ͏͍͏σβΠϯͷ΍ΓํΛ͍͔ͨ͠ɺे෼ʹνʔϜͱ ࿩͋͠Θͳ͚Ε͹ɺͦͷͱ͓Γʹ͸ಈ͔ͳ͍ʢ౰ͨΓલʣ ൓ল
51. ͜Ε͔Βͷ͜ͱ
52. ɾΉ͠ΖվળͷαΠΫϧ͕ඞཁʹͳΔͷ͸͜Ε͔Β ɾ֤஍ͰߦΘΕΔϢʔβʔϛʔτΞοϓΠϕϯ τ ɾܶతʹ૿͑ΔϢʔβʔϑΟʔυόοΫ΁ͷରԠ ɾϦϦʔεόʔδϣϯͰ͸࣮ݱͰ͖ͳ͔ͬͨσβΠϯ্ͷ ࡉ͔͍վળ఺ʹ౿ΈࠐΈ͍ͨ &$$6#&
    ͷ։ൃ͸ͭͮ͘
53. ɾ͓΋ʹϓϥάΠϯ։ൃऀͷҙݟΛฉ͖ΑΓ࣮༻తͳΨΠυʹ ɾ&$$6#& ؅ཧը໘ͷσβΠϯ͔ΒଐਓੑΛͰ͖Δ͔͗Γ গͳ͍ͨ͘͠ ɾΨΠυͷվగɺ഑෍͢ΔσβΠϯσʔλͷϒϥογϡΞοϓ ଐਓੑͷগͳ͍σβΠϯʹ
54. ɾ4LFUDI ൛ʹՃ͑ɺ9% ൛ͷ؅ཧ ը໘σβΠϯσʔλΛ੍࡞ ɾγϯϘϧͷॊೈੑʹ͔͚Δ͕ɺΑ Γଟ͘ͷਓʹ͞Θͬͯ΋Β͑Δϓ ϥο τϑΥʔϜ ɾ໨ࢦͤɺࠓ೥தͷެ։ 9%൛؅ཧը໘σβΠϯσʔλ
55. ·ͱΊ
56. ɾ ʮࢲ͸ʯϦʔϯͳσβΠϯϓϩηεʹڵຯΛ΋͍ͬͯΔ ɾૣ͘ΧλνʹͰ͖Δͷ͸΍͸Γ͍͍͜ͱ ɾνʔϜ͕ूͬͯίϛϡχέʔγϣϯΛऔΕΔ͜ͱ͸͍ͥΜେ੾ ɾ1. ͱσβΠφʔͱ։ൃਞ͕ҰମʹͳͬͯαΠΫϧΛճ͢͜ͱ͸ ೉͍͠ ɾࠓޙͷϓϩμΫ τվળϑΣΠζʹ૬Ԡ͍͠ϓϩηεΛνʔϜͷ օ͞·ͱߟ͍͑ͨ
57. ʮΈΜ ͳͰσβΠ ϯʯ ͢ Δ ͨΊʹ σβΠ φʔ͕ߩݙͰ ͖ Δ ෼໺͸࣮֬ʹ޿͕ͬ ͍ͯ Δ
58. ͋ͳͨͷσβΠ ϯ ϓϩ η εɺ ͥͻڭ͑ ͯ ͘ ͩ͞ ͍
59. ΋͏ͻͱͭ
61. ͓ΊͰͱ͏͍͟͝·͢ ʂ
62. ͋Γ͕ͱ͏͍͟͝·ͨ͠ !LPKJSPGVLB[BXB !XJUDI@EPLUPS