出版書誌データベース

考え方から実践ノウハウまで、制作に役立つヒントが満載！

考え方から改善に役立つ知識、実践ノウハウまで、
良いUIのためにやるべきことを全部集めました！

本書はアプリやWebのUIデザインに関して、基礎知識から実践で役立つヒントやノウハウを体系的にまとめ、解説した書籍です。
実際のデザイン制作の中で、デザインをブラッシュアップしたいとき、アイデアが欲しいときに本を開き、パラパラとめくりながらヒントや気づきが得られる一冊を目指しました。
初心者の方も経験者の方も、それぞれの課題に応じてぜひ本書をご活用ください。

＜対象読者＞
・UIデザインを学びたい初心者
・UIデザインのクオリティを上げたい・引き出しを増やしたい方
・アプリ・Webのプロジェクトに関わりUIデザインを知りたい方

Chapter 1　UIデザインの基礎知識

1-01　UIデザインの考え方
1-02　ベストなUIの形状は90％決まっている
1-03　UIデザインの準備工程
1-04　UIデザインの制作工程
Column　対話型AIを使った要件定義



Chapter 2　グランドデザインを作る

2-01　グランドデザインの作り方
2-02　シンプルな信頼感のあるUI
2-03　未来的、先進的なUI
2-04　親しみやすい、かわいいUI
2-05　スタイリッシュなUI
2-06　デザインシステムを作る
Column　デザイナーのコミュニケーションツール



Chapter 3　ビジュアルを改善するヒント

3-01　余白と角丸
3-02　ヘッダー、ナビゲーション、ボタン
3-03　画面内の配色割合
3-04　ダークモードを作るとき
3-05　写真の使い方
3-06　イラストの使い方
3-07　アイコンの使い方
Column　FigmaのUIキットを活用しよう



Chapter 4　UIを改善するヒント

4-01　デスクトップアプリとモバイルアプリの違い
4-02　やることの導線を明確に
4-03　リンクとページタイトルの表記を揃える
4-04　文言を洗練させる
4-05　なくてもわかるものは削る
4-06　ユーザーへのフィードバック
4-07　エラーの表現方法
4-08　省略を活用しよう
4-09　サムネイルで識別を助ける
4-10　危険な操作の前は必ず確認を入れる
4-11　重要な意思決定のボタンは操作前に情報を知らせる
4-12　0件表示（エンプティステート）は必ず用意する
4-13　初回ユーザー向けの案内を用意する
4-14　よく使う操作を手前に
4-15　ステータスをわかりやすく
4-16　クリック範囲をわかりやすく
4-17　有効なアニメーションをつける
Column　Figmaでアニメーションを設定する
4-18　アニメーションは要所に絞り、速く動かす
Column　デザイナーと開発者のコミュニケーション



Chapter 5　レイアウトを改善するヒント

5-01　デスクトップアプリのページレイアウト
5-02　モバイルアプリのページレイアウト
5-03　画面に情報を詰め込みすぎない
5-04　視線の流れに沿う
5-05　画面のグループ分けと情報の精査
5-06　余白と罫線
5-07　テキストは画面幅いっぱいにしない
5-08　画面サイズが小さいときを考慮する
5-09　多言語化を考慮する
5-10　一覧を見やすくする
5-11　詳細画面の表示パターン
5-12　スクロール範囲のコツ
5-13　管理・設定画面専用のレイアウトを用意する
Column　Auto Layoutを活用　実装に沿ったFigmaデータ制作



Chapter 6　パーツを改善するヒント

6-01　PCアプリのナビゲーション
6-02　モバイルアプリのナビゲーション
6-03　ヘッダー
6-04　ページヘッダー
6-05　パンくずリスト
6-06　見出し
6-07　ボタン
6-08　テキストリンク
6-09　ドロップダウンメニュー
6-10　インプット
6-11　セレクトボックス
6-12　コンボボックス
6-13　マルチセレクトボックス
6-14　デートピッカー
6-15　カウンターとスライダー
6-16　テキストエリア
6-17　プレースホルダ―の使い方
6-18　チェックボックスとラジオボタン
6-19　トグルボタンとスイッチ
6-20　タブ
6-21　定義リスト
6-22　リストとカード
6-23　テーブル
6-24　ページャーと件数カウンター
6-25　ステータスラベルとチップ
6-26　バッジ
6-27　ツールチップ
6-28　モーダルダイアログ
6-29　メッセージアラート
6-30　トースト
6-31　アコーディオン
6-32　ステッパー
6-33　ローディング
6-34　バナーと提案カード
6-35　エラー画面
Column　Storybookを使った実装パーツの整理

著：NRIネットコム株式会社
　

著：東影 勇太
東影 勇太
2014年、NRIネットコム株式会社に入社。
UI/UXデザイナーとして、Webサービスおよびモバイルアプリのデザインや画面検討に参画し、これまで大手企業の社内システム、デスクトップ業務アプリのデザインを多数手掛ける。
開発メンバーとのコミュニケーションや協業を大切にし、デザイン知識の発信や、デザインシステムの構築に積極的に取り組んでいる。

著：和田 直樹
和田 直樹
2013年、NRIネットコム株式会社に入社。
UI/UXデザイナー兼プロジェクトマネージャーとして、大手企業のコーポレートサイトや特設サイト、社内システムのデザイン、プロジェクト管理に従事。「HCD-Net認定　人間中心設計スペシャリスト」を取得し、ユーザー視点に立ったデザインを追求してきた。2024年6月より人事部にて採用業務を担当。デザイン業務を通じて培ったコミュニケーションの経験を活かし、求職者が会社とより良い関係を築けるよう支援している。