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

クラウドワークスとデザインガイドライン

5651249e8a50ba212fd8c19727479aac?s=47 Takeru Hirose
October 18, 2017

 クラウドワークスとデザインガイドライン

Nextstage Nite vol.2 - 実践されるデザインガイドライン -
https://connpass.com/event/68231/

登壇レポート (CrowdWorks Designer Blog):
http://designer.crowdworks.co.jp/entry/nextstage_nite-02

5651249e8a50ba212fd8c19727479aac?s=128

Takeru Hirose

October 18, 2017
Tweet

Transcript

  1. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE Ϋϥ΢υϫʔΫεͱ σβΠϯΨΠυϥΠϯ 69σβΠϯάϧʔϓ ኍ੉݈ɺ্ా࿨ਅ

  2. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ্ా࿨ਅ ϦʔυσβΠφʔ ೥ɺਆಸ઒ݝੜ·Εɻ೥݄ʹגࣜձࣾΫϥ΢υϫʔΫε ʹ৽ଔೖࣾʢୈظੜʣɻओʹΫϥ΢υϫʔΫεJ04"OESPJEΞϓϦ ͷαʔϏεվળɺ6*σβΠϯΛ୲౰ɻ೥݄ΑΓσβΠϯ૊৫ ͷ্ཱͪ͛ʹܞΘΔɻ ,";6."6&%"

    ኍ੉݈ 69σβΠφʔʗΤϯδχΞ ೥ɺѪ஌ݝੜ·Εɻ΢Σϒ੍࡞ձࣾۈ຿ɺىۀΛܦͯɺ೥ ݄ʹגࣜձࣾΫϥ΢υϫʔΫεʹೖࣾɻΤϯδχΞͱͯ͠ϓϩμΫτ ͷ։ൃʹܞΘΓͳ͕ΒɺσβΠϯ૊৫ͷ্ཱͪ͛ʹࢀըɻ೥݄ ΑΓ69σβΠϯάϧʔϓʹ഑ଐɻ 5",&36)*304&
  3. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE Ϋϥ΢υϫʔΫε w Ϋϥ΢υιʔγϯάαʔϏε w ೥݄αʔϏε։࢝ w ձһ਺ສਓʢ೥݄ݱࡏʣ

  4. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE

  5. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE

  6. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE

  7. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE

  8. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ࣮͸ɺ Ϋϥ΢υϫʔΫεʹ σβΠϯΨΠυϥΠϯ͸ ɹɹɹɹɹɹɹɹɹɹɹɹ͋Γ·ͤΜʜ

  9. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ɹɹɹɹɹɹɹɹɹɹɹɹӶҙɺ࡞੒தʜ

  10. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ΨΠυϥΠϯ࡞੒ͷܦҢͱ ɹɹɹɹɹɹɹ࡞੒தͷΞ΢τϓοτΛνϥݟͤ

  11. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ɹͱৼΓฦΔ Ϋϥ΢υϫʔΫεͷσβΠϯ࢙ ʢ૑ۀ࣌ʹೖࣾͨ͠ʣ্ా

  12. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥αʔϏεϦϦʔε

  13. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥αʔϏεϦϦʔε w౰ॳͷσβΠϯ͸୭͕࡞͔ͬͨ͸هԱ͕ᐆດʜɻ Ұਓ໨ͷσβΠφʔͱͯ͠৽ଔೖࣾ͠·ͨ͠ʂ

  14. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥6*ϥΠϒϥϦ࡞੒ !

  15. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥6*ϥΠϒϥϦ࡞੒ w5XJUUFS#PPUTUSBQతͳ΋ͷ w6*σβΠϯɺ࣮૷ͷίετΛԼ͛Δ͜ͱ͕ओ໨త ౰࣌͸-1΍όφʔΛ࡞ͬͯ·ͨ͠ʜɻ

  16. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥6*ϥΠϒϥϦ࡞੒ ౰࣌ͷ୲౰ऀͷ೔ใʮ6*Ҏલʹ৘ใઃܭʹ໰୊͋Γʯ ౰࣌͸-1΍όφʔΛ࡞ͬͯ·ͨ͠ʜɻ

  17. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥6*ϥΠϒϥϦ࡞੒ ౰࣌ͷ୲౰ऀͷ೔ใʮ6*Ҏલʹ৘ใઃܭʹ໰୊͋Γʯ ˠ൵ܶͷ࢝·Γ ౰࣌͸-1΍όφʔΛ࡞ͬͯ·ͨ͠ʜɻ

  18. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ϩΰϦχϡʔΞϧ ! !

  19. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ϩΰϦχϡʔΞϧ wϩΰͱ৭ͷมߋͷΈ ্৔લͰӦۀ෦ॺʹҰ࣌తʹҟಈͯ͠·ͨ͠ ˠ ˠ

  20. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ϩΰϦχϡʔΞϧ ࠓ΋ͨ·ʹੲͷ৭ͷ6*͕ग़ͯ͘Δ ˠҨ੻ʜʂ ͳ͔͍ͭ͠ IUUQSFLJUBNBXBLPKQNVTFVNJTFLJTBHBSJJTFLJQIQ

  21. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ʙεϚϗΞϓϦϦϦʔεˍվળ ! ! !

  22. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ʙεϚϗΞϓϦϦϦʔεˍվળ wಠࣗͷσβΠϯ wಉ͡ػೳͰ΋σβΠϯ͕·ͬͨ͘ҧ͏ ओ൜ ˠ

  23. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ʙεϚϗΞϓϦϦϦʔεˍվળ ্ాʮΠέͯΔσβΠϯΛΞϓϦͰઌʹ΍Ε͹ɺ΢Σϒ΋ͦ͏ͳΔͱ ࢥͬͨʯˠͳΒͳ͔ͬͨʂ ओ൜ IUUQDBSFFSIBDLFOKBQBODPNSFQPSUEFUBJM

  24. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥ʙεϚϗΞϓϦϦϦʔεˍվળ ౰࣌ͷετΞϨϏϡʔʮαΠτͱม͑ͯΔ఺͕͜ͱ͝ͱ͘ෆศʹײ͡ ·͢ʯ ຊ౰ʹ͝ΊΜͳ͍͞

  25. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε Ϋϥ΢υϫʔΫεʹى͖ͨ͜ͱ ! ! !

  26. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε Ϋϥ΢υϫʔΫεʹىͬͨ͜໰୊ ์ஔ͞ΕΔ ৘ใઃܭ ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ౷Ұ͞Εͳ͍

    σβΠϯ
  27. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ౷Ұ͞Εͳ͍σβΠϯ ಉ͡αʔϏεͳͷʹ༷ʑͳσβΠϯ͕ཚཱ wੈ୅ͷҧ͏6*͕ڞଘɺΞϓϦͷ๫૸ wੈք؍ͷҧ͏-1ɺͦΕΒ΁ͷόφʔ͕ڞଘ͢Δτοϓϖʔδ ˠͦͷ৔ͦͷ৔ͷ໨తΛୡ੒͢ΔͨΊ͚ͩͷσβΠϯ

  28. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ౷Ұ͞Εͳ͍σβΠϯ ಉ͡αʔϏεͳͷʹ༷ʑͳσβΠϯ͕ཚཱ wੈ୅ͷҧ͏6*͕ڞଘɺΞϓϦͷ๫૸ wੈք؍ͷҧ͏-1ɺͦΕΒ΁ͷόφʔ͕ڞଘ͢Δτοϓϖʔδ ˠͦͷ৔ͦͷ৔ͷ໨తΛୡ੒͢ΔͨΊ͚ͩͷσβΠϯ ͱ͸͍͑ɺԿ͕ਖ਼ղͳͷ͔

    ෼͔Βͳ͍
  29. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε

  30. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε

  31. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ์ஔ͞ΕΔ৘ใઃܭ αΠτߏ଄΍ը໘ͷઃܭ͕Ͱ͖͍ͯͳ͍ w৽ػೳΛ͙͢άϩʔόϧφϏήʔγϣϯʹೖΕ͕ͨΔ wগ͠Ͱ΋όφʔΛ໨ཱͨͤΑ͏ͱ͢ΔʢϝΠϯίϯςϯπΑΓ΋্ʹ དྷΔ͜ͱ΋ʣ ˠ਺ࣈ͕ݟ͑΍͍͢ࢪࡦ΍ϓϩϞʔγϣϯ͕༏ઌ͞Ε͕ͪ

  32. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE αΠτߏ଄΍ը໘ͷઃܭ͕Ͱ͖͍ͯͳ͍ w৽ػೳΛ͙͢άϩʔόϧφϏήʔγϣϯʹೖΕ͕ͨΔ wগ͠Ͱ΋όφʔΛ໨ཱͨͤΑ͏ͱ͢ΔʢϝΠϯίϯςϯπΑΓ΋্ʹ དྷΔ͜ͱ΋ʣ ˠ਺ࣈ͕ݟ͑΍͍͢ࢪࡦ΍ϓϩϞʔγϣϯ͕༏ઌ͞Ε͕ͪ ͱৼΓฦΔΫϥ΢υϫʔΫε ์ஔ͞ΕΔ৘ใઃܭ

    Ͱ΋ɺͲ͏ͯ͠μϝ͔ ఻͑ΒΕͳ͍
  33. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε

  34. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε

  35. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ཞ༻͞ΕΔ6*ίϯϙʔωϯτ 6*ίϯϙʔωϯτ͕໾ׂΛද͞ͳ͍ʢػೳΛՌͨ͞ͳ͍ʣ wΞϥʔτʢܯࠂʣͷͨΊͷ6*ίϯϙʔωϯτ͕ૌٻʹྲྀ༻͞ΕΔ wػೳ͕૿͑Δͨͼʹ6*ίϯϙʔωϯτΛྲྀ༻ɾվม͢ΔͷͰ݁ہߴί ετ ˠ6*ίϯϙʔωϯτͷ࢖͍ํ͕ͦͷ৔ͷ൑அʹҕͶΒΕ͍ͯΔ

  36. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ཞ༻͞ΕΔ6*ίϯϙʔωϯτ 6*ίϯϙʔωϯτ͕໾ׂΛද͞ͳ͍ʢػೳΛՌͨ͞ͳ͍ʣ wΞϥʔτʢܯࠂʣͷͨΊͷ6*ίϯϙʔωϯτ͕ૌٻʹྲྀ༻͞ΕΔ wػೳ͕૿͑Δͨͼʹ6*ίϯϙʔωϯτΛྲྀ༻ɾվม͢ΔͷͰ݁ہߴί ετ ˠ6*ίϯϙʔωϯτͷ࢖͍ํ͕ͦͷ৔ͷ൑அʹҕͶΒΕ͍ͯΔ

    ໌֬ʹఆΊΒΕͯͳ͍͔Β ͦ͏͢Δ͔͠ͳ͍
  37. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε 6*ϥΠϒϥϦ ࣮ࡍͷը໘ ʮܯࠂʯͷ6*ίϯϙʔωϯτ͕ʮػೳͷૌٻʯʹ࢖ΘΕ͍ͯΔ

  38. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε 6*ϥΠϒϥϦ͕͋ΔͷʹɺϚʔΫΞοϓྗ͕ٻΊΒΕΔ

  39. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε ೥69σβΠϯάϧʔϓൃ଍ ! ! ! !

  40. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͱৼΓฦΔΫϥ΢υϫʔΫε Θʔ͍ ೥69σβΠϯάϧʔϓൃ଍ 69ΨΠυϥΠϯ σβΠϯ ϓϩηε੔උ σβΠφʔ૿һ

  41. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  42. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ์ஔ͞ΕΔ ৘ใઃܭ ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ౷Ұ͞Εͳ͍ σβΠϯ

  43. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ౷Ұ͞Εͳ͍ σβΠϯ ݪଇɾࢦ਑͔Β ߟ͑Δ ์ஔ͞ΕΔ ৘ใઃܭ

    ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ˣ
  44. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ݪଇɾࢦ਑͔Βߟ͑Δ wϢʔβʔΠϯλϏϡʔͷ෼ੳ݁ՌΛ׆ ༻͠ɺʮ୭ͷͨΊͷσβΠϯʁʯ͔Β ߟ͑ͯɺͦͷਓͨͪʹఏڙ͍ͨ͠΋ͷ ͱͯ͠ͷʮσβΠϯݪଇʯΛࡦఆ wͲͷϓϥοτϑΥʔϜͰ͋ͬͯ΋कΒ ΕΔࢦ਑Λͭ͘ΔͨΊʹɺϓϥοτ

    ϑΥʔϜ͝ͱʹҧ͏෦෼͸ʮσβΠϯ γεςϜʯͱͯ͠෼཭ɻ σβΠϯΨΠυϥΠϯΛ࡞Ζ͏
  45. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ౷Ұ͞Εͳ͍ σβΠϯ ݪଇɾࢦ਑͔Β ߟ͑Δ ์ஔ͞ΕΔ ৘ใઃܭ

    ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ˣ
  46. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ౷Ұ͞Εͳ͍ σβΠϯ ݪଇɾࢦ਑͔Β ߟ͑Δ ์ஔ͞ΕΔ ৘ใઃܭ

    ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ໨త͕෼͔Δ ϧʔϧͮ͘Γ ˣ ˣ
  47. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ໨త͕෼͔Δ ϧʔϧͮ͘Γ wϢʔβϏϦςΟͷ؍఺͔Βʮͳͥͦ͏ ͢Δ΂͖ͳͷ͔ʁʯʮͳͥμϝͳͷ ͔ʁʯΛ࣠ʹɺ৘ใઃܭͳͲʹؔ͢Δ ϧʔϧΛ੝ΓࠐΉʢ༧ఆʣɻ w͜ΕΛػձʹɺΞΫηγϏϦςΟʹͭ

    ͍ͯ΋ϧʔϧ΍ୡ੒໨ඪʢ8$"( ͳͲʣΛఆΊ͍ͨʢ໺๬ʣɻ σβΠϯΨΠυϥΠϯΛ࡞Ζ͏
  48. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ౷Ұ͞Εͳ͍ σβΠϯ ݪଇɾࢦ਑͔Β ߟ͑Δ ์ஔ͞ΕΔ ৘ใઃܭ

    ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ໨త͕෼͔Δ ϧʔϧͮ͘Γ ˣ ˣ
  49. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ౷Ұ͞Εͳ͍ σβΠϯ ݪଇɾࢦ਑͔Β ߟ͑Δ ์ஔ͞ΕΔ ৘ใઃܭ

    ཞ༻͞ΕΔ 6*ίϯϙʔωϯτ ໨త͕෼͔Δ ϧʔϧͮ͘Γ ʮ࢖ΘΕΔʯ ΨΠυϥΠϯ ˣ ˣ ˣ
  50. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏ ʮ࢖ΘΕΔʯ ΨΠυϥΠϯ wσβΠϯΨΠυϥΠϯͷࡦఆʹରͯ͠ ཧղΛಘΔͨΊͷऔΓ૊Έͱͯ͠ɺ10 ΍ΤϯδχΞͳͲΛର৅ʹҙݟɾཁ๬ Λݴ͍߹͏ϫʔΫγϣοϓΛ։࠵ɻ

    wࡦఆʹΤϯδχΞʢኍ੉ʣ͕ܞΘͬͯ ͍Δɻ
  51. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  52. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  53. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  54. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  55. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE Ή͔͍ͣ͜͠ͱ ͱʹ͔͘ख୳Γ w৘ใ͕গͳ͍ʢ͔ͩΒࠓ೔ͷΠϕϯτʹདྷ·ͨ͠ʂʣ ޙճ͠ʹ͞Ε͕ͪ wڧ͍ҙࢤ σβΠϯΨΠυϥΠϯΛ࡞Ζ͏

  56. DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