CSS Nite LP53 - 「闇」をなくすためのコミュニケーションとユーザーテスト

デザイナーにとってワイヤーフレームは「指示」なのでしょうか？

現在、私はデザインチームのマネージメントを行っていますが、ディレクターからワイヤーフレームを受け取ったとき、「デザイナーの視点で考えて、より良いデザインを提案をしてほしい」と常に伝えています。

それぞれの視点で意見をぶつけあい、デザインをブラッシュアップさせられると考えているからです。であれば、積極的に議論をしない手はありません。

このセッションでは、楽天トラベルにおいてどのような議論をして案件を進めているのか、実例を交えながら紹介します。

Transcript

1. ʮҋʯΛͳͨ͘͢Ίͷ
   ίϛϡχέʔγϣϯͱϢʔβʔςετɻ CSS Nite LP53 ྛ
   େี 2017.09.30
2. ྛ
   େี ָఱגࣜձࣾ
   τϥϕϧࣄۀ
   ϓϩμΫτσβΠϯࣨ
   Ϛωʔδϟʔ projectdd.jp ݸਓϒϩά @HayashiDaisuke
3. ೥൒ͿΓʂ  
4. ηϛφʔຊฤͰ঺հ࣮ͨ͠ྫʹ͍ͭͯɺ
   ͜ͷެ։༻εϥΠυͰ͸ɺ࡟আ΋͘͠͸Ұ෦Ճ޻Λ͠·ͨ͠
5. ҋ
6. ҋ ίϛϡχέʔγϣϯ Ϣʔβʔςετ
7.  ָఱτϥϕϧͷମ੍
    ίϛϡχέʔγϣϯʹ͍ͭͯ
    Ϣʔβʔςετʹ͍ͭͯ
    ·ͱΊ ࠓ೔͓࿩͢͠Δ͜ͱ
8. ࠓ೔ͷ͓࿩͸ɺ
   ָఱάϧʔϓ಺ͷΠνࣄۀ෦ʹ͓͚Δ
   Πϯϋ΢εͷ࣮ྫ঺հͰ͢ ʜͷલʹ
9.  ָఱτϥϕϧͷମ੍
    ίϛϡχέʔγϣϯʹ͍ͭͯ
    Ϣʔβʔςετʹ͍ͭͯ
    ·ͱΊ
10. w ࠃ಺ཱྀߦɾւ֎ཱྀߦ
    w ϗςϧɾπΞʔɾߤۭ݊ɾϨϯλΧʔɾόεͳͲ ݴޠͰαʔϏεΛల։ ೔ຊ࠷େڃͷ૯߹ཱྀߦαΠτ
11. ༷ʑͳ՝୊ αΠτɾΞϓϦͷ
    ࢖͍উख Ϗδωεͷ੒௕ ࢢ৔ɾ؀ڥͷมԽ ڝ߹ͷ୆಄ طଘϓϩμΫτͷվળ ৽نϓϩμΫτͷఏڙ
12. ϓϩμΫτ ΑΓ࢖͍΍͘͢
    վળ͢Δ αΠτɾΞϓϦ্ʹ
    ػೳΛ௥Ճ͢Δ ৽͍͠ΞϓϦΛ
    ఏڙ͢Δ ৽͍͠αʔϏεΛ
    ఏڙ͢Δ طଘϓϩμΫτͷվળ ৽نϓϩμΫτͷఏڙ
13. (Product Manager) PM σβΠφʔ ΤϯδχΞ ϓϩμΫτ
14. w Ҋ݅ͷఏҊ
    w 6*σβΠϯ
    w ϓϩτλΠϓ࡞੒
    w Ϣʔβʔςετͷ࣮ࢪ
    w σβΠϯεϖοΫͷ࡞੒ w Ҋ݅ͷఏҊɾىҊ
    w ࢓༷ॻͷ࡞੒
    w ཁ݅ఆٛ
    w ϫΠϠʔϑϨʔϜ࡞੒
    w Ϣʔβʔςετͷ࣮ࢪ
    w ਐḿ؅ཧ
    w ޮՌଌఆ σβΠφʔ PM (Product Manager)
