digital@design

グラフィック・映像・Web表現のためのコンピュータ基礎技法
デジタル@デザイン[サポートページ]
2003年03月31日公開


渡部隆志・由良泰人・有賀妙子 共著

株式会社秀和システム 発行(2002年)

■ はじめに
■ 目次
■ 図版ダウンロード


■ はじめに

 本書はコンピュータを使って印刷物やアニメーションやWebページを作る際、つまりデジタルデザインに必要となる基礎知識をまとめた本です。
 コンピュータを道具としてデジタルにデザイン作業をすすめる過程で、どうしても必要となる歴史、知識、技法、作法があります。これらは、ハードウェアやソフトウェアが変化しても変わることのないものです。本書は、このように陳腐化しない基本情報を提供します。実際の制作を行うためのソフトウェアや技術の解説書とは違います。それらと並行して読んでもらえればいいと思います。
 印刷物やアニメーションやWebページは、デザインを媒介に、コミュニケーション機能を発揮します。本書は、デジタルデザインの基礎知識を細切れの情報としてではなく、コミュニケーションするデザイン、つまりビジュアルコミュニケーションデザインの文脈の中で解説しています。
 本書の共著者である3人は1997年から2001年の間、ともに同じデザイン系教育機関で教えていました。グラフィックデザイン、映像、プログラミングと分野は違いますが、ビジュアルコミュニケーションデザインという視点から、それぞれにデザインというコミュニケーションのもの(作品)づくりを伝えてきました。
 そこで、学生たちに繰り返し語ってきた、これだけは知っておいてほしいことが、この本には詰まっています。単にコンピュータやアプリケーションの解説ではなく、デザイン制作に臨む基本姿勢を示すこと、それが本書「digital@design」の出発点です。
 デザイン分野の学校だけでなく、高校、大学の情報関係の科目の教科書、参考書、補助教材として使ってもらいたいと思います。また、ノンデザイナーためのデザイン参考書でもあります。
 学校の教材として使っていただく場合を想定して、本書中の画像データを提供していますので、ご活用ください。

Cover Image

■ 目次

↑ ページトップへ

Chapter0
序章

0.1 デザインとは何か
0.1.1 デザインという言葉
0.1.2 デザインの定義
0.1.3 視覚+情報伝達+設計
0.1.4 専門領域の分類
0.1.5 デザインを構成する要素
0.1.6 デザインとコンピュータ
0.1.7 コンピュータがデザインに与えた影響
0.1.8 コミュニケーションの重要性
0.1.9 デザインの本質へ


Chapter1
デザインの基本要素

1.1 点・線・面
1.1.1 点
1.1.2 線
1.1.3 面

1.2 色彩
1.2.1 色彩の知覚
1.2.2 色彩の性質
1.2.3 色彩の印象
1.2.4 デジタル環境下での色彩


Chapter2
グラフィックデザイン

2.1 文字―タイポグラフィ
2.1.1 文字の歴史的背景
2.1.2 タイポグラフィの基礎知識
2.1.3 デジタルフォント

2.2 構成
2.2.1 デザインのフィールドとしての画面空間
2.2.2 画面空間の分割と配置

2.3 DTP
2.3.1 DTPの定義
2.3.2 DTPのワークフロー


Chapter3
映像

3.1 映像
3.2 ビデオ

3.2.1 NTSC方式
3.2.2 カラーテレビの信号
3.2.3 映像端子の形状
3.2.4 ビデオテープへの記録
3.2.5 デスクトップビデオ
3.2.6 映像編集
3.2.7 コンピュータ画像とビデオ画像
3.2.8 映像のディスプレイ
3.2.9 ビデオカメラ

3.3 動画
3.3.1 映像の歴史
3.3.2 アニメーション
3.3.3 デジタルアニメーション
3.3.4 3Dグラフィックス

3.4 サウンド
3.4.1 エフェクト
3.4.2 サウンドのデジタル化
3.4.3 デジタルオーディオ
3.4.4 音声編集
3.4.5 シンセサイザー
3.4.6 コンピュータミュージック


Chapter4
Webページデザイン

4.1 デザインとユーザビリティ
4.1.1 Webというメディア
4.1.2 Webページのユーザビリティ
4.1.3 デザインの新規性

