Chapter1　Webに求められるデザインって何だろう？

Lesson1　目的から「良いWebデザイン」について考えよう

• ユーザビリティとアクセシビリティ

Lesson2　Web特有のレイアウトを知っておこう

• Webページの各部の呼び方
• ファーストビュー
• 既存のサイトからレイアウトを学ぶ

Lesson3　おさえておきたい色彩・配色の基礎

• 無彩色と有彩色
• 色相
• 明度
• 彩度
• HSB色空間とRGB色空間
• 16進数によるRGB色空間の表記
• どうすれば失敗なく色を選ぶことができるのか
• Photoshopのカラーピッカーで色を選ぶには
• トーンを統一する
• 失敗なく色の組み合わせを選ぶコツ
• HUE/360で配色する
• Webデザインで各色を使うときの注意

Lesson4　おさえておきたいフォントの基礎

• 明朝体
• ゴシック体
• セリフ体
• サンセリフ体

Chapter2　必要なアプリケーションと画像についての基礎知識

Lesson1　アプリケーションの特性をきちんと理解して使い分けよう

• Adobe Photoshop
• Adobe Illustrator
• Adobe Fireworks
• Adobe CSアプリケーションの機能比較

Lesson2　Webで表示される画像の特性を理解して使いわけよう

• JPEG
• GIF
• PNG
• SVG
• 画像のサイズや形式について

Chapter3　PhotoshopをWebデザインで効率的に使う方法

Lesson1　Webデザインが快適になる環境を設定しよう

• Windowsの環境設定
• Macの環境設定
• Photoshopのインストール
• Photoshopの設定ファイルの削除
• Photoshopの環境設定
• キーボードショートカットの設定

Lesson2　基本操作①　図形作成をマスターする

• 新規作成
• グリッドの表示
• カンバス周囲の色の変更
• 図形（シェイプ）の作成
• 長方形をドラッグで作成する
• 長方形をサイズ指定で作成する
• 図形（シェイプ）の移動
• 図形（シェイプ）の変形と移動

Exercise1　5つの正方形を作成し，移動する

Lesson3　基本操作②　文字作成をマスターする

• 文字の作成と調整
• 文字パネルを表示する
• 行送りを設定する

Exercise2　見やすい文字組み

Lesson4　基本操作③　レイヤー操作をマスターする

• レイヤーパネル

Exercise3　レイヤー作成の練習

• テキストの作成
• 角丸長方形の作成
• 角丸長方形の移動
• 角丸長方形の複製
• 角丸長方形のカラーを変更
• レイヤー名に「コピー」をつけないようにする

Exercise4　レイヤースタイルの練習

• レイヤースタイル
• ［レイヤースタイル］ダイアログの表示
• ［レイヤースタイル］ダイアログの操作
• レイヤースタイルの追加

Lesson5　基本操作④　整列／塗りつぶし／ズームイン・アウト

• 整列
• 塗りつぶし
• ズームインとズームアウト

Exercise5　写真を紙焼き風にして，めくれたようなドロップシャドウをつける

• 写真の保存と貼り付け
• 写真の枠のレイヤースタイル
• 丸く膨らんだように見える影
• 両端がめくれたように見える影

Exercise6　レイヤースタイルを使ったやさしいデザインのボタン

• ボタンの土台の作成
• ボタンの土台のグラデーション
• ボタンの土台のざらっとした質感
• ボタンの土台の上側の光沢
• ボタンの土台の境界線
• ボタンの土台の境界線の外側にある線
• ボタンの上のテキスト
• テキストのドロップシャドウ

Lesson6　レイヤースタイルを使いまわすには

• ①レイヤースタイルのコピー
• ②レイヤースタイルの複製
• ③新規スタイルとして登録

Chapter4　必要な場面でIllustratorを使えるようにしておこう

Lesson1　PhotoshopとIllustratorはどう使い分けるのか

Lesson2　Illustratorを快適に使うための設定

• Illustratorのインストール
• Illustratorの設定の初期化
• Illustratorの環境設定

Lesson3　Illustratorの基本操作を学習しよう

