伝わるコンテンツのための理論と実践

WEBデザインメソッド

数々のデザイン解説書の刊行で知られる、矢野りんさん待望の最新作が登場。

ディレクションや設計が「WEBデザイン」の範疇で語られる中、なかなか網羅的な情報が提供されていなかった「ビジュアルデザイン」の鉄則を解説。紙とデジタルメディアの違いを前提に、書体や文字組・色彩・画面設計やレイアウト・パーツデザインと、グラフィックデザインにおいてはお馴染みの角度から、WEBデザイン、特にビジュアルデザインの鉄則を導きます。これまで、自身のデザインの「理由づけ」を見いだせなかった人にとっての拠りどころとなる書籍の登場です。

在庫あり

ご注文日から最短２営業日でお届けいたします。詳しくはこちら。この商品は送料無料にて、ワークスコーポレーションが直接販売、発送いたします。

この商品のお求め方法

定価	2,520円（税込）
判型	B5変型
総ページ数	248
発売日	2009年8月3日
ISBN	978-4-86267-064-9
著者	矢野りん

数量

※後からでも冊数変更できます

改めて学ぶ、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　コンテンツの閲覧および実行環境の種類

コラム　HTML5について

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　リンクテキスト

コラム　CSS3のフォントに関する変化

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　プロポーション

コラム　CSS3のマルチカラムレイアウト

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　情報量の多いフッター

コラムアルファチャンネルつきPNGファイルの書き出し

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）

画像をクリックすると拡大表示いたします。

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

●P.027
本文の末尾が切れておりました。正しくは下記の通りです。

もちろん、アプリケーションを部分的に取り入れたリソース系ウェブページも考えられます。

●P.035
本文の末尾が切れておりました。正しくは下記の通りです。

独自のUIを採用したアプリケーションの開発が可能です。

伝わるコンテンツのための理論と実践