15. ໊ 7 ͏ͪɺϚωʔδϟʔɹ໊ 1 ໊ Ћ 30 ͏ͪɺϚωʔδϟʔɹ໊ 3 σβΠφʔ PM (Product Manager) γχΞϚωʔδϟʔ ೥݄ݱࡏ
16. Ҋ݅ͷΞαΠϯ ࢓༷ॻͷ࡞੒ w ཁ݅ఆٛ
    w ϫΠϠʔϑϨʔϜ
    w Ϣʔβʔςετ σβΠφʔ PM (Product Manager)
17. 6*σβΠϯ
    ϓϩτλΠϓ Ϣʔβʔςετ Ξοϓσʔτ ϨϏϡʔ ࢓༷ॻͷ׬੒ ٞ࿦ ٞ࿦
18.  ָఱτϥϕϧͷମ੍
     ίϛϡχέʔγϣϯʹ͍ͭͯ
     Ϣʔβʔςετʹ͍ͭͯ
     ·ͱΊ
19. ͋Δ͋Δʢʣ ҋ ਓʹΑͬͯ
    ϫΠϠʔϑϨʔϜͷ
    ఆ͕ٛҟͳΔ σΟϨΫλʔʹΑͬͯ
    Ͳ͜·ͰϫΠϠʔϑϨʔϜʹ
    ै͏΂͖͔มΘΔ ஧࣮ʹ࠶ݱͯ͠ཉ͍͠ͷʁ
    ࢀߟఔ౓ͳͷʁ ϫΠϠʔϑϨʔϜΛ
    Ͳ͜·Ͱ࡞ΓࠐΉ ϫΠϠʔϑϨʔϜ ͷਫ਼౓͕௿͍
20. ਓʹΑͬͯ
    ϫΠϠʔͷఆ͕ٛҧ͏ σΟϨΫλʔʹΑͬͯ
    Ͳ͜·ͰϫΠϠʔϑϨʔϜʹ
    ै͏΂͖͔มΘΔ ஧࣮ʹ࠶ݱͯ͠ཉ͍͠ͷʁ
    ࢀߟఔ౓ͳͷʁ ϫΠϠʔϑϨʔϜΛ
    Ͳ͜·Ͱ࡞ΓࠐΉ ϫΠϠʔͷਫ਼౓͕
    ௿͍ ϫΠϠʔϑϨʔϜͷཱͪҐஔɺ
    ఆ·͍ͬͯͳ͍໰୊ ͋Δ͋Δʢʣ ҋ
21. ϫΠϠʔϑϨʔϜʹ
    ҾͬுΒΕ͗ͣ͢
    σβΠϯ͢Δํ๏ σβΠϯ͕
    ϫΠϠʔϑϨʔϜʹ
    Ҿ͖ḡΒΕΔ ϫΠϠʔϑϨʔϜʹ
    नΘΕ͍͗ͯ͢Δ ϫΠϠʔϑϨʔϜ௨Γͷ
    σβΠϯ͕͕͋ͬͯ͘Δ σβΠφʔʹ͸
    ϓϥεΞϧϑΝΛ
    ظ଴͍ͨ͠ ϫΠϠʔϑϨʔϜ௨Γʹ
    ࢓্͕ΔͷΛ๷͍͗ͨ ͋Δ͋Δʢʣ ҋ
22. ϫΠϠʔʹҾͬுΒΕ͗ͣ͢
    σβΠϯ͢Δํ๏ σβΠϯ͕
    ϫΠϠʔϑϨʔϜʹ
    Ҿ͖ḡΒΕΔ ϫΠϠʔϑϨʔϜʹ
    नΘΕ͍͗ͯ͢Δ ϫΠϠʔϑϨʔϜ௨Γͷ
    σβΠϯ͕͕͋ͬͯ͘Δ σβΠφʔʹ͸
    ϓϥεΞϧϑΝΛ
    ظ଴͍ͨ͠ ϫΠϠʔ௨Γʹ࢓্͕ΔͷΛ
    ๷͍͗ͨ σβΠφʔɺϫΠϠʔϑϨʔϜ௨Γʹ
    σβΠϯ͢Δ໰୊ ͋Δ͋Δʢʣ ҋ
