ux-designer

Name: ux-designer
Author: oakoss

github.com/oakossデザイン・UI20129 回インストール11 週間前に更新

ux-designer について

ux-designerは、ユーザージャーニーや画面を設計するチーム向けのUXデザインスキルです。情報設計からフロー、ワイヤーフレーム、プロトタイプのテスト、開発者への引き継ぎまでを5段階で進め、調査とアクセシビリティを重視します。

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill ux-designer

インストール後、Claude Code で/ux-designerを入力して読み込まれたか確認します。

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

accessibility-guide.md

design-process.md

tools-and-resources.md

visual-design.md

個人の好みではなく、調査に基づいて直感的でアクセシブルなユーザー体験を設計します。情報アーキテクチャから開発者への引き継ぎまで、ユーザーフロー、ワイヤーフレーム作成、プロトタイピング、ユーザビリティテスト、アクセシビリティへの準拠を含む5段階の設計プロセスを扱います。

使用する場面： ユーザージャーニーやフローの作成、ワイヤーフレームやプロトタイプの設計、ユーザビリティの向上、デザインシステムの構築、アクセシビリティ監査の実施、開発者への引き継ぎ資料の準備。

使用しない場面： UI を伴わないバックエンドアーキテクチャ、データベーススキーマの設計、DevOps の設定。

フェーズ	目標	主な成果物
情報アーキテクチャ	コンテンツと機能を整理する	サイトマップ、ナビゲーション設計、ラベル分類体系
ユーザーフロー	ユーザーがタスクを完了するまでの経路を図示する	フロー図、理想的な経路、エラー状態、エッジケース
ワイヤーフレーム作成	低精度のレイアウトを作成する	低・中・高精度のワイヤーフレーム、レイアウトパターン
プロトタイピングとテスト	インタラクティブなプロトタイプを作成してテストする	クリック可能なプロトタイプ、ユーザビリティテストの結果
UI デザインと引き継ぎ	本番環境で使えるデザインを作成する	デザイン仕様、コンポーネントの状態、レスポンシブレイアウト

パターン	主なルール
フォーム	ラベルはフィールドの上に配置し、インラインで検証し、1列にまとめ、関連するフィールドをグループ化する
ナビゲーション	現在のページを強調表示し、階層の深さを示すパンくずリストを使い、上部ナビゲーション項目は最大7つにする
空の状態	空である理由を説明し、次に取るべき行動を明確に示し、イラストまたはアイコンを使う
読み込み状態	スピナーよりスケルトンスクリーンを優先し、進行状況インジケーターと楽観的 UI を使う

間違い	正しいパターン
ユーザー調査ではなく個人の好みに基づいてデザインする	すべてのデザイン上の判断を、ユーザー調査、カードソーティング、またはユーザビリティテストのデータに基づける
空、読み込み、エラーの状態のデザインを省略する	すべての画面について、デフォルト、読み込み、空、エラー、成功の各状態をデザインする
フォームのラベルにプレースホルダーテキストを使う	ラベルをフィールドの上に配置する。プレースホルダーは入力時に消え、アクセシビリティ上の問題につながる
キーボードナビゲーションとフォーカス状態を無視する	すべてのインタラクティブ要素について、Tab の順序、視認できるフォーカスインジケーター、ARIA ラベルをテストする
すべての画面サイズに単一のレイアウトを設計する	モバイル、タブレット、デスクトップのブレークポイントごとに、レスポンシブレイアウトを作成する
開発前に実際のユーザーでテストしない	インタラクティブなプロトタイプを使い、5人以上の参加者でユーザビリティテストを実施する

ユーザー調査とテスト：Task エージェントを使用して、カードソーティング、ツリーテスト、ユーザビリティテストのセッションを計画します
アクセシビリティ監査：Explore エージェントを使用して、自動化ツールで全画面の WCAG 2.2 AA 準拠を確認します
デザインシステムのアーキテクチャ：Plan エージェントを使用して、カラースケール、タイポグラフィの階層、スペーシンググリッド、コンポーネントライブラリの構成を定義します

Markdown 対応