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

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

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

    View full-size slide

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

    View full-size slide

  3. https://esa.io

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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ɺࣾһ໊ʹ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 2011.12
    w/ @shu0115
    ؆୯Ոܭ฽αʔϏε
    ϨγʔτΛஷΊͳ͍͍ͯ͘Ոܭ฽
    2013.04
    w/ @katton, @ppworks
    2013.09
    w/ @ppworks and Team pplog
    2014.05
    w/ @fukayatsu
    ύʔϚϦϯΫͷͳ͍ϒϩά
    ʮϙΤϜʯ͕ॻ͚ΔαʔϏε
    λεΫ؅ཧπʔϧ
    ̍ਓ1JWPUBM5SBDLFSతͳ
    ΤϯδχΞͱ૊ΜͰ
    झຯͰ8FCαʔϏεΛ৭ʑ࡞ͬͨ
    ͦͷதͷ͕ͭFTBͰɺ
    ϏδωεԽͰ͖ͯɺࠓʹࢸΓ·͢ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. !75
    ۟ಡ఺Λ͚ͭɺࣈؒΛۭ͚Δ͜ͱͰɺ

    ޠΓ͔͚ΔΑ͏ͳϝοηʔδੑ͕ੜ·ΕΔɻ
    ͓·͚: ίϐʔ·ΘΓͷTips
    ৘ใΛҭ͍ͯͨ
    ৘ ใ Λ ɺ ҭ ͯ ͨ ͍ ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide