エンジニアも知っておきたいUIの改善点がひとめでわかる　『今すぐ使える「UIデザイン」41の法則』

　CodeZineを運営する翔泳社より、7月24日（木）に書籍『現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則』が発売となりました。

　本書は100件以上のプロダクトに携わり、ユーザービリティ改善のノウハウを積み上げてきたi3DESIGN（アイスリーデザイン）の著者陣が、業務支援システムのデザイン例を通して、実践的なUIデザインの考え方と改善方法を解説した書籍です。

　業務支援システムは機能優先でユーザーに複雑な操作を求めがちですが、実は少し工夫すれば劇的にユーザービリティが向上します。

　本書ではそのポイントを「Before→After」の形で図解。ひとめ見れば、誰でも「どうすればいいのか」を掴めます。

　内容としては、飲食店の注文管理システムと従業員の評価管理システムを取り上げ、ユーザーの現場で求められる「使いやすいUI」を設計する手法を解説します。

　「なんか使いづらいけど仕方なく使う」状態から脱するための、ユーザー目線のUIデザイン改善術を学べます。

目次

序章　UIデザインとはなにか？
・UIはユーザーとシステムをつなぐ「接点」
・UIデザインと混同されやすい領域のデザイン
・UIデザインに求められる視点
・「良いUIデザイン」の3つの指針
・指針（1）10のユーザビリティヒューリスティックス
・指針（2）UX5段階モデル
・指針（3）WCAG
・本書の「読み方」

Part1　飲食店の注文管理システムを通じて、業務支援システムUIの基礎知識を学ぶ

【アカウント登録（1）全体】
・01.要素の意味は「色の違い以外」で伝える
・02.重要な情報は常に表示する
・03.「ユーザーの現在地」を示す
・まとめ

【アカウント登録（2）入力】
・04.自動入力を活用する
・05.デフォルトの値をユーザーに合わせる
・06.入力内容に合ったサイズにする
・まとめ

【オンボーディング】
・07.「スキップ」をできるようにする
・08.操作方法を分かりやすく提供する
・09.内容に合ったオンボーディング手法を選ぶ
・まとめ

【データ一覧（1）カードビュー】
・10.並び順や絞り込み条件を表示する
・11.「情報の総量」を表示する
・12.押した結果が想像できる見た目にする
・13.コントラスト比は一定以上に保つ
・14.テキストの行間や文字数を読みやすくする
・まとめ

【データ一覧（2）操作】
・15.操作が正確に行えるサイズにする
・16.スクロールできることを示す
・17.「機能の違い」を見た目に反映する
・まとめ

【インサイト：道具としてのユーザーインターフェース】
・UIの本質を理解する
・「道具的UI」
・「広告的UI」
・デザインの目的の違いが生むもの
・中間的な存在～ECサイトの例～
・データとの関係性～「道具的UI」の核心～
・なぜ「道具的UI」が重要なのか

Part2　従業員の評価管理システムを通じて、複雑な機能を使いやすくデザインするポイントを学ぶ

【データ一覧　テーブルビュー】
・18.コンポーネントらしさが伝わる見た目にする
・19.データがない状態であることを表現する
・20.日付・時間をわかりやすい表記にする
・まとめ

【データ詳細（1）閲覧】
・21.情報をグループ化する
・22.要素に優先順位をつける
・23.アイコンは補助的に使用する
・まとめ

【データ詳細（2）削除】
・24.「削除」はほかの機能と区別する
・25.削除のしやすさを情報の重要性と合わせる
・26.ボタンテキストは動詞で表現する
・まとめ

【データ詳細（3）フィードバック】
・27.操作に対するフィードバックを返す
・28.操作箇所とフィードバックの位置を近づける
・29.ユーザーの操作を中断させない
・30.ボタン・リンクであることを示す
・31.リンクと遷移先の画面タイトルを揃える
・まとめ

【新規データ入力（1）入力】
・32.入力条件は事前に提示する
・33.定型的な内容の入力時は選択肢を提示する
・34.同じように使えるコンポーネントを使い分ける
・35.複数の入力方法を用意する
・36.「戻る」「閉じる」「キャンセル」を正しく使い分ける
・まとめ

【新規データ（2）エラー】
・37.システムメッセージは内容に応じた見た目にする
・38.システムメッセージは「身近な言葉」を使う
・39.エラーメッセージはエラーの近くに表示する
・40.メッセージにエラーを解消する方法を記載する
・41.エラーを過剰に表示しない
・まとめ

 

Amazon　 SEshop　 その他

 

現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則

 

著者：佐々木祐真、直原杏花、岩本あかり、大林志帆
監修：株式会社アイスリーデザイン
発売日：2025年7月24日（木）
定価：2,640円（本体2,400円＋税10%）

本書について

本書では「UIとは何か？」の基礎から、業務支援システムのデザインの例を通して実践的なUIデザインの考え方と改善のプロセスまでを現場に則した形で解説していきます。