èŠäºãªãŠã§ããµã€ãã®ããã®æé«ã®UIããã
ããã«å®ç§ãªãŠã§ããµã€ããäœæããã®ã«åœ¹ç«ã€UIãããã®æè¯ã®ãªãã·ã§ã³ãèŠã€ããŠãã ããã

UIãããã¯ãWebãã¶ã€ããŒã«ãšã£ãŠæçãªå ŽåããããŸãã UIãããã䜿çšããããšã§ãåã ã®èŠçŽ ããã¹ãŠèšèšããã®ã«äœæéãè²»ããããšãªãããããã§ãã·ã§ãã«ã§æŽç·ŽãããWebãµã€ããç°¡åã«äœæã§ããŸããèŠäºãªãµã€ããäœæããããã«äœ¿çšã§ãããçŸåšåžå Žã§å ¥æå¯èœãªæé«ã®UIãããã®ããã€ãã確èªããŠã¿ãŸãããã
ãŠã§ããµã€ãã®äœæã¯éåžžã«è€éãªäœæ¥ã§ãããã¶ã€ã³ãã¬ã€ã¢ãŠããã³ã³ãã³ããªã©ãèæ ®ãã¹ãããšããããããããŸãããŸããWebãµã€ãã®éèŠãªåŽé¢ã¯ããã®ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ïŒUIïŒã§ãã UIã¯ããŠãŒã¶ãŒããµã€ãã«ã¢ã¯ã»ã¹ãããšãã«è¡šç€ºããã³æäœãããã®ã§ãããããé©åã«èšèšããããŠãŒã¶ãŒãã¬ã³ããªãŒã§ããå¿ èŠããããŸãã
UIãããã䜿çšãããšãWebãµã€ãã®æ§ç¯ãç°¡çŽ åãããããã§ãã·ã§ãã«ã§æŽç·ŽãããWebãµã€ããäœæã§ããŸãã UIãããã¯ãWebãã¶ã€ã³ã®äœæã«äœ¿çšã§ããäºåã«èšèšãããUIèŠçŽ ã®ã³ã¬ã¯ã·ã§ã³ã§ããåã ã®èŠçŽ ããã¹ãŠèšèšããã®ã«äœæéãè²»ããå¿ èŠã¯ãããŸãããUIãããããéžæããã ãã§ãçŸããWebãµã€ããäœæã§ããŸãã
UIãããã䜿çšããå©ç¹
UIãããã䜿çšããããšã«ã¯ã次ã®ãããªå€ãã®å©ç¹ããããŸãã
- æéãç¯çŽã UIãããã䜿çšããŠããããžã§ã¯ãã®ãã¹ãŠã®åå¥ã®éšåãèšèšããã®ã«äœæéãè²»ããå¿ èŠã¯ãããŸããã
- ãéãç¯çŽãæéãççž®ããé«äŸ¡ãªãã¯ãããžãŒãçµ±åããå¿ èŠæ§ãåé¿ããããšã§ãèšèšã³ã¹ããåæžã§ããŸãã
- 䜿ãããããé©åã«èšèšãããUIãããã¯ããŠãŒã¶ãŒãã¬ã³ããªãŒãªãã¶ã€ã³ãäœæããããã«äœæãããŠããŸããã€ãŸãããŠãŒã¶ãŒã¯Webãµã€ãã«ã¢ã¯ã»ã¹ããéã®ãšã¯ã¹ããªãšã³ã¹ãåäžããŸãã
- ãããã§ãã·ã§ããªãºã ã UIãããã¯ãããã®ãã¶ã€ããŒã§ãªããŠãããã䞊ã¿ã®Webãµã€ããäœæããã®ã«åœ¹ç«ã¡ãŸãã
- æ±çšæ§ã UIãããã¯çšéãåºããå人ã®Webãµã€ãããããžãã¹ã®Webãµã€ããŸã§ãããŸããŸãªãããžã§ã¯ãã«äœ¿çšã§ããŸãã
ããªãã®ãŠã§ããµã€ãã®UIããããéžã¶æ¹æ³ã¯ïŒ
UIããããéžæããåã«ãããã€ãã®ããšãèæ ®ããŠãã ããã
ããªãã®ãµã€ãã®ç®çã ããªãã®ãŠã§ããµã€ãã®ç®çãå®çŸ©ããŠãã ãããã©ããªãŠã§ããµã€ããäœã£ãŠããŸããïŒããã¯å人çãªãµã€ãã§ããããããšãããžãã¹ãµã€ãã§ããïŒéžæè¢ãçµã蟌ã¿ãé©åãªUIããããèŠã€ããã®ã«åœ¹ç«ã¡ãŸãã
ããªãã®äºç®ã UIãããã®äŸ¡æ Œã¯ããŸããŸã§ãããããäºç®ãèæ ®ããããšãéèŠã§ããå€ãã®åªããç¡æã®UIããããå©çšã§ããã®ã§ãå€é¡ã®ãéãæãå¿ èŠã¯ãããŸããã
ãã¶ã€ã³ã UIãããã®ãã¶ã€ã³ã確èªããèªåã®ã¹ã¿ã€ã«ã«åã£ãŠããããšã確èªããŠãã ããã
æ©èœã UIãããã«Webãµã€ãã«å¿ èŠãªãã¹ãŠã®æ©èœãå«ãŸããŠããããšã確èªããŠãã ããã
ããªãã®ã¹ãã«ã¬ãã«ã UIãããã¯åçŽãªãã®ããè€éãªãã®ãŸã§ãããŸãããã®ãããã¹ãã«ã¬ãã«ã«é©ããããããéžæããããšãéèŠã§ããåå¿è ã®æ¹ã¯ã䜿ããããUIããããæ¢ããŠãã ãããçµéšãè±å¯ãªå Žåã¯ãããè€éãªUIããããéžæã§ããŸãã
ããªãã®ãã¶ã€ã³ã¹ã¿ã€ã«ã UIããããéžæãããšãã¯ããã¶ã€ã³ã¹ã¿ã€ã«ã«åã£ããã®ãéžæããŠãã ããããããã£ãŠãUIããããWebãµã€ãã®ä»ã®éšåã«é©åããããšã確èªã§ããŸãã
ããŸããŸãªUIããããåžå Žã«åºåã£ãŠãããããæé©ãªãªãã·ã§ã³ãéžæããã®ã¯é£ããå ŽåããããŸããããªããå©ããããã«ãç§ãã¡ã¯æé«ã®UIãããã®ãªã¹ãããŸãšããŸããã
èŠäºãªãŠã§ããµã€ãã®ããã®æé«ã®UIããã
Material Designãããã ãã®UIãããã¯ãGoogleã®Material Designèšèªã«åºã¥ããŠããããã¿ã³ãã¡ãã¥ãŒãã¿ã€ãã°ã©ãã£ãªã©ãããŸããŸãªèŠçŽ ãå«ãŸããŠããŸããã¢ãã³ã§æŽç·ŽããããŠã§ããµã€ããäœæããã®ã«æé©ã§ããã¹ã¿ã€ãªãã·ã¥ã§ãšã¬ã¬ã³ããªãŠã§ããµã€ããäœæããããã«å¿ èŠãªãã¹ãŠã®èŠçŽ ãåããUIãããã§æ§æãããŠããŸããçŽ æã¯ããã¶ã€ã³ãšãã¯ãããžãŒã®å€å žçãªååãçµã¿åããããã®ã§ãã
Bootstrap ã Bootstrapã¯ã人æ°ã®ããHTMLãCSSãããã³JavaScriptãã¬ãŒã ã¯ãŒã¯ã§ããã¬ã¹ãã³ã·ããŠã§ããµã€ããäœæããããã«å¿ èŠãªãã¹ãŠã®ã³ã³ããŒãã³ããåããUIããããå«ãŸããŠããŸãããã®ãããã«ã¯ã Bootstrapã°ãªããã·ã¹ãã ã«åºã¥ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹èŠçŽ ãå«ãŸããŠããŸãããããã¯ç°¡åã«äœ¿çšããã³ã«ã¹ã¿ãã€ãºã§ããŸãã
Semantic UI ã Semantic UIã¯ãWebãµã€ãã®çŸããå¿çæ§ã®é«ãã¬ã€ã¢ãŠããäœæããã®ã«åœ¹ç«ã€éçºãã¬ãŒã ã¯ãŒã¯ã§ãã UIãããã«ã¯ããã¿ã³ããã©ãŒã ãã°ãªãããªã©ãããŸããŸãªèŠçŽ ãå«ãŸããŠããŸãã Semanticã«ã¯ãèšèšã®èªç±åºŠãæäŸããããŒã倿°ãåããçŽæçãªã·ã¹ãã ããããŸãã
Quicksmart UI ãããã¯ãã·ã³ãã«ã§äœ¿ããããUIããããå¿ èŠãšããWebãã¶ã€ããŒã«ãšã£ãŠåªãããªãã·ã§ã³ã§ããããªãããŠã§ããµã€ããäœæããããã«å¿ èŠãªãã¹ãŠã®éèŠãªã³ã³ããŒãã³ãããããŸãã Webãã¶ã€ã³ãå§ããã°ããã®åå¿è ã«æé©ã§ãã
Fortis UI Kit ã¯ãé åçãªWebãµã€ããæ°åã§äœæããã®ã«åœ¹ç«ã€ãå æ¬çã§äœ¿ããããWebãã¶ã€ã³ãããã§ãããããã«ã¯ãããŸããŸãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã³ã³ããŒãã³ãããã³ãã¬ãŒããããã³ãã¥ãŒããªã¢ã«ãå«ãŸããŠããããããã°ããèµ·åããŠå®è¡ã§ããŸãã
Fortis UI Kitã®æãåªããç¹ã®1ã€ã¯ãææ°ãã€æé«ã®Webãã¯ãããžãŒãæäŸããããã«ãåžžã«æ°ããæ©èœãšè¿œå æ©èœã§æŽæ°ãããŠããŸãã Fortis UIããããé«åºŠã«ã«ã¹ã¿ãã€ãºå¯èœã§ãããã©ã³ããã¹ã¿ã€ã«ã«åãããŠãã³ã³ããŒãã³ãã®è²ããã©ã³ããã¬ã€ã¢ãŠãã倿Žã§ããŸãããã«ããå¿ èŠãªå Žåã¯ã Fortis UIãããããŒã ãåªããã«ã¹ã¿ããŒãµããŒããæäŸããŸãã
InkUI ã¯ãçŸããWebãµã€ããäœæããããã«å¿ èŠãªãã¹ãŠãå«ãŸããŠããã¢ãã³ã§ã¯ãªãŒã³ãªWebãã¶ã€ã³ãããã§ãããã®ãããã¯ãããŸããŸãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã³ã³ããŒãã³ãããã³ãã¬ãŒããã¢ã€ã³ã³ãããã³ãã¥ãŒããªã¢ã«ã§æ§æãããŠããŸãã
InkUIã¯ãæŽç·Žãããã¹ã¿ã€ãªãã·ã¥ãªWebãµã€ããäœæããããã¶ã€ããŒã«æé©ã§ããããŸããŸãªWebãã¯ãããžãŒãå«ãŸããŠãããããWebãµã€ãã®å¿çæ§ãé«ããã©ã®ããã€ã¹ã§ãèŠæ ããããããšã確èªã§ããŸãã
Designio ã¯ãé åçãªWebãµã€ããæ°åã§äœæããã®ã«åœ¹ç«ã€æé«å質ã®UIãããã§ããå¹ åºãèŠçŽ ãšãã¹ãŠã®éèŠãªã³ã³ããŒãã³ããä»å±ããŠããŸããããã«ãå®å šã«å¿çæ§ãé«ããããã©ã®ããã€ã¹ã衚瀺ããŠãWebãµã€ãã®èŠæ ããè¯ããªããŸãã
Designioã䜿çšããã«ã¯ãããããããŠã³ããŒãããŠãã奜ã¿ã®ãã¶ã€ã³ããã°ã©ã ã«ã€ã³ããŒãããã ãã§ããç¬èªã®ã¹ã¿ã€ã«ã«åãããŠèŠçŽ ã®ã«ã¹ã¿ãã€ãºãéå§ã§ããŸãã Designioã¯ãåã ã®èŠçŽ ããã¹ãŠèšèšããã®ã«äœæéãè²»ããããšãªãããããã§ãã·ã§ãã«ã§æŽç·ŽãããWebãµã€ããäœæãããäººã«æé©ã§ãã
ãããããã«ãªãã¶ã€ã³ã®UIãããããæ¢ãã®å Žåã¯ãMinimalInterfaceãã芧ãã ããããã®ãããã«ã¯ãã³ã³ãã³ããæŽç·Žãããã¹ã¿ã€ãªãã·ã¥ãªãã®ãšããŠç޹ä»ããããã£ãããšããã¢ãã³ãªã€ã³ã¿ãŒãã§ãŒã¹ãä»å±ããŠããŸãããããã¯å®å šã«å¿çããã®ã§ãWebãµã€ãã¯ãã¹ãŠã®ããã€ã¹ã§èŠæ ããããŸãã
ããããããŠã³ããŒãããŠãã¶ã€ã³ããã°ã©ã ã«ã€ã³ããŒãããMinimalInterfaceã䜿çšããŸããæå°éã®ã€ã³ã¿ãŒãã§ã€ã¹ã¯ãããã²ãŒãããããã¯ãªãŒã³ã§ã¢ãã³ãªWebãµã€ããå¿ èŠãªå Žåã«æé©ã§ãã
èŠäºãªãŠã§ããµã€ããäœæããããšã¯ãè€éã§æéã®ããããã®ã§ããå¿ èŠã¯ãããŸããã UIãããã䜿çšãããšããããã§ãã·ã§ãã«ã§æŽç·ŽãããWebãµã€ããæ°åã§ç°¡åã«äœæã§ããŸãã Webãµã€ãã®äœæããã»ã¹ãç°¡çŽ åãããããæ¬¡ã®ã¬ãã«ã«åŒãäžãããå Žåã¯ãå©çšå¯èœãªUIããããªãã·ã§ã³ã®ããã€ãã確èªããŠãã ããã


