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

esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / D...

esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa

ハッカーズチャンプルー2018でお話させていただきました
http://hackers-champloo.org/2018/

https://esa.io/

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

  1. !2 w ੺௩ົࢠ w !LFO@D@MP w FTB--$ w ϓϩάϥϚʔਓ σβΠφʔਓਓͷձࣾ

    w ౦ژɾौ୩ʹΦϑΟεʢ࠷ۙ͸ϑϧϦϞʔτʣ w ૑ۀऀɾσβΠφʔ
  2. !5 esa — ϋοΧʔζνϟϯϓϧʔ w ೥ʹొஃʮFTBJPͷͭ͘Γ͔ͨʯ w IUUQTFTBQBHFTJPQTIBSJOHQPTUTCEDBDEDEBFTMJEFTIUNM w ೥࿈ଓεϙϯαʔπʔϧεϙϯαʔ

    w FTB͕ॳΊͯձࣾͱͯ͠εϙϯαʔͨ͠Πϕϯτ w ٱ͠ৼΓʹԭೄʹདྷΕ·ͨ͠ʢ೥ͿΓ౓໨ʣ w ԭೄ࠷ߴʂϋΧνϟϯ࠷ߴʂ
  3. ։ൃ߹॓Ͱ!GVLBZBUTVͱFTBΛ࡞Δ 2014.05 0ϲ݄ w झຯͰຖ೔։ൃΛଓ͚Δ w ஥ؒ͏ͪͷ೔ใڞ༗ʹ࢖͏ 2014.11 ๏ਓԽ0QFOЌϦϦʔε 6ϲ݄

    2015.01 ਖ਼ࣜ༗ྉ൛ϦϦʔε 8ϲ݄ 2016.02 ࠇࣈԽ 20ϲ݄ w ೥݄ɺ w ϋοΧʔζνϟϯϓϧʔొஃ 2018.06 ݱࡏ೥໨ɺ໿ ͷاۀɾஂମ͕ར༻ 49ϲ݄ w !QQXPSLT͕KPJOɺࣾһ໊ʹ
  4. ੺௩ݸਓͷܦྺ w σβΠφʔྺ20೥ w ࠷ॳ͸ࢴഔମͷάϥϑΟοΫσβΠφʔͩͬͨ w ϙελʔɺύϯϑϨοτɺࡶࢽɾॻ੶ࢽ໘ɺϩΰͳͲ w 8FCσβΠφʔྺ16೥͘Β͍ w

    ࠷ॳ͸੩తαΠτɺ޿ࠂܥͷλΠΞοϓίϯςϯπ౳͕ଟ͔ͬͨ w 8FCαʔϏεͷ6*σβΠφʔྺ12೥͘Β͍ w 8FCαʔϏεΛझຯͰ࡞͍ͬͯΔྺ6೥͘Β͍
  5. 2011.12 w/ @shu0115 ؆୯Ոܭ฽αʔϏε ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽ 2013.04 w/ @katton, @ppworks 2013.09

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ
  6. 2011.12 w/ @shu0115 ؆୯Ոܭ฽αʔϏε ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽ 2013.04 w/ @katton, @ppworks 2013.09

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ΤϯδχΞͱ૊ΜͰ झຯͰ8FCαʔϏεΛ৭ʑ࡞ͬͨ ͦͷதͷ͕ͭFTBͰɺ ϏδωεԽͰ͖ͯɺࠓʹࢸΓ·͢ɻ
  7. Designer Engineer w 6*σβΠϯ w ϏδϡΞϧσβΠϯ w ίϯηϓτϝΠΩϯά w 3BJMTͷWJFX

    )BNM  w $444BTT+4গ͠ w Πϥετ w άοζ੍࡞ w اը w 6*ઃܭ w Ϣʔβʔαϙʔτ w όάमਖ਼ w ܦཧɾࣄ຿ɾܦӦ w ޿ใ w Ӧۀ w 5XJUUFS w Τΰαʔν w ϢʔβʔΠϯλϏϡʔ w डୗ։ൃ w όοΫΤϯυ 3VCZPO3BJMT  w ϑϩϯτΤϯυ +4  w Πϯϑϥ w ؂ࢹ w ۀ຿ͷࣗಈԽ w $IBU0QT w ޻࡞ ࠓ೔࿩͢ͷ͸͜ͷ΁Μͷ࿩
  8. !38 ςΩετΧϥʔʹগ͠৭ຯΛՃ͑Δ 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 ʢஆ৭ܥͩͱগ͠ೱ஡ܥʹৼͬͨΓ͢Δ͜ͱ͕ଟ͍ʣ
  9. !41 ϕʔεΧϥʔʹ΋গ͠৭ຯΛՃ͑Δ main-color #0a9b94 text-color #3c4a60 a base-color #efede0 main-color

    #0a9b94 text-color #3c4a60 a base-color #efede0 w ϝΠϯΧϥʔͱͷௐ࿨ w ϏϏουͳ৭ ΞΠϘϦʔˠ΍ΘΒ͔ͰԹ͔Έͷ͋Δҹ৅ͷը໘ʹ
  10. !44 esaͷλΠϙάϥϑΟͰ ؾΛ͚͍ͭͯΔ͜ͱ w ॻ͍ͯͯʛಡΜͰͯ ετϨε͕ͳ͍ w ॻ͍ͯͯʛಡΜͰͯ ָ͍͠ɺΘ͘Θ͘͢Δ w

    ྑ͍΋ͷΛ ॻ͍͍ͯΔʛಡΜͰ͍Δʣؾ෼ʹͳΕΔ w จষ͚ͩͰ͸ͳ͘ίʔυͷՄಡੑ w ॻ͖खͷࢥߟΛॿ͚ΔσβΠϯʢॻ͖ͳ͕Βߟ͑Δʣ ͜ͷ΁ΜΛ৺͕͚ͯ࡞ΔΑ͏ʹ͍ͯ͠·͢
  11. !57 طଘͷ৭Μͳ΋ͷ͔ΒώϯτΛಘΔ w ͍ۙ෼໺ͷڝ߹αʔϏε΋΋ͪΖΜࢀߟ ʹ͢Δ͕ʜ w ৽چɺδϟϯϧ΍ϝσΟΞʹͱΒΘΕͣ ༷ʑͳ΋ͷ͔ΒώϯτΛಘΔ w εΫϦʔϯ͚ͩͰͳ͘ɺࢴഔମ΍ɺϦΞϧͳϓϩμΫτʹ

    ΋ώϯτ͸͋Δ w ڑ཭ͷ཭Εͨ෼໺͔ΒώϯτΛಘΔͱɺಠࣗੑ͕ग़Δ w ϨΨγʔͳ6*ˠϞμϯʹΞϨϯδ w ʮ͜ͷػೳͱɺຊ࣭తʹ͍ۙମݧΛ΋ͭ ΋ͷ͸Կ͔ʁʯͱ͍͏໰͍Λৗʹ࣋ͭ ௨஌σβΠϯͷώϯτ͸ോ࣌ܭ
  12. !58 खඳ͖ͷϥϑͰΞΠσΞΛݻΊΔɹɹ w खඳ͖ͷϥϑ͸ɺ΄΅ඞͣඳ͘ w ࡶͰԼखͰ0,ɺ͖Ε͍ʹඳ͘͜ͱʹͩ͜ΘΒͳ͍ w खඳ͖ͷϥϑͷ࣌఺ͰɺΞΠσΞ΍഑ஔ ཁૉɺϨΠΞ΢τΛ໌֬ʹ͓ͯ͘͠ w

    ಄ͷதͰ͸׬੒͍ͯ͠Δ͘Β͍ͷঢ়ଶʹ͓ͯ͘͠ w ʢࣗ෼͸࠷ॳ͸ͳ͔ͳ͔Ͱ͖ͳ͔͚ͬͨͲ܇࿅ͰͰ͖ΔΑ ͏ʹͳͬͨɻʣ w ΠϥϨͳͲͷυϩʔΠϯάιϑτͷ্΍ɺίʔσΟϯά͠ ͍ͯΔ࣌͸ɺࡉ෦Λ٧ΊΕ͹͍͍͚ͩͷঢ়ଶʹ͓͖ͯͨ͠ ͍ʢεΫϦʔϯͷதͰେ͖ͳ໎͍͕ग़Δͱ͋·Γ͏·͍͘ ͔ͳ͍ʣ
  13. !59 ΤϯδχΞͱҰॹʹUIσβΠϯ͢Δ w ૣ͍ஈ֊͔Βɺ౎౓ΤϯδχΞͱڞ༗ɾ ૬ஊͭͭ͠ɺϑΟʔυόοΫ΋Β͍ͳ͕ ΒਐΊΔ w (JU)VC*TTVF΍FTBΛ࢖ͬͯڞ༗ w Α͍ΞΠσΞΛ΋Β͑ͨΓɺ࣮૷ํ๏Λ໛ࡧͨ͠ΓɺΤϯ

    δχΞͷ࣮૷Ϟνϕʔγϣϯ΋ߴ·Δ w σβΠφʔΑΓ΋ΤϯδχΞͷํ͕໌֬ ͳ6*ͷΠϝʔδΛ͍࣋ͬͯΔ͜ͱ΋ଟ͍ w ػೳʹΑͬͯ͸ɺΤϯδχΞओಋͰ6*Λ ࡞Δ͜ͱ΋͋Δ
  14. !61 esaͷωʔϛϯά ͳͥɺFTBͱ͍͏໊લʹͨ͠ͷ͔ʁʜ͖͔͚ͬ͸͠ΐ͏΋ͳ͍͜ͱͩͬͨɻ w FTBΛ࡞ͬͨ։ൃ߹॓ͷͱ͖ ʹɺ!GVLBZBUTVͷϒϥ΢β ʹʮΤαʯͱ͍͏ϒοΫϚʔ Ϋ͕͋ΔͷΛݟ͚ͭͨ w ʮΤΰαʔνʯͷུΒ͍͠

    w ΈΜͳͷπϘʹೖͬͨ w αʔϏε໊΋ʮΤαʯͰ͍͍ ͡ΌΜ w 5XJUUFSͷௗΞΠίϯ͕͍ͭ ͯͨ͜ͱ͔ΒɺΩϟϥ΋ௗ͕ طఆ࿏ઢʹͳͬͨ ωʔϛϯά͸೰Ή͜ͱ͕ଟ͍ͷͰɺϥοΩʔͳέʔεͩͱࢥ͍·͢ɻ
  15. !62 esaͱ͍͏໊લͷྑ͠ѱ͠ w ޠײɾڹ͖ʢ͑͞ʣ w ୹͞ɺݺͼ΍͢͞ w ͔Θ͍͞ɺ਌͠Έ΍͢͞ɺΏΔ͞ w ΦϦδφϦςΟɺҹ৅ʹ࢒Δ

    w ҰݟɺԿ͔ͩΑ͘Θ͔Βͳ͍ʢڵຯΛͦͦΔʣ w ݁Ռతʹίϯηϓτͱ͏·͘ඥ෇͍ͨʢޙड़ʣ w ࠃࡍతʹෆརʢӳޠͩͱΤαͬͯಡΈͮΒ͍ʣ w ಡΈํ͕Θ͔Βͳ͍ͱ͍͏ਓ͕݁ߏ͍Δ w ;͚ͨ͟ײ͕͢͡Δ w ໊ࣾΛݴ͏࣌ஏ͔͍ͣ͠ʢ׳Εͨʣ w ڝ߹ʢ&VSPQFBO4QBDF"HFODZʣ w ʢϤʔϩού൛/"4"Έ͍ͨͳͱ͜Ζʣ ྑ͍఺ ѱ͍఺
  16. !69 ࡞Γͳ͕Βɺ࢖͍ͳ͕Βݟ͖͑ͯͨίϯηϓτ w ։ൃͷ࠷ॳ͔Β͸͖ͬΓܾΊ͍ͯ ͨΘ͚Ͱ͸ͳ͔ͬͨ w ʮ৘ใΛɺҭ͍ͯͨɻʯͱ͍͏ϫʔ υͷॳग़͸։ൃΛ͸͡Ί͔ͯΒϲ ݄ޙɻ w

    ஥ؒ಺͚ͩͰ࢖͍͸͡ΊͯɺFTB ͷྑ͞Λ࣮ײ͔ͯ͠ΒͦΕΛݴޠ Խͨ͠ɻ ίϯηϓτॳग़ͷLPͷϥϑ ࠷ॳ͸ʮ৘ใΛɺҭͯΑ͏ɻʯ ͩͬͨΒ͍͠ʢ֮͑ͯͳ͍ʣ
  17. 2011.12 w/ @shu0115 ؆୯Ոܭ฽αʔϏε ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽ 2013.04 w/ @katton, @ppworks 2013.09

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ
  18. 2011.12 w/ @shu0115 ؆୯Ոܭ฽αʔϏε ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽ 2013.04 w/ @katton, @ppworks 2013.09

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ͋Δڞ௨఺͕͋Δ͜ͱʹؾ͍ͮͨ ࠓ·ͰͰ͖ͳ͔ͬͨ͜ͱɺॻ͚ͳ͔ͬͨ͜ͱ͕ɺ ͪΐͬͱͨ͠࢓૊Έ΍σβΠϯ͕ ΋ͨΒ͢ʮΏΔ͞ʯʹΑͬͯͰ͖ΔΑ͏ʹͳΔ ʮΏΔ͠ͷσβΠϯʯ ͱউखʹݺΜͰɺڵຯΛ͍࣋ͬͯΔɻ ࠷ॳ͔Β͜͏͍͏΋ͷΛ࡞Ζ͏ͱ໨ࢦ͍ͯͨ͠Θ͚͡Ό͍͚Ͳɺ ޙ͔Βߟ͑Δͱ͍ͭ΋ࣗ෼͕࡞͖ͬͯͨ΋ͷ͸͜Εͩͬͨͱؾ͍ͮͨɻ
  19. डୗͷσβΠφʔͱ͸ҧ͏ʁ w ʮର৅ΛΑΓ͍͖͍͖ͱͤ͞ Δ͜ͱʯ͕σβΠϯͷتͼ w ͢Ͱʹ͋Δ΋ͷ͕ɺͲ͏΍ͬͨΒ΋ͬͱʮΒ͠ ͞ʯΛൃش͍͖͍͖ͯ͠ͱଘࡏ͢Δ͜ͱ͕Ͱ͖ Δ͔ʁߟ͑ɺ۩ݱԽ͢Δ w ࣗݾදݱͰ͸ͳ͘ɺଞऀͷදݱͷ͓ख఻͍

    w ʜͱ͍͏ҙຯͰ͸ɺࠜͬ͜͸͋·ΓมΘΒͳ͍ FTB͕ճΓ͸͡ΊΔલ͸ɺͣͬͱडୗσβΠφʔͩͬͨʢࠓͰ΋ͨ·ʹ΍Δ͠ɺ੥ෛͷ࢓ࣄ͸޷͖ʣ w ͍͖͍͖ͱͤ͞Δର৅͕ෆಛఆଟ ਺ʹͳΔ w ͍͖͍͖ͱ͢Δ࢓૊ΈΛߟ͑Δ w ΑΓεέʔϥϒϧʹͳΔ w ϨΠϠʔ্͕͕ͭΔײ͡͸͋Δ w ࠷ऴతͳҙࢥܾఆݖ͕ࣗ෼ʹ͋Δ w ྑ͘΋ѱ͘΋ࣗ෼ͨͪͰܾΊͯɺ੹೚Λ΋ͭ ಉͩ͡ͱࢥ͏ ҧ͏͔΋ʁ ී௨ͷσβΠφʔͷ࢓ࣄͷԆ௕ઢ্ʹ͋Δ