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

ࣗ෼ͨͪͷ8FCαʔϏεΛ࡞ΔσβΠφʔͱͯ͠΍͍ͬͯΔ͜ͱ esaͷσβΠϯͷ࿩ @ken_c_lo TAEKO AKATSUKA Hackers Champloo 2018 / 2018.06.30

!2 w ੺௩ົࢠ w !LFO@D@MP w FTB--$ w ϓϩάϥϚʔਓ σβΠφʔਓਓͷձࣾ
w ౦ژɾौ୩ʹΦϑΟεʢ࠷ۙ͸ϑϧϦϞʔτʣ w ૑ۀऀɾσβΠφʔ

https://esa.io

MarkdownͰॻ͚Δ৘ใڞ༗αʔϏε esaΛ͝ଘ஌ͷํʁ ůŢ

!5 esa — ϋοΧʔζνϟϯϓϧʔ w ೥ʹొஃʮFTBJPͷͭ͘Γ͔ͨʯ w IUUQTFTBQBHFTJPQTIBSJOHQPTUTCEDBDEDEBFTMJEFTIUNM w ೥࿈ଓεϙϯαʔπʔϧεϙϯαʔ
w FTB͕ॳΊͯձࣾͱͯ͠εϙϯαʔͨ͠Πϕϯτ w ٱ͠ৼΓʹԭೄʹདྷΕ·ͨ͠ʢ೥ͿΓ౓໨ʣ w ԭೄ࠷ߴʂϋΧνϟϯ࠷ߴʂ

!6 ຊ೔ͷ͓୊ w FTBͷσβΠϯϓϩηεͷ঺հ w ࣗ෼ͨͪͷαʔϏεΛσβΠϯ͢Δ͜ͱ ࣗ෼ͷαʔϏεΛ࡞Γ͍ͨਓɺ 8FCαʔϏεͷσβΠϯʹڵຯ͕͋Δਓͷ ࢀߟʹͳΕ͹޾͍Ͱ͢

!7 esa͸झຯͷϓϩμΫτ͔Β ελʔτ͠·ͨ͠ w ৄ͍͠஀ੜͷ༷ࢠ͸ʮFTBJPͷͭ͘Γ͔ͨʯ w IUUQTFTBQBHFTJPQTIBSJOHQPTUTCEDBDEDEBFTMJEFTIUNM

։ൃ߹॓Ͱ!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ɺࣾһ໊ʹ

੺௩ݸਓͷܦྺ w σβΠφʔྺ20೥ w ࠷ॳ͸ࢴഔମͷάϥϑΟοΫσβΠφʔͩͬͨ w ϙελʔɺύϯϑϨοτɺࡶࢽɾॻ੶ࢽ໘ɺϩΰͳͲ w 8FCσβΠφʔྺ16೥͘Β͍ w
࠷ॳ͸੩తαΠτɺ޿ࠂܥͷλΠΞοϓίϯςϯπ౳͕ଟ͔ͬͨ w 8FCαʔϏεͷ6*σβΠφʔྺ12೥͘Β͍ w 8FCαʔϏεΛझຯͰ࡞͍ͬͯΔྺ6೥͘Β͍

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

w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ΤϯδχΞͱ૊ΜͰ झຯͰ8FCαʔϏεΛ৭ʑ࡞ͬͨ ͦͷதͷ͕ͭFTBͰɺ ϏδωεԽͰ͖ͯɺࠓʹࢸΓ·͢ɻ

߹ಉձࣾFTB w ΤϯδχΞਓ σβΠφʔਓ w 3VCZPO3BJMTΛ࢖ͬͨ8FCαʔϏε։ൃ w શһ͕։ൃऀ w શһ͕ܦӦऀ
w શһ͕ࣗࣾαʔϏεͷϢʔβʔ w ࠷ۙ͸J04΋΍͍ͬͯ·͕͢ɺ8FC͕த৺

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 ޻࡞ ࠓ೔࿩͢ͷ͸͜ͷ΁Μͷ࿩

!14 esaͷσβΠϯϓϩηε FTBͷσβΠϯ͸ͲͷΑ͏ʹߟ͑ͯ࡞͍ͬͯΔͷ͔ʁ ৭ɺ6*ɺϒϥϯσΟϯά౳ɺσβΠϯϓϩηεͷҰ෦Λ͝঺հ͠·͢

!15 esaͷσβΠϯͷํ਑ w ָ͠͞ɾ͔Θ͍͞ɾΏΔ͞ w ৽઱͞ɾ໨৽͠͞ w ΤϯδχΞϑϨϯυϦʔ ࡞Γ࢝Ίͷ͔࣌Βߟ͑ͯͯɺݱࡏ΋มΘΒͳ͍ํ਑

