Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.
日本語の概要は準備中です。原文の説明を表示しています。
495 件 ・ 関連度順
概要と使いどころ
Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.
日本語の概要は準備中です。原文の説明を表示しています。
Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.
日本語の概要は準備中です。原文の説明を表示しています。
Lighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay, images, fonts or render-blocking resources.
日本語の概要は準備中です。原文の説明を表示しています。
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
日本語の概要は準備中です。原文の説明を表示しています。
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
日本語の概要は準備中です。原文の説明を表示しています。
Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse, logistics, scheduling or other B2B operations tools.
日本語の概要は準備中です。原文の説明を表示しています。
Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.
日本語の概要は準備中です。原文の説明を表示しています。
Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.
日本語の概要は準備中です。原文の説明を表示しています。
Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.
日本語の概要は準備中です。原文の説明を表示しています。
Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.
日本語の概要は準備中です。原文の説明を表示しています。
Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.
日本語の概要は準備中です。原文の説明を表示しています。
Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.
日本語の概要は準備中です。原文の説明を表示しています。
Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing markup or optimising for search.
日本語の概要は準備中です。原文の説明を表示しています。
Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.
日本語の概要は準備中です。原文の説明を表示しています。
WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.
日本語の概要は準備中です。原文の説明を表示しています。
Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.
日本語の概要は準備中です。原文の説明を表示しています。
rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.
日本語の概要は準備中です。原文の説明を表示しています。
Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.
日本語の概要は準備中です。原文の説明を表示しています。
Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.
日本語の概要は準備中です。原文の説明を表示しています。
Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.
日本語の概要は準備中です。原文の説明を表示しています。
Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.
日本語の概要は準備中です。原文の説明を表示しています。
Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.
日本語の概要は準備中です。原文の説明を表示しています。
Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.
日本語の概要は準備中です。原文の説明を表示しています。
Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.
日本語の概要は準備中です。原文の説明を表示しています。