本文へ移動
cccskills

スキルを探す

7,498 件 ・ 人気順

概要と使いどころ

Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Define UX metrics and KPIs that connect design decisions to measurable outcomes. Use when choosing what to measure. For presenting the results afterwards, use `design-impact-reporting` (design-ops).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Diagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Apply the Serial Position Effect — first and last items in a sequence are recalled best. Use when ordering menus, lists, and steps. For emphasising one item regardless of its position, use `von-restorff-effect` (ui-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Apply the Peak-End Rule — a flow is remembered by its most intense moment and its last. Use when designing completion, celebration, or cancellation moments. For sustaining engagement mid-flow, use `zeigarnik-effect`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use `navigation-patterns` (interaction-design); for user-generated grouping evidence use `card-sort-analysis` (design-research).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design waiting experiences — spinners, skeletons, optimistic updates, and progressive reveal. Use when content takes time to arrive. For the latency budget itself use `doherty-threshold`; for success confirmation use `feedback-patterns`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Select and design a navigation pattern — tabs, drawer, hierarchy, or hub — matched to product structure and user tasks. Use when choosing how users move between sections. For the underlying content structure, use `information-architecture` (ux-strategy).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Compare UX patterns, features, strengths, and gaps across rival products. Use when you need to know what others actually do. For deliberately adopting their conventions, use `jakobs-law` (interaction-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use `responsive-design`; for matching competitor patterns use `jakobs-law` (interaction-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Read financials, map competitive landscapes, and argue design decisions in the language of value. Use when defending design to commercial stakeholders. For the live negotiation itself, use `design-negotiation` (designer-toolkit).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Apply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use `platform-conventions` (ui-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Map the full ecosystem of touchpoints, channels, and relationships across a service. Use when the experience spans more than one product. For one persona's linear journey use `journey-map` (design-research); for backstage operations use `service-blueprint`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design the first-run experience — activation path, progressive disclosure, and time to first value. Use for a user's very first session. For the mechanics of the signup form itself, use `form-design`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Apply the Law of Continuity — the eye follows alignment and unbroken paths. Use when sequencing steps, aligning content, or designing carousels and timelines. For grouping rather than sequencing, use `law-of-proximity`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use `platform-conventions` (ui-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新

Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9262026年9月6日 更新