ui-ux-design

UI/UX Design

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

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

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

前提条件

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

禁止事項の確認

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

トリガー

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

🚨 鉄則

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

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

<!-- 画像: 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">

レスポンシブデザイン

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

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

タッチターゲット

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

🚫 禁止事項まとめ

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