!16 ָ͠͞ɾ͔Θ͍͞ɾΏΔ͞ w ۀ຿ͬΆ͞Λײ͡ͳ͍ɺ࢖ָ͍ͬͯͯ͠΋ͷʹ w ೔ใ΍υΩϡϝϯτΛॻ͘͜ͱ͸ࣗ෼ͨͪʹͱͬͯͱͯ΋ָ͍͜͠ͱ w ॻָ͘͠͞ɺಡΉָ͠͞Λ఻͍͑ͨ w ָ͕͠͞ɺϞνϕʔγϣϯΛ্͛Δ
w ΩϟϥΫλʔ

!17 ৽઱͞ɾ໨৽͠͞ w طଘͷ৘ใڞ༗αʔϏεͱ͸ҰઢΛըͨ͠งғؾ w ͔͠͠ɺحΛͯΒΘͣଟ͘ͷਓʹೃછΈਂ͍6* w ৽͗͢͠Δ΋ͷ͸ଟ͘ͷਓʹͱͬͯ࢖͍ͮΒ͍ɹ w ڝ߹ͱ͸গ͠ҧͬͨ෼໺ͷ΋ͷΛࢀߟʹ͢Δ
w ΤσΟλ w ϑΝΠϧΤΫεϓϩʔϥʔ w ΤσΟτϦΞϧσβΠϯ

!18 ΤϯδχΞϑϨϯυϦʔ w ΤϯδχΞจԽͱ૬ੑͷྑ͍΋ͷʹ w 3FTQFDU(JU)VC w ΤϯδχΞ͔Βੜ·ΕΔΑ͍श׳͕ະདྷΛ੾Γ։͘ w ͔ͭΤϯδχΞҎ֎΋࢖͍ͨ͘ͳΔ਌͠Έ΍͢͞
w ΤϯδχΞతࢥ૝ͷڧ͞Λɺ͔Θ͍͞ͰόϥϯεΛऔͬͯத࿨ ΤϯδχΞจԽʹɺඇΤϯδχΞΛר͖ࠐΈ͍ͨ

!19 esaͷΧϥʔ FTBͷΧϥʔεΩʔϜ͸ͲͷΑ͏ʹߟܾ͑ͯΊ͔ͨ main-color #0a9b94 text-color #3c4a60 accent-color #f29600 base-color
#efede0

!20 esaͷϝΠϯΧϥʔͷ৚݅ FTBʹͱͬͯΑ͍৭͸Կ͔Λߟ͑ͯΈΔ w ໨ʹ΍͍͞͠৭ w ϦϯΫ৭ʹ΋࢖͑Δ৭ w ڝ߹͕গͳ͍৭ w
ΧδϡΞϧͰ໌Δ͍৭ w ઌೖ؍ͷগͳ͍৭ main-color #0a9b94

!21 ৚݅ʹ͋͏৭Λফڈ๏Ͱ୳ͦ͏ GSPNIUUQTqBUVJDPMPSTDPNQBMFUUFEFGP

!22 ໨ʹ༏͍͠৭ ೔ৗతʹ࢖͏௕͘ݟΔը໘ͳͷͰɺ͋·Γܹࢗతͳ৭͸ආ͚͍ͨ Ϣʔβʔͷ࡞ۀͷअຐʹͳΒͳ͍Α͏ʹ ☓ஆ৭ܥ w ͪΐͬͱΪϥΪϥͦ͠͏ w ͔Θ͍͍͚Ͳπʔϧͱͯ͠௕͍࣌ ؒ໨ʹ͢Δʹ͸఍߅͕͋Δ
☓ࢵ w ͪΐͬͱΪϥΪϥͦ͠͏

!23 ϦϯΫ৭ʹ΋࢖͑Δ৭ ϝΠϯΧϥʔΛϦϯΫͷจࣈ৭ʹ΋ྲྀ༻͠ɺ৭਺Λ͓͑͞γϯϓϧͳը໘ʹ͍ͨ͠ ☓ԫ৭ w จࣈ৭ʹ͸ݟͮΒ͍ ☓੺ w XBSOJOHܥͱ͔ͿΔ ☓Ϟϊτʔϯܥ
w ී௨ͷจࣈ৭ͱ͔ͿΔ

!24 ڝ߹͕গͳ͍৭ ϝΠϯΧϥʔΛϦϯΫͷจࣈ৭ʹ΋ྲྀ༻͠ɺ৭਺Λ͓͑͞γϯϓϧͳը໘ʹ͍ͨ͠ ☓ϒϧʔ w ৘ใܥͷαʔϏεʹଟ͍ w ੨͍ΞΠίϯ͹͔ͬΓฒ ΜͩΓ͢Δ ☓ԫ྘
w ੨΄ͲͰ͸ͳׂ͍͕ͱ͋ Δײ͡

