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

エンジニアのための情報設計入門

Go Tanaka
April 18, 2019

 エンジニアのための情報設計入門

Go Tanaka

April 18, 2019
Tweet

More Decks by Go Tanaka

Other Decks in Technology

Transcript

  1. I N F O R M AT I O N
    D E S I G N ( F O R E N G I N E E R S )
    Τ ϯ δχ Ξ ͷ ͨ Ί ͷ ৘ ใ ઃ ܭ ೖ ໳

    View full-size slide

  2. ͸͡Ίʹ
    ࣗݾ঺հ
    ాத ߽
    @tan_go238
    גࣜձࣾτϚϧό CTO
    ΤϯδχΞ ݉ σβΠϯσΟϨΫγϣϯ ݉ ࡶ༻
    Rails + React Ͱ։ൃͭͭ͠࠷ۙ͸Javaॻ͍ͨΓSketch࢖ͬͨΓ͠·͢
    iOS΋͘͠͸ϑϩϯτΤϯυͷٕज़ऀΛઈࢍืूதͰ͢

    View full-size slide

  3. גࣜձࣾτϚϧό
    ϓϩσϡʔε Ϩηϓγϣϯ
    γεςϜ։ൃ

    View full-size slide

  4. ͸͡Ίʹ
    ͜ͷεϥΠυͷର৅ऀ
    ΤϯδχΞ
    ओʹΤϯδχΞ໨ઢͰۀ຿γεςϜͷ৘ใઃܭʹ͍ͭͯߟ͍͖͑ͯ·͢
    ৘ใઃܭͷࡍɺσʔλϞσϦϯάख๏ͷRDRAΛར༻͍ͯ͠·͢
    େ·͔ͳಓےΛ࿩͢ײ͡ͰਐΊ͍͖ͯ·͢

    View full-size slide

  5. ͜ͷεϥΠυʹग़ͯ͘Δ୯ޠͷఆٛ
    Ϗδωε ͓ۚΛՔ͙࢓૊Έ΍ɺͦΕΛࢧ͑Δ࢓૊Έ
    γεςϜ ϏδωεͷҰ෦΋͘͠͸શͯΛITԽͨ͠΋ͷ
    σʔλ γεςϜΛར༻͢Δͱ͖ʹ࡞ΒΕΔ৘ใʢ஋ͱͯ͠อଘʣ
    ΤϯδχΞ γεςϜΛ࡞Δਓ
    σβΠφʔ γεςϜͷ࢖͍উख΍ݟӫ͑Λྑ͘͢Δਓ

    View full-size slide

  6. ۀ຿γεςϜͷUIσβΠϯͷ೉͍͠ͱ͜Ζ
    ۀ຿γεςϜͷUIσβΠϯ͸ɺҰൠͷWebαΠτͱ͸ҟͳΓɺऔѻ͏σʔλ
    ͕ଟ࠼ˍେྔɺ͔ͭొ৔ਓ෺΋ଟ͘ෳࡶʹͳΔͷͰɺ͍͖ͳΓσβΠϯ͢Δ
    ͜ͱ͸Ͱ͖ͳ͍ʢϏδωεΛ෼ੳ͢Δඞཁ͕͋Δʣ
    ͪΌΜͱͨ͠൑அج४Λ࡞ΓϩδοΫΛ૊ΈཱͯΔͱෲམͪ͢Δ৔߹͕ଟ͍
    ϩδοΫͰ൑அͰ͖ͳ͍ͱۀ຿γεςϜ͸UIσβΠϯ·Ͱམͱ͠ࠐΊͳ͍
    ۀ຿γεςϜͷUIσβΠϯ͢Δʹ͸·ͣ͸৘ใઃܭ͔Β࢝ΊΔඞཁ͕͋Δ

    View full-size slide

  7. ΤϯδχΞʹͱͬͯσβΠϯͱ͸
    Ϗδωε͸ఆੑత
    ϏδωεʢಛʹγεςϜԽ͞Ε͍ͯͳ͍Ϗδωεʣ͸ͨ͘͞Μͷਓ͕ؒؔΘΔͨ
    Ίఆੑతͳۀ຿͕ͱͯ΋ଟ͍
    γεςϜԽ͍ͯͨ͠ͱͯ͠΋ʮӡ༻ͰΧόʔʯ͢Δ͜ͱ΋Α͋͘Δ
    γεςϜԽ͢Δʹ͸ɺఆੑతͳۀ຿Λఆྔతɺ͢Θͳͪ۩ମԽͯ͠σʔλʹམͱ
    ͠ࠐΉ͢Δඞཁ͕͋Δ

    View full-size slide

  8. ΤϯδχΞʹͱͬͯσβΠϯͱ͸
    ݟӫ͑Λྑ͘͢Δʁ ࢖͍΍͘͢͢Δʁ
    ɾݟӫ͑Λྑ͘͢Δ → ఆੑత
    ɾ࢖͍΍͘͢͢Δ → ఆੑత
    ఆੑతͱఆྔతʢᐆດͳج४ͱ਺஋Խ͞Εͨਖ਼֬ͳج४ʣ
    ΤϯδχΞ͸ීஈ۩ମԽ͞ΕͨσʔλΛѻ͏ͨΊɺఆੑతͳ൑அج४͕Α͘෼͔Βͣ
    ۤखҙࣝΛ࣋ͭ͜ͱ͕ଟ͍
    ΤϯδχΞͱҟͳΓσβΠφʔ͸ఆੑతͳ৘ใͷ··ѻΘͳ͍ͱ͍͚ͳ͍৔໘͕ଟ͍

    View full-size slide

  9. ϏδωεͱσʔλΛԿ౓΋ߦͬͨΓདྷͨΓͯ͠ߟ࡯͢Δ
    曖昧 → (具体化) → 正確
    γεςϜΛ࡞Δͱ͍͏͜ͱ͸ ఆੑతͳϏδωεΛఆྔతʹ͢Δ ͱ͍͏͜ͱ
    ఆੑͱఆྔͷதؒʹσβΠϯ͕͋ΔͨΊɺશͯΛఆྔతʹѻ͏͜ͱ͕Ͱ͖ͳ͍
    ※ ਖ਼֬ʹ͢Δ΄Ͳϖϧιφ΍ϢʔεέʔεΛݻఆͯ͠͠·͏ͨΊɺॊೈੑ͕ͳ͘ͳΔ
    Ϗδωεʢᐆດʣ σβΠϯ σʔλʢਖ਼֬ʣ
    γεςϜ
    ΤϯδχΞʹͱͬͯσβΠϯͱ͸

    View full-size slide

  10. ৘ใઃܭͷݕূ
    σʔλ͔ΒσβΠϯΛ૝૾͢Δʢਖ਼֬ˠᐆດʣ
    DBઃܭ͕ਖ਼͔֬ͭఆྔతͳ৘ใͳͷͰɺࣗ෼͕࡞ͬͨ৘ใ
    ઃܭΛݕূ͢Δʹ͸DBઃܭΛݟΔͷ͕Ұ൪खͬऔΓૣ͍
    DBઃܭͷݟํͱͯ͠σʔλ͸େ͖͘෼͚ͯʮϦιʔεʯͱ
    ʮΠϕϯτʯʹ෼͔ΕΔ͜ͱΛ͓֮͑ͯ͘ͱΑ͍
    Ϧιʔε͸ʮ໊ࢺʯɹΠϕϯτ͸ʮಈࢺʯ
    ·ͨɺσʔλʹ͸ͦΕ͕࡞੒͞ΕΔྲྀΕ͕͋Δ Goods Customer
    Contract
    Store
    Staff
    Stock

    View full-size slide

  11. ৘ใઃܭͷݕূ
    A "customer" arrives at the "store" and buy some "goods" from the shop "staff"
    "͓٬༷" ͕ "ళฮ" ʹདྷͯ "঎඼" Λ "ళһ" ͔Β ߪೖ͢Δ
    arrives at the and buy from the
    Goods
    Customer Store Staff Buy
    =
    ಈࢺ
    ໊ࢺ ໊ࢺ ໊ࢺ ໊ࢺ
    Create purchase history
    Decrease stock
    σʔλ͔ΒͲͷϖϧιφͱҰக͢Δ͔Λ૝૾͢Δʢ͜͜ͰᐆດʹͳΔʣ
    ͜ͷͱ͖ʹొ࿥͞Ε͍ͯΔσʔλྔͳͲ΋ݟ͓ͯ͘ͱUIઃܭ࣌ʹࢀߟʹͳΔ

    View full-size slide

  12. ৘ใઃܭͷखॱ
    Ϗδωε͔ΒσβΠϯΛߟ͑Δʢᐆດˠ۩ମԽʣ
    1. ίϯςΩετϚοϓΛ࡞Δ
    2. ϏδωεϢʔεέʔεΛ࡞Δ(BUC)
    3. BUC͔ΒϢʔεέʔε(UC)Λ࡞Δ
    4. UC͝ͱʹϢʔβʔΠϯλϏϡʔͯ͠ߋʹ۩ମԽ͍ͯ͘͠

    View full-size slide

  13. ίϯςΩετϚοϓ
    ϏδωεʹؔΘΔొ৔ਓ෺͕ଟ͍৔߹͸ɺίϯςΩετϚοϓΛ࡞ͬͯ
    ొ৔ਓ෺Λ͸͖ͬΓͤ͞Δ
    ͜ͷͱ͖ʮγεςϜʯͱͦͷपΓͷϏδωε΍ར֐ؔ܎ʹ͍ͭͯ΋هࡌ͠·͢
    ίϯςΩετϚοϓ͕Ͱ͖ͨΒొ৔ਓ෺͝ͱʹϏδωεϢʔεέʔεΛ࡞Δ

    View full-size slide

  14. [業務: チェックイン対応]
    Ϧιʔε
    Πϕϯτ

    View full-size slide

  15. ϏδωεϢʔεέʔε
    ʮۀ຿ʯΛϏδωεϢʔεέʔεͰද͢
    ಉ͡ۀ຿Ͱ΋ؔΘΔొ৔ਓ෺͕ҟͳΔͱۀ຿಺༰͕มΘΔͷͰผͰ࡞Δ

    View full-size slide

  16. ϢʔβʔΠϯλϏϡʔ
    ʮ༧໿Λ୳͢ʯͱ͖ʹԿͷ৘ใ͔Β୳͍ͯ͠Δͷ͔ʁ
    ɾ໊લʢಡΊͳ໊͍લͷਓ΋͍Δʣ
    ɾ॓ധࢪઃ໊ʢ॓ധऀ΋Α͘Θ͔ͬͯͳ͍ͱ͖͕͋Δʣ
    ɾ༧໿൪߸ʢ͜Ε͕෼͔ΔͱҰ൪࣮֬Β͍͠ʣ
    ʮνΣοΫΠϯ͢Δʯͱ͖ʹ͸Կ͕ඞཁ͔ʁ
    ɾ॓ധ୆ாΛهೖͯ͠΋Β͏ʢ೔ຊࠃ੶Ҏ֎͸ύεϙʔτ͕ඞཁʣ
    ɾܾࡁ͕·ͩͷ৔߹͸Χʔυܾࡁͯ͠΋Β͏
    ɾ॓ധ੫ͷઆ໌Λͯ͠ࢧ෷ͬͯ΋Β͏
    ɹͳͲͳͲ

    View full-size slide

  17. ৘ใ͔ΒUI΁
    ͜͜·Ͱͷ·ͱΊ
    ίϯςΩετϚοϓˠBUC→UCͷྲྀΕ͔Β୭͕Ͳ͏࢖͏ͷ
    ͔͕෼͔ΔͷͰɺͦͷ৘ใΛݩʹ੍໿Λ௥Ճ͍ͯ͘͠
    ྫ͑͹
    ɾར༻୺຤͸ εϚʔτϑΥϯʁλϒϨοτʁͦΕͱ΋PCʁ
    ɾҰཡʹ͸Ͳ͏͍͏৘ใ߲໨Λදࣔ͢Ε͹Α͍ʁ
    ɹͳͲͳͲ

    View full-size slide

  18. ৘ใ͔ΒUI΁
    γεςϜશମͷʮटඌҰ؏ੑʯ͕େࣄ
    Ұ؏ੑΛอͪͭͭ΋ɺʮ͠ͳ΍͔ʯʹରԠͰ͖ΔΑ͏ʹ͢Δ
    टඌҰ؏ੑͷͨΊʹมΘΓʹ͍͘ͱ͜Ζ͔ΒશମΛ౷Ұ͍ͯ͘͠
    ಛʹۀ຿γεςϜ͸ෳࡶʹͳΓ͕ͪͳͷͰ
    टඌҰ؏ੑͷͨΊʹ σβΠϯγεςϜͷಋೖ Λ
    ڧ͘ਪ঑͢Δ
    「How Buildings Learn」スチュアート・ブランド

    View full-size slide

  19. Material Design
    Google ͷ Material Design Λϕʔεʹ։ൃΛਐΊ͍ͯΔ
    MDC͸εϚʔτϑΥϯରԠΛલఏʹ࡞ΒΕ͍ͯΔͷͰۀ
    ຿γεςϜͰ࢖͏ʹ͸ද͍߲ࣔͨ͠໨͕ଟ͗ͯ͢ཁ͕݅
    ߹Θͳ͍৔߹͕͋Δ
    Material DesignͷSpecΛϕʔεʹͭͭ͠શମͷόϥϯε
    Λ่͞ͳ͍ൣғͰ֦ு͍ͯ͠Δ
    UIઃܭ͜ͱ͸͡Ί

    View full-size slide

  20. UIઃܭ͜ͱ͸͡Ί
    UIઃܭͷجຊ
    ࠷௿ݶҎԼͷ͜ͱΛܾΊΔ
    ɾΧϥʔεΩʔϜʢϓϥΠϚϦɺηΧϯμϦɺิॿʣ
    ɾλΠϙάϥϑΟʢϑΥϯτɺδϟϯϓ཰ʣ
    ɾϨΠΞ΢τʢϔομʔɺϑολʔɺϝχϡʔʣ
    ͜ͷ͋ͨΓ͸ Google Material Design Λ࢖͍ͬͯΔͳΒ
    Material Theme Editor Λ࢖͏ͱָ

    View full-size slide

  21. ϝχϡʔઃܭ
    ػೳΧςΰϦʔ͝ͱʹϝχϡʔΛ࡞੒͢Δ
    ػೳ͕૿͑Ε͹৘ใΧςΰϦʔ͕ඃͬͯ͘Δ৔߹͕͋
    ΔͷͰਵ࣌ݟ௚͕͠ඞཁ
    ػೳϝχϡʔҎ֎͸ྫ͑͹ҎԼͷΑ͏ͳ΋ͷ͕͋Δ
    ɹγεςϜڞ௨ઃఆʗϢʔβʔઃఆʗܖ໿ઃఆ
    ·ͨɺεϚʔτϑΥϯରԠ͢Δ৔߹͸֊૚ߏ଄͕ਂ͘
    ͳΒͳ͍Α͏ʹ஫ҙ͢Δ
    UIઃܭ͜ͱ͸͡Ί

    View full-size slide

  22. ը໘ڞ௨ઃܭ
    ը໘͝ͱʹόϥόϥͳUIͩͱϢʔβʔ͕ࠞཚ͢ΔͷͰڞ
    ௨ͷը໘ઃܭΛ͋Β͔͡Ί༻ҙ͓ͯ͘͠
    ඞཁͳͷ͸ओʹҎԼͷը໘
    ɾҰཡ ʢݕࡧʗϖʔδωʔγϣϯʗμ΢ϯϩʔυʣ
    ɾ৽ن࡞੒ʗฤूʢฤूɾ࡟আϘλϯͷҐஔ΍৭ʣ
    ɾϨϙʔτʢݕࡧʗάϥϑදࣔʗμ΢ϯϩʔυʣ
    ϝχϡʔ → Ұཡ → ฤूͷը໘ϑϩʔ΋ڞ௨Խ͓ͯ͘͠
    UIઃܭ͜ͱ͸͡Ί

    View full-size slide

  23. ݕࡧઃܭ
    ۀ຿γεςϜͷݕࡧ৚݅͸ෳࡶʹͳΓ΍͍͢ͷ
    ͰҰ؏ੑͷ͋ΔίϯϙʔωϯτΛ༻ҙ͢Δ
    ಛʹΠϕϯτ͸࣌ܥྻͰݕࡧ͢Δ͜ͱ͕؊ʹͳ
    Γσʔλ݅਺ͷߟྀ΋ඞཁʹͳͬͯ͘Δ
    ·ͨ࣌ܥྻͱ͍ͬͯ΋༷ʑͳύλʔϯ͕͋Δͷ
    Ͱࣄલʹ૝ఆύλʔϯΛ༻ҙ͓ͯ͘͠ͱΑ͍
    ೔ʢࢦఆʣ
    ݄ʢࢦఆʣ
    ݄ʢൣғʣ
    ೔ʢൣғʣ + ࣌ؒ
    ೔ʢൣғʣ
    UIઃܭ͜ͱ͸͡Ί

    View full-size slide

  24. ͍͞͝ʹ
    ΤϯδχΞ͕৘ใઃܭ͢Δ৔߹Λ঺հ͠·͕ͨ͠ɺUIσβΠϯ࣌͸σβ
    Πφʔ͕ඞཁͰ͢ɻσβΠφʔ͕͍Δ৔߹͸ૉ௚ʹ͓೚ͤ͠·͠ΐ͏
    UXの基本: https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/
    μϒϧ μΠΞϞϯυ
    ͜ͷϫʔΫϑϩʔ͸ɺӳࠃσβΠϯ Χ΢ϯγϧʹΑͬ
    ͯ޿ΊΒΕͨμϒϧμΠΞϞϯυͱݺ͹ΕΔ UX αʔΫ
    ϧʹج͍͍ͮͯ·͢ɻνʔϜ͸ൃࢄͯ͠ௐࠪʹΑΓΞΠ
    σΞΛཧղ͔ͯ͠Βɺऩଋͯ͠՝୊Λఆٛ͠ɺൃࢄ͠
    ͯݸʑʹ͜ΕΛ໛ࡧ͠ɺΞΠσΞΛڞ༗͠ɺ࠷దͳղ
    ܾࡦΛܾఆ͠ɺςετͱݕূΛߦ͍·͢ɻ
    ࠓճͷ࿩ͨ͠಺༰ σβΠφʔͷྖҬ

    View full-size slide

  25. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide