よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
浮世絵に学ぶ日本の伝統色と配色 | *LOVE IS DESIGN*
配色の参考になる色のランキングサイト COLOURlovers に、海外の名画のカラーパレットがありました。 Color Inspiration from the Masters of Painting そこで、世界の画家たちにも大きな影響を与えた、日本を代表する「浮世絵」からカラーパレットを作ってみました。 ■三世大谷鬼次の奴絵江戸兵衛（東洲斎写楽） ■鳳凰図屏風（葛飾北斎） ■江戸名所 浅草金龍山（歌川広重） ■ 亀戸梅屋舗（歌川広重） ゴッホが模写したことでも有名な絵 参考：印象派と浮世絵の意外な関係 ■春画（渓斎英泉）【オマケ】 ちょっぴりセクシーな配色？ 浮世絵とは、江戸時代に発達した版画絵で当時人気のあった歌舞伎役者や風景など、その時代の様々な風俗が描かれています。 「役者色」と呼ばれた人気歌舞伎役者が愛用した染物や色は、江戸時代の流行色で、役者の屋号や名前がそのまま色の名前に
ウノウラボ Unoh Labs: 色選びのコツ
こんにちは！ yamazakiです。 高度なプログラミング話だらけのこのブログには全く馴染まない話題でアレですが、今回は「色」について書いてみようと思います。 Webサイトを作っているとき、ちょっとした書類を作るとき、「どんな色を使おうかなぁ」というのは毎度結構迷うところです。今回はそんなときにもしかしたら少しは役に立つかもしれない、色選びのTipsです。 色の「トーン」を意識してみよう 色の基本、というと大抵どんな本を見ても「色相」「彩度」「明度」という三つのパラメータがまず出てきます。「色相」「彩度」「明度」というのは 色相…その色が「赤」なのか「青」なのか「緑」なのか、その色の「色味」 彩度…色の「あざやかさ」。 明度…色の「明るさ」。黒がもっとも暗く（明度が低く）、白がもっとも明るい（明度が高い）。 なのですが、この三つのパラメータをもとに色を考えていても、いまいち「どの色に
覚えておきたい配色のワザと便利なツール :: Love & Design ::
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相（しきそう：Hue） 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 （色相はつながりあって色相環という輪になります。） 彩度（さいど：Saturation：Chroma） 色の鮮やかさ、強弱の度合いのこと。 彩度が高い（鮮やか）⇔彩度が低い（鈍い） 明度（めいど：Value：Brightness） 色の明るさの度合いのこ
もうこれで迷わない！色に関するお役立ち資料まとめ | P O P * P O P
色って何かと迷いますよね。センスだけでできればいいのですが、なかなかそうもいかないもの。そこで色の理論から、色が心理に与える影響までを網羅した資料をご紹介。 以前ご紹介した「これで完璧！ロゴデザインのためのお役立ち資料まとめ」と同じシリーズですね。 色に迷ったときにかなり使えそうですよ。詳細は以下からどうぞ。 いろいろ網羅されているのですが、いくつか気になるトピックをピックアップ。 ↑ 色関係の使えるオンラインツールいろいろ。 ↑ デスクトップから使えるツールもいろいろ紹介されています。 ↑ 色が心理に与える影響について。大事ですよね。 念のため、全部のカテゴリーをあげておきましょう。 Color Basics （色の基本） Color Psychology & Meaning （色が心理に与える影響および色の意味） Color Science & Theory （色の理論） Color
相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
「色に情報を運ばせる」テクニック
昨日のエントリーで、プレゼンの資料において、「色に情報を運ばせる」ことについて簡単に触れたが、少し説明が不十分だったと思われるので、具体的な例をあげてもう少し分かりやすく説明しよう。 まずは下の図を見て欲しい。 ブログに関わる人たちをグループ化した図だが、グループが三階層に分かれることと、その数が上位層になるほど数が少なくなることを表現する、という目的はきちんと果たしている。 問題は色使いである。せっかくカラー画面を使ってプレゼンをするのだからと、色を着けたのだろうが、色分けそのものは何の役も果たしていない。「役目はないが、無駄ではなかろう」というのが通常の考え方だが、Tufteはそれを「情報量の無駄使い」と呼ぶ。彼ならば、こんな「色使い」を薦めるだろう。 上位層に行けば行くほどブログとのかかわりが「濃い」ことを色の濃淡で表している。つまり色情報がちゃんと役割を果たしているのだ。それに加え
困った時のカラーイメージ＿WEBデザイナーのすすめ
サイトのイメージを左右する配色決めに悩んだ事ありませんか？クライアントに企業のイメージカラーがある場合も、どういった配色をすればもっともイメージカラーを生かせるか・・・また、イメージカラーがない場合、サイトに対する「思い」や「イメージ」に近い色使いにするためには・・・？そんな時のちょっとしたヒントになれば嬉しく思います。
IDEO
We are a global design consultancy. We create impact through design. What We Have Done Lately Featured Projects Productos Cementeros Mexicanos : Service Concepts and Organizational Transformation : : : : : : : : : : Learn More In addition to traditional design work, we increasingly address environmental and social impact, health and wellness, communities, and branded experiences. See our latest NE
[ws] Color Scheme Generator 2
Brand New Version Available & Moved! The Color Scheme Designer application has been moved to its own domain: http://ColorSchemeDesigner.com Please update your bookmarks. Newest version: http://colorschemedesigner.com Previous version list: http://colorschemedesigner.com/previous Nová verze & Přesunuto! Aplikace Color Scheme Designer byla přesunuta na svou vlastní doménu: http://ColorSchemeDesigner
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カラーオンチなウェブデザイナーのお助けサイト : HotWeb Magazine
◆おいしいWeb配色◆
“色”でグッと引きつける！：NBonline(日経ビジネス オンライン)
caramel*vanilla - 色に関する便利ツールいろいろ
色の印象大事典
WEB COLOR 216
Color Slider - 配色/色見本
//// COLOURlovers :: loving colours since 1981