Webデザインをはじめたい！ そう思っていきなりHTMLから勉強しはじめてもよいWebデザイナーにはなれません。まず、Webというメディアの特性に合った「デザイン」の方法をマスターしましょう。本書は、豊富なサンプルと実例を元にWebデザインの基礎テクニックを無理なく学べる入門者向け解説書です。はじめてWebデザインを学ぶ方、Webデザイナーをめざす学生さんなどにオススメ！
※この本の一部をご覧いただけます。
■sample064-065.pdf【PDFダウンロード】
■sample078-079.pdf【PDFダウンロード】
やさしいWebデザイン──ホームページ作成のためのデザイン初歩レッスン
目次
はじめに
●Part 1 Webデザインはじめの一歩
［Webデザインの傾向］
1-1 Webデザインのスタイル：スタイルの変遷とWebサイトのしくみ
1-2 スタイルの分化：ユーザーが育てたスタイル
［Webデザインの準備］
1-3 プランニングと制作ワークフロー：計画を立てる
1-4 ターゲットとテーマ：デザインのイメージを決める
1-5 情報・素材の整理：Webデザイン要素を用意する
［Webデザインの特徴］
1-6 サイト構造：ナビゲーションを決める
1-7 画面サイズと縦横比：用途に合わせた大きさと位置
1-8 レイアウトと色：レイアウトツールとWebセーフカラー
1-9 テキストと画像：CSS、画像フォーマット
Design Hint カラーバリエーションをつくろう
●Part 2 Webのデザイン要素
［背景と形の見え方］
2-1 形が心理に与える影響：形はどのように見えているか
2-2 地になるもの、図になるもの：背景として見えるもの、浮かび上がって見えるもの
2-3 目立つということ（1）：アクセント効果
2-4 目立つということ（2）：対比による目立ち度
2-5 なじむということ：背景に溶け込ませる、疲れない画面効果
［色の特性］
2-6 色相、明度、彩度：色の根元は光
2-7 印象の決め手となる背景色：白バック、黒バック
2-8 配色：どのような色を組み合わせるか
［タイトル・見出し・本文］
2-9 見出し：見出しは本文の顔
2-10 テキスト：Webサイトでのテキストの役目
2-11 タイトルロゴ：画面の主役となる画像としてのロゴ
［画像の見せ方と加工］
2-12 写真（1）：角版と切り抜き
2-13 写真（2）：さまざまなバリエーション
2-14 サムネール：画像見本の一覧表示
2-15 ボタン：見やすく、わかりやすく、押しやすく
2-16 ピクトグラム：意味の図案化
2-17 イラスト：ムードメーカー＆ナビゲーターとして
2-18 地図、表：機能性とデザイン性を保つ
［その他の表現要素］
2-19 アニメーション：人の目を引き付ける動的な表現
2-20 インタラクティブ：対話的なやりとり
Design Hint グラフィック素材のセットをつくろう
●Part 3 レイアウトとデザイン要素のコントロール
［レイアウトの基礎］
3-1 ターゲットの設定と様式、テイスト：デザインの方向性を決定する
3-2 ユーザーの趣向（1）：色、モチーフ
3-3 ユーザーの趣向（2）：ナビゲーション
3-4 メインモチーフとサブモチーフ：バランスをとる
3-5 余白：舞台としてのスペース
3-6 グループ化：情報のまとめ方
3-7 画面の区切り方：画面内に抑揚をつける
3-8 流れ：モチーフの方向性と視線の流れ
3-9 テイストの統一：デザイン要素の雰囲気、様式を合わせる
［画像のコントロール］
3-10 図版率：画像の占める面積
3-11 図版サイズの決定：図の大きさを大きく／小さくする
3-12 ジャンプ率：図の大小の差を大きく／小さくする
3-13 加工のレベル：階層に合わせて画像加工をレベルダウン／アップする
3-14 位置を吟味する（1）：ウインドウ内のページ全体の位置
3-15 位置を吟味する（2）：ページ内の要素の位置
［文字のコントロール］
3-16 文字の種類：さまざまなフォント（書体）
3-17 文字の量と大きさ：文字が多い／少ない、大きい／小さい
3-18 文字揃え：レイアウトコントロールの基本
3-19 文字のタイプ：ひらがな、カタカナ、漢字、英字
3-20 画像と文字の組み合わせ：相乗効果で目立たせ合う
［色のコントロール］
3-21 明度対比、彩度対比：色の明るさと鮮やかさ
3-22 色相対比、補色対比：色合い、反対の性質の色
3-23 トーン：明度と彩度による分類
3-24 寒暖対比：冷たい色、温かい色
3-25 色の組み合わせ効果：カラーイメージ
3-26 色の面積：色の分量と画面内での色のしぼり方
3-27 文字色：読みやすい文字の色とは
3-28 バリアフリー：色の感じ方、見え方を考慮する
Design Hint タイトルデザインを工夫しよう
●Part 4 ナビゲーションとデザインプラン
［ナビゲーションとページ構成］
4-1 ページの目的とレイアウト：優先すべきものは何か
4-2 ページの構成とナビゲーション：ページ内にどう導くか
4-3 入り口としてのトップページ：分岐と演出
4-4 画面分割とメニュー（1）：左右型
4-5 画面分割とメニュー（2）：上下型
4-6 画面分割とメニュー（3）：複合型
4-7 ページの出口とは：リピーターを増やす工夫
［ナビゲーションの種類 ］
4-8 プルダウン型メニュー：オンマウス時に項目を一覧表示
4-9 サブウインドウ型メニュー：項目を別ウンドウに表示
4-10 点在型メニュー：画面にメニューを散りばめる
4-11 アニメーション型メニュー：メニュースペース内で動いて表示
［ 進行形のデザイン］
4-12 更新に備えたデザイン：常に成長するWeb
4-13 基点からの位置：サイト内で常に現在地を示す工夫
索引
