UIデザインの基本10選
UIデザインは、センスや才能よりも
「どう考えて実装するか」の積み重ねで決まる部分が大きいと感じています。
業務アプリの画面を作る中で、
「ここを押さえておくと設計がブレにくい」と思った
UIデザインの基本を10項目に整理しました。
主に 業務アプリ（WinForms / Web） を想定しています。
1. 色だけに意味を持たせない
状態や重要度を色だけで表現すると、
意図が正しく伝わらないケースがあります。
そのため、色以外の情報も必ず組み合わせます。
例：色＋テキストで状態を表現
<span class="status status-error">
エラー：入力内容に不備があります
</span>
2. 操作判断に必要な情報は常に見せる
「この情報は今の操作判断に必要か？」を基準に考えます。
重要な情報は、
スクロールや画面遷移なしで確認できる位置に配置します。
例：検索条件と件数を常時表示
<div class="search-summary">
検索条件：未処理のみ / 表示件数：12件
</div>
3. 現在地が分かる構造にする
ユーザーが迷いやすいのは、
「今どこを操作しているか分からない」状態です。
例：パンくずリスト
<nav class="breadcrumb">
<a href="#">ホーム</a> >
<a href="#">受注管理</a> >
<span>受注詳細</span>
</nav>
4. 入力は極力減らす前提で考える
入力欄を作る前に、
「本当に手入力が必要か？」を考えます。
例：選択式にして入力を減らす
<label>
都道府県
<select>
<option>東京都</option>
<option>神奈川県</option>
<option>千葉県</option>
</select>
</label>
5. 入力欄のサイズで意図を伝える
入力欄のサイズは、
ユーザーへの暗黙的なメッセージになります。
例：備考欄は複数行で用意
<label>
備考
<textarea rows="4" cols="40"></textarea>
</label>
6. 見ただけで操作方法が分かるようにする
UIは、説明なしでも
「どう操作すればいいか」が伝わるのが理想です。
例：ボタンらしい見た目
<button class="primary-button">
検索する
</button>
7. ボタンには処理内容を明示する
「OK」「実行」ではなく、
押した結果が分かる文言を使います。
例：処理内容が分かるボタン
<button>
変更内容を保存する
</button>
8. エラーは原因と次の行動を示す
エラーは、
ユーザーを責めるものではなく、操作を助けるものです。
例：入力欄の近くに具体的なエラー表示
<input type="text" />
<div class="error-message">
数値を入力してください（例：100）
</div>
9. 削除操作は意図的に慎重な設計にする
削除は、
業務アプリでは特に影響が大きい操作です。
例：危険操作を視覚的に分ける
<button class="danger-button">
このデータを削除する
</button>
10. ユーザーの操作フローを途切れさせない
入力途中で状態が失われると、
大きなストレスになります。
例：処理中を明示する
<div class="loading">
保存中です…しばらくお待ちください
</div>
おまけ：5分だけ隣の先輩に触ってもらう
自分一人でUIを見ていると、
どうしても「作った側の視点」から抜けられなくなります。
そこで私は、
オフィスで隣に座っている先輩に5分だけ触ってもらう
という簡易チェックをよくやっています。
やり方はとてもシンプルで、
- 画面の説明はしない
- 操作方法も言わない
- ただ実際に触ってもらう
これだけです。
すると、
- 迷わず操作される部分
- 無言で止まる箇所
- 「これどこ押すの？」と聞かれるポイント
がはっきり見えてきます。
最後に
UIデザインは、
見た目を整える作業ではなく、
ユーザーの行動を想定して設計する作業だと考えています。
実装経験が増えてくると、
- なぜ使いにくいのか
- どこで迷いそうか
を言語として説明できるようになります。
今後も
「このUIは本当に業務で使いやすいか？」を基準に、
設計の精度を高めていきたいと思います。