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でのボタン実装
- •小さすぎるタッチターゲット
- •色だけでの情報伝達