WEBデザインメソッド

改めて学ぶ、WEBビジュアルデザインの鉄則

本編内容は、「理論編」と「実践編」の２つで構成。

理論編の各項は見開きで完結した内容となっており、縦組みで読み進めやすいボリュームの解説に加えて、全編にわたって豊富な作例・実例・コードサンプルなどを表示。ビジュアルデザインの体系的な理解や復習をサポートします。

実践編は月刊DTPWORLDで連載された「WEB EXPRESSION」をもとに、大幅に加筆・修正。10の実例をもとにデザイン技法の「みどころ」をピックアップ。また、理論編での参照ポイントを明記することでデザインが持つ意味や機能性を確認することができます。

ビジュアルデザインの知識は豊だけどデジタルメディアのデザイン経験に乏しい人、デジタルメディアのデザインから経験をスタートした人、双方にとって日々の仕事に役立つ内容をお届けします。

豊富な図解と統一した誌面構成で理解が早い

縦組みで読み進めやすいボリュームの解説に加えて、全編にわたって豊富な作例・実例・コードサンプルなどを中央に掲載。左上にはそのページで取り上げるKEY POINTを掲載しており、伝わる美しいWEBデザインのための理論を素早く理解することが可能です。

理論編の内容を実践編で再確認

理論編（左図）の本文は縦組ですっきりと読みやすく構成し、図版と連動するポイントを黄色くマークしています。一方の実践編（右図）では、グレー地に豊富な図版を交えて理論の実践例を解説しています。

目次

理論編

Chapter 1

はじめに

1　インタラクションデザインについて

• 1-1　デザインの系譜とインタラクションデザインの位置づけ
• 1-2　インタラクションデザインを構成する表現形式
• 1-3　ウェブの中のインタラクションデザイン

2　デジタルメディアと紙の違い

• 2-1　利用対象の違い
• 2-2　情報整理方法の違い
• 2-3　使い勝手の違い

3　コンテンツの種類

• 3-1　リソースとツール
• 3-2　実装技術／HTML
• 3-3　RIA型コンテンツ
• 3-4　標準的なインタラクティブコンテンツ
• 3-5　コンテンツの閲覧および実行環境の種類

Chapter 2

カラーリング

1　デジタル環境における色

• 1-1　カラーモデル
• 1-2　カラースペース
• 1-3　ウェブカラー

2　カラースキーム

• 2-1　色の三属性
• 2-2　類似色系
• 2-3　色相差系

3　色の効果

• 3-1　対比効果
• 3-2　寒色と暖色の効果
• 3-3　ティントの効果
• 3-4　シェードの効果

4　色と質感

• 4-1　グラデーション
• 4-2　グラフィックパターン
• 4-3　立体表現
• 4-4　透過表現

5　アクセシビリティと色

• 5-1　色と視認性
• 5-2　色弱者への配慮／ダイアグラム
• 5-3　インターフェースのカラーアクセシビリティ

Chapter 3

テキスト表現

1　テキストの機能

• 1-1　機械向けの機能
• 1-2　人間向けの機能

2　タイプ

• 2-1　タイポグラフィとは
• 2-2　セリフ体
• 2-3　サンセリフ体
• 2-4　フォントとプロポーション
• 2-5　記号

3　ページと段落

• 3-1　本文組
• 3-2　可変レイアウトと段落の最適化
• 3-3　見出しの装飾
• 3-4　文字と単位

4　書式と用途

• 4-1　強調
• 4-2　引用
• 4-3　箇条書き／定義リストのスタイル
• 4-4　リンクテキスト

Chapter 4

レイアウト

1　制作フローのなかのレイアウト

• 1-1　情報量の決定
• 1-2　情報アーキテクチャ
• 1-3　ワイヤーフレーム

2　画面設計

• 2-1　部位と用途
• 2-2　ターゲットディスプレーとファーストビュー
• 2-3　グリッドシステム
• 2-4　レイアウトパターン（1）ポータル
• 2-5　レイアウトパターン（2）静的なウェブページ

3　レイアウトで情報の重要度を示す

• 3-1　レイアウトと注目度
• 3-2　部分の強調（1）レイアウトに対する工夫
• 3-3　部分の強調（2）色に対する工夫

4　レイアウトの環境とプロポーション

• 4-1　ディスプレー
• 4-2　解像度
• 4-3　プロポーション

Chapter 5

パーツのデザイン

1　ナビゲーション

• 1-1　垂直型のナビゲーション
• 1-2　並列型のナビゲーション
• 1-3　動きのあるナビゲーション（1）
• 1-4　動きのあるナビゲーション（2）

2　アイコン

• 2-1　アイコン用グラフィック作成の基本
• 2-2　アイコン用ピクトグラム
• 2-3　角度のついたアイコン

3　デジタルイメージの取り扱い

• 3-1　イメージの種類
• 3-2　イメージの合成
• 3-3　写真画像の補正
• 3-4　トリミング
• 3-5　イラスト素材の取り扱い
• 3-6　イメージの軽量化

4　インフォメーションデザイン

• 4-1　数量を図で表現する
• 4-2　関係を図で表現する
• 4-3　手続きを図で表現する

5　モーション

• 5-1　モーションの種類
• 5-2　モーションと意味
• 5-3　モーション作成技術

6　フォーム

• 6-1　検索ボックス
• 6-2　基本的な入力フォーム
• 6-3　アプリケーションライクな入力フォーム

7　ボックスデザイン

• 7-1　罫線の使い方
• 7-2　ガジェット
• 7-3　テーブル
• 7-4　インタラクティブなボックス（1）タブインターフェース
• 7-5　インタラクティブなボックス（2）リサイズやムーブ

8　フッター

• 8-1　シンプルなフッター
• 8-2　情報量の多いフッター

Chapter 6

各種デバイスに必要なデザイン上の配慮

1　他のデバイス

• 1-1　スマートフォン
• 1-2　テレビ画面

2　印刷向けレイアウト

• 2-1　ウェブページ向け印刷用スタイルのレイアウト

実践編

• Lesson 1　文字表現に凝る（モリサワ）
• Lesson 2　わかりやすさを追求（デジパ）
• Lesson 3　コンセプトを形にする方法（面白法人カヤック）
• Lesson 4　構造設計で生み出す美しさ（西村あさひ法律事務所）
• Lesson 5　サービスを提供する場所（タグル住まい）
• Lesson 6　使いやすさを追求する（アンカーテクノロジー）
• Lesson 7　グラフィックの処理を極める（千總）
• Lesson 8　情報量を絞ってインパクトを強める（モリサワ「FONTPARK 2.0」）
• Lesson 9　モーションに込めたブランド力（ISSEY MIYAKE INC.）
• Lesson 10　作品を見やすくする“面”と罫線のデザイン（Fontgrafie Brigida Gonz醇@lez）

お詫びと訂正

読者の皆様、ならびに関係者の皆様に深くお詫び申し上げるとともに、この場で訂正させていただきます。