最前線のプロが実践しているUIデザイン改善術とは?『今すぐ使える「UIデザイン」41の法則』発売

  • X
  • Facebook
  • note
  • hatena
  • Pocket
2025/07/24 07:00

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

 本書では、著者陣が様々なプロダクトやサービスのデザイン改善を手掛ける中で培ってきた、ユーザービリティ(使いやすさ)を高めるノウハウを解説。多くのクライアントの要望に応えるために洗練されてきたUIデザインの方法は、特に機能優先で複雑になりがちな業務支援システムに有効です。

 内容としては、「UIとは何か?」という基本から入り、まず「いいUI」の指針を設定することから。そして、飲食店の注文管理システムを例に、アカウント登録やデータ一覧のUIをどのように設計すればいいのかを解説します。

 さらに、従業員の評価管理システムを例に、複雑な機能をいかにわかりやすく、使いやすくできるのかを紹介。いずれも「Before→After」の図解があるため、見るだけで違いがわかります。

誌面例

 「ユーザーにとって使いやすいUIにするための視点は、業界やシステムの種類に関わらず一定の共通点がある」という考えに沿った、誰でも真似から始められるUIデザイン改善術を学べる1冊です。

目次

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

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.エラーを過剰に表示しない
・まとめ

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

Amazon SEshop その他

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

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

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