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を使った実装パーツの整理