23. ཱͪҐஔΛ໌֬ʹ͢Δ PM σβΠφʔ Ϛωʔδϟʔ Ҋ݅ͷഎܠɾ՝୊Λ఻͑Δ ࣗΒͷࢹ఺Ͱߟ͑ൈ͘ ϫΠϠʔϑϨʔϜͷཱͪҐஔ
    ϫΠϠʔϑϨʔϜ௨Γ
24. ཱͪҐஔΛ໌֬ʹ͢Δ γχΞϚωʔδϟʔ 1.ͱσβΠφʔ͸ʮର౳ʯͰ͋Δ Ϛωʔδϟʔ
25. w 1.͸ࢦشऀͰ͋Δ͕ɺࢦࣔऀͰ͸ͳ͍
    w ͓ޓ͍ͷࢹ఺Ͱٞ࿦ͯ͠ɺΑΓྑ͍΋ͷʹ γχΞϚωʔδϟʔ 1.ͱσβΠφʔ͸ʮର౳ʯͰ͋Δ
26. σβΠφʔʹ͸ϫΠϠʔϑϨʔϜΛյ͢ݖར͕͋Δ
27. w ϫΠϠʔϑϨʔϜΛड͚औͬͯࢥߟఀࢭͤͣɺ
 σβΠφʔͱͯ͠ϕετͳఏҊΛߟ͑ͯཉ͍͠ σβΠφʔʹ͸ϫΠϠʔϑϨʔϜΛյ͢ݖར͕͋Δ
28. 1.ͱσβΠφʔ͸ର౳
    Կ͕ϕετ͔ٞ࿦͢Δ ʮϫΠϠʔϑϨʔϜ͸ٞ࿦ͷग़ൃ఺Ͱ͋Δʯ ϫΠϠʔϑϨʔϜΛ௒͑ͯ
    ΑΓΠΠ΋ͷΛ࡞Δ ཱͪҐஔΛ໌֬ʹ͢Δ
29. Ҋ݅ͷഎܠɾ՝୊Λ఻͑Δ ࢓༷ॻ PM
30. w ϓϩμΫτʹ͖ͭ࢓༷ॻ w ͜ͷ࢓༷ॻΛϕʔεʹ
 1.ɾσβΠφʔɾΤϯδχΞ͕
 Ҋ݅ΛਐΊ͍ͯ͘ ࢓༷ॻ
31. • Issue • Scenario • Goal • KPI • Requirement • Wireframe ࢓༷ॻ എܠɾ՝୊
32. ࢓༷ॻ • Issue • Scenario • Goal • KPI • Requirement • Wireframe ͲΜͳ՝୊͕͋Δ͔
    Ϣʔβʔ͕ͲͷΑ͏ʹ࢖͏ͷ͔
    ࣮ݱ͍ͨ͜͠ͱ͸
    ۩ମతͳ੒Ռ͸
    ࣮ݱ͢ΔͨΊʹ΍Δ͜ͱ͸
    ͲͷΑ͏ʹ࣮ݱ͍͔ͨ͠
33. എܠɾ՝୊Λཧղ͢Δ͜ͱ͕
    ϫΠϠʔϑϨʔϜΛ௒͑ΔୈҰา PM σβΠφʔ ࢓༷ॻ എܠɾ՝୊ ϫΠϠʔϑϨʔϜ ʴ Ҋ݅ͷഎܠɾ՝୊Λ఻͑Δ
34. ࣗΒͷࢹ఺Ͱߟ͑ൈ͘ ٞ࿦Λ͢ΔͨΊʹσβΠϯΛ͢Δ ͜͜Ͱ͸ࢲݸਓͷσβΠϯϑϩʔΛ঺հ͠·͢ σβΠφʔ
35. ϫΠϠʔϑϨʔϜ
36. ΄΅ϫΠϠʔ௨Γͷ
 σβΠϯΛ࡞੒ 1.ͷҙਤΛ἞ΈऔΔ ϫΠϠʔϑϨʔϜ "Ҋ
37. ϋϯόʔΨʔΞΠίϯ
    ͬͯ఻ΘΔͷʁ ϝχϡʔΛ෼͚Δඞཁ͋Δʁ ϫΠϠʔϑϨʔϜ "Ҋ
