ã«ã€ã¯ã³ð€
èšäºäžèŠ§
![](https://assets.st-note.com/production/uploads/images/126037792/rectangle_large_type_2_13237defd42c6e4f4846570ad71ee302.jpeg?width=800)
ã¢ã³ãåçæ§ãç±ã垯ã³ãã€ããæãè²ããããBONOã®2023幎
ããžã¿ã«é åã®ãã¶ã€ã³ãç¥ãã°ç¥ãã»ã©ã ç§èªå³çŠã®ã¹ãŒãã®å³ã楜ããŸããã©ãŒã¡ã³å±ã§ã¯ãªãã ã³ã³ããã®ã«ããã©ãŒã¡ã³ãç®æããããªæ°ãããã 幎æ«ã§ããBONOãšâŠ
![](https://assets.st-note.com/production/uploads/images/68318831/rectangle_large_type_2_aca71f07efde152b71241e3135e89c38.png?width=800)
ãšã³ãžãã¢ãããšã®ãã¶ã€ã³ã³ãã¥ãã±ãŒã·ã§ã³ã§èµ·ãã4ã€ã®å€±æ
ããšã³ãžãã¢ãªã³ã°ã«èå³ããããã¶ã€ããŒããã¶ã€ã³ã«èå³ããããšã³ãžã㢠Advent Calendarã23æ¥ç®ã®èšäºã§ããã ä»å¹Žã®ïŒæããBONOãšããUIãã¶ã€ããŒã«ãªããã人âŠ
![](https://assets.st-note.com/production/uploads/images/64483880/rectangle_large_type_2_5750cf5dc3330aab4e6e85b9dee64a2f.jpg?width=800)
"æ°æ©èœã®UIããé¡ãããŸãâãŒãããªæ䜿ãããã¶ã€ã³ã®3ã¹ããã
ããã«ã¡ã¯ã«ã€ã¯ã³ã§ããBONOãšããUIãšUXãã¶ã€ã³ã®ã³ãã¥ããã£ãµãŒãã¹ãéå¶ããŠãŸãã UIãã¶ã€ã³ãå§ãããæ¹åãã«ãã©ãããæµãã§çŸå Žã®ãã¶ã€ããŒã¯ãUIãèãâŠ
![](https://assets.st-note.com/production/uploads/images/54053316/rectangle_large_type_2_08eb8b19dd9604de6202a0e60b5b5ed6.jpeg?width=800)
UXå ¥éããŒããããµãŒãã¹èšèšã§ãããåç»äœããŸãããä»ã ã2ã¶æãã£ãŒãããã¯æãã
ã«ã€ã¯ã³ã§ãã UI/UXãåç»ãšã³ãã¥ããã£ã§ã¹ãã«ã¢ããã§ãããBONO(ãã)ããšãããµãŒãã¹ãäœã£ãŠãŸãã âãªããã®UIãªã®ãïŒâãèãå®è·µã§ããã³ã³ãã³ããUXå ¥éâŠ
![](https://assets.st-note.com/production/uploads/images/47229214/rectangle_large_type_2_ced66ea6662b109ad732bd8016f688e0.jpg?width=800)
ãããšåŠã¶UIãšUXã®ãã¶ã€ã³ã³ãã¥äºãã£ãã¯ãããçç±
ãªãã§ãäžéããã«ã¯èª°ãã«ãã£ãŒãããã¯ãããæ¹ãéãããããããç¥ããªãã³ãã1人ã§åŠã¶ã®ã«åºæºããªããšè¿·ããŸãããã ãšããããã§ãããŒã¿çãšããŠéå¶ããŠãUâŠ
![](https://assets.st-note.com/production/uploads/images/44973646/rectangle_large_type_2_f4ba2381d7d0d3d659777217cd2f15e6.jpg?width=800)
ã³ã³ã»ãããã¡ãŒã¹ãâ培åºçã«ãã©ãŒã«ã¹ããŠèšèšãããClubhouseã®äœéš/UIèå¯
ããã«ã¡ã¯ã«ã€ã¯ã³ã§ããClubhouseããªãã§ãããªã«ã¿ããªè©äŸ¡ãããã§ããã Product Designããã身ãšããŠã¯ææ³ãšè¡šçŸãåèŽããã䟡å€æäŸããŸã£ãããªãããã¯ãã ãšâŠ
![](https://assets.st-note.com/production/uploads/images/26949834/rectangle_large_type_2_6b44b137b7d2a611e2d9e56bdae0f953.jpg?width=800)
Webãã¶ã€ã³ã®æ°æ代ãããã°ã©ãã³ã°ãªãã§Webãµã€ããäœãããSTUDIOãåç»è¬åº§ãã€ãã£ãã
ã©ããã«ã€ã¯ã³ã§ãã canalãšããã¹ã¿ãŒãã¢ããã§åãããããã¶ã€ã³åå¿è åãã®Youtubeãã£ã³ãã«ãéå¶ããŠããŸãã ð©ãã£ã³ãã«ïŒãã¶ã€ã³ã解説ããã«ã€ã¯ã³ httâŠ
![](https://assets.st-note.com/production/uploads/images/23973172/rectangle_large_type_2_edc9240fb060d7f7cb78828481a533e5.png?width=800)
UIãã¶ã€ã³è¶ åºç€è¬åº§ - æ°ããããšãã£ãŠã¿ãããªãïŒãšæã£ããå§ããããUIãã¶ã€ã³ã®åç»ã¬ãã¹ã³ãäœæããŸãã
ã©ããã«ã€ã¯ã³ã§ãã canalãšããã¹ã¿ãŒãã¢ããã§åãããããã¶ã€ã³åå¿è åãã®Youtubeãã£ã³ãã«ãéå¶ããŠããŸãã éœå ã§ç·æ¥äºæ 宣èšãåºãŠãããã1ã¶æãåéœåžâŠ
ãã³ãã¶ã€ããŒã䜿ããããã¶ã€ã³ã®åºæ¬ïŒååã解説
ãã³ãã¶ã€ããŒãºãã¶ã€ã³ããã¯ãšããããã¶ã€ã³ã®åèã«ãããããã¶ã€ã³ïŒååããåç»ã§è§£èª¬ããŸããã âãã¡ãªãã¶ã€ã³âã«ã€ãŒã³ããâãšãã圢ã§è§£èª¬ããŠãããŸãâŠ
ã©ããã£ãããã¶ã€ããŒãšããŠæ¡çšãããã®ïŒè§£èª¬ããŸãã
Youtube æŽæ°ã§ãã 0. 2ã€ã®ãã€ã³ããæ¡çšã«ã¯å¿ èŠ 1. æ¡çšããé ã®ãã¹ãã«ã®äžãæ¹ 2. é¢æ¥ã§èŠãããŠããèœåã¯4ã€ãã 3. æ¡çšã«ããã£ãŠã©ããªã¢ãŠãããããå¿ èŠâŠ
![](https://assets.st-note.com/production/uploads/images/20614522/rectangle_large_type_2_42d4fc0bece5b5ab4e324ff2d536d08a.png?width=800)
ã€ã±ãŠãªãæ°èŠç»é²UIãã解説ããªãããªãã¶ã€ã³ããŠã¿ã - UIããªã¹
Youtubeæ°ã³ãŒããŒã§ãåå¿è ãããããUIãªã©ãæ¹åããªãã解説ãããUIããªã¹ãã®ã³ãŒããŒãã¯ãããŠã¿ãŸããïŒ ä»åã¯ã¢ããªã®æ°èŠç»é²UI(iOS)ã«ã€ããŠåã£ãŠããŸããâŠ
![](https://assets.st-note.com/production/uploads/images/20433966/rectangle_large_type_2_bb0cfaf6a8e6c25de48ec2010b2b1b5b.jpg?width=800)
æ¯æ¥5åã§ãã¶ã€ã³ãçãæ¹æ³ ~ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããæ¯æ¥èŠãã~
Youtubeã§ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããèŠãéã®ãã€ã³ãããŸãšããŠã¿ãŸããâ [ ãã¡ããã ] ð€ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããšã¯ïŒ å®æçã«Webãµã€ããã¢ããªãªã©ãææ°ã®ãâŠ
![](https://assets.st-note.com/production/uploads/images/20364277/rectangle_large_type_2_2fc13f6a040acc56e86e9a9d902b9c58.png?width=800)
AppleãGoogleãã€ãã£ããããžã¿ã«æ代ã®ãã¶ã€ã³ã®æç§æžã玹ä»ããŸã
Youtubeã¯ãã¡ãããã ç¡æã§èªãããã¶ã€ã³ãåŠã¹ãæç§æžã«ã€ããŠè©±ããŸããã çããèšããšãAppleãšGoogleãã¢ããªãã©ãããã©ãŒã åãã«åºããŠããããã¶ã€ã³ã¬ã€âŠ
![](https://assets.st-note.com/production/uploads/images/20114159/rectangle_large_type_2_3b7bf064e5cba1bbfc5b3c6936b621b2.png?width=800)
䌞ã²ããªã人ã®åŠç¿æ¹æ³ãšã¯ïŒäžéãéãããã³ãã解説ããŠã¿ãŸãã
YoutubeæŽæ°ããŸããïŒ ã©ãžãªæèŠã§åãæµãã§ãèããã®ã§ãã²ããã â https://youtu.be/wUBzE6twhCE 1. Twitterã§èŠãããåŠã³å§ãã®äººã®ééã 2. ãªããããèµ·ããâŠ
ã¢ã³ãåçæ§ãç±ã垯ã³ãã€ããæãè²ããããBONOã®2023幎
ããžã¿ã«é åã®ãã¶ã€ã³ãç¥ãã°ç¥ãã»ã©ã
ç§èªå³çŠã®ã¹ãŒãã®å³ã楜ããŸããã©ãŒã¡ã³å±ã§ã¯ãªãã
ã³ã³ããã®ã«ããã©ãŒã¡ã³ãç®æããããªæ°ãããã
幎æ«ã§ããBONOãšããUIãäžå¿ãšãããã¶ã€ã³ãåŠã¹ããµãŒãã¹ãéå¶ããŠããã«ã€ã¯ã³ã§ãã
ãµãŒãã¹ããªãªãŒã¹ããŠããäžž3幎ãè¿ããããšããŠããŸããç¶ç¶ã¡ã³ããŒã¯300ãè¶
ãããããããã«ãŸã§2023幎ã¯æé·ãä»ã®ãšããå
šãŠã»ãŒ1人ã§éå¶ããŠãããŸã§
ãšã³ãžãã¢ãããšã®ãã¶ã€ã³ã³ãã¥ãã±ãŒã·ã§ã³ã§èµ·ãã4ã€ã®å€±æ
ããšã³ãžãã¢ãªã³ã°ã«èå³ããããã¶ã€ããŒããã¶ã€ã³ã«èå³ããããšã³ãžã㢠Advent Calendarã23æ¥ç®ã®èšäºã§ããã
ä»å¹Žã®ïŒæããBONOãšããUIãã¶ã€ããŒã«ãªããã人åãã®åç»ã³ã³ãã³ãã³ãã¥ããã£ã®ä»£è¡šããŠããã«ã€ã¯ã³ã§ãã
Webãããã¯ãã«é¢ããå§ããŠ9幎ã»ã©ãçµã£ãã§ããããã
ãã¶ã€ã³ã·ã¹ãã ãã³ã³ããŒãã³ãæ©èœãªããŠååšããŠãªãã£ãããããâäœæãããã¶ã€ã³ããŒã¿
"æ°æ©èœã®UIããé¡ãããŸãâãŒãããªæ䜿ãããã¶ã€ã³ã®3ã¹ããã
ããã«ã¡ã¯ã«ã€ã¯ã³ã§ããBONOãšããUIãšUXãã¶ã€ã³ã®ã³ãã¥ããã£ãµãŒãã¹ãéå¶ããŠãŸãã
UIãã¶ã€ã³ãå§ãããæ¹åãã«ãã©ãããæµãã§çŸå Žã®ãã¶ã€ããŒã¯ãUIãèããŠããã®ãããšããæµããæžããŠã¿ãŸããðââïž
æ¢åã®ãµãŒãã¹ã«æ©èœãä»ãããŠãŒã¹ã±ãŒã¹ãé¡æã«æžããŠããŸãã
ãããå
šãŠã§ã¯ãªãå®å
šã«å人çãªèãã§ã¯ãããŸããããããããŒã¹ã«ããŠçŸå Žã§äœ¿ã£ããã¢ããããŒããããããŠãã
ãã¶ã€ããŒã¯SNSãããã¹ããããã¯ãå±¥æŽæžã
ã«ã€ã¯ã³ã§ããUIãšUXã®åç»ã³ãã¥ããã£ãBONOããã£ãŠãããŸãã
ãã¶ã€ããŒã¯SNSãããã¹ããããšãããããä»äºãâå¹çåâãããã®ãªããããäžã«èªåã®ããšãèŒããã®ã¯å¿
é ã§ãããããšããèšäºã§ãã
âåç»ã§åã£ãŠãŸã
åé¡æèã»ãã¶ã€ããŒãšããŠå°±è·ãããããããªãŒã©ã³ã¹ãšããŠä»äºããšã£ãŠããããããããªããšãèãããšãã«SNSããã£ãæ¹ãè¯ãã®ããããã«ããŠãæµæããããã©ã£ã¡ãã
UXå ¥éããŒããããµãŒãã¹èšèšã§ãããåç»äœããŸãããä»ã ã2ã¶æãã£ãŒãããã¯æãã
ã«ã€ã¯ã³ã§ãã
UI/UXãåç»ãšã³ãã¥ããã£ã§ã¹ãã«ã¢ããã§ãããBONO(ãã)ããšãããµãŒãã¹ãäœã£ãŠãŸãã
âãªããã®UIãªã®ãïŒâãèãå®è·µã§ããã³ã³ãã³ããUXå
¥éããBONOã§äœæããŸããð¡
ããã«åãããŠãBONOã¡ã³ããŒéå®ã6-8æã§ãµãŒãã¹ã®ãããã¿ã€ããŸã§äœãåã&ãã£ãŒãããã¯æãã®ã¯ãŒã¯ã·ã§ãããéå¬ããŸãð
ãã®èšäºã§ã¯ãã®2ã€ã«ã€ããŠãäŒãããŠãããŸãã
ãããšåŠã¶UIãšUXã®ãã¶ã€ã³ã³ãã¥äºãã£ãã¯ãããçç±
ãªãã§ãäžéããã«ã¯èª°ãã«ãã£ãŒãããã¯ãããæ¹ãéãããããããç¥ããªãã³ãã1人ã§åŠã¶ã®ã«åºæºããªããšè¿·ããŸãããã
ãšããããã§ãããŒã¿çãšããŠéå¶ããŠãUIãšUXã®ãã¶ã€ã³ã³ãã¥ããã£ãBONO(ãã)ãããªãªãŒã¹ããŸããã
BONO | UIãšUXã®ãã¶ã€ã³ã³ãã¥ããã£
https://www.bo-no.design/
æé¡å¶ã®ã³ãã¥ããã£ã§ããURLãã詳现ã¯èŠããŠã¿ãŠãã ããã
ã³ã³ã»ãããã¡ãŒã¹ãâ培åºçã«ãã©ãŒã«ã¹ããŠèšèšãããClubhouseã®äœéš/UIèå¯
ããã«ã¡ã¯ã«ã€ã¯ã³ã§ããClubhouseããªãã§ãããªã«ã¿ããªè©äŸ¡ãããã§ããã
Product Designããã身ãšããŠã¯ææ³ãšè¡šçŸãåèŽããã䟡å€æäŸããŸã£ãããªãããã¯ãã ãšèããŠãŸãããšããããã§ãã¡ã¢ããŠãæžããŠãããŸãã
çµè«Clubhouseã®ãã¹ãŠã¯ã©ãããã°äŒè©±ãçãŸããã®ãã«ãã©ãŒã«ã¹ãããŠäœéšèšèšãããŠããŸããæåŸ
å¶ãç¡é§ã®ãªãUIãªã©ãªã©çŽ°ãã話ã«æå³ã¯ãªããClub
Webãã¶ã€ã³ã®æ°æ代ãããã°ã©ãã³ã°ãªãã§Webãµã€ããäœãããSTUDIOãåç»è¬åº§ãã€ãã£ãã
ã©ããã«ã€ã¯ã³ã§ãã
canalãšããã¹ã¿ãŒãã¢ããã§åãããããã¶ã€ã³åå¿è
åãã®Youtubeãã£ã³ãã«ãéå¶ããŠããŸãã
ð©ãã£ã³ãã«ïŒãã¶ã€ã³ã解説ããã«ã€ã¯ã³
https://www.youtube.com/channel/UCghPjck_LzxNMs2tI4PPYlQ
å人çã«æšããŠãããSTUDIOããšããã³ãŒãã£ã³ã°ãªãã§Webãµã€ããäœãããµãŒãã¹ã®åç»è¬åº§ãäœããŸããã
UIãã¶ã€ã³è¶ åºç€è¬åº§ - æ°ããããšãã£ãŠã¿ãããªãïŒãšæã£ããå§ããããUIãã¶ã€ã³ã®åç»ã¬ãã¹ã³ãäœæããŸãã
ã©ããã«ã€ã¯ã³ã§ãã
canalãšããã¹ã¿ãŒãã¢ããã§åãããããã¶ã€ã³åå¿è
åãã®Youtubeãã£ã³ãã«ãéå¶ããŠããŸãã
éœå
ã§ç·æ¥äºæ
宣èšãåºãŠãããã1ã¶æãåéœåžã§ãçºä»€ãããèªå®
ã«ããæ¹ã¯å€ããšæããŸããGWéè¿ã§âãªã«ãæ°ããããšãããŠã¿ããâãšããæ¹åãã«ãä»åæªçµéšã§ãUIãã¶ã€ã³ãå§ãããããUIãã¶ã€ã³è¶
åºç€è¬åº§ããYoutubeã«æçš¿ããŸããã
ã³ãããå§ãŸãåããã
ãã³ãã¶ã€ããŒã䜿ããããã¶ã€ã³ã®åºæ¬ïŒååã解説
ãã³ãã¶ã€ããŒãºãã¶ã€ã³ããã¯ãšããããã¶ã€ã³ã®åèã«ãããããã¶ã€ã³ïŒååããåç»ã§è§£èª¬ããŸããã
âãã¡ãªãã¶ã€ã³âã«ã€ãŒã³ããâãšãã圢ã§è§£èª¬ããŠãããŸãã
æ®ã£ãçç±ãšããŠã¯
ã»åå¿è
åã
ã»Web/UIã§ã®ïŒååäºäŸããªã
ã»ãã¡âã°ããã®åœ¢ã§ã€ã³ãããã§ããåªäœããããšã¿ãªã
ãšãããšããã§ãã
ãã¶ã€ã³ã®å
¥ãå£ãšããŠèª°ãã®å©ãã«ãªããã°å¹žãã§ãŒãïŒ
ãã£ã³ãã«ç»é²ããã²ãããã
ã©ããã£ãããã¶ã€ããŒãšããŠæ¡çšãããã®ïŒè§£èª¬ããŸãã
Youtube æŽæ°ã§ãã
0. 2ã€ã®ãã€ã³ããæ¡çšã«ã¯å¿
èŠ
1. æ¡çšããé ã®ãã¹ãã«ã®äžãæ¹
2. é¢æ¥ã§èŠãããŠããèœåã¯4ã€ãã
3. æ¡çšã«ããã£ãŠã©ããªã¢ãŠãããããå¿
èŠã
4. æ¡çšãããæ©äŒãã€ããæ¹æ³
ãïŒãã®ã©ããªã¢ãŠãããããå¿
èŠãã
ãïŒçªéèŠãªã®ã§ããã ãã§ãåèã«ãªããšè¯ããªãšæã£ãŠãŸãã
ïŒçªãããªãã®ã¯ãã€ãŸã§ãããããŒäœæãã ãã ã£ããããDailyUIã
ã€ã±ãŠãªãæ°èŠç»é²UIãã解説ããªãããªãã¶ã€ã³ããŠã¿ã - UIããªã¹
Youtubeæ°ã³ãŒããŒã§ãåå¿è
ãããããUIãªã©ãæ¹åããªãã解説ãããUIããªã¹ãã®ã³ãŒããŒãã¯ãããŠã¿ãŸããïŒ
ä»åã¯ã¢ããªã®æ°èŠç»é²UI(iOS)ã«ã€ããŠåã£ãŠããŸãã
ãªãã¶ã€ã³ãããã¶ã€ã³ã芳ããã®ã§ãã²ãã
åç»ã¯ãã¡ãããâ
https://youtu.be/Ovf4HKUj4wI
ãUIãã¶ã€ã³ããŒã«ãAdobe XDã®åºæ¬çãªäœ¿ãæ¹è¬åº§
Youtubeã®ãµã ãã€ã«ãäœããªããåŠã¹ãAdobe XDã®äœ¿ãæ¹åç»ãå
¬éããŸãããïŒ
âœãããªäººåãã§ã
â ããããUIãã¶ã€ã³ãåŠãã§ããããšãã人
â ããããWebãã¶ã€ã³ãåŠãã§ããããšãã人
â Photoshopãªã©ããAdobe XDã«ããŒã«ãä¹ãæããããšæã£ãŠãã人
Adobeããããã¥ãŒããªã¢ã«ã®åç»ã¯ãããšæããŸãããå®è·µçã«äœããäœãå
容ã§ã¯ãªãã®ã§äœã£ãŠã¿ãŸã
æ¯æ¥5åã§ãã¶ã€ã³ãçãæ¹æ³ ~ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããæ¯æ¥èŠãã~
Youtubeã§ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããèŠãéã®ãã€ã³ãããŸãšããŠã¿ãŸããâ [ ãã¡ããã ]
ð€ãã¶ã€ã³ã¢ãŒã«ã€ããµã€ããšã¯ïŒ
å®æçã«Webãµã€ããã¢ããªãªã©ãææ°ã®ãã®ãã¢ãŒã«ã€ãããŠäžèŠ§ã«ããŠãããµã€ãã®ããšã§ãã(PinterestãåºçŸ©ã§ããã«å«ãŸãããšæã£ãŠããŸã)
â代衚çãªãµã€ãã¯Youtubeã®æŠèŠæ¬ã«è²Œã£ãŠãŸãã
ç¹ã«åŠã³å§ãã®é ã¯æ¯æãã¥ãŒã¹ãã§ãã¯ããããã«ã¿ãŠ
AppleãGoogleãã€ãã£ããããžã¿ã«æ代ã®ãã¶ã€ã³ã®æç§æžã玹ä»ããŸã
Youtubeã¯ãã¡ãããã
ç¡æã§èªãããã¶ã€ã³ãåŠã¹ãæç§æžã«ã€ããŠè©±ããŸããã
çããèšããšãAppleãšGoogleãã¢ããªãã©ãããã©ãŒã åãã«åºããŠããããã¶ã€ã³ã¬ã€ãã©ã€ã³ãã®ããšã§ãã
ã³ã¬ã¯ã¢ããªãäžå¿ã«ãç»é¢ãèšèšããäžã§ã®åºæ¬ããéã«AppleãšGoogleã®èšèšææ³ãæžãããŠããŸãã
é·ã«å
¥ã£ããé·ã«åŸãããšããããšãããããéãããŸãã¯ããã培åºçã«ç䌌ããŠåºæ¬ã身
䌞ã²ããªã人ã®åŠç¿æ¹æ³ãšã¯ïŒäžéãéãããã³ãã解説ããŠã¿ãŸãã
YoutubeæŽæ°ããŸããïŒ
ã©ãžãªæèŠã§åãæµãã§ãèããã®ã§ãã²ããã
â
https://youtu.be/wUBzE6twhCE
1. Twitterã§èŠãããåŠã³å§ãã®äººã®ééã
2. ãªããããèµ·ããã®ãïŒ
3. æé·é床ãäžããŠãã¶ã€ã³åã磚ããŠããã³ãã解説ïŒ
ã©ãã©ãæŽæ°ããã®ã§ãã£ã³ãã«ç»é²ããããããã°ãé¡ãããŸãð
â
https://www.youtube.com/