AgentSkillsCN

ui-ux-design

在UI实现与用户体验优化时使用。全面覆盖无障碍设计与响应式布局。

SKILL.md
--- frontmatter
name: ui-ux-design
description: UI実装やUX改善時に使用。アクセシビリティとレスポンシブデザインをカバー。

UI/UX Design

📋 実行前チェック(必須)

このスキルを使うべきか?

  • UIを実装する?
  • アクセシビリティに対応する?
  • レスポンシブデザインを行う?
  • UXを改善する?

前提条件

  • 対象ユーザーを把握しているか?
  • デザインガイドラインを確認したか?
  • アクセシビリティ要件を確認したか?

禁止事項の確認

  • 画像のalt属性を省略しようとしていないか?
  • divでボタンを作ろうとしていないか?
  • クリック可能な領域が小さすぎないか?
  • 色だけで情報を伝えようとしていないか?

トリガー

  • UI実装時
  • アクセシビリティ対応時
  • レスポンシブデザイン時
  • UX改善時

🚨 鉄則

ユーザーが最小の摩擦で目的を達成できるようにする。


アクセシビリティ必須事項

html
<!-- 画像: alt必須 -->
<img src="chart.png" alt="Q4売上25%増加">

<!-- ボタン: セマンティック要素 -->
<button type="submit">送信</button>  <!-- ✅ -->
<div onclick="submit()">送信</div>   <!-- ❌ -->

<!-- フォーム: ラベル紐付け -->
<label for="email">メール</label>
<input id="email" type="email">

レスポンシブデザイン

css
/* モバイルファースト */
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

タッチターゲット

css
/* 最小44x44px */
.button {
  min-width: 44px;
  min-height: 44px;
}

🚫 禁止事項まとめ

  • 画像のalt属性省略
  • divでのボタン実装
  • 小さすぎるタッチターゲット
  • 色だけでの情報伝達