MdNCORPORATION

WEBデザイン不朽の表現

WEBデザイン不朽の表現

web creators編集部 編
定価 1,980円
(本体 1,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2010-01-18
仕様 A4変型判/144pP
ISBN 978-4-8443-6095-7
ユーザーにとっての「使いやすさ」、「わかりやすさ」を念頭に置いたビジュアル要素のつくり方を盛り込みつつ、Webデザイナーが求める新たなデザインやビジュアルをつくり込むための最新手法が書かれた特集記事を4つのストーリーにしてまとめました。Web制作の基本知識を身に付けたい初心者はもちろん、ステップアップを目指す中級者にもオススメの本です。

目次

【WEBデザイン不朽の表現-すべてを極める最新手法】目次
----------------------------------------
CHAPTER1 「カッコいいWEBをつくる30の条件」
----------------------------------------


01 万能色「黒」を使う
02 いちばん印象を残す要素を決める
03 テクスチャで存在感ではなく質感を出す
04 フォントファミリーは3種類までにする
05 ルールを破るためにルールをつくる
06 色に深みを与える
07 メニューの文字は画像にする
08 モノトーンのグラフィックを扱う
09 文字のアキ・ツメは手動で行う
10 白地や余白をコントロールする
11 メニューの動きをスムーズにする
12 文字サイズかウエイトの一方に変化をつける
13 グラフィックのテイストを生かしきる
14 小さな「差」を使い分ける
15 極限まで情報を絞り込む
16 アクセントカラーを効果的に入れる
17 一定の目線に合わせて奥行きをつくり込む
18 直線と曲線を使いこなす
19 ロゴをデザインに生かす
20 センスのある書体を選ぶ
21 派手さを抑えた上品な「赤」を使う
22 縦書きや縦組みで文字を読ませる
23 写真のカット、トリミング、配置を生かす
24 ダイナミックな広がりや開放感を演出する
25 欧文フォントを使ってメリハリを出す
26 同系色を生かして配色する
27 生活感を感じさせず非日常を演出する
28 動きをシャープに表現する
29 上品な透明感を取り入れる
30 ストーリー性のある仕掛けを用意する


------------------------------------------
CHAPTER2 「印象どおりのWEBデザインをつくる」
------------------------------------------


かわいい
やさしい
クール
ゴージャス
ロマンチック
シック
上品
神秘的
怖い
にぎやか
お茶目
楽しい
リラックス
コミック
子ども
女性的
清潔
信頼
健康
エコ
ナチュラル
洗練
インダストリアル
ストリート
退廃的
パンク
デジタル
アナログ
モダン
伝統的
レトロ
中華風
洋風
和風
アート
無機質
シャープ
シンプル


------------------------------------------
CHAPTER3 「WEBパーツ装飾デザインテクニック」
------------------------------------------


01 マウスオーバーでズームするサムネイル
02 アナログ感のあるちぎったテープのデザイン
03 リンク先をいイメージしやすいアイコン
04 グラデーション効果の見出しテキスト
05 バックグラウンドに溶け込ませた背景画像
06 メッシュ処理を施して透かせたボタン
07 ページ全体が縁とられた独特のページレイアウト
08 画像を使用しない汎用性の高いタイポグラフィー
09 カラフルでポップなレインボーのドット背景画像
10 草模様のフレームのような写真のデザイン
11 すっきりまとめた長い英文の見出し
12 スポットライト効果で演出するロゴ
13 見栄えのよいパンくずリスト
14 区切り目をあいまいにした特徴的なレイアウト
15 カスタムシェイプでつくる複雑な模様の背景画像
16 画像で飾るフォームのパーツデザイン
17 見た目と使いやすさを両立させたページネーション
18 傾けて配置するデザインパーツ
19 ウインドウサイズに応じてサイズが変動する画像
20 シールラベルのような記事の日付デザイン
21 はみ出し+縦書き見出しで余韻のあるレイアウト
22 テキストの可読性を考慮した迫力のある背景画像
23 ポスターのような古い紙のテクスチャ
24 ページに広がり感をもたせる背景画像
25 背景をぼかして一部分を浮き立たせた画像
26 マウスオーバーで飛び出すナビゲーション
27 インスタント写真風のにぎやかなサムネール
28 透かしを入れたような表現の背景画像
29 紙がめくれたような目を引くナビゲーション
30 背景画像でつくる角丸のフォーム
31 スタイリッシュなサムネール画像のフレーム
32 ペンツールを使って描く抽象的な線画
33 マウスオーバーで反転する見出しテキスト
34 イメージ画像の上に透過PNGを重ねた表現
35 テキストがシャープに飛び出す別ウインドウ
36 スポットライトが当たったような背景画像
37 陰影のあるゴージャスなサーチボックスのデザイン
38 ページに彩りを加える画像の固定配置
39 柔らかな印象を与えふわっと広がるメニューバー
40 アナログ感のある背景や枠のサムネール
41 エリアを重ねたような立体感のあるレイアウト
42 グリッドシステムを使ったマルチカラムレイアウト
43 振動させてダイナミックな動きを見せるブラウザ表現
44 視覚表現を高める斜めのナビゲーション


-----------------------------------------
CHAPTER4 「魅せるWEBデザインを生む4大要素」
-----------------------------------------


introduction デザインの質を左右する4大要素

01 [立体感]
  画像やアイコンに影をつけ立体感を出す
  ボタンやバナーなどへグラデーションを施す
  背景など広い範囲へグラデーションをかける
  デザインパーツにハイライトを入れてツヤを与える

02 [質感]
  テクスチャを使って印象をつくりあげる
  パターンを使ってWebサイトを装飾する
  デザインに印象的な模様を取り入れる
  ツヤorマット2大質感を制する
  押せそうな簿店でユーザーをクリックに誘導する

03 [バランス]
  ページ内のコンテンツの比率を考える
  色と色のバランスを考慮してWebデザインを行う
  ロゴやイラストの配置を工夫してアクセントにする
  画像と文字でバランスのとれたよい関係をつくる
  バランスをとって文字や文章を並べる

04 [イメージ表現]
  必要な写真のサイズを見極めてトリミングする
  自分で撮影した画像のクオリティを向上させる
  与えられた写真を最大限に活用するために加工する
  サイトのテイストに合わせて写真を加工する

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