38. ϫΠϠʔϑϨʔϜ "Ҋ #Ҋ
39. ࣗΒͷࢹ఺Ͱߟ͑ൈ͘ w σβΠϯΛ௨ͯ͡ɺٞ࿦͍ͨ͠ϙΠϯτΛ໌֬ʹ͢Δ PM σβΠφʔ ϝχϡʔΛ෼͚ͳͯ͘΋ʜ ͔ͨ͠ʹʂ
40. ίϛϡχέʔγϣϯ ཱͪҐஔΛ໌֬ʹ͢Δ PM σβΠφʔ Ϛωʔδϟʔ Ҋ݅ͷഎܠɾ՝୊Λ఻͑Δ ࣗΒͷࢹ఺Ͱߟ͑ൈ͘
41.  ָఱτϥϕϧͷମ੍
     ίϛϡχέʔγϣϯʹ͍ͭͯ
     Ϣʔβʔςετʹ͍ͭͯ
     ·ͱΊ
42. ͓ޓ͍ͷҙݟ͕෼͔ΕΔ ͦͷσβΠϯɾػೳͰ͍͍ͷʁ ϋϯόʔΨʔ
    ޷͖ ϋϯόʔΨʔ
    ݏ͍ ϋϯόʔΨʔ
    ʹ͠·͠ΐ͏
43. ϋϯόʔΨʔ
    ޷͖ ϋϯόʔΨʔ
    ݏ͍ ϋϯόʔΨʔ
    ʹ͠·͠ΐ͏ ͓ޓ͍ͷҙݟ͕෼͔ΕΔ ͦͷσβΠϯɾػೳͰ͍͍ͷʁ ςετͯ֬͠ೝͯ͠Έ·͠ΐ͏
44. Ϣʔβʔςετ ΋ͬͱؾܰʹςετΛ͠·͠ΐ͏ʂ ϛϥʔϧʔϜʁ Ϟχλʔઃඋʁ ָఱϦαʔν
    ΠϯλϏϡʔϧʔϜ
    IUUQTSFTFBSDISBLVUFODPKQTFSWJDFJOUFSWJFXSPPNIUNM
45. ͳͥɺϢʔβʔςετ w தͷਓͷɺ੍࡞ऀͷৗ͕ࣝؒҧ͍ͬͯΔ͜ͱ͕͋Δ
    w Ҋ݅ʹϑΥʔΧε͍ͯ͠Δͱࢹ໺͕ڱ͘ͳΓ͕ͪ ୈࡾऀɾϢʔβʔ͔Β
    μΠϨΫτͳϑΟʔυόοΫΛಘΒΕΔ
46. Ҋ݅ͷΞαΠϯ ࢓༷ॻͷ࡞੒ ཁ݅ఆٛ
    ϫΠϠʔϑϨʔϜ
    Ϣʔβʔςετ ϨϏϡʔ ϩʔϯν 6*σβΠϯ
    ϓϩτλΠϓ Ϣʔβʔςετ Ξοϓσʔτ ٞ࿦ ࢓༷ॻͷ׬੒ ϫΠϠʔϑϨʔϜΛ
    ߟ͍͑ͯΔϑΣʔζ 1.ͱσβΠφʔ͕
    ٞ࿦͍ͯ͠ΔϑΣʔζ ࠷ऴ֬ೝɺ΋͘͠͸
    ϩʔϯνޙͷνΣοΫ
47. Ϣʔβʔςετͷํ๏ " PO
    ΠϯλϏϡʔௐࠪ
    # ΦϯϥΠϯϢʔβʔςετ
    $ ϑΥʔΧεάϧʔϓΠϯλϏϡʔ ͳͲ
48. PO
    ΠϯλϏϡʔௐࠪ w ϓϩτλΠϓΛ৮ͬͯ΋Β͍ͳ͕Βɺ
 Ͳ͜Ͱͭ·͔ͮ͘Λ֬ೝ
    w ࣾ಺ͰඃݧऀΛ୳͢
    w ϓϩτλΠϓͷෆ۩߹͕͋ͬͯ΋ϑΥϩʔͰ͖Δ
49. ΦϯϥΠϯϢʔβʔςετ w ςετର৅ͷ63-ͱɺγφϦΦΛೖྗ
    w ू·ͬͨީิ͔ΒඃݧऀΛબͿ
    w ίετΛ཈͑ͯɺૣ͘ɾؾܰʹ࣮ࢪͰ͖Δ
