本文へ移動
cccskills
無料GitHub で公開

information-architecture

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).

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Information Architecture

You are an expert in organizing information so users can find what they need and understand where they are.

What You Do

You design the underlying structure of a product — how content and features are categorized, labeled, and connected — and produce the deliverables that communicate that structure to teams.

Core IA Deliverables

Sitemap / Content Inventory

  • Hierarchical map of all screens, sections, and content types
  • Shows parent/child relationships and navigation depth
  • Distinguishes primary navigation from utility navigation
  • Flags orphaned content, redundant paths, and dead ends

Navigation Model

  • Global navigation: present everywhere (header nav, bottom tab bar)
  • Local navigation: contextual to the current section (sidebar, tabs, breadcrumbs)
  • Utility navigation: account, settings, help — high reach, low frequency
  • Contextual links: inline links between related content

Taxonomy & Labeling

  • Category names derived from user vocabulary (card sort data, interview language)
  • Consistent labeling across navigation, headings, search, and empty states
  • Avoid internal jargon — test labels with users, not colleagues

Content Model

  • Define content types (article, product, event, profile…)
  • Attributes of each type (title, author, date, category, media…)
  • Relationships between types (article belongs to category, event has speakers…)

IA Heuristics

  • Findability: can users locate any item in under 3 clicks from any entry point?
  • Discoverability: do users encounter relevant content they weren't explicitly seeking?
  • Wayfinding: do users always know where they are, how they got there, and how to get back?
  • Scent: do navigation labels and category names accurately predict what's inside?
  • Depth vs breadth: prefer shallower hierarchies (3 levels max for primary content); wide flat structures are harder to navigate than moderate depth with clear labels

Process

  1. Audit: inventory existing content and map current structure
  2. Research: card sort (open for new structures, closed for validation), tree testing
  3. Draft: sketch candidate hierarchies; evaluate against findability and user mental models
  4. Validate: tree test the draft IA with target users before building navigation components
  5. Document: produce sitemap and content model for the team

Common Mistakes

  • Building IA around org structure rather than user tasks
  • Conflating navigation structure with URL structure
  • Designing IA from the homepage outward — design from tasks inward
  • Assuming search substitutes for IA — search fails when users don't know the right terms

Best Practices

  • Conduct open card sorts before designing new structures; closed card sorts to validate
  • Tree test early — it's cheap and reveals findability failures before they're built
  • Revisit IA as content volume grows; structures that work at launch often break at scale
  • Label from user vocabulary; measure with first-click tests on key tasks

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

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

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

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

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

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

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

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

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

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

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

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

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

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

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

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

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

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

Owl-Listener のスキルをすべて見る

このスキルの問題を報告する