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

認知パターンから考えるesaらしさのデザイン / Thinking esa-like design

認知パターンから考えるesaらしさのデザイン / Thinking esa-like design

DIST.26 「Webサービスの個性を支えるデザイン」で発表させていただきました。
https://dist.connpass.com/event/123241/
https://esa.io

Avatar for ken_c_lo / TAEKO AKATSUKA

ken_c_lo / TAEKO AKATSUKA

April 26, 2019
Tweet

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

  1. !2 • ੺௩ ົࢠ • @ken_c_lo (@taea) • esa LLC

    • ૑ۀऀɾσβΠφʔ • ΤϯδχΞ2ਓ + σβΠφʔ1ਓ • ࠷ॳ͸झຯͰαʔϏεΛ࡞͍ͬͯͨ • 5೥લ͔Β๏ਓԽ
  2. !8 ػೳύλʔϯ ͱ ೝ஌ύλʔϯ ػೳύλʔϯ w 6*ͷߏ੒ཁૉʢ͍ΘΏΔʮػೳʯʣ w ϢʔβʔͷߦಈΛՄೳʹͨ͠ Γɺଅͨ͠Γ͢Δͷ͕໨త

    w ʮಈࢺʯʹ͍ۙ w ॻ͘ɺಡΉɺڞ༗͢Δɺݕࡧ͢ Δʜ ೝ஌ύλʔϯ w ݟͨ໨ɾ֎؍ w τʔϯɺλΠϙάϥϑΟɺΧϥʔύϨοτɺ
 ϨΠΞ΢τɺΠϥετɺΞΠίϯελΠϧɺܗঢ়ɺ ςΫενϟɺִؒɺը૾ɺΠϯλϥΫγϣϯɺ
 ΞχϝʔγϣϯFUDʜ w ϒϥϯυͷίΞɾࠩผԽཁҼ w ʮܗ༰ࢺʯʹ͍ۙ w ͔Θ͍͍ɺ৺஍Α͍ɺ਌͠Έ΍͢ ͍ɺඒ͍͠ʜ σβΠϯύλʔϯ σδλϧϓϩμΫτͷ ࠓ೔͸ͬͪ͜ͷ࿩
  3. !10 αʔϏεͷσβΠϯݪଇΛߟ͑Δ ʮϒϥϯυΛΑ͘ද͢ಛ௃ͱɺආ͚Δ΂͖ಛ௃Λʙݸڍ͛Δʯ Design Systems P.78ΑΓ .BJM$IJNQͷ৔߹ w ָ͍͚͠ΕͲࢠڙͬΆ͘ͳ͍ w

    ໘ന͍͚Ͳ;͚͍ͯ͟ͳ͍ w ύϫϑϧ͚ͩͲ΍΍͘͜͠ͳ͍ w ྲྀߦͷ࠷ઌ୺Ͱ͋Δ͚ͲೃછΈ͕͋Δ w ΧδϡΞϧ͚ͩͲͩΒ͠ͳ͘ͳ͍ όϥϯεײ֮ ͷݴޠԽ
  4. !14 esaͷϝΠϯΧϥʔͷ৚݅ FTBʹͱͬͯҰ൪όϥϯεͷྑ͍৭ͱ͸Կ͔ʁ w ໨ʹ΍͍͞͠৭ w ϦϯΫ৭ʹ΋࢖͑Δ৭ w ઌೖ؍ͷগͳ͍৭ w

    ڝ߹͕গͳ͍৭ w ΧδϡΞϧͰ໌Δ͍৭ main-color #0a9b94 ීวੑ w ਌͠Έ΍͍͢ w ҆৺ײ w ࢖͍΍͍͢ w ΦʔιυοΫε ݸੑ w ଞͱ͸ҧ͏ w ҹ৅త w ۀ຿ͬΆ͘ͳ͍
  5. !25 ςΩετΧϥʔʹগ͠৭ຯΛՃ͑Δ main-color #0a9b94 text-color #3c4a60 a base-color #efede0 main-color

    #0a9b94 text-color #3c4a60 accent-color #f29600 base-color #efede0 w ΍ΘΒ͔͘ચ࿅͞Εͨҹ৅ʹͳΔ w ը໘ʹʮ৭ؾʯ͕ग़Δɻແຯס૩ɾߗ͕͞཈͑ΒΕΔ w ϝΠϯΧϥʔͷΤϝϥϧυάϦʔϯͱΑ͘ௐ࿨͢Δ੨ܥʹৼΔ w ʢஆ৭ܥͩͱগ͠ೱ஡ܥʹৼͬͨΓ͢Δ͜ͱ͕ଟ͍ʣ
  6. !28 ϕʔεΧϥʔʹ΋গ͠৭ຯΛՃ͑Δ main-color #0a9b94 text-color #3c4a60 a base-color #efede0 main-color

    #0a9b94 text-color #3c4a60 a base-color #efede0 w ϝΠϯΧϥʔͱͷௐ࿨ w ϏϏουͳ৭ ΞΠϘϦʔˠ΍ΘΒ͔ͰԹ͔Έͷ͋Δҹ৅ͷը໘ʹ
  7. !30 esaͷλΠϙάϥϑΟͷݪଇ w ָ͍͠ɾΘ͘Θ͘͢Δ w Θ͘Θ͘͢Δɾߴ༲ײ w ॻ͖ͳ͕Βߟ͑ΔͷΛॿ͚Δ ͜ͷ΁ΜΛ৺͕͚ͯ࡞ΔΑ͏ʹ͍ͯ͠·͢ w

    ετϨε͕ͳ͍ w ৘ใΛ੔ཧ͠΍͍͢ w จষ΋ίʔυ΋ಡΈ΍͘͢ ݸੑ ઑ͍ͬͯΔɾଞͱ͸ҧ͏ ීวੑ ࢖͍΍͢͞ɾΦʔιυοΫε ಡΜͰͯPSॻ͍ͯͯ
  8. !37 esaͷΩϟϥΫλʔ w ਌͠Έ΍͢͞ w Ѫᇷ ΏΔ͍ɾ͔Θ͍͍ w ᇪͼͳ͍ɾແද৘ w

    ந৅తɾزԿֶత γϯϘϦοΫ த࿨ɾόϥϯε ͔Θ͍͍͚ͩ͡Όͳ͘ɺγϯϘϧϚʔΫͱͯ͠΋੒ཱ͢ΔΑ͏ʹόϥϯεΛऔͬͨɻ
  9. !46 ݸੑͷݯ͸ɺΤʔτεͰ͋Δ Τʔτεͱීวੑͷόϥϯε Balance! Τʔτε ීวੑ w ݸੑ w ݻ༗ͷՁ஋؍ɾੈք؍

    w ࣗ෼ͨͪͷओு w Ϣʔβʔχʔζ w ࢖͍΍͢͞ɾ਌͠Έ΍͢͞ w ੈؒɾଞऀ
  10. !48 ࣮͸ׂͱɺܗ͔Βߟ͍͑ͯ·͢ ͜͏͍͏࿩Λ͢ΔͱɺʮσβΠϯΛཧ۶͔Βߟ͍͑ͯΔʯͱΑ͘ݴΘΕΔ͚Ͳɺ࣮ࡍ͸ͦ͏Ͱ΋ͳͯ͘ʜ w ਓʹઆ໌͠Α͏ͱ͢Δͱཧ۶ɾཧ࿦ʹدΔ w આ໌͍ͯ͠Δཧ۶͸ɺ࣮͸શͯޙ෇͚ͷ΋ͷͰ͋Δ w ʢFTBͷ྘৭΋ɺཧ۶Λߟ͑Δલ͔Β࣮͸ܾΊͯ·ͨ͠ʣ w

    σβΠϯ͸ݴޠͰઆ໌͠ͳͯ͘΋ɺݟͨ໨Λ௨࣮ͯ͠ײͱͯ͠ ఻ΘΔ΋ͷͰͳͯ͘͸ҙຯ͕ͳ͍ w ݴޠ͸ෆ׬શͳදݱखஈʜܗମͷྑ͞͸ݴޠԽ͖͠Εͳ͍ɻʮ͑΋͍ΘΕ͵Α͞ʯ w όϥϯεײ֮͸ɺཧ۶͚ͩͰ͸ͳ͘ମಘ͢Δඞཁ͕͋Δ w ମҭɾεϙʔπͱ͔ʹଟ෼ࣅͯΔɻ࣮ફͰ஁͍͑ͯ͘ඞཁ͕͋Δɻ w ཧ۶͚ͩͰΘ͔ͬͨؾʹͳͬͪΌ͏ͷةݥʂ
  11. !49 σβΠϯΛߟ͑Δ࣌ͷϓϩηε ݴ༿ͷ*OQVU w ࢀߟจݙΛಡΉɺώΞϦϯάΛ͢Δ w ࢥ͍ͭ͘ΩʔϫʔυΛॻ͖ग़͠ͳ͕Βߟ͑Δ ܗͷ*OQVU w ৭ΜͳࢀߟσβΠϯΛݟͳ͕Βߟ͑Δ

    w ྨࣅ8FC"QQ w άϥϑΟοΫʗϓϩμΫτσβΠϯ ͜Εͩοʂ ࣗ෼ͷ৔߹͸͜Μͳײ͡Ͱ͢ɻ ʮܗʯ͕೴಺ʹͻΒΊ͘ɾࢥ͍ͭ͘ɾ߱Γͯ͘Δ w εέον͢Δ w ඳըɾϓϩτλΠϐϯά w ʢίʔσΟϯάʣ ܗͷ0VUQVU w σβΠϯͷݴޠԽɾઆ໌ w ෼ղɾ෼ੳɾݕূ ݴ༿ͷ0VUQVU ✏
  12. !50 ෼ղɾݕূͱͯ͠ͷσβΠϯͷݴޠԽ w ࢥ͍͍ͭͨʮܗʯͷߏ੒ཁૉΛ෼ղͯ͠ݴޠԽ͢Δ w ϦόʔεΤϯδχΞϦϯάͷΑ͏ͳײ͡ w ʮܗʯ͕ຊ౰ʹཧʹ͔ͳͬͨɺద੾ͳ΋ͷ͔Λݕূ͢Δ w ඞཁͳཁ݅ʹ߹͍ͬͯΔ͔ʁ໰୊ղܾʹద͍ͯ͠Δ͔ʁ

    w Τʔτε΍σβΠϯݪଇʹऩଋ͢Δ΋ͷͰ͋Δ͔ʁےͷ௨ͬͨ΋ͷͰ͋Δ͔ʁ w ݴޠԽͯ͠આ໌ՄೳͰ͋Δ͜ͱͰɺσβΠϯʹڧ౓ͱઆಘྗ͕૿͢ w νʔϜϝΠτͱ΋σβΠϯݪଇΛڞ༗͠΍͍͢ˠଞͷਓ΋ҰॹʹσβΠϯΛߟ͑ͯ͘ΕΔΑ͏ʹ ͳΔ w ݴޠԽ͓ͯ͘͜͠ͱͰɺ࣍ͷσβΠϯվળͷώϯτʹͳΔʢࣗ෼ʹ΋νʔϜϝϯόʔʹ΋ʣ
  13. !51 ײ֮ͱཧ࿦͸྆ྠ ྆ํΛߦ͖དྷͯ͠ߟ͑ͳ͕ΒɺσβΠϯΛϒϥογϡΞοϓ͍ͯ͘͠ w εέον w ϓϩτλΠϐϯά w ࣮ࡍ࢖ͬͯΈΔ w

    ݴޠԽ w ෼ղɾ෼ੳ w ઃܭ ײ֮ʢܗମʣ ཧ࿦ʢݴ༿ʣ ࡞ͬͯɾ࢖ͬͯɺ ͦͷҙຯΛ֬ೝ͢Δ ݴ༿͕ɺ࡞Δʗվળ͢Δ ͨΊͷࢦ਑ʹͳΔ
  14. !52 Ұݟ૬൓͢Δ΋ͷͷؒͰόϥϯεΛऔΔ ײ֮ ݸੑత ͔Θ͍͍ ΤϯδχΞ झຯ ࣗ෼ͷΤΰ ͭ·Γ͸ɺόϥϯε ରཱͤͣ͞ɺௐ࿨ͤ͞Δɻ

    ཧ࿦ ීวత ΧοίΠΠ ඇΤϯδχΞ Ϗδωε ੈؒͷχʔζ ݸੑΛൃشͭͭ͠΋ɺۃ୺ͰઌӶతʹͳΒͣɺ
 ଟ͘ͷਓʹ਌͠ΜͰ΋Β͑Δ΋ͷΛ࡞Δɺ̍ͭͷϙΠϯτͩͱߟ͑·͢ɻ