UIã¯é–²è¦§ç”»é¢ã‹ã‚‰ã¤ãã‚ã†ã€‚｜Shino | Software Designer
ユーザー体験的ãªã‚‚ã®ã‚’ストーリーã§æ•´ç†ã—次ã«UIを作æˆã™ã‚‹ã¨ãã€é–²è¦§ãƒ»å‚照系より先ã«æ–°è¦ä½œæˆã®UIã‹ã‚‰è€ƒãˆã‚‹ã€ã¨ã„ã†ã‚±ãƒ¼ã‚¹ã‚’ã¨ãã©ã見ã‹ã‘ã¾ã™ã€‚ ã“ã‚Œã€ã™ã”ã„é•å’Œæ„Ÿã‚ã‚Šã¾ã™ã€‚ ストーリーã«ãŠã„ã¦ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯ã¾ãšæ–°è¦ä½œæˆã™ã‚‹ã®ã§ã€ãã®ã¾ã¾æ–°è¦ä½œæˆã‹ã‚‰ç€æ‰‹ã—ã¦ã—ã¾ã†ã€ã¨ã„ã£ãŸã¨ã“ã‚ã§ã—ょã†ã‹ã€‚ ãã®å ´åˆã€æ–°è¦ä½œæˆã®ç›®å½“ã¦ãŸã‚‹ã‚ªãƒ–ジェクトã®å§¿ãŒæ›–昧ã«ãªã‚ŠãŒã¡ã§ã™ã€‚ ãã†ã™ã‚‹ã¨ã€æ–°è¦ä½œæˆç”»é¢ã«ã—ã‹å˜åœ¨ã—ãªã„特殊ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„コンãƒãƒ¼ãƒãƒ³ãƒˆã‚„ã€ç‰¹ã«æ„図ãŒãªã„冗長ãªãƒ¢ãƒ¼ãƒ€ãƒ«ãŒã§ãã‚ãŒã‚‹ã“ã¨ãŒå¤šã„ã¨æ„Ÿã˜ã¦ã„ã¾ã™ã€‚ 目当ã¦ãŒå®šã¾ã£ã¦ã„ãªã„ã†ã¡ã‹ã‚‰ã€ãれをã©ã†ä½œã‚‹ã‹ã€ã©ã†ç·¨é›†ã™ã‚‹ã‹ã‚’考ãˆã‚‹ã®ã£ã¦é›£ã—ããªã„ã§ã™ã‹ï¼Ÿ 考ãˆã‚‹é †ç•ªé–²è¦§ãƒ»å‚照系ã®UIã‚’å…ˆã«ä½œã‚‹ã“ã¨ã§ã€ãã‚ŒãŒæ–°è¦ä½œæˆã‚„編集ã®ç›®å½“ã¦ã¨ãªã‚Šã€åŠ¹çŽ‡ã‚ˆã良ã„デザインã—ã‚„ã™ã„ã¨æ„Ÿã˜ã¦ã„ã¾ã™ã€‚ 例ãˆã°ã€ç§ã®å ´åˆã€ä»¥ä¸‹ã®ã‚ˆã†ã«è€ƒãˆã‚’進ã‚ã‚‹ã“ã¨ãŒå¤šã„ã§ã™ã€‚ ã¾ãšã¯ã€ŒR
Designing Interfaces 㮠第2版ã¨ç¬¬3版をã–ã£ãり比較ã™ã‚‹ï½œtoofu
『Designing Interfaces - Patterns for Effective Interaction Designã€ã®ç¬¬3版ãŒ2020å¹´2月ã«ã‚ªãƒ©ã‚¤ãƒªãƒ¼ç¤¾ã‹ã‚‰ç™ºå£²ã•ã‚Œã¾ã—ãŸã€‚第2版ã¯UIè¨è¨ˆã®éš›ã«è¾žæ›¸çš„ã«ã¨ã¦ã‚‚å‚考ã«ã•ã›ã¦ã‚‚らã£ã¦ã„ã‚‹ã—ã€ãã“ã‹ã‚‰10年後ã®æ”¹è¨‚版ãªã®ã§ã¨ã‚Šã‚ãˆãšæ‰‹ã«å…¥ã‚Œã¦ã¿ã¾ã—ãŸã€‚ãŒã€åˆ†åŽšã„英語本をサクサクèªã‚る能力ãŒè‡ªåˆ†ã«ã¯ãªã„ã®ã§ã€ç´¹ä»‹ã•ã‚Œã¦ã„ã‚‹UIパターンã®å¤‰åŒ–ã ã‘ã§ã‚‚押ã•ãˆã¦ãŠããŸãã€ç›®æ¬¡ãƒ™ãƒ¼ã‚¹ã§å¤‰æ›´ãŒã‚ã‚‹å ´æ‰€ã‚’è‡ªåˆ†ãªã‚Šã«æ´—ã„出ã—ã¦ã¿ã¾ã—ãŸã€‚10å¹´å‰ã®ç‰ˆã¨ã®æ¯”較をã™ã‚‹ã“ã¨ã§ã€ã„ã¾ã®UIã®ãƒˆãƒ¬ãƒ³ãƒ‰ã‚‚å°‘ã—見ãˆã¦ãã‚‹ã‹ã‚‚ã—ã‚Œãªã„。 第3版ã©ã“ã‚ã‹ç¬¬2版も完全ã«èªã¿è¾¼ã‚“ã§ã„ã‚‹ã‚ã‘ã§ã¯ãªã„ã®ã§ã€é–“é•ã£ã¦ã‚‹ã¨ã“ã‚ãŒã‚ã£ãŸã‚‰ã”ã‚ã‚“ãªã•ã„ã€æŒ‡æ‘˜ã—ã¦ãã ã•ã„。ã‚ã¨æ¯”較ã—ã¦ã„ã‚‹ã®ã¯ãƒ‘ターンã®ã¿ã§ã€å‰æ®µã¨ãªã‚‹ç†è«–ç·¨ã«ã¯è§¦ã‚Œã¦ã„ã¾ã›ã‚“。ç†è«–ç·¨ã‚ã‚“ã¾ã‚Šèªã‚“ã§ãªã„。 å‰æ›¸ã第3
Designing A Perfect Language Selector UX — Smashing Magazine
How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let’s dive in! Imagine that you’ve just arrived in Tokyo. Full of impatience and excitement, you are just about to hit the road, yet there it comes: an urgent warning
「利用è¦ç´„ã«åŒæ„ã€ç”»é¢ã®UIデザインã«ã¤ã„ã¦è¨€åŠã•ã‚ŒãŸæ—¥æœ¬ã®è£åˆ¤ä¾‹ã¾ã¨ã‚ | クラウドサイン
先日ã€Uberアプリã®åˆ©ç”¨è¦ç´„åŒæ„ç”»é¢ã®UIデザインã«é–¢ã™ã‚‹ç±³å›½ã®è£åˆ¤ä¾‹ã‚’紹介ã—ã¾ã—ãŸãŒã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã§ã‚ã‚Šã€ã‚¯ãƒ©ã‚¦ãƒ‰ã‚µã‚¤ãƒ³ç«‹ã¡ä¸Šã’時ã«UI・UXを監修ã—ã¦ã„ãŸã ã„ãŸTHE GUILD代表ã®æ·±æ´¥è²´ä¹‹ï¼ˆ@fladdict）ã•ã‚“ãŒã€ 日本ã®ã‚µãƒ¼ãƒ“スã£ã¦ã€Œãƒ¦ãƒ¼ã‚¶ãƒ¼è¦ç´„ã€ã«åŒæ„ã•ã›ã‚‹ã‘ã©ã€æµ·å¤–ã®ã‚µãƒ¼ãƒ“スã£ã¦åŒæ„ã•ã›ãªã„ã®å¤šã„やん？ ãã‚Œã§è£åˆ¤ã¨ã‹å¤§å•é¡Œã«ãªã£ãŸã®èžã„ãŸã“ã¨ãªã„ã‚“ã ã‘ã©ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼è¦ç´„ã«ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã§åŒæ„ã£ã¦ã©ã‚Œãらã„リスクãŒãƒ˜ãƒƒã‚¸ã§ãる機能ãªã®ï¼Ÿ 法律的ã«ã¯ã‚ã£ãŸã»ã†ãŒã„ã„ã¯ãšãªã‚“ã ã‘ã©ã€ãªãã¦è¨´è¨Ÿã§æ»ã‚“ã ã¨ã‹ã€é›‘ã§è¨´è¨Ÿã§æ»ã‚“ã …ã¨ã„ã†äº‹ä¾‹ã®å®Ÿæ•°ã‚’知りãŸã„ ã¨twitterã§ã¤ã¶ã‚„ã„ã¦ã„らã£ã—ゃã£ãŸã®ã§ã€ã‚らãŸã‚ã¦ã€æ—¥æœ¬ã®è£åˆ¤ä¾‹ã§ã€Œåˆ©ç”¨è¦ç´„ã«åŒæ„ã€ç”»é¢ã®UIデザインãŒäº‰ç‚¹ã«é–¢ã‚ã£ãŸäº‹ä¾‹ã‚’調ã¹ã¦ã¿ã¾ã—ãŸã€‚ çµæžœã€æœ¬æ—¥ç¾åœ¨å…¬çŸ¥ã«ãªã£ã¦ã„ã‚‹è£åˆ¤ä¾‹ã«ãŠã‘ã‚‹ãã®ä»¶æ•°ã¯ã©ã†ã‚„ら ãŸã£ãŸã®ï¼“件
AdobeãŒãƒ€ãƒ¼ã‚¯ãƒ‘ターンã§ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’ã ã¾ã—12カ月間契約をã•ã›ã¦ã„ã‚‹ã¨ã—ã¦æµ·å¤–ã§è©±é¡Œã«
Photoshopã‚„Illustratorã¨ã„ã£ãŸã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ã‚’開発・販売ã—ã¦ã„ã‚‹Adobeã«ã¤ã„ã¦ã€ã€ŒAdobeãŒãƒ€ãƒ¼ã‚¯ãƒ‘ターンを利用ã—ã¦ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚’ã ã¾ã—ã€çŸ¥ã‚‰ãªã„ã†ã¡ã«å¹´é–“契約をã•ã›ã‚‹æ–¹æ³•ã€ã«ã¤ã„ã¦ã¾ã¨ã‚ãŸTwitterスレッドãŒè©±é¡Œã¨ãªã£ã¦ã„ã¾ã™ã€‚ How Adobe tricks users into a 12 month contract. Thread.— darkpatterns.org (@darkpatterns) ダークパターンã¨ã„ã†è¨€è‘‰ã‚’作ã£ãŸãƒãƒªãƒ¼ãƒ»ãƒ–リヌルæ°ãŒé‹å–¶ã™ã‚‹darkpatterns.orgãŒã€Twitterã§AdobeãŒãƒ¦ãƒ¼ã‚¶ãƒ¼ã«å¥‘ç´„ã«ã¤ã„ã¦èª¤èªã•ã›ã‚‹æ–¹æ³•ã‚’ã¾ã¨ã‚ãŸã®ã§ã€å®Ÿéš›ã«è©¦ã—ã¦ã¿ã¾ã—ãŸã€‚Adobe Creative Cloudã®æ—¥æœ¬èªžç‰ˆãƒ›ãƒ¼ãƒ ページã«ã‚¢ã‚¯ã‚»ã‚¹ã™ã‚‹ã¨ã€ã€Œç„¡æ–™ã§å§‹ã‚ã‚‹ã€ã¨ã€Œè³¼å…¥ã™ã‚‹ã€ãƒœã‚¿ãƒ³ãŒä¸¦ã‚“ã§è¡¨ç¤ºã•ã‚Œã‚‹ã®ã§ã€ã»ã¨ã‚“ã©ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒé¸æŠž
Alertbox: ページ内リンクã®ä½¿ç”¨ã¯é¿ã‘よã†ï¼ˆ2006å¹´2月21日）
ウェブ上ã®ãƒ¦ãƒ¼ã‚¶ãŸã¡ã¯ã€ãƒã‚¤ãƒ‘ーテã‚スト・リンクã¯åˆ¥ã®ãƒšãƒ¼ã‚¸ã‚’èªã¿è¾¼ã‚€ã¹ãã ã¨ã„ã†ã€æ˜Žç¢ºãªæ€è€ƒãƒ¢ãƒ‡ãƒ«ã‚’æŒã£ã¦ã„る。ページ内リンクã¯ã“ã®æ€è€ƒãƒ¢ãƒ‡ãƒ«ã«åã™ã‚‹ãŸã‚ã€æ··ä¹±ã‚’æ‹›ã。 Avoid Within-Page Links by Jakob Nielsen on February 21, 2006 最近ã€åŒã˜æ—¥ã«åŒã˜ã“ã¨ã«ã¤ã„㦠2 ã¤ã®è³ªå•ã‚’ã•ã‚ŒãŸã€‚普通ã€ã“ã®ã‚ˆã†ãªã“ã¨ãŒèµ·ã“ã‚‹ã¨ã„ã†ã“ã¨ã¯ã€ã“ã®è©±é¡Œã«ã¯ã‚‚ã£ã¨å¹…広ã„関心ãŒã‚ã‚‹ã¨ã„ã†ã“ã¨ãªã®ã§ã€ã“ã‚Œã«ã¤ã„ã¦ã®ã‚³ãƒ©ãƒ を書ã“ã†ã¨æ±ºã‚ãŸã€‚ 質å•ãã® 1： 今ã€ãƒªãƒ³ã‚¯ã‚’クリックã—ã¦ã€Œåå‰ä»˜ãアンカーã€ï¼ˆåŒä¸€ãƒ‰ã‚ュメント内ã®åˆ¥ã®å ´æ‰€ï¼‰ã«ç§»å‹•ã™ã‚‹ã€ã€Œã‚¸ãƒ£ãƒ³ãƒ—・リンクã€ã«ã¤ã„ã¦ã®è°è«–ã«é–¢ã‚ã£ã¦ã„ã¾ã™ã€‚ç§ã¯ã€ã‚¸ãƒ£ãƒ³ãƒ—・リンクãŒæ–°è¦ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚’é–‹ãリンクã¨åŒç‰ã«ã€ã‚ã¾ã‚Šã‚ˆããªã„ã‚‚ã®ã ã¨ã„ã†ã“ã¨ã‚’ã€è²´æ–¹ã®æ›¸ã„㟠2 ã¤ã®è¨˜äº‹ã§è£ä»˜ã‘よã†ã¨ã—ã¦ã„ã¾ã™ã€‚ 質å•ãã® 2
Building Inclusive Toggle Buttons — Smashing Magazine
Making toggle button inclusive is a question of language, visual design, markup, and behavior. In this inaugural post, Heydon Pickering will be exploring what it takes to make toggle buttons inclusive. As with any component, there’s no one way to go about this, especially when such controls are examined under different contexts. However, there’s certainly plenty to forget to do or to otherwise scr
A shorthand for designing UI flows
Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific sequences of actions lead customers through your app as they try to accomplish their tasks. But as important as they are, flows are hard to communicate during the design process. Drawing out every state of a flow is too time-consuming. And drawings become instantl
アコーディオンã®ã‚¢ã‚¤ã‚³ãƒ³ï¼šã©ã®ã‚·ã‚°ãƒ‹ãƒ•ã‚¡ã‚¤ã‚¢ãŒæœ€é©ã‹
ã‚ャレットアイコンã¯ã€ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ãŒãã®å ´ã§é–‹ãã®ã§ã‚ã£ã¦ã€æ–°ã—ã„ページã¸ã®ç›´æŽ¥ã®ãƒªãƒ³ã‚¯ã§ã¯ãªã„ã€ã¨ã„ã†ã“ã¨ã‚’最も明確ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ç¤ºã™ã“ã¨ãŒã§ãã¦ã„ãŸã€‚ Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021å¹´4月8日公開 アコーディオンãŒã€ç¾åœ¨ã€äººæ°—ã®ã‚ã‚‹UIè¦ç´ ã§ã‚ã‚‹ã®ã«ã¯ç†ç”±ãŒã‚る。ã¨ã„ã†ã®ã‚‚ã€ãƒ¢ãƒã‚¤ãƒ«ã§ã¯ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を折りãŸãŸã‚“ã§ãƒšãƒ¼ã‚¸ã®é•·ã•ã‚’管ç†å¯èƒ½ã«ã™ã‚‹ä¸å¯æ¬ ãªãƒ„ールã«ãªã£ã¦ã„る一方ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã§ã‚‚ã€è¦–覚的ãªè¤‡é›‘ã•ã‚’軽減ã—ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒç›®ä¸‹ã®ã‚¿ã‚¹ã‚¯ã«æœ€ã‚‚関連性ã®é«˜ã„コンテンツã«é›†ä¸ã§ãるよã†ã«ã—ã¦ãれるã‹ã‚‰ã （複雑ãªã‚¢ãƒ—リケーションã«ã¯ç‰¹ã«é©ã—ã¦ã„る）。 モãƒã‚¤ãƒ«UXã¨ã‚¢ãƒ—リケーションデザインã®ä¸¡æ–¹ã®è¬›åº§ã§ã‚ˆãèžã‹ã‚Œ
Don’t Use Inverted Color Cues on Toggle Buttons
A user made the mistake of posting their private information publicly. They accidentally set their account to public when they wanted it set to private. What caused this error wasn’t the user, but bad toggle button design. The user misperceived the toggle button that controls the public and private modes. The cue for the active state looked inactive to them. Their misperception was caused by the i
The Art of Building Real-life Components
It’s fairly possible to judge a component and say that it’s easy to implement it in HTML&CSS. I agree, it’s easy when you are working for practice purposes only, but for a real-life project, it’s completely different. The perfect responsive component that you just built will fail quickly in case it was used for a real-life project with real content. Why? It’s because judging on how a component can
Home | Open UI
Open UISection titled Open%20UIThe purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers. To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility require
Accordion Icons: Which Signifiers Work Best?
Summary: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page. For good reasons, accordions are a popular UI element today: on mobile, they are an essential tool because they collapse content and make page length manageable, but even on desktop, they mitigate visual complexity and allow users to focus on the content mos
Design for the iPadOS pointer - WWDC20 - Videos - Apple Developer
Streaming is available in most browsers, and in the Developer app. Bring the power of the pointer to your iPad app: We'll show you how Apple's design team approached designing the iPadOS pointer to complement touch input, and how you can customize and refine pointer interactions in your app to make workflows more efficient and gratifying. Discover how the pointer's adaptive precision enables peopl
ä¹…ä¿ç”°æ™ƒå¼˜ã€Œãƒã‚¹ãƒˆäººé–“ä¸å¿ƒæ™‚代ã®ç†æ€§ã«ã‚ˆã‚‹ãƒ‡ã‚¶ã‚¤ãƒ³ã€ | ÉKRITS / エクリ
インターフェイスデザインをã‚ãã‚‹æ€è€ƒå®Ÿé¨“ 2015å¹´ã®11月ã«æ—¥æœ¬èªžç‰ˆãŒå‡ºç‰ˆã•ã‚ŒãŸã€Žã‚¹ãƒšã‚ュラティヴ・デザインã€ã®å†’é ã«ã¯ã€è‘—者ã®ã‚¢ãƒ³ã‚½ãƒ‹ãƒ¼ãƒ»ãƒ€ãƒ³ã¨ãƒ•ã‚£ã‚ªãƒŠãƒ»ãƒ¬ã‚¤ãƒ“ーã®ãƒ‡ã‚¶ã‚¤ãƒ³å®£è¨€ã¨ã‚‚ã„ãˆã‚‹ã€ŒA/Bã€ã®è¡¨ãŒæŽ²ã’られã¦ã„る。ã“ã“ã§ã€ŒAã€ã¨ã„ã†ã®ã¯ã€ãµã¤ã†ç†è§£ã•ã‚Œã¦ã„る肯定的ãªãƒ‡ã‚¶ã‚¤ãƒ³ã€‚「Bã€ã¨ã„ã†ã®ã¯ã€å½¼ã‚‰ãŒå®Ÿè·µã—ã¦ã„ã‚‹ã¨ã“ã‚ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã§ã‚る。 「Aã€ã®ãµã¤ã†ç†è§£ã•ã‚Œã¦ã„る肯定的ãªãƒ‡ã‚¶ã‚¤ãƒ³ã¨ã„ã†ã®ã¯ã€ä¾‹ãˆã°Apple社ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã ã£ãŸã‚Šã€ãƒ‰ãƒ³ãƒ»ãƒŽãƒ¼ãƒžãƒ³ãŒã„ã†ã€Œä½¿ã„ã‚„ã™ã„ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã ã£ãŸã‚Šã€ã‚‚ã¯ã‚„イノベイティブã§ã¯ãªããªã£ã¦ã—ã¾ã£ãŸã€ãƒžã‚¸ãƒ§ãƒªãƒ†ã‚£ã®ãŸã‚ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã“ã¨ã§ã‚る。ã“ã†ã—ãŸä¼çµ±çš„ãªäººé–“ä¸å¿ƒä¸»ç¾©çš„デザインã«å¯¾ã™ã‚‹ä¿¡ä»°ã€ãã®è£è¿”ã—ã§ã‚りパラフレーズã®æŠ€è¡“ã«ã‚ˆã‚‹äººé–“拡張主義ã€ã‚ã‚‹ã„ã¯äººé–“ã¨ã‚³ãƒ³ãƒ”ュータãŒã‚·ãƒ¼ãƒ レスã«èžåˆã™ã‚‹ã€ã¨ã„ã£ãŸé¡žã®ãƒ†ã‚¯ãƒŽãƒã‚¸ãƒ¼ä¸å¿ƒä¸»ç¾©ã«å¯¾ã™ã‚‹ç„¡æ‰¹åˆ¤ãªè‚¯å®šã¯ã€ãã®ã“ã¨è‡ª
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Designing better target sizes
Tailwind UI - Official Tailwind CSS Components & Templates
The Component Gallery
https://tdarb.org/blog/hamburger-menu-alternative.html
https://csslayout.io/
{{#tags}}- {{label}}
{{/tags}}