!25 ΧδϡΞϧͰ໌Δ͍৭ ָ͍͠ײ͡Λ૝ىͤ͞Δ৭ ☓ࢵ w γοΫͰΤϨΨϯτ ☓ೱࠠɾϞϊτʔϯ w ҉͍ w
͔ͬͪΓਅ໘໨

!26 ઌೖ؍ͷগͳ͍৭ ͍ΖΜͳਓʹ࢖ͬͯ΄͍͠ͷͰɺͳΔ΂͘૝ى͞ΕΔઌೖ؍΍όΠΞε͕গͳ͍ɺ ͋Δछແػ࣭Ͱɺதཱతͳ৭ʹ ☓ࢵ w ߴوͳײ͡ w ޷͖ݏ͍Θ͔ΕΔ ☓੺ܥ
w ঁࢠͬΆ͍ͱ͍͏ઌೖ؍ʁ w ͜͜ʹ͸ͳ͍͚ͲϐϯΫ΋ ☓㐋ɾΦϨϯδ w ݩؾͳײ͡ w ޷͖ݏ͍͕গ͠Θ͔Εͦ͏

!27 ফڈ๏ͰɺΤϝϥϧυάϦʔϯ͕࢒ͬͨ ̋ΤϝϥϧυάϦʔϯ w ໨ʹ༏͘͠ɺϦϯΫ৭ʹ΋࢖͑Δ w ڝ߹αʔϏε΋͋·Γଟ͘ͳ͍ w ΧδϡΞϧͰ໌Δ͍ײ͡ w
όΠΞε͕গͳ͍৭ w ࣗ෼ͷ޷͖ͳ৭Ͱ΋͋Δʢॏཁʣ

!28 ໌౓Λௐ੔͢Δ ݱࡏͷNBJODPMPS ໌౓ ໌౓ ໌౓ ໌౓ ໌Δ͍தʹ΋མͪண͖͕͋Γɺจࣈ৭ʹ࢖ͬͯ΋ݟ΍͍͢໌౓ʹ ৭૬ˠ ࠼౓ˠ
໌౓ˠ

!29 ໌౓ൺֱ ☓໌౓ ˚໌౓ ☓໌౓ ̋໌౓

!30 ໌౓ൺֱ ☓໌౓ ˚໌౓ ☓໌౓ ໌౓͸ѱ͘͸ͳ͍ͷ͕ͩɺͪΐͬͱམͪண͖͕ͳ͍ ̋໌౓

!31 ໌౓ൺֱ ☓໌౓ ˚໌౓ ☓໌౓ νΧνΧ͢ΔɺಡΈͮΒ͍ ѱ͘͸ͳ͍͕ɺϦϯΫ͕ฒ ΜͰ͍Δͱ೿खͳײ͡ ಡΈ΍͍͢ɾམͪண͖ ҉ͯ͘ɺී௨ͷจࣈ৭ͱ۠
ผ͕෇͖ͮΒ͘ͳͬͯ͘Δ ̋໌౓

!32 ͱ͜ΖͰࡢ೔ɺԭೄ͔ΒϦϦʔε͠·ͨ͠ ϝΠϯΧϥʔΛม͑ΒΕΔػೳ

!33 ςʔϚΧϥʔΛબ΂Δػೳ Ͳͷ৭΋͕Μ͹ͬͯબΜͩΜͰ͕͢ɺ΍ͬͺΓσϑΥϧτͷ྘͕Ұ൪ͬ͘͠Γ͘Δ

!34 esaͷςΩετΧϥʔ r text-color #3c4a60 accent-color #f29600 base-color #efede0 ࣮͸ɺࠇͰ΋άϨʔͰ΋ͳ͍ɻೱࠠͳͷͩͬͨɻ

!35 esaͷςΩετΧϥʔ ࣮͸ɺࠇͰ΋άϨʔͰ΋ͳ͍ɻೱࠠͳͷͩͬͨɻ text-color #3c4a60 black #000000 dark gray #444444

!36 black #000000 dark gray #444444 text-color #3c4a60

!37 black #000000 dark gray #444444 text-color #3c4a60 εϥΠυͩͱͳ͔ͳ͔Θ͔ΓͮΒ͍ΜͰ͕͢ʜNN Α͔ͬͨΒɺखݩͷFTBͷจࣈ৭ΛΠϯεϖΫλͱ͔Ͱ͍ͬͯ͡Έ͍ͯͩ͘͞ɻ

!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 ʢஆ৭ܥͩͱগ͠ೱ஡ܥʹৼͬͨΓ͢Δ͜ͱ͕ଟ͍ʣ

!39 esaͷϕʔεΧϥʔ ίίͷ৭ main-color #0a9b94 base-color #efede0

!40 άϨʔʹͯ͠ΈΔͱྫྷ͍ͨײ͡ʹ… ࢖͍ͨ͞൒ݮ

