MdN Web Mook ウェブデザインのつくり方、インターフェイスデザインの考え方。
エムディエヌコーポレーション / 2011年09月23日 / 全257ページ
【深化するWeb&スマートフォンサイトのデザイン講座】 日々変化するウェブ制作の現場では、グラフィック主体のデザインではなく、デバイスに応じたコンテンツのデザインが求められています。本書は、ウェブとスマートフォンなどのデジタルコンテンツ制作のために、デザインの技法と制作のコツをやさしく解説。デザインの考え方、インターフェイスの実践的つくり方、装飾的なデザインの技法について、手描きタッチの親しみやすい図解とやさしい語り口で、ていねいに解説した誌上デザイン講座です。
目次
- 扉
- はじめに
- CONTENTS
- ■Chapter 1 デザインの考え方に関する講義
- Lesson 01 UX[ユーザーに質の高い経験を与える]
- Lesson 02 機能の分類[操作をスムーズにする]
- Lesson 03 マジックナンバー[選択肢の数を決める]
- Lesson 04 アイコン[直感的な識別を可能にする]
- Lesson 05 ウェブのレイアウトパターン[型にならうことで使いやすく]
- Lesson 06 スモールスクリーンのUI[ユースケースに合わせて画面を作る]
- Lesson 07 ページのフォーマット[セクションごとにページの役割を決める]
- Lesson 08 モジュール[情報を効率的にレイアウトする]
- Lesson 09 仕様別レイアウトパターン[目的に応じたレイアウトの選び方]
- Lesson 10 Media Queries[異なる環境に情報を届ける]
- Lesson 11 モックアップ[完成型に近い形で仕上がりを想像する道具]
- ■Chapter 2 デザインの技法に関する講義
- Lesson 12 タブインターフェイス[操作を単純にする]
- Lesson 13 上下2分割レイアウト[情報が記憶に残りやすい画面を作る]
- Lesson 14 プルダウンナビゲーション[数の多い選択肢を使いやすくまとめる]
- Lesson 15 色によるグルーピング[実際より情報量を少なく見せる]
- 扉
- はじめに
- CONTENTS
- ■Chapter 1 デザインの考え方に関する講義
- Lesson 01 UX[ユーザーに質の高い経験を与える]
- Lesson 02 機能の分類[操作をスムーズにする]
- Lesson 03 マジックナンバー[選択肢の数を決める]
- Lesson 04 アイコン[直感的な識別を可能にする]
- Lesson 05 ウェブのレイアウトパターン[型にならうことで使いやすく]
- Lesson 06 スモールスクリーンのUI[ユースケースに合わせて画面を作る]
- Lesson 07 ページのフォーマット[セクションごとにページの役割を決める]
- Lesson 08 モジュール[情報を効率的にレイアウトする]
- Lesson 09 仕様別レイアウトパターン[目的に応じたレイアウトの選び方]
- Lesson 10 Media Queries[異なる環境に情報を届ける]
- Lesson 11 モックアップ[完成型に近い形で仕上がりを想像する道具]
- ■Chapter 2 デザインの技法に関する講義
- Lesson 12 タブインターフェイス[操作を単純にする]
- Lesson 13 上下2分割レイアウト[情報が記憶に残りやすい画面を作る]
- Lesson 14 プルダウンナビゲーション[数の多い選択肢を使いやすくまとめる]
- Lesson 15 色によるグルーピング[実際より情報量を少なく見せる]
- Lesson 16 かたちによるグルーピング[情報を把握しやすくする]
- Lesson 17 整列[レイアウトの質を上げる]
- Lesson 18 カルーセルUI[同じ高さ位置に複数の選択肢を並列する]
- Lesson 19 アコーディオンUI[表示面積の消費を抑えて操作を提供する]
- Lesson 20 画面完結型レイアウト[TVにレイアウトを最適化する]
- Lesson 21 UI のカラーリング[機能性や訴求力を向上させる]
- Lesson 22 ホワイトスペース[見やすく美しいページを作る]
- Lesson 23 グリッドレイアウト[機能的で整然としたレイアウトのための手法]
- ■Chapter 3 スタイリングの技法に関する講義
- Lesson 24 コンポジション[バランスよくグラフィックを整える]
- Lesson 25 コントラスト[見やすさと使いやすさを決める]
- Lesson 26 ジャンプ率[見出しを探しやすくする]
- Lesson 27 罫線[画面を整理整頓する]
- Lesson 28 トリミング[写真に表現力を与える]
- Lesson 29 タイポグラフィ[メッセージを伝える]
- Lesson 30 文字の間隔設定[閲覧中のユーザーの疲労を軽減する]
- Lesson 31 Web Font[ウェブならではのフォント表現]
- Lesson 32 有彩色と無彩色[特定の色を印象づける方法]
- Lesson 33 補色 [対比効果を理解して緊張感のある色彩を計画する]
- Lesson 34 透明度 [見た目の情報量をコントロールできる表現方法]
- Lesson 35 彩度対比 [画面の強弱をコントロールする]
- Lesson 36 明度対比 [メリハリをコントロールして見やすく整える]
- Lesson 37 重さと色 [重要度を明示して視線を迷わせない]
- Lesson 38 ハーモニックカラー [調和のとれた色でまとまりを感じさせる]
- Lesson 39 CSSによる文字の装飾 [文章を読みやすくする]
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。