åããŠåºäŒãUX/UIãã¶ã€ã³ããŒã«ã
ç°¡åã§æ¥œããåŠã¶ã¹ã±ããïŒSketchïŒð
UX/UIãã¶ã€ã³ãšã¯äœã§ããïŒ
UXãšã¯ãUser Experienceãã€ãŸããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæå³ããèšèã§ãããŠãŒã¶ãŒã®çµéšããã¶ã€ã³ããããšã§ãŠã§ããã¢ãã€ã«ç»é¢ãæ¹åããè¡åãèªå°ãããã¶ã€ã³ããäœæ¥ãUXãã¶ã€ã³ãšèšããŸãããµãŒãã¹ãå©çšããéã«äœãå¿
èŠãšããã®ãããã®éçšã§ã©ããªããšãçµéšããã®ããäžå¿«æãæããªãã®ãããŠãŒã¶ãŒã®èгç¹ãããµãŒãã¹äœéšãæ§æ³ããäœæ¥ã§ãããã®éçšã§ãŠãŒã¶ãŒãæ¥ãããããªç»é¢ãã€ãŸããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ïŒUser InterfaceïŒãèšèšããŠæ§æãããŸã§ã®ãã¹ãŠã®éçšããŸãšããŠUX/UIãã¶ã€ã³ãšåŒã³ãŸãã
äžè¬çã«ãã¶ã€ã³ãšããã°åµé çãŸãã¯èžè¡çãªåéã ãšæããããããŸãããããããUX/UIåéã¯åµé æ§ã ãã§ãªãããŠãŒã¶ãŒã®ç«å Žã§ã®çµéšãšå©äŸ¿æ§ãèæ
®ãããè«çããå¿
èŠãšããåéã§ããããžã¿ã«æ©åšãšãŠãŒã¶ãŒéã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãåŒãåºãå¿
èŠãããããã§ããç£æ¥ãã¬ã³ãã远ãããã«çå®ãªç·Žç¿ãšåªåãå¿
èŠãªçç±ã§ãã
ãã®ã¬ãã¹ã³ã§ã¯ãUX/UI ãã¶ã€ã³ã¹ãã«ãåãããæ¹ã«å¿
èŠãª UX/UI ãã¶ã€ã³ããŒã«ã Sketch(ã¹ã±ãã)ãå©çšã㊠Web/ã¢ãã€ã«ã¢ããªã€ã³ã¿ãŒãã§ãŒã¹ããã¶ã€ã³ããæ¹æ³ãåŠã³ãŸãã
åå¿è
ã§ãç°¡åãã€è¿
é
ã¹ã±ããåŠç¿ïŒ
Sketchã¯ã©ã®ãããªããŒã«ã§ããïŒ
*SketchïŒã¹ã±ããïŒã¯ãmacç°å¢ã§ã®ã¿äœ¿çšã§ããããŒã«ã§ãã
Sketchã¯ãUIãã¶ã€ã³ã®ããã®ã·ã¹ãã èšèšã圹å²ãæããã¯ã€ã€ãã¬ãŒã ïŒWireframeïŒãäœæãããããã¿ã€ããäœæã§ãããã¶ã€ã³ããã°ã©ã ã§ãããã¯ãã«æ¹åŒã®ãã¶ã€ã³ããŒã«ãªã®ã§ãè§£å床ã倿ŽããŠãç»åã®æå·ããªããšããã¡ãªããããããŸãããããã§ãã¹ã¯ããããã¢ãã€ã«ãªã©æ§ã
ãªæ©åšè§£å床ã«å¯Ÿå¿ãå¯èœã§ããéå»ã®ããããããæ¹åŒã®Photoshopã§UIãèšèšããå Žåãããå¹ççã«è¿
éã«äœæ¥ãåŠçã§ããŸãã
ãã®ã¬ãã¹ã³ã§ã¯ãæ
è¡ãæ¯æŽããã¢ããªã±ãŒã·ã§ã³ãçŽæ¥èšèšããŠã¿ãŸãã
ãµãŒãã¹ã³ã³ã»ããäŒç»ããã¯ã€ã€ãŒãã¬ãŒã äœæãã¬ã€ã¢ãŠããã¶ã€ã³ã¯ãã¡ãããã¢ã€ã³ã³ãã·ã³ãã«è¿œå ãªã©ã®çްéšãŸã§ãäžç·ã«é²ãããšãã§ããŸãã
ãã®ã»ããã³ã©ãã¬ãŒã·ã§ã³ã®ããã®ããŒã«ã§ãããŒããªã³ïŒZeplinïŒé£åã ãã§ãªãããââãŒãžã§ã³ç®¡çãå©ããã¢ãã¹ãã©ã¯ïŒAbstractïŒããããã¿ã€ãã³ã°ãå©ããããããã¡ã€ïŒProtoPieïŒãŸã§ãããŸããŸãªããŒã«ãšã®é£åæ¹æ³ãäžç·ã«åŠã³ãŸãã
ãã®ã¬ãã¹ã³ã§ã¯ãUX / UIãã¶ã€ã³ã®åºæ¬çãªç¥èãç¿åŸããããšããå§ããSketchã®äœ¿ãæ¹ãäŸã«ãããã£ãŠããã¶ã€ããŒãšããŠèœåãè²ãŠãããã®ãã¶ã€ã³åŠç¿ã®ãã³ããŸã§åãäžããäºå®ã§ããåçŽãªçè«ãããŒã«ã®äœ¿çšã ãã§ãªããå®è·µã§å¿çšããæ¹æ³ããã¶ã€ã³ãåŠã¶ã®ã«å¿
èŠãªæ¹åãèšå®ããæ¹æ³ãŸã§ãçããã«äžã€äžã€ãç¥ããããŸãïŒ
ãã£ãããšå·ããã
é çªã«åŠç¿ããŠã¿ãŠãã ããïŒ
UX/UIãã¶ã€ã³ãŠã©ãŒãã³ã°ã¢ããïŒ
ããªãã¯ã©ã®ããã«UX / UIãã¶ã€ã³ãå§ããŸãããïŒ UX/UIãã¶ã€ã³ã§äœãããŠã¿ããã§ããïŒãŠãŒã¶ãŒã®çµéšã«åºã¥ããŠãWebãã¢ãã€ã«ç»é¢ãæ¹åããè¡åãä¿ãUX / UIãã¶ã€ã³ã®åºæ¬çãªèæ¯ç¥èãšæµããITã¯ãŒãã³ã°ãã¬ã³ããç°¡åã«èŠãŠã¿ãŸãããã
ã¹ã±ãããäžã€äžã€æã£ãŠã¿ãŸãã
SketchããŒã«ã®ã€ã³ã¹ããŒã«ãããã¡ã€ã«ãäœæããç»é¢ãããã«ãªã©ã®ã€ã³ã¿ãŒãã§ãŒã¹ãæäœããæ¹æ³ãŸã§ãããŒã«ã®äœ¿ãæ¹ãåŠã¶ããšãã§ããŸããããã ãã§ãªããUX/UIãã¶ã€ã³ã®å¿
é èŠçŽ ã§ããã³ã³ããŒãã³ã(Component)ã調ã¹ããã¶ã€ã³ã·ã¹ãã ã®å¿
èŠæ§ãçè§£ããããšãã§ããŸãã
ç§ã®æã§äœãã¢ãã€ã«ã¢ããªã®ãã¶ã€ã³ã
ãµãŒãã¹ã®ã³ã³ã»ãããæ§æ³ããã¯ã€ã€ãã¬ãŒã ïŒWireframeïŒãæããŠã¿ãŠãããããã®ãã¶ã€ã³èŠçŽ ãèšèšããŠé
眮ããŠã¿ãŸããã¢ããªã±ãŒã·ã§ã³ã®èšèšéçšãç§ã®æã«åŸããšãSketchã®äœ¿ãæ¹ãèªç¶ã«ç¿åŸã§ããããã«ãªããŸãã
ã³ã©ãã¬ãŒã·ã§ã³ã§å®æŠèœå Upgrade+
Sketchã§äœæãããã¶ã€ã³ã·ã¢ã³ãããŒã ãšå
±æããå®éã«å®è£
ããã«ã¯ãããã€ãã®ããŒã«ãããã«æŽ»çšããå¿
èŠããããŸãããã¶ã€ã³ããŒã¹ã®ãããã¿ã€ããäœæããŠãã¹ãããããããã€(ProtoPie)ãéçºè
ããã¶ã€ã³ã確èªããããã®GUIã¬ã€ãããã°ã©ã ãžã§ããªã³(Zeplin)ãããŒãžã§ã³ç®¡çã«å¿
èŠãªã¢ããªã¹ãã©ã¯(Abstract)ãŸã§ãããŸããŸãªããŒã«ã®äœ¿ãæ¹ãäžç·ã«åŠã³ãŸãããïŒ
æé·ãããã¶ã€ããŒã«ãªããããã«ïŒ
ãã¶ã€ã³ã¯äžåºŠåŠã³çµããæè¡ã§ã¯ãããŸããããã¬ã³ããçå®ã«èª¿ã¹ãããŸããŸãªæ¹æ³è«ãç¿çãç¶ããå¿
èŠããããŸããè¯ããããžã§ã¯ããéžãã§ç ç©¶ããéçšãå¿
èŠã§ããè¯ããã¶ã€ããŒã倢èŠãæ¹ã®ããã®ãã¶ã€ã³åŠç¿æ³ããç¥ããããŸãã
ãããªæ¹ã«æ³šç®ããŠãã ããïŒ
UX/UI?
å®éã®UX/UIãã¶ã€ã³
ããã»ã¹ãæ°ã«ãªã人
ã¹ã±ããïŒ
UX/UIããŒã«ã®äœ¿ãæ¹
åŠã³ãã人
ç§ã®å€¢ã¯ãã¶ã€ããŒã§ã
UX/UIãã¶ã€ããŒ
ãªãããæ¹
ããŒã ã¯ãŒã¯
ãã¶ã€ããŒãšã³ã©ãã¬ãŒã·ã§ã³
PMãPO
UX/UIå
¥é,
Inflearnãšäžç·ã«ææŠããŠã¿ãŠãã ããã
Inflearnãªãªãžãã«UX/UIããŒãããããèŠãâš
åè¬åã«ã確èªãã ããïŒ
- SketchïŒã¹ã±ããïŒã¯macOSç°å¢ã§ã®ã¿äœ¿çšã§ããŸãã
- æ¬è¬çŸ©ã¯ãææ¥å
容ã«å¯Ÿãã質çå¿çãæäŸããªãè¬çŸ©ã§ããåŠç¿ã«åèã«ããŠãã ããã