!41 ϕʔεΧϥʔʹ΋গ͠৭ຯΛՃ͑Δ main-color #0a9b94 text-color #3c4a60 a base-color #efede0 main-color
#0a9b94 text-color #3c4a60 a base-color #efede0 w ϝΠϯΧϥʔͱͷௐ࿨ w ϏϏουͳ৭ ΞΠϘϦʔˠ΍ΘΒ͔ͰԹ͔Έͷ͋Δҹ৅ͷը໘ʹ

!42 ৭͸Sassͷม਺ʹͯ͠Ұݩ؅ཧ w ৭ม͑ͨ͘ͳͬͨ࣌ʹָ w ଞͷ৭΋ࢼͯ͠ݕূɾௐ੔͕͠ ΍͍͢

!43 esaͷλΠϙάϥϑΟ ςΩετʹؔ͢ΔσβΠϯͷߟ͑ํ

!44 esaͷλΠϙάϥϑΟͰ ؾΛ͚͍ͭͯΔ͜ͱ w ॻ͍ͯͯʛಡΜͰͯ ετϨε͕ͳ͍ w ॻ͍ͯͯʛಡΜͰͯ ָ͍͠ɺΘ͘Θ͘͢Δ w
ྑ͍΋ͷΛ ॻ͍͍ͯΔʛಡΜͰ͍Δʣؾ෼ʹͳΕΔ w จষ͚ͩͰ͸ͳ͘ίʔυͷՄಡੑ w ॻ͖खͷࢥߟΛॿ͚ΔσβΠϯʢॻ͖ͳ͕Βߟ͑Δʣ ͜ͷ΁ΜΛ৺͕͚ͯ࡞ΔΑ͏ʹ͍ͯ͠·͢

!45 δϟϯϓ཰͕ߴ͍ͷ͕ಛ௃ w FTBͷδϟϯϓ཰ͷߴ͞ʹ͸ɺେ͖ͭ͘ͷҙਤ͕͋Γ·͢ ʢδϟϯϓ཰ຊจʹର͢Δɺݟग़͠ɾλΠτϧͷจࣈαΠζͷେ͖͞ͷൺ཰ʣ

!46 title reaction h1 h2 h3 tag ຊจ link category
WIP action ཁૉ͕݁ߏଟ͍

!47 δϟϯϓ཰ͰཁૉؒͷϝϦϋϦΛग़͢ ☓δϟϯϓ཰খ ϝϦϋϦ͕ͳ͍ɻ λΠτϧͷ಺༰͕໨ʹೖͬͯདྷͮΒ͍ɻ εΧεΧͯ͠ऐ͍͠ײ͕͢͡Δׂʹɺཁૉؒͷ ҧ͍͕Θ͔ΓͮΒͪ͘͝Όͪ͝Όͨ͠ײ͡ʹ ̋δϟϯϓ཰େ λΠτϧ͕ೖ͖ͬͯ΍͍͢ɻ ཁૉؒͷҧ͍͕Θ͔Γ΍͍͢
ը໘ʹϦζϜ͕ੜ·Εɺ͍͖͍͖ͱ͢Δɻ

!48 ΤσΟτϦΞϧσβΠϯΛҙࣝ FTBͷهࣄϖʔδ͸ɺࡶࢽ΍৽ฉͳͲͷࢴ໘σβΠϯΛͪΐͬͱҙࣝͯ͠·͢ w ߴ͍δϟϯϓ཰ w ܩઢɾۭ͔͍ؒͮ w άϦουϨΠΞ΢τʢ͋·Γ࢖͑ͯͳ͍ʣ ಡΉ࣌ͷշద͞ɺோΊΔتͼʹ͍ͭͯ௕೥ࢼߦࡨޡ͞Ε͖ͯͨ෼໺
ʢࡶࢽ΍৽ฉهࣄΛॻ͍͍ͯΔΑ͏ͳؾ෼Ͱॻ͍ͯཉ͍͠ʣ

