UIデザインのアイデア帳 アプリ・Web制作の現場で使える 基本+実践ノウハウ83

構成数 : 1枚

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...