50. w Ϣʔβʔςετ͸ʮ՝୊Λൃݟ͢Δʯ͜ͱ͕໨త
    w ଟ਺ܾͰ͸ͳ͍ ͨͩͷʮҙݟʯͰͷٞ࿦͔Βɺ
    ʮσʔλʯʹجͮࠜ͘ڌͷ͋Δٞ࿦͕Ͱ͖Δ
51. PM σβΠφʔ ϋϯόʔΨʔݏ͍ ϋϯόʔΨʔ޷͖
52. PM σβΠφʔ ϋϯόʔΨʔݏ͍ ϋϯόʔΨʔ޷͖ ϋϯόʔΨʔϝχϡʔ
    ೝ஌͞Ε͍ͯ·͢Ͷ ຊ౰Ͱ͢Ͷɻ
    ໰୊ͳ͍Ͱ͢Ͷʂ
53. ͲΕ͘Β͍ʁ w ਓΑΓଟͯ͘΋
 ൃݟ͞ΕΔ՝୊ͷ਺͸
 ͋·ΓมΘΒͳ͍ɻ 8IZ
    :PV
    0OMZ
    /FFE
    UP
    5FTU
    XJUI
    
    6TFST
    IUUQTXXXOOHSPVQDPNBSUJDMFTXIZZPVPOMZOFFEUPUFTUXJUIVTFST w Ϣʔβʔଐੑ͝ͱʹ
    ʙਓ 85% 5ਓ
54. ΫϥΠΞϯτ͕
    ΠϝʔδΛ࣋ͯͣɺ
    ͋ͱ͔Βमਖ਼͕ೖΔ σβΠϯޙʹ
    มߋʹͳΔ͜ͱ͕ଟ͍ ͋Δ͋Δʢʣ ҋ
55. ΫϥΠΞϯτ͕
    Πϝʔδ͕࣋ͯͣɺ
    ͋ͱ͔Βमਖ਼͕ೖΔ σβΠϯޙʹ
    มߋʹͳΔ͜ͱ͕ଟ͍ ϫΠϠʔϑϨʔϜ
    ͲΜͲΜมΘ͍ͬͯ͘໰୊ ͋Δ͋Δʢʣ ҋ
56. Ҋ݅ͷΞαΠϯ ࢓༷ॻͷ࡞੒ ཁ݅ఆٛ
    ϫΠϠʔϑϨʔϜ
    Ϣʔβʔςετ ϨϏϡʔ ϩʔϯν 6*σβΠϯ
    ϓϩτλΠϓ Ϣʔβʔςετ Ξοϓσʔτ ٞ࿦ ࢓༷ॻͷ׬੒ ϨϏϡΞʔʹԿ͔ݴΘΕͯ΋
 ʮσʔλʯͱڞʹҙݟ͕ݴ͑Δ ϫΠϠʔϑϨʔϜʹมߋ͕͋ͬͯ΋
 ʮσʔλʯ͕͋Ε͹ೲಘײ͕ҟͳΔ ॳظஈ֊͔ΒςετΛ࣮ࢪͯ͠
 ϫΠϠʔϑϨʔϜͷมߋΛ๷͙
57. Ϣʔβʔςετ w ϓϩδΣΫτͷॳظஈ֊Ͱ΋༗ޮ
 ʢϫΠϠʔϑϨʔϜ࡞੒தɺσβΠϯதʜʣ ςετΛ௨ͯ͡ɺϫΠϠʔϑϨʔϜɺ
    σβΠϯͷਫ਼౓Λ্͛Δ
58.  ָఱτϥϕϧͷମ੍
     ίϛϡχέʔγϣϯʹ͍ͭͯ
     Ϣʔβʔςετʹ͍ͭͯ
     ·ͱΊ
59. ίϛϡχέʔγϣϯ Ϣʔβʔςετ ҋ w ཱͪҐஔΛ໌֬ʹ
    w എܠɾ՝୊Λ఻͑Δ
    w ࣗΒͷࢹ఺Ͱߟ͑ൈ͘ w σʔλʹجͮ͘
 ࠜڌͷ͋Δٞ࿦Λ
    w ϫΠϠʔϑϨʔϜɺ
 σβΠϯͷਫ਼౓Λ্͛Δ
60. ͋Γ͕ͱ͏͍͟͝·ͨ͠