Pro Yearly is on sale from $80 to $50! »

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

21a5bc627ca0f66c8e3bccbd18aefc44?s=47 Fukazawa Kojiro
November 24, 2018

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

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

21a5bc627ca0f66c8e3bccbd18aefc44?s=128

Fukazawa Kojiro

November 24, 2018
Tweet

Transcript

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

  2. ਂ୔޾࣏࿠ େࡕࡏॅɺ ϑϦʔϥϯε ΢ΣϒσβΠφʔ اը ɾ ϥΠςΟϯά ɾ σΟϨΫγϣϯ σβΠϯ

    ɾ )5.-$44ίʔσΟϯά $.4ͷઃܭ࣮૷ͳͲ ϑΧβϫ ɾ ί΢δϩ΢ !LPKJSPGVLB[BXB !XJUDI@EPLUPS
  3. None
  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ʢ.JOJNVN7JBCMF 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. มߋʹڧ͍σβΠϯσʔλͷ࣮ݱ ɾγϯϘϧʹΑΔߏ଄ԽʹΑͬͯมߋʹڧ͍σβΠϯΛ࣮ݱ ɾجຊϑΥϯ ταΠζͷมߋʹ΋࠷௿ݶͷ޻਺ͰରԠ ɾͲ͔͜ͰγϯϘϧͷσʔλΛյ͢ͱશମʹѱӨڹ͕ग़Δ

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

  42. None
  43. ϦʔϯͳσβΠϯ͸ݶఆత࣮ફʹ

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

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

  46. ͪΐ ͬͱσβΠϯ ௚͍ͨ͠ͳʔ όά͕͋ͬͨΑʔ ͜͜௚ͤͳ͍ ʁ ɾνέο τͷࢁͱ֨ಆ͢Δຖ೔ ɾϢʔβʔௐࠪͰ·ͨ૿͑Δνέο τ

    ๩͍͠ ʂ ϓϩμΫ τ΁ͷΞΫηε͕ࠔ೉ʹ ։ൃ͕ຊ֨Խ
  47. ϓϩδΣΫ τશମͰճ͢ͷ͸೉͍͠

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

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

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

  51. ͜Ε͔Βͷ͜ͱ

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

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

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

  55. ·ͱΊ

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

  57. ʮΈΜ ͳͰσβΠ ϯʯ ͢ Δ ͨΊʹ σβΠ φʔ͕ߩݙͰ ͖ Δ

    ෼໺͸࣮֬ʹ޿͕ͬ ͍ͯ Δ
  58. ͋ͳͨͷσβΠ ϯ ϓϩ η εɺ ͥͻڭ͑ ͯ ͘ ͩ͞ ͍

  59. ΋͏ͻͱͭ

  60. None
  61. ͓ΊͰͱ͏͍͟͝·͢ ʂ

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