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

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 ) Τ ϯ δχ Ξ ͷ ͨ Ί ͷ ৘ ใ ઃ ܭ ೖ ໳
2. ͸͡Ίʹ ࣗݾ঺հ ాத ߽ @tan_go238 גࣜձࣾτϚϧό CTO ΤϯδχΞ ݉ σβΠϯσΟϨΫγϣϯ ݉ ࡶ༻ Rails + React Ͱ։ൃͭͭ͠࠷ۙ͸Javaॻ͍ͨΓSketch࢖ͬͨΓ͠·͢ iOS΋͘͠͸ϑϩϯτΤϯυͷٕज़ऀΛઈࢍืूதͰ͢
3. גࣜձࣾτϚϧό ϓϩσϡʔε Ϩηϓγϣϯ γεςϜ։ൃ
4. ͸͡Ίʹ ͜ͷεϥΠυͷର৅ऀ ΤϯδχΞ ओʹΤϯδχΞ໨ઢͰۀ຿γεςϜͷ৘ใઃܭʹ͍ͭͯߟ͍͖͑ͯ·͢ ৘ใઃܭͷࡍɺσʔλϞσϦϯάख๏ͷRDRAΛར༻͍ͯ͠·͢ େ·͔ͳಓےΛ࿩͢ײ͡ͰਐΊ͍͖ͯ·͢
5. ͜ͷεϥΠυʹग़ͯ͘Δ୯ޠͷఆٛ Ϗδωε ͓ۚΛՔ͙࢓૊Έ΍ɺͦΕΛࢧ͑Δ࢓૊Έ γεςϜ ϏδωεͷҰ෦΋͘͠͸શͯΛITԽͨ͠΋ͷ σʔλ γεςϜΛར༻͢Δͱ͖ʹ࡞ΒΕΔ৘ใʢ஋ͱͯ͠อଘʣ ΤϯδχΞ γεςϜΛ࡞Δਓ σβΠφʔ γεςϜͷ࢖͍উख΍ݟӫ͑Λྑ͘͢Δਓ
6. ۀ຿γεςϜͷUIσβΠϯͷ೉͍͠ͱ͜Ζ ۀ຿γεςϜͷUIσβΠϯ͸ɺҰൠͷWebαΠτͱ͸ҟͳΓɺऔѻ͏σʔλ ͕ଟ࠼ˍେྔɺ͔ͭొ৔ਓ෺΋ଟ͘ෳࡶʹͳΔͷͰɺ͍͖ͳΓσβΠϯ͢Δ ͜ͱ͸Ͱ͖ͳ͍ʢϏδωεΛ෼ੳ͢Δඞཁ͕͋Δʣ ͪΌΜͱͨ͠൑அج४Λ࡞ΓϩδοΫΛ૊ΈཱͯΔͱෲམͪ͢Δ৔߹͕ଟ͍ ϩδοΫͰ൑அͰ͖ͳ͍ͱۀ຿γεςϜ͸UIσβΠϯ·Ͱམͱ͠ࠐΊͳ͍ ۀ຿γεςϜͷUIσβΠϯ͢Δʹ͸·ͣ͸৘ใઃܭ͔Β࢝ΊΔඞཁ͕͋Δ
7. ΤϯδχΞʹͱͬͯσβΠϯͱ͸ Ϗδωε͸ఆੑత ϏδωεʢಛʹγεςϜԽ͞Ε͍ͯͳ͍Ϗδωεʣ͸ͨ͘͞Μͷਓ͕ؒؔΘΔͨ Ίఆੑతͳۀ຿͕ͱͯ΋ଟ͍ γεςϜԽ͍ͯͨ͠ͱͯ͠΋ʮӡ༻ͰΧόʔʯ͢Δ͜ͱ΋Α͋͘Δ γεςϜԽ͢Δʹ͸ɺఆੑతͳۀ຿Λఆྔతɺ͢Θͳͪ۩ମԽͯ͠σʔλʹམͱ ͠ࠐΉ͢Δඞཁ͕͋Δ
8. ΤϯδχΞʹͱͬͯσβΠϯͱ͸ ݟӫ͑Λྑ͘͢Δʁ ࢖͍΍͘͢͢Δʁ ɾݟӫ͑Λྑ͘͢Δ → ఆੑత ɾ࢖͍΍͘͢͢Δ → ఆੑత ఆੑతͱఆྔతʢᐆດͳج४ͱ਺஋Խ͞Εͨਖ਼֬ͳج४ʣ ΤϯδχΞ͸ීஈ۩ମԽ͞ΕͨσʔλΛѻ͏ͨΊɺఆੑతͳ൑அج४͕Α͘෼͔Βͣ ۤखҙࣝΛ࣋ͭ͜ͱ͕ଟ͍ ΤϯδχΞͱҟͳΓσβΠφʔ͸ఆੑతͳ৘ใͷ··ѻΘͳ͍ͱ͍͚ͳ͍৔໘͕ଟ͍
9. ϏδωεͱσʔλΛԿ౓΋ߦͬͨΓདྷͨΓͯ͠ߟ࡯͢Δ 曖昧 → （具体化） → 正確 γεςϜΛ࡞Δͱ͍͏͜ͱ͸ ఆੑతͳϏδωεΛఆྔతʹ͢Δ ͱ͍͏͜ͱ ఆੑͱఆྔͷதؒʹσβΠϯ͕͋ΔͨΊɺશͯΛఆྔతʹѻ͏͜ͱ͕Ͱ͖ͳ͍ ※ ਖ਼֬ʹ͢Δ΄Ͳϖϧιφ΍ϢʔεέʔεΛݻఆͯ͠͠·͏ͨΊɺॊೈੑ͕ͳ͘ͳΔ Ϗδωεʢᐆດʣ σβΠϯ σʔλʢਖ਼֬ʣ γεςϜ ΤϯδχΞʹͱͬͯσβΠϯͱ͸
10. ৘ใઃܭͷݕূ σʔλ͔ΒσβΠϯΛ૝૾͢Δʢਖ਼֬ˠᐆດʣ DBઃܭ͕ਖ਼͔֬ͭఆྔతͳ৘ใͳͷͰɺࣗ෼͕࡞ͬͨ৘ใ ઃܭΛݕূ͢Δʹ͸DBઃܭΛݟΔͷ͕Ұ൪खͬऔΓૣ͍ DBઃܭͷݟํͱͯ͠σʔλ͸େ͖͘෼͚ͯʮϦιʔεʯͱ ʮΠϕϯτʯʹ෼͔ΕΔ͜ͱΛ͓֮͑ͯ͘ͱΑ͍ Ϧιʔε͸ʮ໊ࢺʯɹΠϕϯτ͸ʮಈࢺʯ ·ͨɺσʔλʹ͸ͦΕ͕࡞੒͞ΕΔྲྀΕ͕͋Δ Goods Customer Contract Store Staff Stock
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ઃܭ࣌ʹࢀߟʹͳΔ
12. ৘ใઃܭͷखॱ Ϗδωε͔ΒσβΠϯΛߟ͑Δʢᐆດˠ۩ମԽʣ 1. ίϯςΩετϚοϓΛ࡞Δ 2. ϏδωεϢʔεέʔεΛ࡞Δ(BUC) 3. BUC͔ΒϢʔεέʔε(UC)Λ࡞Δ 4. UC͝ͱʹϢʔβʔΠϯλϏϡʔͯ͠ߋʹ۩ମԽ͍ͯ͘͠
13. ίϯςΩετϚοϓ ϏδωεʹؔΘΔొ৔ਓ෺͕ଟ͍৔߹͸ɺίϯςΩετϚοϓΛ࡞ͬͯ ొ৔ਓ෺Λ͸͖ͬΓͤ͞Δ ͜ͷͱ͖ʮγεςϜʯͱͦͷपΓͷϏδωε΍ར֐ؔ܎ʹ͍ͭͯ΋هࡌ͠·͢ ίϯςΩετϚοϓ͕Ͱ͖ͨΒొ৔ਓ෺͝ͱʹϏδωεϢʔεέʔεΛ࡞Δ
15. [業務: チェックイン対応] Ϧιʔε Πϕϯτ
16. ϏδωεϢʔεέʔε ʮۀ຿ʯΛϏδωεϢʔεέʔεͰද͢ ಉ͡ۀ຿Ͱ΋ؔΘΔొ৔ਓ෺͕ҟͳΔͱۀ຿಺༰͕มΘΔͷͰผͰ࡞Δ
17. ϢʔβʔΠϯλϏϡʔ ʮ༧໿Λ୳͢ʯͱ͖ʹԿͷ৘ใ͔Β୳͍ͯ͠Δͷ͔ʁ ɾ໊લʢಡΊͳ໊͍લͷਓ΋͍Δʣ ɾ॓ധࢪઃ໊ʢ॓ധऀ΋Α͘Θ͔ͬͯͳ͍ͱ͖͕͋Δʣ ɾ༧໿൪߸ʢ͜Ε͕෼͔ΔͱҰ൪࣮֬Β͍͠ʣ ʮνΣοΫΠϯ͢Δʯͱ͖ʹ͸Կ͕ඞཁ͔ʁ ɾ॓ധ୆ாΛهೖͯ͠΋Β͏ʢ೔ຊࠃ੶Ҏ֎͸ύεϙʔτ͕ඞཁʣ ɾܾࡁ͕·ͩͷ৔߹͸Χʔυܾࡁͯ͠΋Β͏ ɾ॓ധ੫ͷઆ໌Λͯ͠ࢧ෷ͬͯ΋Β͏ ɹͳͲͳͲ
18. ৘ใ͔ΒUI΁ ͜͜·Ͱͷ·ͱΊ ίϯςΩετϚοϓˠBUC→UCͷྲྀΕ͔Β୭͕Ͳ͏࢖͏ͷ ͔͕෼͔ΔͷͰɺͦͷ৘ใΛݩʹ੍໿Λ௥Ճ͍ͯ͘͠ ྫ͑͹ ɾར༻୺຤͸ εϚʔτϑΥϯʁλϒϨοτʁͦΕͱ΋PCʁ ɾҰཡʹ͸Ͳ͏͍͏৘ใ߲໨Λදࣔ͢Ε͹Α͍ʁ ɹͳͲͳͲ
19. ৘ใ͔ΒUI΁ γεςϜશମͷʮटඌҰ؏ੑʯ͕େࣄ Ұ؏ੑΛอͪͭͭ΋ɺʮ͠ͳ΍͔ʯʹରԠͰ͖ΔΑ͏ʹ͢Δ टඌҰ؏ੑͷͨΊʹมΘΓʹ͍͘ͱ͜Ζ͔ΒશମΛ౷Ұ͍ͯ͘͠ ಛʹۀ຿γεςϜ͸ෳࡶʹͳΓ͕ͪͳͷͰ टඌҰ؏ੑͷͨΊʹ σβΠϯγεςϜͷಋೖ Λ ڧ͘ਪ঑͢Δ 「How Buildings Learn」スチュアート・ブランド
20. Material Design Google ͷ Material Design Λϕʔεʹ։ൃΛਐΊ͍ͯΔ MDC͸εϚʔτϑΥϯରԠΛલఏʹ࡞ΒΕ͍ͯΔͷͰۀ ຿γεςϜͰ࢖͏ʹ͸ද͍߲ࣔͨ͠໨͕ଟ͗ͯ͢ཁ͕݅ ߹Θͳ͍৔߹͕͋Δ Material DesignͷSpecΛϕʔεʹͭͭ͠શମͷόϥϯε Λ่͞ͳ͍ൣғͰ֦ு͍ͯ͠Δ UIઃܭ͜ͱ͸͡Ί
21. UIઃܭ͜ͱ͸͡Ί UIઃܭͷجຊ ࠷௿ݶҎԼͷ͜ͱΛܾΊΔ ɾΧϥʔεΩʔϜʢϓϥΠϚϦɺηΧϯμϦɺิॿʣ ɾλΠϙάϥϑΟʢϑΥϯτɺδϟϯϓ཰ʣ ɾϨΠΞ΢τʢϔομʔɺϑολʔɺϝχϡʔʣ ͜ͷ͋ͨΓ͸ Google Material Design Λ࢖͍ͬͯΔͳΒ Material Theme Editor Λ࢖͏ͱָ
22. ϝχϡʔઃܭ ػೳΧςΰϦʔ͝ͱʹϝχϡʔΛ࡞੒͢Δ ػೳ͕૿͑Ε͹৘ใΧςΰϦʔ͕ඃͬͯ͘Δ৔߹͕͋ ΔͷͰਵ࣌ݟ௚͕͠ඞཁ ػೳϝχϡʔҎ֎͸ྫ͑͹ҎԼͷΑ͏ͳ΋ͷ͕͋Δ ɹγεςϜڞ௨ઃఆʗϢʔβʔઃఆʗܖ໿ઃఆ ·ͨɺεϚʔτϑΥϯରԠ͢Δ৔߹͸֊૚ߏ଄͕ਂ͘ ͳΒͳ͍Α͏ʹ஫ҙ͢Δ UIઃܭ͜ͱ͸͡Ί
23. ը໘ڞ௨ઃܭ ը໘͝ͱʹόϥόϥͳUIͩͱϢʔβʔ͕ࠞཚ͢ΔͷͰڞ ௨ͷը໘ઃܭΛ͋Β͔͡Ί༻ҙ͓ͯ͘͠ ඞཁͳͷ͸ओʹҎԼͷը໘ ɾҰཡ ʢݕࡧʗϖʔδωʔγϣϯʗμ΢ϯϩʔυʣ ɾ৽ن࡞੒ʗฤूʢฤूɾ࡟আϘλϯͷҐஔ΍৭ʣ ɾϨϙʔτʢݕࡧʗάϥϑදࣔʗμ΢ϯϩʔυʣ ϝχϡʔ → Ұཡ → ฤूͷը໘ϑϩʔ΋ڞ௨Խ͓ͯ͘͠ UIઃܭ͜ͱ͸͡Ί
24. ݕࡧઃܭ ۀ຿γεςϜͷݕࡧ৚݅͸ෳࡶʹͳΓ΍͍͢ͷ ͰҰ؏ੑͷ͋ΔίϯϙʔωϯτΛ༻ҙ͢Δ ಛʹΠϕϯτ͸࣌ܥྻͰݕࡧ͢Δ͜ͱ͕؊ʹͳ Γσʔλ݅਺ͷߟྀ΋ඞཁʹͳͬͯ͘Δ ·ͨ࣌ܥྻͱ͍ͬͯ΋༷ʑͳύλʔϯ͕͋Δͷ Ͱࣄલʹ૝ఆύλʔϯΛ༻ҙ͓ͯ͘͠ͱΑ͍ ೔ʢࢦఆʣ ݄ʢࢦఆʣ ݄ʢൣғʣ ೔ʢൣғʣ + ࣌ؒ ೔ʢൣғʣ UIઃܭ͜ͱ͸͡Ί
25. ͍͞͝ʹ ΤϯδχΞ͕৘ใઃܭ͢Δ৔߹Λ঺հ͠·͕ͨ͠ɺUIσβΠϯ࣌͸σβ Πφʔ͕ඞཁͰ͢ɻσβΠφʔ͕͍Δ৔߹͸ૉ௚ʹ͓೚ͤ͠·͠ΐ͏ UXの基本: https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/ μϒϧ μΠΞϞϯυ ͜ͷϫʔΫϑϩʔ͸ɺӳࠃσβΠϯ Χ΢ϯγϧʹΑͬ ͯ޿ΊΒΕͨμϒϧμΠΞϞϯυͱݺ͹ΕΔ UX αʔΫ ϧʹج͍͍ͮͯ·͢ɻνʔϜ͸ൃࢄͯ͠ௐࠪʹΑΓΞΠ σΞΛཧղ͔ͯ͠Βɺऩଋͯ͠՝୊Λఆٛ͠ɺൃࢄ͠ ͯݸʑʹ͜ΕΛ໛ࡧ͠ɺΞΠσΞΛڞ༗͠ɺ࠷దͳղ ܾࡦΛܾఆ͠ɺςετͱݕূΛߦ͍·͢ɻ ࠓճͷ࿩ͨ͠಺༰ σβΠφʔͷྖҬ
26. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