!49 ߴ͍δϟϯϓ཰͸ɺΘ͘Θ͘͢Δ δϟϯϓ཰Λ্खʹۦ࢖͢Δͱɺ؍Δਓͷ৺Λߴ༲ͤ͞ΔΑ͏ͳޮՌ͕͋Δ ʰԬຊҰએͷ౦ژσβΠϯʱΑΓIUUQTXXXBNB[PODPKQEQ ʢͪΐͬͱۃ୺ͳྫͰ͕͢ɺʮ৺གྷΔδϟϯϓ཰ʯͷΑ͍ྫͩͳ͋ͱɻʣ

!50 esaͷUIσβΠϯ FTBͷ6*σβΠϯͷҰ෦ͷߟ͑ํΛ঺հ

!51 ΧςΰϦͷσβΠϯ FTBͷ6*σβΠϯͷҰྫͱͯ͠ɺΧςΰϦσβΠϯ͕Ͱ͖Δ·ͰΛ঺հ͠·͢

!52 ·ͣ͸ΞΠσΞΛςΩετʹdump ࢓༷ͷΞΠσΞ΍ࢀߟࢿྉͳͲΛɺ(JU)VC*TTVF΍FTB ʹॻ͖ग़ͯ͠νʔϜͰڞ༗͠ɺσΟεΧογϣϯΛॏͶΔ

!53 esaͷΧςΰϦ͸ຊ࣭తʹ͸Կʹ͍ۙͷ͔ʁ ֊૚ߏ଄Λ୧͍ͬͯ͘ɺ࢖͍׳Εͨ6* ϑΝΠϧΤΫεϓϩʔϥʔ Λͭ͘Ζ͏ɹ Ϟμϯͳݟͨ໨ͷϑΝΠϧΤΫεϓϩʔϥʔ

!54 खඳ͖ͷϥϑ खඳ͖ͷϥϑͷஈ֊Ͱେମ࢓্͕Γʹ͍ۙ΋ ͷ͕ग़དྷ্͕͍ͬͯΔ *MMVTUSBUPS΍4LFUDIͰɺݪੇେͷϥϑΛ ࡞੒ʢ࠷ॳ͸നόʔδϣϯ΋ݕ౼͍ͯͨ͠ʣ ݪੇେͷϥϑ

!55 ΤϯδχΞͱ૬ஊ͠ͳ͕Β࣮૷ (JU)VCͷϓϧϦΫ্ͰɺσβΠφʔ͸WJFX ෦෼ΛɺΤϯδχΞ͸+4ɺόοΫΤϯυ෦෼ Λ࣮૷͠ͳ͕Βঃʑʹਫ਼౓ΛߴΊ͍ͯ͘

!56 esaͷUIͷ࡞ΓͷΤοηϯε w طଘͷ৭Μͳ΋ͷ͔ΒώϯτΛಘΔ w खඳ͖ͷϥϑͷ࣌఺Ͱ͋Δఔ౓ݻΊΔ w ΤϯδχΞͱҰॹʹσβΠϯ͢Δɹ 6*ͮ͘ΓͷϓϩηεͷதͰɺಛʹॏཁͩͱࢥ͍ͬͯΔ͜ͱ

!57 طଘͷ৭Μͳ΋ͷ͔ΒώϯτΛಘΔ w ͍ۙ෼໺ͷڝ߹αʔϏε΋΋ͪΖΜࢀߟ ʹ͢Δ͕ʜ w ৽چɺδϟϯϧ΍ϝσΟΞʹͱΒΘΕͣ ༷ʑͳ΋ͷ͔ΒώϯτΛಘΔ w εΫϦʔϯ͚ͩͰͳ͘ɺࢴഔମ΍ɺϦΞϧͳϓϩμΫτʹ
΋ώϯτ͸͋Δ w ڑ཭ͷ཭Εͨ෼໺͔ΒώϯτΛಘΔͱɺಠࣗੑ͕ग़Δ w ϨΨγʔͳ6*ˠϞμϯʹΞϨϯδ w ʮ͜ͷػೳͱɺຊ࣭తʹ͍ۙମݧΛ΋ͭ ΋ͷ͸Կ͔ʁʯͱ͍͏໰͍Λৗʹ࣋ͭ ௨஌σβΠϯͷώϯτ͸ോ࣌ܭ

!58 खඳ͖ͷϥϑͰΞΠσΞΛݻΊΔɹɹ w खඳ͖ͷϥϑ͸ɺ΄΅ඞͣඳ͘ w ࡶͰԼखͰ0,ɺ͖Ε͍ʹඳ͘͜ͱʹͩ͜ΘΒͳ͍ w खඳ͖ͷϥϑͷ࣌఺ͰɺΞΠσΞ΍഑ஔ ཁૉɺϨΠΞ΢τΛ໌֬ʹ͓ͯ͘͠ w
಄ͷதͰ͸׬੒͍ͯ͠Δ͘Β͍ͷঢ়ଶʹ͓ͯ͘͠ w ʢࣗ෼͸࠷ॳ͸ͳ͔ͳ͔Ͱ͖ͳ͔͚ͬͨͲ܇࿅ͰͰ͖ΔΑ ͏ʹͳͬͨɻʣ w ΠϥϨͳͲͷυϩʔΠϯάιϑτͷ্΍ɺίʔσΟϯά͠ ͍ͯΔ࣌͸ɺࡉ෦Λ٧ΊΕ͹͍͍͚ͩͷঢ়ଶʹ͓͖ͯͨ͠ ͍ʢεΫϦʔϯͷதͰେ͖ͳ໎͍͕ग़Δͱ͋·Γ͏·͍͘ ͔ͳ͍ʣ

!59 ΤϯδχΞͱҰॹʹUIσβΠϯ͢Δ w ૣ͍ஈ֊͔Βɺ౎౓ΤϯδχΞͱڞ༗ɾ ૬ஊͭͭ͠ɺϑΟʔυόοΫ΋Β͍ͳ͕ ΒਐΊΔ w (JU)VC*TTVF΍FTBΛ࢖ͬͯڞ༗ w Α͍ΞΠσΞΛ΋Β͑ͨΓɺ࣮૷ํ๏Λ໛ࡧͨ͠ΓɺΤϯ
δχΞͷ࣮૷Ϟνϕʔγϣϯ΋ߴ·Δ w σβΠφʔΑΓ΋ΤϯδχΞͷํ͕໌֬ ͳ6*ͷΠϝʔδΛ͍࣋ͬͯΔ͜ͱ΋ଟ͍ w ػೳʹΑͬͯ͸ɺΤϯδχΞओಋͰ6*Λ ࡞Δ͜ͱ΋͋Δ

!60 esaͷϒϥϯσΟϯά ωʔϛϯάɾϩΰɾίϯηϓτ

!61 esaͷωʔϛϯά ͳͥɺFTBͱ͍͏໊લʹͨ͠ͷ͔ʁʜ͖͔͚ͬ͸͠ΐ͏΋ͳ͍͜ͱͩͬͨɻ w FTBΛ࡞ͬͨ։ൃ߹॓ͷͱ͖ ʹɺ!GVLBZBUTVͷϒϥ΢β ʹʮΤαʯͱ͍͏ϒοΫϚʔ Ϋ͕͋ΔͷΛݟ͚ͭͨ w ʮΤΰαʔνʯͷུΒ͍͠
w ΈΜͳͷπϘʹೖͬͨ w αʔϏε໊΋ʮΤαʯͰ͍͍ ͡ΌΜ w 5XJUUFSͷௗΞΠίϯ͕͍ͭ ͯͨ͜ͱ͔ΒɺΩϟϥ΋ௗ͕ طఆ࿏ઢʹͳͬͨ ωʔϛϯά͸೰Ή͜ͱ͕ଟ͍ͷͰɺϥοΩʔͳέʔεͩͱࢥ͍·͢ɻ

!62 esaͱ͍͏໊લͷྑ͠ѱ͠ w ޠײɾڹ͖ʢ͑͞ʣ w ୹͞ɺݺͼ΍͢͞ w ͔Θ͍͞ɺ਌͠Έ΍͢͞ɺΏΔ͞ w ΦϦδφϦςΟɺҹ৅ʹ࢒Δ
w ҰݟɺԿ͔ͩΑ͘Θ͔Βͳ͍ʢڵຯΛͦͦΔʣ w ݁Ռతʹίϯηϓτͱ͏·͘ඥ෇͍ͨʢޙड़ʣ w ࠃࡍతʹෆརʢӳޠͩͱΤαͬͯಡΈͮΒ͍ʣ w ಡΈํ͕Θ͔Βͳ͍ͱ͍͏ਓ͕݁ߏ͍Δ w ;͚ͨ͟ײ͕͢͡Δ w ໊ࣾΛݴ͏࣌ஏ͔͍ͣ͠ʢ׳Εͨʣ w ڝ߹ʢ&VSPQFBO4QBDF"HFODZʣ w ʢϤʔϩού൛/"4"Έ͍ͨͳͱ͜Ζʣ ྑ͍఺ ѱ͍఺

!63 esaͷϩΰλΠϓ FTBͱ͍͏ΏΔ໊͍લͱ૬൓ͯ͠ɺϩΰλΠϓ͸ςοΫͳײ͡ʹ͔ͨͬͨ͠ɻʢத࿨ʣ esa طଘॻମΛϕʔεʹͯ͠ɺΑΓ௕ํܗʹۙͮ͘Α͏ʹௐ੔ɻ ॊΒ͔͕͞ऑ·ΓɺεΫΤΞͳҹ৅ʹɻ

!64 esaͷΩϟϥΫλʔ w ⒡⾚⒡ ͱ͍͏ֆจࣈ͕΋ͱ΋ͱ஥ؒ಺Ͱྲྀߦ͓ͬͯΓɺͦΕ͕ϕʔεʹ w ͜ͷ΁ΜͷܦҢ͸ͪ͜Βʹৄ͘͠IUUQTTQFBLFSEFDLDPNLFO@D@MPGBMTFLPUP w લड़ͷωʔϛϯάͷܦҢ΋͋ΓɺτϦʹ͠Α͏ͱࢥ͍ͬͯͨ w
͔Θ͍͍͚Ͳɺᇪͼͳ͍ w ແද৘ͰͪΐͬͱਓΛ۬ͬͨײ͡ˠUFDIΆ͞ ⒡㱿⒡

!65 w زԿֶతͳ଄ܗʹدͤΔ w ଄ܗΛγϯϓϧʹ w ྠֲઢ͸ͳ͘໘͚ͩͰදݱ w ओு͗͢͠ͳ͍ɾॊΒ͔͞ زԿֶతʹ
໘͚ͩͰදݱ ଄ܗΛγϯϓϧʹ → γϯϘϦοΫʹ

!66 όϦΤʔγϣϯ ৭ΜͳόʔδϣϯΛ࡞ͬͯ༡ΜͰ͍·͢ʢ͝౰஍FTBɾقઅFTBʣ

!67 άοζల։৭ʑ w ͋Γ͕͍ͨ͜ͱʹɺҙ֎ͱചΕ͍ͯΔ w ࡞Γ͍ͨάοζΛ࡞Γ͍ͨΑ͏ʹ࡞ΕΔͷͰָ͍͠ TIPQFTBJPʹ͓ͯങ͍ٻΊ͍͚ͨͩ·͢

!68 esaͷίϯηϓτ ʮ৘ใΛɺҭ͍ͯͨɻʯ

!69 ࡞Γͳ͕Βɺ࢖͍ͳ͕Βݟ͖͑ͯͨίϯηϓτ w ։ൃͷ࠷ॳ͔Β͸͖ͬΓܾΊ͍ͯ ͨΘ͚Ͱ͸ͳ͔ͬͨ w ʮ৘ใΛɺҭ͍ͯͨɻʯͱ͍͏ϫʔ υͷॳग़͸։ൃΛ͸͡Ί͔ͯΒϲ ݄ޙɻ w
஥ؒ಺͚ͩͰ࢖͍͸͡ΊͯɺFTB ͷྑ͞Λ࣮ײ͔ͯ͠ΒͦΕΛݴޠ Խͨ͠ɻ ίϯηϓτॳग़ͷLPͷϥϑ ࠷ॳ͸ʮ৘ใΛɺҭͯΑ͏ɻʯ ͩͬͨΒ͍͠ʢ֮͑ͯͳ͍ʣ

!70 esaಛ༗ͷػೳʮWIPʯ͕Ωʔʹ w 8*18PSLJOHJO1SPHSFTTʢ࡞ۀதʣ w ॻ్͖தͷυΩϡϝϯτΛʮ8*1ʯͱͯ͠νʔϜϝΠτʹڞ༗Ͱ͖Δɻ w 8*1ͷઃܭࢥ૝ʹ͍ͭͯৄ͘͠͸IUUQTTQFBLFSEFDLDPNLFO@D@MPXJQ WIPͳهࣄ͸άϨʔΞ΢τ͠ ͯදࣔ͞Εɺߋ৽ͯ͠΋௨஌
͕ඈ͹ͳ͍Α͏ʹͳ͍ͬͯΔɻ

!71 Ұ౓ʹ׬ᘳΛ໨ࢦ͢ͷͰ͸ͳ͘ɺ ͩΜͩΜͱΑ͍ͯ͘͜͠͏ͱ͍͏Ձ஋؍ ʮҭͯΔʯ w զʑ͕ීஈߦ͍ͬͯΔɺFTBͦͷ΋ͷͷ࡞Γํʹ΋௨͡ΔՁ஋؍ w զʑ͚ͩͰͳ͘ɺ਎ͷճΓͷ։ൃऀʢFTBΛ࢖ͬͯཉ͍͠ਓୡʣʹ΋ڞ ௨͢ΔՁ஋؍ w
ࣗ෼͕ͨͪීஈ͔Βେ੾ʹ͍ͯ͠ΔՁ஋؍ʹؾ͖ͮɺݴޠԽ͢Δ w τϦͬΆ͞ɺΤαͬΆ͞΋ײͤ͡͞ΔϫʔυˠΑΓڧݻͳੈք؍ʹ

!72 ʮ৘ใΛҭͯΔʯΛਤʹ͢Δ w τϦ ҭͯΔˠʦཛˠ੒௕ˠ૥ͮ͘ΓʧˠετʔϦʔʹ͢Δ w ϏδϡΞϥΠζ͢Δ͜ͱͰɺΑΓੈք؍͕͸͖ͬΓݟ͑ͯ͘Δ

!73 ͞Βʹৄ͘͠ݴޠԽɺϝοηʔδΛ఻͑Δ w IUUQTFTBJPDPODFQU

!74 طʹͦ͜ʹ͋ΔՁ஋؍Λɺܗʹͯ͠఻͑Δ w զʑ։ൃऀࣗ਎ͷಓඪʹͳΔ w ϓϩμΫτͷશͯΛʮ৘ใΛҭͯΔʯͨΊʹ࡞Ζ͏ͱ͍͏ҙࢥܾఆʹ w ϢʔβʔͱϓϩμΫτΛͭͳ͙Ս͚ڮʹͳΔ w ίϯηϓτ΁ͷڞײ͕ɺΑ͍ϢʔβʔΛूΊΔ
w ͪ͜Β͔Βͷԡ͠෇͚Ͱͳ͘ɺࣗ཯෼ࢄతʹɺϢʔβʔͦΕͧΕͷΑΓྑ͍ FTBͱͷ޲͖߹͍ํΛൃݟ͢Δ ίϯηϓτ

!75 ۟ಡ఺Λ͚ͭɺࣈؒΛۭ͚Δ͜ͱͰɺ  ޠΓ͔͚ΔΑ͏ͳϝοηʔδੑ͕ੜ·ΕΔɻ ͓·͚: ίϐʔ·ΘΓͷTips ৘ใΛҭ͍ͯͨ ৘ ใ Λ ɺ
ҭ ͯ ͨ ͍ ɻ

!76 ·ͱΊ ࣗ෼ͨͪͷ8FCαʔϏεΛ࡞ΔσβΠφʔͱͯ͠ɺ ԿΛ௥ٻ͍͖͍ͯͨ͠ͷ͔ʁ

!77 ࠓ·Ͱ࡞͖ͬͯͨ झຯͷϓϩμΫτͨͪ

w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ

w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ͋Δڞ௨఺͕͋Δ͜ͱʹؾ͍ͮͨ ࠓ·ͰͰ͖ͳ͔ͬͨ͜ͱɺॻ͚ͳ͔ͬͨ͜ͱ͕ɺ ͪΐͬͱͨ͠࢓૊Έ΍σβΠϯ͕ ΋ͨΒ͢ʮΏΔ͞ʯʹΑͬͯͰ͖ΔΑ͏ʹͳΔ ʮΏΔ͠ͷσβΠϯʯ ͱউखʹݺΜͰɺڵຯΛ͍࣋ͬͯΔɻ ࠷ॳ͔Β͜͏͍͏΋ͷΛ࡞Ζ͏ͱ໨ࢦ͍ͯͨ͠Θ͚͡Ό͍͚Ͳɺ ޙ͔Βߟ͑Δͱ͍ͭ΋ࣗ෼͕࡞͖ͬͯͨ΋ͷ͸͜Εͩͬͨͱؾ͍ͮͨɻ

ΏΔ͠ͷσβΠϯͱ͸ w ΍Γ͍ͨ͜ͱΛ΍ͬͯɺࣗ෼Β͠͞Λग़ͯ͠΋͍͍Μ ͩΑͱ͍͏ʮ༐ؾ͚ͮʯ w ྫ 8*1͔ͩΒ·ͩະ׬੒ͷΞΠσΞΛॻ͍ͯ΋େৎ෉ w ·ͩ୭͔ͷ৺ͷதʹ͋Δ͚ͩͷૉఢͳ΋ͷΛɺͻͱͭͰ΋ଟ͘ੈք ʹ۩ݱԽ͍ͨ͠
ਓ͕͍͖͍͖ͱ͢Δɻ ͦΕͧΕ͕ɺࣗ෼Β͠͞Λൃشͯ͠ɺΑΓָ͘͠ੜ͖͍͚ͯΔɻ ΏΔ͠ɺΏΔ͞ʹΑͬͯɺ

ࣗ෼ͨͪͷϓϩμΫτΛ࡞Δ͜ͱ w ࣗ෼ͷσβΠφʔͱͯ͠ͷڵຯɾؔ৺Λ௥ٻ͢Δ͜ͱ͕ Ͱ͖Δ w Ϣʔβʔʹରͯ͠ྑ͍΋ͷΛఏڙ͢Δ͜ͱ͚ͩʹ஫ྗ͠ ͯɺਖ਼໘͔ΒऔΓ૊ΊΔ w طଘͷ૊৫ͷҰһͩͱ೉͍͜͠ͱ΋ʜಛʹ੓࣏ʹؔ͢Δίετ͕େ͖͔ͬͨɻ w
ʢෆՄೳͰ͸ͳ͍ͱࢥ͏͚Ͳɺࣗ෼ͷྗ͕ٴ͹ͳ͔ͬͨPS޲͍ͯͳ͔ͬͨʣ w झຯͷΑ͏ʹָ͠ΜͰ࡞Δ͜ͱͱɺਓʹՁ஋Λఏڙͯ͠ Ϗδωεͱͯ͠੒ཱͤ͞Δ͜ͱͷཱ྆

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

!83 ਓΛ͍͖͍͖ͱͤ͞Δ΋ͷΛ σβΠϯ͍͖͍ͯͨ͠ ͜Ε͔Β΋ɺ

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

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

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Featured

Transcript