4.2 HTMLとデザイン
4.2.1 文書の構造と見ばえのデザイン
4.2.2 スタイルシート
4.2.3 Webページ作成ツール

4.3 目的と対象読者
4.3.1 目的とデザイン
4.3.2 対象読者の想定
4.3.3 読者の環境とコンテンツ

4.4 World Wide Web(WWW)のしくみ
4.4.1 起源
4.4.2 情報の所在
4.4.3 HTTPのしくみ
4.4.4 Webページと文字コード

4.5 サイトの構造とナビゲーション
4.5.1 情報のかたまり
4.5.2 情報の構造
4.5.3 ナビゲーションの骨格
4.5.4 読者に合わせたナビゲーション

4.6 適切なナビゲーションへの道
4.6.1 ナビゲーションへの道しるべ
4.6.2 トップ、前後ページへのリンク
4.6.3 ナビゲーション補助機能

4.7 ページデザインの一般的ガイドライン
4.7.1 一貫性
4.7.2 情報の位置
4.7.3 強調とバランス
4.7.4 背景色と文字の色
4.7.5 HTML文書のレイアウト

4.8 ページの大きさ
4.8.1 ページの長さ
4.8.2 ページの横幅
4.8.3 ページのデータ量

4.9 トップページ
4.9.1 トップページの役割
4.9.2 トップページのデザイン
4.9.3 スプラッシュページ

4.10 リンク
4.10.1 リンクの役割
4.10.2 リンクテキストのガイドライン
4.10.3 画像からのリンク
4.10.4 ナビゲーションのためのアイコン
4.10.5 イメージマップ/スライス画像

4.11 ブラウザでの色
4.11.1 ブラウザ非依存色(browser safe color)
4.11.2 ブラウザでの色表示

4.12 Webページ上の画像</span>
4.12.1 画像の役割
4.12.2 画像の解像度
4.12.3 画像の形式
4.12.4 画像ファイルの大きさ
4.12.5 画像のロードを待つ
4.12.6 画像の代替文字列
4.12.7 画像に続く要素の位置
4.12.8 空白の画像

4.13 GIF画像の制作
4.13.1 インデックスカラー画像への変換
4.13.2 透過GIF
4.13.3 アンチエイリアス処理
4.13.4 画像パターンとファイルサイズ

4.14 JPEG画像の制作
4.15 Webのためのスキャニングと画像処理

4.15.1 スキャニングする際の注意
4.15.2 画像の色補正
4.15.3 画像の縮小/拡大
4.15.4 印刷物のスキャン画像

4.16 装飾的要素
4.16.1 背景
4.16.2 横罫線
4.16.3 絶えず動くもの

4.17 テキスト
4.17.1 文字情報
4.17.2 結論と文字数
4.17.3 見出しと段落

4.18 Webページ上の文字
4.18.1 フォント/大きさなどの選択
4.18.2 画像の文字

4.19 テーブル
4.19.1 テーブルによる配置
4.19.2 スライス画像

4.20 動画・音声
4.20.1 動画の必要性
4.20.2 動画・音声とプラグイン
4.20.3 動画埋め込みのためのタグ
4.20.4 ダウンロードとストリーミング
4.20.5 GIFアニメーション

4.21 JavaScript
4.21.1 JavaScriptでできること
4.21.2 JavaScriptのオブジェクト
4.21.3 イベント処理
4.21.4 Webブラウザの識別
4.21.5 ダイナミックHTML

4.22 ユーザビリティの評価チェックリスト


■ 図版ダウンロード

↑ ページトップへ

 学校での授業や講習会で本書を使っておられ、本書の図版をプロジェクションしたいなど、デジタルデータが必要な方のために、図版データを提供しています。
 IllustratorやPhotoshopで制作したファイルも、gifファイルあるいはjpgファイルに変換していますので、本書に印刷された画像より、画質が落ちるものがありますが、その点ご了承ください。
 図版は個々にダウンロードするようにしています。もし、図版ファイル全体を一括してほしいという場合は、株式会社秀和システム サポートセンター(service@shuwasystem.co.jp)まで、ご相談ください。


図版ダウンロードページへ →


digital@design | Basic Computer Skills for The Expression in Graphic Design, Image and Web Design
by WATANABE, Takashi / YURA, Yasuto / ARIGA, Taeko
Shuwa System Co.,Ltd. 2002