ウェブ配色見本帳 実例で学ぶWebデザインの配色詳細目次 | デザインってオモシロイ -MdN Design Interactive-

ウェブ配色見本帳 実例で学ぶWebデザインの配色詳細目次

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて
contents

ウェブ配色見本帳
実例で学ぶWebデザインの配色



Part 1 配色の基礎知識


 色の三属性
 類似色相系カラースキーム
 色相差系カラースキーム
 シェードカラーとティントカラー

  column 色空間


Part2 イメージを喚起する配色


 暖かいイメージの暖色
 涼しいイメージの寒色
 元気で活気あるイメージの配色
 シックで落ち着きのある配色
 ポップで軽快なイメージの配色
 クールで都会的な配色
 ナチュラルで素朴な配色
 エレガントで高級感のある配色
 静謐な重厚感のある配色
 エレガントで華やかな配色
 セクシーで華のある配色
 キュートでガーリーな配色
 楽しくファンシーなイメージの配色
 ロマンチックなイメージの配色
 レトロでノスタルジックな配色
 青によるさわやかなイメージ
 清々しく安定感のある緑
 ヘルシーなイメージの配色

  column 三原色


Part 3 テーマと目的を持った配色


 赤ちゃん向けの配色
 子どもに好まれる配色
 若い女性向けのかわいい配色
 大人の女性向けの優雅な配色
 若い男性向けのクールな配色
 大人の男性向けの渋い配色
 四季をイメージさせる配色
 料理をおいしそうに見せる配色
 スイーツをおいしそうに見せる配色
 和の雰囲気を表現する配色
 国をイメージさせる配色
 エスニックなイメージの配色
 インパクトのある高彩度の配色
 やさしい対比でメリハリを生む配色
 明るく淡い暖色でやわらかさを
 明るい寒色で安らぎと知性を
 上品で繊細なエコロジー配色

  column HSB


Part 4 さまざまなキーカラーとその展開


 注目を集める赤
 黒の背景で統一感を
 雑多な情報を黒で落ち着かせる
 視認性の高い黒地に白文字
 黒い背景で高級感を演出
 白と黒によるスタイリッシュな配色
 無彩色にアクセントカラーを
 写真+1色でシンプルに
 地色に適した黄色
 強く目を引く黄と赤の配色
 視認性の高い黄色と黒
 自然の緑でナチュラルな演出
 緑がメインのポップな配色
 品よく洗練された緑の配色
 キーカラーの青に1色加えた配色

  column CSS3の色指定


Part 5 目を引く多色配色のデザイン


 カラフルな図でタイトルを強調
 多色使いで量や種類を表現
 多様な印象のカラフルなタイトル
 色を使って情報を分類する
 文字色でリンクや内容を表現
 リッチに見せる黒地の多色配色
 複数の色相でアクセントを作る
 圧迫感のない高明度の多色配色

  column コードで色を指定する方法


Part 6 さまざまな配色の工夫/strong>


 文字色でデザインテイストを強調
 文字色で清潔感を表現
 緑と相性の良い文字色
 さまざまな地色の工夫
 効果を上げる背景色
 黒い背景で引き立てる
 色の対比で強調する

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在