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

考え方から改善に役立つ知識、実践ノウハウまで、
良い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を使った実装パーツの整理