WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード - 久保清隆のブログ
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
FM 100 Hue Test
色の正確な認識に影響する要因はたくさんあります。テストの結果が毎回異なる場合は、下記の理由が考えられます。 照明：照明は色覚に大きく影響する要因の一つです。脳が認識する色は、照明色によって左右されていることをご存知でしたか？照明装置などを用いて、常に管理された光源下で色を判断するようにしましょう。 背景色の影響：人間の目が認識する色は、周囲の色に影響されます。この現象を同時対比と呼びます。色を判断する際、常にニュートラル色の環境で行ってください。 目の疲労：私たちの目は疲れやすく、物体を2、3秒以上眺めると目の化学物質が消耗され、間違ったカラー情報が脳に送信されてしまいます。色の目視評価を行う際は、再度観察する前に目を休めてください。 乏しい色の記憶力：どんな色でも、詳細を記憶するのは非常に難しいことです。わずかな色差を効果的に判断するには、サンプルが人の心を動かす程に印象的でなければいけ
Words & Colors - Cymbolism
Color is the ultimate tool a designer has at his or her disposal to communicate feeling and mood. Cymbolism is a tool that attempts to quantify the association between colors and words, making it simple for designers to choose the best colors for the desired emotional effect. See the Word jacobean adj : of or relating to James I or his reign or times; "Jacobean writers" n : any distinguished perso
The Meaning of Colour in Web Design
For most of us, a rainbow of colours envelopes our lives. Over 80% of visual information is related to colour.¹ What colours and combinations of colours stimulate people to be interested in different things? What colours make us feel pleasure or disapproval, hot or cold, to be attracted or repelled, our appetite stimulated or suppressed? Many reactions to colour are instinctual, universal and cros
Color Laboratory
<body> <div id="awareheader"> <span id="awbig"> <acronym title="Accessible Web Authoring Resources and Education" >aware.hwg.org:</acronym> </span> <span class="acronym"> <span class="acaps">a</span>ccessible <span class="acaps">w</span>eb <span class="acaps">a</span>uthoring <span class="acaps">r</span>esources and <span class="acaps">e</span>ducation center </span> </div> <div id="locbar"> <span
JavaScriptでカラーピッカー·mooRainbow MOONGIFT
色を選択する、いわゆるカラーピッカーにはいくつか種類がある。Windows標準（ペイント等）では縦縞に色が並べられたもので、Mac OSXであれば円形や横縞が並んだものになる。 その中で、クリエイターの方であれば一番使い慣れているのはAdobe Photoshopで採用されている形式かも知れない。それをWeb上で実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはmooRainbow、強力なJavaScriptカラーピッカーだ。 mooRainbowは非常にグラフィカルな色選択を可能にしており、マウスを動かすと選択されている色が変化したり、RB指定やHSB指定が可能になっている。 通常は隠れており、指定したIDに対してのアクションでカラーピッカーが表示される。ライブラリとして、同作者によるJavaScriptライブラリ、mootoolsを利用している。 選択されている色はテキス
配色管理用の CSS をモジュール化する - 我的春秋
今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。） （なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。） 配色管理モジュールの作成方法 色に関するスタイルをすべて、この配色管理モジュールに集約する。 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。 セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴） セレクタは、浅い階層の一般的なものを先に
写真から色のパターンを抽出するサービス - pic2color - sta la sta
http://www.pic2color.com/xindex.php 以前に写真の色からブログのカラースキームを生成 - pic2color - sta la staで紹介したサービス『pic2color』のベータ版が公開されていました。 私の記憶が確かならば、当初のデモでは写真の色をもとにブログのデザインを色々と変更していたように思いますが、今回ラウンチされたベータ版では写真で使用されている色のパターンを抽出する機能が実装されていました。 今後、ブログのテーマ変更みたいな機能が追加されるかどうかは分かりませんけど。 しかしこの機能だけでも十分楽しくて、手持ちの写真を使って色々と試してみました。 なかなか忠実に色をピックアップできているようですね。面白い。 生成されるパターンの色をクリックすれば色コードが参照できます。 さらに、『finetune>』ボタンをクリックするとGenoPalと
ダーク系配色のデザインを採用しているサイトいろいろ - GIGAZINE
背景色が黒色の場合、白の割合をどれぐらいにするか、そしてそれをどれぐらい効果的に表現しようとするか、つまり機能美として背景などの目立たないところにはハイライトを使わず、読ませたい部分にきっちり目の焦点を合わせるために使われているか、そういう点に気をつけるのがポイントだそうで。 というわけで、デザイン的にダーク系配色を使う場合に見ておいた方がいいサイトの例があるそうなので、見てみましょう。言うまでもありませんが、デザイン最優先で見がたくなっているものから、いわゆる機能性を優先しつつデザイン性まで確保しているものまで様々ですので、すべてがいいデザインというわけではありませんが、参考にはなるのではないかと。 30 Dark Designs You Should’ve Seen | Smashing Magazine デザイン的に一番機能美として優れているとされるのは一応、以下のサイト。目立たせた
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」:phpspot開発日誌
ColorJack: DHTML Color Picker ColorJack Plugin’s main advantages are it’s simplicity. To give you an idea, let’s compare it to a similar (more popular) product named “ColourMod”… the javascript alone is 475% more bloated than ColorJack’s code. 単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」。 prototype.js等の他ライブラリに依存しないので、単体で使えて軽いカラーピッカー用ライブラリとして使えそう。 関連エントリ
シニア向けウェブサイトの色 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
シニア層を対象にウェブサイトのユーザーテストをしていると、色使いによって見えない文字、見える文字が出てくる。 文字が小さすぎるともしくは行間が狭いと、それは壁の落書きのようなものであり、「最初から読む気がない」。 たとえば、その点について「○○とありましたが、そこについてはお気づきでしたか」と笑顔で言うと「あっらー、そんなこと書いてあったの?やっだー、こんな小さい文字、気づかないわよぉ」となる。 気難しい？男性の場合は「君は、こんな小さい文字、見せる気ないね」と逆切れされる。いやいや、私に怒られても。 しかし、文字の小ささをここで言うのではない。 読まれないのは文字の小ささもさることながら、全体的な配色もシニア層の「読みたい心」を誘うためにとても重要な項目である。 特に女性は。 ＜４６＞ 目の老化とともに青が黒にみえる？より引用 個人差はありますが、目の老化は４０歳ぐらいから始まるのが普通
Five Simple Steps to designing with colour : Journal : Mark Boulton
Posted on: October 19, 2006 In: Design, Simple Steps Comments closed It’s been ages since I’ve had a stab at a Simple Steps series. So far we’ve had Better Typography, Designing Grid Systems and Typesetting. This one has been kicking around for a while so I thought I’d just publish the first couple and see where we go from there (of course there will be five, I just haven’t written the last coupl
JavaScriptで使えるカラーピッカー作成ライブラリまとめ:phpspot開発日誌
Flashプレイヤーの検出とHTML埋め込みを簡単に行えるJavaScriptライブラリ... 次の記事 ≫：2006年プログラミング言語人気ランキングTOP20 JavaScriptで使えるカラーピッカー作成ライブラリまとめ。 フォームでHTMLの色情報を入力してもらう際に非常に便利なJavaScriptで出来たカラーピッカーライブラリ。 種類も多数あったので試用＆まとめてみました。 Yahoo! UI Library ダウンロード後、examples\slider\ 以下に存在 インクルードすべきファイルが多く、設置がやや面倒。 ポイントした位置にスライドアニメーションしてくれてちょっとカッコいい。 dhtmlgoodies Color picker Color picker Adv 設置は比較的簡単。表示される色が不規則に並んでいるのが少々気になる点。 script.aculo.us
WEBデザイン BLOG: 配色で分類表示できるCSSギャラリーサイトまとめ
WEBデザインでベースカラーを基にさまざまなWEBデザインパターンを参考にしておきたいものです。今回は、数あるCSSギャラリーサイトの中でカラーでWEBサイトを分類表示できるサイトを選んでまとめてみました。 以下のサイトの中を使えば、配色の参考になると思います。 今回は、mixi-Webデザインコレクションコミュニティーの中で「ベビーピンクな配色のwebサイトを探してます」というトピックがたてられた。 私は以下のような書き込みをしておいた。 こんなこともあり、改めて数あるCSSギャラリーサイトの中やベースカラーを基にWEBデザインパターンを探すことができるサイトをまとめることにしました。もしものときに素早く対応できるように。 配色で選べるCSSギャラリーサイトまとめ Netcocktail http://www.netcocktail.com/ Netcocktail | WEBサイトデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mooColorFinder - retrieve all website colors
ColorJack: Sphere (Color Theory Visualizer)
http://youmos.com/news/farbtastic.html
caramel*vanilla » 見ているサイトのカラーパレットを瞬時に作る方法
Color Palette Generator