• 新規作成
• 長方形や楕円形の作成
• 整列パネル
• レイヤーパネル
• ペンツールの使い方
• オープンパスとクローズパス
• パスの型抜きと分割

Chapter5　バナーのデザインでひと通りのテクニックを身につけよう

Lesson1　広告バナーの色使いについて知っておこう

Exercise1　Photoshopのマスク機能を活用した広告バナーの制作

• 写真素材のダウンロード
• 写真に選択範囲を作成し，コピー
• バナー用のカンバスを作成
• グラデーションレイヤーの作成
• 女性の写真をペースト
• カーテン風のテクスチャを作成
• 文字の作成
• 文字と女性のレイヤースタイル
• 下の文字
• 動きをつける
• 枠線
• Web用に保存

Exercise2　Illustratorを活用したキャンペーンバナーの制作

• どのようなパーツをIllustratorで制作するか
• Illustratorで形状を作成する
• Photoshopでバナーの土台となるファイルを新規制作
• Illustratorで作成した形状をPhotoshopにペーストする
• テキストを制作する
• 仕上げ

Chapter6　標準的なワークフローに沿ってWebサイトをデザインしてみよう

Lesson1　一般的なWeb制作のワークフローを知っておこう

• ディレクター，デザイナー，コーダーの役割
• Web制作のワークフロー

Lesson2　ヒアリングをしてクライアント（お客様）の要望をまとめよう

• クライアントからの要望をまとめてリストにする

Lesson3　サイトの構造を考え，サイトマップを作る

Exercise1　デザインカンプ作成①　アイコン

• コーヒーのアイコンを制作する
• ドリンクのアイコンを制作する
• サンドイッチのアイコンを制作する

Exercise2　デザインカンプ作成②　ページの土台

• ガイドを制作する
• 背景を制作する
• 背景用のパターンを制作する

Exercise3　デザインカンプ作成③　ロゴ

• 吹き出し部分を制作する
• ロゴを貼り付ける

Exercise4　デザインカンプ作成④　サイドバー

• サイドバー，コンテンツ部分の背景を制作する
• アイコンをサイドバー部分に配置する
• サイドバーに文字を配置し，整える

Exercise5　デザインカンプ作成⑤　コンテンツ

• コンテンツ部分に画像を配置する
• コンテンツ部分に文字とシェイプを配置し，整える
• Illustratorで地図を制作する
• 地図をPhotoshopにペーストし，マスクする

Exercise6　デザインカンプ作成⑥　フッター

• フッターを制作する

Chapter7　Dreamweaverによるコーディングの基礎を学ぼう

Lesson1　これからはマークアップにHTML5を使っていこう

• HTMLとは
• HTML5の基本的なマークアップ
• HTML5の新しいタグ

Lesson2　装飾はCSSを使おう

• CSSとは

Lesson3　さまざまなブラウザの知識を身につけよう

• さまざまなブラウザ
• 古いブラウザのバグについて

Lesson4　Dreamweaverの基礎知識と環境設定

• Dreamweaverに関するご注意
• Dreamweaverのアップデート
• Dreamweaverの環境設定

Exercise1　HTMLでサイトの構造をマークアップする

• 新規サイトを作成する
• HTMLを修正する
• テキストを流し込む
• HTMLでページ全体の構造を定義する
• ヘッダー，フッター，ナビゲーションなどをそれぞれ囲む
• EVENT，ACCESSをそれぞれ囲む
• フッターの著作権表示を文字参照にする
• HTMLのインデントをそろえる
• タイトルを記述する

Exercise2　デザインカンプから画像を書き出す

• なぜ画像を書き出す必要があるのか
• デザインカンプを開き，別名保存する
• 背景を書き出す
• その他の画像をスライスする

Exercise3　CSSで装飾する

• リセットCSSについて
• CSSファイルをHTMLファイルにリンクする
• ページの背景に，ダミーの完成画像を置く
• ヘッダー・ロゴのコーディング
• コンテンツ背景のコーディング
• リード文のコーディング
• EVENT部分のコーディング
• ACCESS部分のコーディング
• メニュー部分のコーディング
• フッターのコーディング
• 仕上げ
• カフェサイトをアレンジする