色見本のG&E
会社概要 個人情報について お買い物ガイド マイページ カートを見る
午後4時迄のご注文「即日発送」  6,480円以上で「送料無料」
ホーム カラーチャート DICカラーガイド PANTONE 素材集CD-ROM 印刷専門書籍 デザイン材料
Loading
色見本のG&E > 印刷専門書籍 > ワークスコーポレーション > WEBデザインメソッド

WEBデザインメソッド

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

WEBデザインメソッド

判型:B5変型 / 総ページ数:248 / 発売日:2009年8月3日 / ISBN:978-4-86267-064-9 / 著者:矢野りん
販売価格2,592円

FAXでのご注文 お電話でのご注文 モールでのご注文 Webでのご注文
発注書PDF 03-3478-6161
個数

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

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

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

実践編は月刊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を採用したアプリケーションの開発が可能です。

通信販売におけるお買い物ガイド

お買い物ガイド

Copyright (C) G&E Corporation. All Rights Reserved.