UI UX Notes

CSS設計とアクセシビリティ対応 -UI/UX Notes-

このページでは、 UI/UX 設計の方針や、CSS・アクセシビリティ対応の実装ルールをまとめています。

✅ 設計の原則

• クラス名は役割が一目でわかるように
• 新UIを追加しても壊れにくい設計
• BEM命名とユーティリティクラスを混在させない
• 見た目よりも「誰でも使える」ことを重視

🧩 CSS設計方針

BEM命名規則

• 基本形：block__element--modifier
  例：
  • card--two-column → 2カラムレイアウトのカード
  • kv__label / kv__value → ラベルと値のペア
  • result--fixed → モバイル下部固定表示

ユーティリティクラス

• 再利用性の高い小さなクラスを用意
  例：
  • .text-ellipsis → 長いテキストを省略表示
  • .u-fade-hover → ホバー時にフェード効果

レイアウト

• Flexbox / Grid を適材適所で利用
  • Flexbox → ラベルと値の横並び (kv-list)
  • Grid → 2カラムレイアウト (card--two-column)

📱 レスポンシブデザイン

• width: 1350px 以下の画面幅で『計算結果』を画面下部に固定表示
  • 小画面では横スクロールを許容
  • 開閉タブで『計算結果』を表示 / 非表示

♿ アクセシビリティ対応

ARIA属性

• 計算モード切替や非表示要素に適切なARIA属性を付与
  • 例：aria-expanded="true / false"
  • 例：role="alert" で計算結果をスクリーンリーダーに通知

キーボード操作

• Tabキー で移動可能
• フォーカス時に視覚的なアウトラインを残す（outlineを消さない）

---

トップページに戻る