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

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

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

https://esa.io/

Transcript

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

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

    w ౦ژɾौ୩ʹΦϑΟεʢ࠷ۙ͸ϑϧϦϞʔτʣ w ૑ۀऀɾσβΠφʔ
  3. https://esa.io

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

  5. !5 esa — ϋοΧʔζνϟϯϓϧʔ w ೥ʹొஃʮFTBJPͷͭ͘Γ͔ͨʯ w IUUQTFTBQBHFTJPQTIBSJOHQPTUTCEDBDEDEBFTMJEFTIUNM w ೥࿈ଓεϙϯαʔπʔϧεϙϯαʔ

    w FTB͕ॳΊͯձࣾͱͯ͠εϙϯαʔͨ͠Πϕϯτ w ٱ͠ৼΓʹԭೄʹདྷΕ·ͨ͠ʢ೥ͿΓ౓໨ʣ w ԭೄ࠷ߴʂϋΧνϟϯ࠷ߴʂ
  6. !6 ຊ೔ͷ͓୊ w FTBͷσβΠϯϓϩηεͷ঺հ w ࣗ෼ͨͪͷαʔϏεΛσβΠϯ͢Δ͜ͱ ࣗ෼ͷαʔϏεΛ࡞Γ͍ͨਓɺ 8FCαʔϏεͷσβΠϯʹڵຯ͕͋Δਓͷ ࢀߟʹͳΕ͹޾͍Ͱ͢

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

  8. ։ൃ߹॓Ͱ!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ɺࣾһ໊ʹ
  9. ੺௩ݸਓͷܦྺ w σβΠφʔྺ20೥ w ࠷ॳ͸ࢴഔମͷάϥϑΟοΫσβΠφʔͩͬͨ w ϙελʔɺύϯϑϨοτɺࡶࢽɾॻ੶ࢽ໘ɺϩΰͳͲ w 8FCσβΠφʔྺ16೥͘Β͍ w

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

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

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ΤϯδχΞͱ૊ΜͰ झຯͰ8FCαʔϏεΛ৭ʑ࡞ͬͨ ͦͷதͷ͕ͭFTBͰɺ ϏδωεԽͰ͖ͯɺࠓʹࢸΓ·͢ɻ
  12. ߹ಉձࣾFTB w ΤϯδχΞਓ σβΠφʔਓ w 3VCZPO3BJMTΛ࢖ͬͨ8FCαʔϏε։ൃ w શһ͕։ൃऀ w શһ͕ܦӦऀ

    w શһ͕ࣗࣾαʔϏεͷϢʔβʔ w ࠷ۙ͸J04΋΍͍ͬͯ·͕͢ɺ8FC͕த৺
  13. 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. !14 esaͷσβΠϯϓϩηε FTBͷσβΠϯ͸ͲͷΑ͏ʹߟ͑ͯ࡞͍ͬͯΔͷ͔ʁ ৭ɺ6*ɺϒϥϯσΟϯά౳ɺσβΠϯϓϩηεͷҰ෦Λ͝঺հ͠·͢

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

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

    w ΩϟϥΫλʔ
  17. !17 ৽઱͞ɾ໨৽͠͞ w طଘͷ৘ใڞ༗αʔϏεͱ͸ҰઢΛըͨ͠งғؾ w ͔͠͠ɺحΛͯΒΘͣଟ͘ͷਓʹೃછΈਂ͍6* w ৽͗͢͠Δ΋ͷ͸ଟ͘ͷਓʹͱͬͯ࢖͍ͮΒ͍ɹ w ڝ߹ͱ͸গ͠ҧͬͨ෼໺ͷ΋ͷΛࢀߟʹ͢Δ

    w ΤσΟλ w ϑΝΠϧΤΫεϓϩʔϥʔ w ΤσΟτϦΞϧσβΠϯ
  18. !18 ΤϯδχΞϑϨϯυϦʔ w ΤϯδχΞจԽͱ૬ੑͷྑ͍΋ͷʹ w 3FTQFDU(JU)VC w ΤϯδχΞ͔Βੜ·ΕΔΑ͍श׳͕ະདྷΛ੾Γ։͘ w ͔ͭΤϯδχΞҎ֎΋࢖͍ͨ͘ͳΔ਌͠Έ΍͢͞

    w ΤϯδχΞతࢥ૝ͷڧ͞Λɺ͔Θ͍͞ͰόϥϯεΛऔͬͯத࿨ ΤϯδχΞจԽʹɺඇΤϯδχΞΛר͖ࠐΈ͍ͨ
  19. !19 esaͷΧϥʔ FTBͷΧϥʔεΩʔϜ͸ͲͷΑ͏ʹߟܾ͑ͯΊ͔ͨ main-color #0a9b94 text-color #3c4a60 accent-color #f29600 base-color

    #efede0
  20. !20 esaͷϝΠϯΧϥʔͷ৚݅ FTBʹͱͬͯΑ͍৭͸Կ͔Λߟ͑ͯΈΔ w ໨ʹ΍͍͞͠৭ w ϦϯΫ৭ʹ΋࢖͑Δ৭ w ڝ߹͕গͳ͍৭ w

    ΧδϡΞϧͰ໌Δ͍৭ w ઌೖ؍ͷগͳ͍৭ main-color #0a9b94
  21. !21 ৚݅ʹ͋͏৭Λফڈ๏Ͱ୳ͦ͏ GSPNIUUQTqBUVJDPMPSTDPNQBMFUUFEFGP

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

    ☓ࢵ w ͪΐͬͱΪϥΪϥͦ͠͏
  23. !23 ϦϯΫ৭ʹ΋࢖͑Δ৭ ϝΠϯΧϥʔΛϦϯΫͷจࣈ৭ʹ΋ྲྀ༻͠ɺ৭਺Λ͓͑͞γϯϓϧͳը໘ʹ͍ͨ͠ ☓ԫ৭ w จࣈ৭ʹ͸ݟͮΒ͍ ☓੺ w XBSOJOHܥͱ͔ͿΔ ☓Ϟϊτʔϯܥ

    w ී௨ͷจࣈ৭ͱ͔ͿΔ
  24. !24 ڝ߹͕গͳ͍৭ ϝΠϯΧϥʔΛϦϯΫͷจࣈ৭ʹ΋ྲྀ༻͠ɺ৭਺Λ͓͑͞γϯϓϧͳը໘ʹ͍ͨ͠ ☓ϒϧʔ w ৘ใܥͷαʔϏεʹଟ͍ w ੨͍ΞΠίϯ͹͔ͬΓฒ ΜͩΓ͢Δ ☓ԫ྘

    w ੨΄ͲͰ͸ͳׂ͍͕ͱ͋ Δײ͡
  25. !25 ΧδϡΞϧͰ໌Δ͍৭ ָ͍͠ײ͡Λ૝ىͤ͞Δ৭ ☓ࢵ w γοΫͰΤϨΨϯτ ☓ೱࠠɾϞϊτʔϯ w ҉͍ w

    ͔ͬͪΓਅ໘໨
  26. !26 ઌೖ؍ͷগͳ͍৭ ͍ΖΜͳਓʹ࢖ͬͯ΄͍͠ͷͰɺͳΔ΂͘૝ى͞ΕΔઌೖ؍΍όΠΞε͕গͳ͍ɺ ͋Δछແػ࣭Ͱɺதཱతͳ৭ʹ ☓ࢵ w ߴوͳײ͡ w ޷͖ݏ͍Θ͔ΕΔ ☓੺ܥ

    w ঁࢠͬΆ͍ͱ͍͏ઌೖ؍ʁ w ͜͜ʹ͸ͳ͍͚ͲϐϯΫ΋ ☓㐋ɾΦϨϯδ w ݩؾͳײ͡ w ޷͖ݏ͍͕গ͠Θ͔Εͦ͏
  27. !27 ফڈ๏ͰɺΤϝϥϧυάϦʔϯ͕࢒ͬͨ ̋ΤϝϥϧυάϦʔϯ w ໨ʹ༏͘͠ɺϦϯΫ৭ʹ΋࢖͑Δ w ڝ߹αʔϏε΋͋·Γଟ͘ͳ͍ w ΧδϡΞϧͰ໌Δ͍ײ͡ w

    όΠΞε͕গͳ͍৭ w ࣗ෼ͷ޷͖ͳ৭Ͱ΋͋Δʢॏཁʣ
  28. !28 ໌౓Λௐ੔͢Δ ݱࡏͷNBJODPMPS ໌౓ ໌౓ ໌౓ ໌౓ ໌Δ͍தʹ΋མͪண͖͕͋Γɺจࣈ৭ʹ࢖ͬͯ΋ݟ΍͍͢໌౓ʹ ৭૬ˠ ࠼౓ˠ

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

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

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

    ผ͕෇͖ͮΒ͘ͳͬͯ͘Δ ̋໌౓
  32. !32 ͱ͜ΖͰࡢ೔ɺԭೄ͔ΒϦϦʔε͠·ͨ͠ ϝΠϯΧϥʔΛม͑ΒΕΔػೳ

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

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

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

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

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

  38. !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. !39 esaͷϕʔεΧϥʔ ίίͷ৭ main-color #0a9b94 base-color #efede0

  40. !40 άϨʔʹͯ͠ΈΔͱྫྷ͍ͨײ͡ʹ… ࢖͍ͨ͞൒ݮ

  41. !41 ϕʔεΧϥʔʹ΋গ͠৭ຯΛՃ͑Δ main-color #0a9b94 text-color #3c4a60 a base-color #efede0 main-color

    #0a9b94 text-color #3c4a60 a base-color #efede0 w ϝΠϯΧϥʔͱͷௐ࿨ w ϏϏουͳ৭ ΞΠϘϦʔˠ΍ΘΒ͔ͰԹ͔Έͷ͋Δҹ৅ͷը໘ʹ
  42. !42 ৭͸Sassͷม਺ʹͯ͠Ұݩ؅ཧ w ৭ม͑ͨ͘ͳͬͨ࣌ʹָ w ଞͷ৭΋ࢼͯ͠ݕূɾௐ੔͕͠ ΍͍͢

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

  44. !44 esaͷλΠϙάϥϑΟͰ ؾΛ͚͍ͭͯΔ͜ͱ w ॻ͍ͯͯʛಡΜͰͯ ετϨε͕ͳ͍ w ॻ͍ͯͯʛಡΜͰͯ ָ͍͠ɺΘ͘Θ͘͢Δ w

    ྑ͍΋ͷΛ ॻ͍͍ͯΔʛಡΜͰ͍Δʣؾ෼ʹͳΕΔ w จষ͚ͩͰ͸ͳ͘ίʔυͷՄಡੑ w ॻ͖खͷࢥߟΛॿ͚ΔσβΠϯʢॻ͖ͳ͕Βߟ͑Δʣ ͜ͷ΁ΜΛ৺͕͚ͯ࡞ΔΑ͏ʹ͍ͯ͠·͢
  45. !45 δϟϯϓ཰͕ߴ͍ͷ͕ಛ௃ w FTBͷδϟϯϓ཰ͷߴ͞ʹ͸ɺେ͖ͭ͘ͷҙਤ͕͋Γ·͢ ʢδϟϯϓ཰ຊจʹର͢Δɺݟग़͠ɾλΠτϧͷจࣈαΠζͷେ͖͞ͷൺ཰ʣ

  46. !46 title reaction h1 h2 h3 tag ຊจ link category

    WIP action ཁૉ͕݁ߏଟ͍
  47. !47 δϟϯϓ཰ͰཁૉؒͷϝϦϋϦΛग़͢ ☓δϟϯϓ཰খ ϝϦϋϦ͕ͳ͍ɻ λΠτϧͷ಺༰͕໨ʹೖͬͯདྷͮΒ͍ɻ εΧεΧͯ͠ऐ͍͠ײ͕͢͡Δׂʹɺཁૉؒͷ ҧ͍͕Θ͔ΓͮΒͪ͘͝Όͪ͝Όͨ͠ײ͡ʹ ̋δϟϯϓ཰େ λΠτϧ͕ೖ͖ͬͯ΍͍͢ɻ ཁૉؒͷҧ͍͕Θ͔Γ΍͍͢

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

    ʢࡶࢽ΍৽ฉهࣄΛॻ͍͍ͯΔΑ͏ͳؾ෼Ͱॻ͍ͯཉ͍͠ʣ
  49. !49 ߴ͍δϟϯϓ཰͸ɺΘ͘Θ͘͢Δ δϟϯϓ཰Λ্खʹۦ࢖͢Δͱɺ؍Δਓͷ৺Λߴ༲ͤ͞ΔΑ͏ͳޮՌ͕͋Δ ʰԬຊҰએͷ౦ژσβΠϯʱΑΓIUUQTXXXBNB[PODPKQEQ ʢͪΐͬͱۃ୺ͳྫͰ͕͢ɺʮ৺གྷΔδϟϯϓ཰ʯͷΑ͍ྫͩͳ͋ͱɻʣ

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

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

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

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

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

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

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

  57. !57 طଘͷ৭Μͳ΋ͷ͔ΒώϯτΛಘΔ w ͍ۙ෼໺ͷڝ߹αʔϏε΋΋ͪΖΜࢀߟ ʹ͢Δ͕ʜ w ৽چɺδϟϯϧ΍ϝσΟΞʹͱΒΘΕͣ ༷ʑͳ΋ͷ͔ΒώϯτΛಘΔ w εΫϦʔϯ͚ͩͰͳ͘ɺࢴഔମ΍ɺϦΞϧͳϓϩμΫτʹ

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

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

    δχΞͷ࣮૷Ϟνϕʔγϣϯ΋ߴ·Δ w σβΠφʔΑΓ΋ΤϯδχΞͷํ͕໌֬ ͳ6*ͷΠϝʔδΛ͍࣋ͬͯΔ͜ͱ΋ଟ͍ w ػೳʹΑͬͯ͸ɺΤϯδχΞओಋͰ6*Λ ࡞Δ͜ͱ΋͋Δ
  60. !60 esaͷϒϥϯσΟϯά ωʔϛϯάɾϩΰɾίϯηϓτ

  61. !61 esaͷωʔϛϯά ͳͥɺFTBͱ͍͏໊લʹͨ͠ͷ͔ʁʜ͖͔͚ͬ͸͠ΐ͏΋ͳ͍͜ͱͩͬͨɻ w FTBΛ࡞ͬͨ։ൃ߹॓ͷͱ͖ ʹɺ!GVLBZBUTVͷϒϥ΢β ʹʮΤαʯͱ͍͏ϒοΫϚʔ Ϋ͕͋ΔͷΛݟ͚ͭͨ w ʮΤΰαʔνʯͷུΒ͍͠

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

    w ҰݟɺԿ͔ͩΑ͘Θ͔Βͳ͍ʢڵຯΛͦͦΔʣ w ݁Ռతʹίϯηϓτͱ͏·͘ඥ෇͍ͨʢޙड़ʣ w ࠃࡍతʹෆརʢӳޠͩͱΤαͬͯಡΈͮΒ͍ʣ w ಡΈํ͕Θ͔Βͳ͍ͱ͍͏ਓ͕݁ߏ͍Δ w ;͚ͨ͟ײ͕͢͡Δ w ໊ࣾΛݴ͏࣌ஏ͔͍ͣ͠ʢ׳Εͨʣ w ڝ߹ʢ&VSPQFBO4QBDF"HFODZʣ w ʢϤʔϩού൛/"4"Έ͍ͨͳͱ͜Ζʣ ྑ͍఺ ѱ͍఺
  63. !63 esaͷϩΰλΠϓ FTBͱ͍͏ΏΔ໊͍લͱ૬൓ͯ͠ɺϩΰλΠϓ͸ςοΫͳײ͡ʹ͔ͨͬͨ͠ɻʢத࿨ʣ esa طଘॻମΛϕʔεʹͯ͠ɺΑΓ௕ํܗʹۙͮ͘Α͏ʹௐ੔ɻ ॊΒ͔͕͞ऑ·ΓɺεΫΤΞͳҹ৅ʹɻ

  64. !64 esaͷΩϟϥΫλʔ w ⒡⾚⒡ ͱ͍͏ֆจࣈ͕΋ͱ΋ͱ஥ؒ಺Ͱྲྀߦ͓ͬͯΓɺͦΕ͕ϕʔεʹ w ͜ͷ΁ΜͷܦҢ͸ͪ͜Βʹৄ͘͠IUUQTTQFBLFSEFDLDPNLFO@D@MPGBMTFLPUP w લड़ͷωʔϛϯάͷܦҢ΋͋ΓɺτϦʹ͠Α͏ͱࢥ͍ͬͯͨ w

    ͔Θ͍͍͚Ͳɺᇪͼͳ͍ w ແද৘ͰͪΐͬͱਓΛ۬ͬͨײ͡ˠUFDIΆ͞ ⒡㱿⒡
  65. !65 w زԿֶతͳ଄ܗʹدͤΔ w ଄ܗΛγϯϓϧʹ w ྠֲઢ͸ͳ͘໘͚ͩͰදݱ w ओு͗͢͠ͳ͍ɾॊΒ͔͞ زԿֶతʹ

    ໘͚ͩͰදݱ ଄ܗΛγϯϓϧʹ → γϯϘϦοΫʹ
  66. !66 όϦΤʔγϣϯ ৭ΜͳόʔδϣϯΛ࡞ͬͯ༡ΜͰ͍·͢ʢ͝౰஍FTBɾقઅFTBʣ

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

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

  69. !69 ࡞Γͳ͕Βɺ࢖͍ͳ͕Βݟ͖͑ͯͨίϯηϓτ w ։ൃͷ࠷ॳ͔Β͸͖ͬΓܾΊ͍ͯ ͨΘ͚Ͱ͸ͳ͔ͬͨ w ʮ৘ใΛɺҭ͍ͯͨɻʯͱ͍͏ϫʔ υͷॳग़͸։ൃΛ͸͡Ί͔ͯΒϲ ݄ޙɻ w

    ஥ؒ಺͚ͩͰ࢖͍͸͡ΊͯɺFTB ͷྑ͞Λ࣮ײ͔ͯ͠ΒͦΕΛݴޠ Խͨ͠ɻ ίϯηϓτॳग़ͷLPͷϥϑ ࠷ॳ͸ʮ৘ใΛɺҭͯΑ͏ɻʯ ͩͬͨΒ͍͠ʢ֮͑ͯͳ͍ʣ
  70. !70 esaಛ༗ͷػೳʮWIPʯ͕Ωʔʹ w 8*18PSLJOHJO1SPHSFTTʢ࡞ۀதʣ w ॻ్͖தͷυΩϡϝϯτΛʮ8*1ʯͱͯ͠νʔϜϝΠτʹڞ༗Ͱ͖Δɻ w 8*1ͷઃܭࢥ૝ʹ͍ͭͯৄ͘͠͸IUUQTTQFBLFSEFDLDPNLFO@D@MPXJQ WIPͳهࣄ͸άϨʔΞ΢τ͠ ͯදࣔ͞Εɺߋ৽ͯ͠΋௨஌

    ͕ඈ͹ͳ͍Α͏ʹͳ͍ͬͯΔɻ
  71. !71 Ұ౓ʹ׬ᘳΛ໨ࢦ͢ͷͰ͸ͳ͘ɺ ͩΜͩΜͱΑ͍ͯ͘͜͠͏ͱ͍͏Ձ஋؍ ʮҭͯΔʯ w զʑ͕ීஈߦ͍ͬͯΔɺFTBͦͷ΋ͷͷ࡞Γํʹ΋௨͡ΔՁ஋؍ w զʑ͚ͩͰͳ͘ɺ਎ͷճΓͷ։ൃऀʢFTBΛ࢖ͬͯཉ͍͠ਓୡʣʹ΋ڞ ௨͢ΔՁ஋؍ w

    ࣗ෼͕ͨͪීஈ͔Βେ੾ʹ͍ͯ͠ΔՁ஋؍ʹؾ͖ͮɺݴޠԽ͢Δ w τϦͬΆ͞ɺΤαͬΆ͞΋ײͤ͡͞ΔϫʔυˠΑΓڧݻͳੈք؍ʹ
  72. !72 ʮ৘ใΛҭͯΔʯΛਤʹ͢Δ w τϦ ҭͯΔˠʦཛˠ੒௕ˠ૥ͮ͘ΓʧˠετʔϦʔʹ͢Δ w ϏδϡΞϥΠζ͢Δ͜ͱͰɺΑΓੈք؍͕͸͖ͬΓݟ͑ͯ͘Δ

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

  74. !74 طʹͦ͜ʹ͋ΔՁ஋؍Λɺܗʹͯ͠఻͑Δ w զʑ։ൃऀࣗ਎ͷಓඪʹͳΔ w ϓϩμΫτͷશͯΛʮ৘ใΛҭͯΔʯͨΊʹ࡞Ζ͏ͱ͍͏ҙࢥܾఆʹ w ϢʔβʔͱϓϩμΫτΛͭͳ͙Ս͚ڮʹͳΔ w ίϯηϓτ΁ͷڞײ͕ɺΑ͍ϢʔβʔΛूΊΔ

    w ͪ͜Β͔Βͷԡ͠෇͚Ͱͳ͘ɺࣗ཯෼ࢄతʹɺϢʔβʔͦΕͧΕͷΑΓྑ͍ FTBͱͷ޲͖߹͍ํΛൃݟ͢Δ ίϯηϓτ
  75. !75 ۟ಡ఺Λ͚ͭɺࣈؒΛۭ͚Δ͜ͱͰɺ
 ޠΓ͔͚ΔΑ͏ͳϝοηʔδੑ͕ੜ·ΕΔɻ ͓·͚: ίϐʔ·ΘΓͷTips ৘ใΛҭ͍ͯͨ ৘ ใ Λ ɺ

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

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

  78. 2011.12 w/ @shu0115 ؆୯Ոܭ฽αʔϏε ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽ 2013.04 w/ @katton, @ppworks 2013.09

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

    w/ @ppworks and Team pplog 2014.05 w/ @fukayatsu ύʔϚϦϯΫͷͳ͍ϒϩά ʮϙΤϜʯ͕ॻ͚ΔαʔϏε λεΫ؅ཧπʔϧ ̍ਓ1JWPUBM5SBDLFSతͳ ͋Δڞ௨఺͕͋Δ͜ͱʹؾ͍ͮͨ ࠓ·ͰͰ͖ͳ͔ͬͨ͜ͱɺॻ͚ͳ͔ͬͨ͜ͱ͕ɺ ͪΐͬͱͨ͠࢓૊Έ΍σβΠϯ͕ ΋ͨΒ͢ʮΏΔ͞ʯʹΑͬͯͰ͖ΔΑ͏ʹͳΔ ʮΏΔ͠ͷσβΠϯʯ ͱউखʹݺΜͰɺڵຯΛ͍࣋ͬͯΔɻ ࠷ॳ͔Β͜͏͍͏΋ͷΛ࡞Ζ͏ͱ໨ࢦ͍ͯͨ͠Θ͚͡Ό͍͚Ͳɺ ޙ͔Βߟ͑Δͱ͍ͭ΋ࣗ෼͕࡞͖ͬͯͨ΋ͷ͸͜Εͩͬͨͱؾ͍ͮͨɻ
  80. ΏΔ͠ͷσβΠϯͱ͸ w ΍Γ͍ͨ͜ͱΛ΍ͬͯɺࣗ෼Β͠͞Λग़ͯ͠΋͍͍Μ ͩΑͱ͍͏ʮ༐ؾ͚ͮʯ w ྫ 8*1͔ͩΒ·ͩະ׬੒ͷΞΠσΞΛॻ͍ͯ΋େৎ෉ w ·ͩ୭͔ͷ৺ͷதʹ͋Δ͚ͩͷૉఢͳ΋ͷΛɺͻͱͭͰ΋ଟ͘ੈք ʹ۩ݱԽ͍ͨ͠

    ਓ͕͍͖͍͖ͱ͢Δɻ ͦΕͧΕ͕ɺࣗ෼Β͠͞Λൃشͯ͠ɺΑΓָ͘͠ੜ͖͍͚ͯΔɻ ΏΔ͠ɺΏΔ͞ʹΑͬͯɺ
  81. ࣗ෼ͨͪͷϓϩμΫτΛ࡞Δ͜ͱ w ࣗ෼ͷσβΠφʔͱͯ͠ͷڵຯɾؔ৺Λ௥ٻ͢Δ͜ͱ͕ Ͱ͖Δ w Ϣʔβʔʹରͯ͠ྑ͍΋ͷΛఏڙ͢Δ͜ͱ͚ͩʹ஫ྗ͠ ͯɺਖ਼໘͔ΒऔΓ૊ΊΔ w طଘͷ૊৫ͷҰһͩͱ೉͍͜͠ͱ΋ʜಛʹ੓࣏ʹؔ͢Δίετ͕େ͖͔ͬͨɻ w

    ʢෆՄೳͰ͸ͳ͍ͱࢥ͏͚Ͳɺࣗ෼ͷྗ͕ٴ͹ͳ͔ͬͨPS޲͍ͯͳ͔ͬͨʣ w झຯͷΑ͏ʹָ͠ΜͰ࡞Δ͜ͱͱɺਓʹՁ஋Λఏڙͯ͠ Ϗδωεͱͯ͠੒ཱͤ͞Δ͜ͱͷཱ྆
  82. डୗͷσβΠφʔͱ͸ҧ͏ʁ w ʮର৅ΛΑΓ͍͖͍͖ͱͤ͞ Δ͜ͱʯ͕σβΠϯͷتͼ w ͢Ͱʹ͋Δ΋ͷ͕ɺͲ͏΍ͬͨΒ΋ͬͱʮΒ͠ ͞ʯΛൃش͍͖͍͖ͯ͠ͱଘࡏ͢Δ͜ͱ͕Ͱ͖ Δ͔ʁߟ͑ɺ۩ݱԽ͢Δ w ࣗݾදݱͰ͸ͳ͘ɺଞऀͷදݱͷ͓ख఻͍

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