[B! ui] wakuworksã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

wakuworks id:wakuworks

uiã«é–¢ã™ã‚‹wakuworksã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (7)

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

${{author_name}}$
{{author_name}}{{created}}
{{ #comment }}{{ comment }}{{ /comment }}
- {{ label }}

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

Magic UI
50+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
wakuworks 2024/05/24
ui

React
ãƒªãƒ³ã‚¯
Visual testing & review for web user interfaces
Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs before they reach users. Assign reviewers and resolve discussions to streamline team sign-off.
wakuworks 2023/11/18
ui
ãƒªãƒ³ã‚¯
OOUXãƒ‡ã‚¶ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã€€ä»®èª¬ã®ç©ã¿é‡ãã§ãƒ—ãƒãƒ€ã‚¯ãƒˆã®è³ªã‚’å‘ä¸Šã™ã‚‹UXè¨è¨ˆæ–¹æ³•
ã“ã‚“ã«ã¡ã¯ã€UX/UIãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®å¤§æ‘ã§ã™ã€‚ç§ã¯æ™®æ®µã€æ–°è¦äº‹æ¥é–‹ç™ºã«ãŠã‘ã‚‹ãƒ‡ã‚¸ã‚¿ãƒ«ãƒ—ãƒãƒ€ã‚¯ãƒˆã®é–‹ç™ºã‚„æ¥å‹™ç³»ã‚·ã‚¹ãƒ†ãƒ ã®UX/UIè¨è¨ˆã‚’ã—ã¦ã„ã¾ã™ã€‚ çš†ã•ã‚“ã¯æ–°ã—ã„ã‚µãƒ¼ãƒ“ã‚¹ä¼ç”»ã‚’å®Ÿç¾ã™ã‚‹ãŸã‚ã®ãƒ‡ã‚¸ã‚¿ãƒ«ãƒ—ãƒãƒ€ã‚¯ãƒˆã‚’ã¤ãã‚‹ã¨ãã«ã€ã©ã®ã‚ˆã†ãªã“ã¨ã‹ã‚‰ç€æ‰‹ã—å§‹ã‚ã¾ã™ã‹ï¼Ÿã„ã–æ¤œè¨Žã‚’é€²ã‚ã‚‹ã¨ã€æ¬¡ã®ã‚ˆã†ãªèª²é¡Œã«éé‡ã™ã‚‹ã“ã¨ã¯ãªã„ã§ã—ã‚‡ã†ã‹ã€‚ æ–°ã‚µãƒ¼ãƒ“ã‚¹ã®ã‚³ãƒ³ã‚»ãƒ—ãƒˆã¯æ±ºã¾ã£ãŸãŒã€ã©ã†ã™ã‚Œã°ãƒ‡ã‚¸ã‚¿ãƒ«ãƒ—ãƒãƒ€ã‚¯ãƒˆã§å®Ÿç¾ã§ãã‚‹ã®ã‹ã‚¤ãƒ¡ãƒ¼ã‚¸ãŒæ¹§ã‹ãªã„ é–‹ç™ºä¼šç¤¾ã‹ã‚‰æ©Ÿèƒ½è¦ä»¶ã‚’æ±ºã‚ã¦ã»ã—ã„ã¨è¨€ã‚ã‚Œã‚‹ãŒã€ã©ã†ã‚„ã£ã¦æ±ºã‚ã‚Œã°ã‚ˆã„ã‹ã‚ã‹ã‚‰ãªã„ å¿…è¦ã«ãªã‚Šãã†ãªæ©Ÿèƒ½ã¯ãªã‚“ã¨ãªãã‚ã‹ã‚‹ãŒã€æœ¬å½“ã«å¿…è¦ã‹ã©ã†ã‹åˆ¤æ–ã§ããªã„ ã“ã‚Œã‚‰ã®èª²é¡Œã¯ã€ãƒ‡ã‚¸ã‚¿ãƒ«ãƒ—ãƒãƒ€ã‚¯ãƒˆã§å®Ÿç¾ã—ãŸã„ã“ã¨ï¼ˆè¦æ±‚ï¼‰ã¨å®Ÿéš›ã«ãƒ‡ã‚¸ã‚¿ãƒ«ãƒ—ãƒãƒ€ã‚¯ãƒˆã‚’ã¤ãã‚‹ä¸Šã§å¿…è¦ãªã“ã¨ï¼ˆè¦ä»¶ï¼‰ã¨ã®é–“ã«ã€å¤§ããªéš”ãŸã‚ŠãŒã‚ã‚‹ã“ã¨ã‹ã‚‰ç”Ÿã˜ã¦ã„ã¾ã™ã€‚ã‚³ãƒ³ã‚»ãƒ³ãƒˆã§ã¯ãã®éš”ãŸã‚Šã‚’åŸ‹ã‚ã‚‹ãŸã‚ã«ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼è¦–ç‚¹
wakuworks 2023/02/27
ui

ux
ãƒªãƒ³ã‚¯
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
wakuworks 2019/03/25
ui

css
ãƒªãƒ³ã‚¯
ã‚ˆã‚Šè‰¯ã„UIã®ãŸã‚ã®ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³å…¥é–€ | Goodpatch Blog
ã“ã®è¨˜äº‹ã¯Goodpatch Advent Calendar 2018 14æ—¥ç›®ã®è¨˜äº‹ã§ã™ã€‚ã¾ãŸã€2018/10/08ã«é–‹å‚¬ã•ã‚ŒãŸæŠ€è¡“æ›¸å…¸5ã«Goodpatchã®æœ‰å¿—ã§å‡ºå±•ã—ãŸãƒ–ãƒƒã‚¯ãƒ‘ãƒƒãƒã®å†…å®¹ã‚’çœç•¥ãƒ»æ”¹å¤‰ã—ãŸå†…å®¹ã¨ãªã£ã¦ã„ã¾ã™ã€‚ ä»Šå›žã¯ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã¯ã‚ˆãçŸ¥ã‚‰ãªã„æ–¹ã‚„ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã¯çŸ¥ã£ã¦ã„ã‚‹ã‘ã©å®Ÿéš›ã«ã‚³ãƒ¼ãƒ‰ã‚’æ›¸ã„ãŸã“ã¨ãŒç„¡ã„æ–¹å‘ã‘ã«ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã®åŸºæœ¬çš„ãªçŸ¥è˜ã¨å®Ÿè£…æ–¹æ³•ã«ã¤ã„ã¦ã”ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã®ç†è§£ ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã¨ã¯ã©ã†ã„ã†æ„å‘³ãªã®ã§ã—ã‚‡ã†ã‹ã€‚Dan Safferæ°ã®è‘—æ›¸ã€Œãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ ãƒ¼ UI/UXãƒ‡ã‚¶ã‚¤ãƒ³ã®ç¥žãŒå®¿ã‚‹ç´°éƒ¨ã€ã«ã‚ˆã‚‹ã¨ã€ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã«ã¤ã„ã¦ä»¥ä¸‹ã®ã‚ˆã†ã«æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚ ãƒžã‚¤ã‚¯ãƒã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã¨ã¯ã€å˜ä¸€ã®ã‚·ãƒŠãƒªã‚ªã«åŸºã¥ã„ã¦ã²ã¨ã¤ã®ä½œæ¥ã ã‘ã‚’ã“ãªã™æœ€å°å˜ä½ã®ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã®ã“ã¨ã§ã™ã€‚
wakuworks 2018/12/17
ui

ux
ãƒªãƒ³ã‚¯
å¹´ã€…é€²åŒ–ã—ã¦ã„ã‚‹ãƒœã‚¿ãƒ³ã‚’ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ãƒã‚¤ãƒ³ãƒˆã‚’è§£èª¬ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®è¿½æ±‚ã«çµ‚ã‚ã‚Šã®æ–‡å—ã¯ãªã„
Webãƒ‡ã‚¶ã‚¤ãƒ³ã«ãŠã„ã¦ã€ãƒœã‚¿ãƒ³ã®å˜åœ¨ã¯æ¬ ã‹ã›ã¾ã›ã‚“ã€‚æ¤œç´¢ã™ã‚‹æ™‚ã€ã‚µã‚¤ãƒˆã«ãƒã‚°ã‚¤ãƒ³ã™ã‚‹æ™‚ã€ã‚½ãƒ¼ã‚·ãƒ£ãƒ«ã§ã‚·ã‚§ã‚¢ã™ã‚‹æ™‚ã€ã‚·ãƒ§ãƒƒãƒ”ãƒ³ã‚°ã‚«ãƒ¼ãƒˆã«å…¥ã‚Œã‚‹æ™‚ã€ãŸãã•ã‚“ã®ãƒœã‚¿ãƒ³ãŒä½¿ç”¨ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã“ã‚Œã‚‰ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã¯Webæ¥ç•Œã¨å…±ã«é€²åŒ–ã—ç¶šã‘ã€æ°—ãŒã¤ã„ãŸã‚‰æ•°å¹´å‰ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã ã£ãŸã¨ã„ã†ã“ã¨ã‚‚ã‚ã‚‹ã§ã—ã‚‡ã†ã€‚ å¹´ã€…é€²åŒ–ã—ã¦ã„ã‚‹ãƒœã‚¿ãƒ³ãŒã©ã®ã‚ˆã†ã«å¤‰ã‚ã£ã¦ããŸã‹ã€Dribbbleã‚’ãƒ™ãƒ¼ã‚¹ã«ã—ã¦ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ãƒã‚¤ãƒ³ãƒˆã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Button Design Over the Years ä¸‹è¨˜ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„è¨³ã—ãŸã‚‚ã®ã§ã™ã€‚ â€»å½“ãƒ–ãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ 2009å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2010å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2011å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2012å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2013å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2014å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2015å¹´ã®ãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³ 2016å¹´
wakuworks 2017/09/22
design

ui
ãƒªãƒ³ã‚¯
ã‚ãƒ£ãƒ³ã‚»ãƒ«ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«å•é¡Œã‹ã‚‰è€ƒãˆã‚‹ãƒ€ã‚¤ã‚¢ãƒã‚°ãƒ‡ã‚¶ã‚¤ãƒ³ï½œGoodpatch Blog ã‚°ãƒƒãƒ‰ãƒ‘ãƒƒãƒãƒ–ãƒã‚°
ã“ã®æ–‡è„ˆã§ã¯ã€ã€Œç·¨é›†å†…å®¹ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ã€ã¨ã„ã†å‡¦ç†ã‚’ç¶šè¡Œã—ã¦ã‚‚è‰¯ã„ã‹ã‚’ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ç¢ºèªã—ã¦ã„ã¾ã™ã€‚ç¶šè¡Œã«åŒæ„ã—ãŸã„å¤šãã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯ç›´æ„Ÿçš„ã«åŒã˜è¡¨è¨˜ã®ã€Œã‚ãƒ£ãƒ³ã‚»ãƒ«ã€ã‚’æŠ¼ã—ãŸããªã‚‹ã§ã—ã‚‡ã†ã€‚ã—ã‹ã—ãã‚Œã§ã¯ç·¨é›†ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ãŒå®Ÿè¡Œã•ã‚Œã¾ã›ã‚“ã€‚ ã“ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ãƒœã‚¿ãƒ³ãŒæ„å‘³ã™ã‚‹ã®ã¯ã€ã€Œã€Žç·¨é›†å†…å®¹ã‚’ã‚ãƒ£ãƒ³ã‚»ãƒ«ã™ã‚‹ã€ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ã€ãªã®ã§ã™ã€‚ã¤ã¾ã‚Šã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒæœ›ã¿é€šã‚Šã«ç·¨é›†å†…å®¹ã‚’ç ´æ£„ã™ã‚‹ãŸã‚ã«ã¯ã€åå¯¾å´ã®OKãƒœã‚¿ãƒ³ã‚’é¸ã¶ã¹ããªã®ã§ã™ã€‚ã“ã®ã‚ˆã†ãªã€Œã‚ãƒ£ãƒ³ã‚»ãƒ«ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ã€ã¯äºŒé‡å¦å®šã§æ„å‘³ãŒã‚„ã‚„ã“ã—ããªã‚‹ã®ã§é¿ã‘ãªã‘ã‚Œã°ãªã‚Šã¾ã›ã‚“ã€‚ ã“ã“ã§ã€Œã‚ãƒ£ãƒ³ã‚»ãƒ«ã®ã‚ãƒ£ãƒ³ã‚»ãƒ«ã€ã«ãªã‚‰ãªã‘ã‚Œã°è‰¯ã„ã¨ã„ã†ã“ã¨ã§ã€æ¬¡ã®ã‚ˆã†ã«ãƒœã‚¿ãƒ³åã‚’å¤‰ãˆã¦ã¿ã¾ã—ãŸã€‚ ã“ã‚Œã§ã‚‚ã†è¿·ã†ã“ã¨ã¯ç„¡ããªã‚Šã¾ã—ãŸã‹â€¦â€¦ï¼Ÿ ç§ã¯ã“ã®ä¿®æ£ã¯èª¤ã‚Šã ã¨åˆ¤æ–ã—ã¾ã™ã€‚ã€Œã¯ã„ã€ã€Œã„ã„ãˆã€ã¯çµæžœã‚’äºˆæƒ³ã—ã«ãã„è¡¨ç¾ãªã®ã§ã€ãƒ€ã‚¤ã‚¢ãƒã‚°ã®ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ãƒœã‚¿ãƒ³ã«ç”¨ã„ã‚‹ã“ã¨ã¯ã‚ã¾ã‚Šé©åˆ‡ã§ã¯
wakuworks 2017/05/31
ui
ãƒªãƒ³ã‚¯
1