MdNの本

ウェブデザイン&配色の見本帳

ウェブデザイン&配色の見本帳

ウェブデザイン&配色の見本帳

ウェブデザインの現場で使える配色の実際とセオリーが学べる

坂本 邦夫 監修/フレア 編
B5判 / 160P
ISBN978-4-8443-6424-5 / 価格(本体2,500円+税)
2014年05月15日発売

本書は『ウェブデザイン&レイアウトの見本帳』に続く、ウェブの配色に特化した実例の見本帳です。掲載している項目のテーマは、季節感を感じさせる配色デザインや、イメージを喚起させる配色、文字や罫線などとの配色も関係、さらには集客に繋がる配色も紹介。例えば、ファミリー層がターゲットであれば、かわいいキャラクターとともに、少し淡い色使いや暖色系の配色で家族の暖かみを強調する。男性がメインの高級品のサイトでは、黒を基調にしつつ、金や銀などを使って豪華さを演出するなど、豊富な実例とともに解説しています。また、その実例ごとに配色チップも載せることで、配色の見本として参考にしやすいつくりになっています。なお、本書のはじめには色相や彩度、補色など、配色に関する基本的な話しも解説することで、ウェブに関する配色の本として充実した内容になっています。

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本
















目次

クリックすると開きます

【目次】
はじめに
目次
本書の見方

Part1 色の基本知識
色の基本・色の三属性  色相環をうまく使いこなす
 明度は情報の伝えやすさに大きく影響する
 彩度は偏りすぎず、中彩色が無難 配色のキーポイント  見えやすさの視認性と読みやすさの可読性
 目を引く誘目性と情報を区別する識別性 配色のイメージ  配色による心理的効果
 配色の面積と方法
【COLUMN】 001 同じ色が違って見える原因は?

Part2 配色の基本パターン
統一感のある配色とアクセント
同系色でまとめる配色
コンテンツが活きる配色
写真や文字を見やすくするための背景色
写真が映える余白を使った配色
見せたい部分をはっきりさせる配色
同一色を一貫して使った配色
【COLUMN】 002 色の見え方、感じ方の個人差

Part3 タイトルデザインと配色
メリハリのあるダイナミックな配色
ナチュラルな優しい感じの配色
色ベタで目立たせる配色
大胆な余白で目立たせる配色
グラデーションを使った配色
写真から抽出した色を使った配色
色の対比でインパクトを出した配色
ブランドカラーを利用した配色
【COLUMN】 003 サイトリニューアル時の注意点

Part4 本文デザインと配色
文字と色使い
導線を意識した配色
黒の活用で画面を締める
カラフルな帯で画面を分割する
飾りの要素で画面を賑やかに
小見出しにメリハリをつける
色のブロックで画面を分割する 「白」を使った余白の活用
大量のコンテンツをスッキリ見せる
本文テキストが多いときの配色
テキストリンクの色を考える
【COLUMN】 004 読みやすいコントラストとは

Part5 画像の見せ方と配色
写真を邪魔しない色使い
写真と色ブロックを対比させる
大量の写真を配置するときの配色
全面写真に載せる文字の配色
イラストに合わせた文字の配色
イラストに合わせた配色
【COLUMN】 005 「使いたい色」「使えない色」

Part6 色の持つイメージを利用したデザイン 赤のイメージを利用したデザイン 黒のイメージを利用したデザイン
黃のイメージを利用したデザイン
青のイメージを利用したデザイン
季節を感じさせるデザイン
テーマカラーを意識したデザイン
和のイメージを与えるデザイン
清涼感が演出されたデザイン
カラフルでポップなデザイン
モノトーンで粋なデザイン
エレガントで高級感のあるデザイン
優しく温かみのあるデザイン
シズル感のあるデザイン
エコ感を強調したデザイン
子どもをイメージしたデザイン 女性をイメージしたデザイン
男性をイメージしたデザイン
若者をイメージしたデザイン
幅広い年代に向けたデザイン
【COLUMN】 006 配色のチェックはページを遠くから見て

Part7 情報をわかりやすく見せる配色
年表と配色
Q&Aと配色
図解と配色
グラフ/表と配色
【COLUMN】 007 競合サイトの配色を研究する

Part8 小さい画面での配色
小さな画面を効果的に利用する配色
スクロールを前提とした色使い
ヘッダでキーカラーを強調する
色帯の見出しで視線を止める
押したくなるボタンの配色

Sample Index
Credit Index




関連記事があります

  • Webデザイン表現&技法の新・スタンダード デザインパーツ編

    web creators Webデザイン表現&技法の新・スタンダード デザインパーツ編

  • 1年生デザイナーの1週間/その96 ケネス・リューさん(KDDIウェブコミュニケーションズ)

    インタビュー 1年生デザイナーの1週間/その96 ケネス・リューさん(KDDIウェブコミュニケーションズ)

  • 1年生デザイナーの1週間/その97 稲留駿介さん(リブセンス)

    インタビュー 1年生デザイナーの1週間/その97 稲留駿介さん(リブセンス)