interface-design

インターフェース設計

設計原則

1. 明確さ

インターフェースを見ただけで分かるようにします。ユーザーに推測させないでください。

2. 一貫性

同じ操作には、同じ結果を返します。全体を通してパターンを統一します。

3. フィードバック

すべての操作に応答します。進行状況を表示し、成功を知らせ、エラーを説明します。

4. 効率

手順を最小限にします。よく使うワークフローを最適化します。

5. 寛容さ

取り消しを可能にします。破壊的な操作は確認を求め、問題からスムーズに復旧できるようにします。

UI パターン

ナビゲーション

• トップナビゲーション：主要なナビゲーションとグローバル操作
• サイドナビゲーション：セクションのナビゲーションと階層構造のコンテンツ
• パンくずリスト：階層内の現在位置を表示
• タブ：関連するビューを切り替え

フォーム

• 入力欄の上にラベルを配置
• 分かりやすい検証メッセージ
• 有用な場合は入力欄内で検証
• 論理的な項目のグループ化
• 明確な行動喚起

フィードバック

• 読み込み状態
• 成功の確認
• エラーメッセージ
• 空の状態
• 進行状況インジケーター

操作

• 主要な操作を目立たせる
• 二次的な操作は控えめにする
• 破壊的な操作には確認を求める
• 無効状態を明確にする

レイアウト原則

視覚的階層

• サイズで重要度を示す
• 色で注意を引く
• 余白で要素をグループ化する
• 配置で秩序を作る

グリッドシステム

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

レスポンシブデザイン

• モバイルファーストのアプローチ
• ブレークポイント：640px、768px、1024px、1280px
• 流動的なタイポグラフィ
• 柔軟な画像

設計仕様

開発チームに引き継ぐ際：

• 色の値（hex/RGB）
• タイポグラフィ（フォント、サイズ、太さ、行の高さ）
• 余白（マージン、パディング）
• コンポーネントの状態（デフォルト、ホバー、アクティブ、無効）
• レスポンシブ時の動作
• アニメーション／トランジション

リソース

• 設計フレームワークテンプレート