webディレクション概論予告編
こんにちは。
最近一言がおもんないでしょ？私もそう思うもん。
そういえば、白猫プロジェクトにはまりました。誰かやってない？相互フォローしない？え？しようや？？？
あとなんとなくtwitterのアカウントも乗せておきますね。鍵アカなんですけどね。→@BB_loathe
さて、前回のカラーコーディネートから続きまして、しばらくは座学でございます。
少し前にした、webマーケティングの続きって思ってもらえると好きかも知れない。
webディレクターの話。
ここから数回は、
webディレクターとは何か？
みたいな話をします。
正直私もあんまりわかってないですし、私は現在フロントエンドエンジニアを目指しているところですのですが、
関係ないかといえばそうでもないみたい
ちなみに次回よりwebディレクション概論を数回書きますが、
その後はweb解析についてがしばらく続きますので、お楽しみに。
カラーコーディネート概論⑥
ついに６回目ｗｗ
今回は色彩におけるユニバーサルデザインについて考えていきます。
色覚特性と視覚変化
カラーユニバーサルデザイン
視力の低下や、生まれつき色の判別しづらい人もいます。
もちろん、人によって色の見え方もまちまち。
面白いサイトを見つけました。
私は灰色と水色に見えたな、、、？
このように、十人十色の色がありますので、すべての人にわかりやすいサイトを製作するために、
見やすいサイト、色使いをしなければなりません。
色覚特性には三種類あります。なんか、なんとかいう細胞があるないで違うらしい。
でも、色相は人によって違っても、コントラスト、明度の違いはわかります。
ここに重点をおいて、構成していきましょう。
加齢によっても色覚に変化があります。
少し黄色いフィルターがかかったような感じに見えるようになるらしい。
高齢者向けのサイトや製品を作る際にも、
文字を大きくするだけでなく、コントラストを少し強めに。
あまり強すぎるとまぶしくなりやすいらしいので、控えめにあげておくことが大事なんだってー！
PCのモニタではコントラストを下げられることはできても、あげることはできないらしい、、、
すべてのサイトにおいて、少しコントラストは強めがいいのかしら。
東京メトロに学ぶユニバーサルデザイン
タイトルなんかいい感じに決まった（ドヤ顔）
メトロといえば、この記号。
何回見てもかわいいと思います。本当に。
これって昔、本当は円の中のアルファベットはなかったらしいです。
銀座線なら、オレンジ色の円のみで、Gという記号はなかった。
でもこれだと、ご高齢の方や、色の判別が苦手な人は、わかりづらかったみたいなんですよ。
だから、円の中に路線名が入ったってことです。
ほんの一例ですが、これもユニバーサルデザインのひとつ。
デザインと一口に言っても、いろいろな配慮や考えがあって、成り立つものなんですね。
自由な発想と正確な技術と思いやり、この三つは完璧にできるデザイナーになりたい！！
カラーコーディネート概論⑤
なんかもう一言のネタがそろそろない
マジで ない
配色の基本的な考え方
同系色の組み合わせ
同じ色相同士のグラデーションで配色すると、本当にすっきりとまとまります。
これでもやっぱり、できるだけ３色以内にまとめるのがいいのかなーと。
実は昔、アパレルをやっておりまして、色についてはコーデにもかなり共通するところがあるなと思います。
コーデが苦手な方、ここを少し意識して組んでみてください。
でも同じ青系でも、極端に違う青だとやっぱり難しいので、注意。
たとえば、青→紺、明るい水色
類似色同士の組み合わせ
たとえば、
ライトピンクとライトパープル
クリーム色とコーヒーブラウン
マスタードイエローとオリーブグリーン
お互いの色の中にお互いの色の要素が入っています。
似たような色で、決定的に何かひとつの要素が違う色は相性がいいのです。
色相環でいうと隣同士のところ。
たとえば、青→緑、紫
対照色の組み合わせ
色相環の反対同士の組み合わせです。
補色同士。
赤と緑、
黄色と紺色、
橙と青
など。
一見派手ですが、ほかに足す色を考えればかなりいい感じにまとまります。
クリスマスカラーなんかは、この補色同士の関係です。
たとえば、青→オレンジ。
色の面積による印象の違い
同じ配色でも、面積比によってかなり印象は変わります。
メインカラーに白を、アクセントカラーに赤を持ってきていても、
アクセントカラーがメインカラーよりも多くなってしまうと、本当にしゃーしくなります。（うるさくなります）
情報量の多いサイトの配色なんかは特に注意しましょう。
情報の不明瞭さを色でわかりやすくするところもwebデザインのうちなんですね。ユーザビリティ。
可読性をあげることや、信頼性のイメージが色を使うこと、似たような内容のコンテンツは同系色でまとめる、これが基本中の基本らしい。
また、画像を大きく使うサイト（アパレルやコスメ）は、画像を引き立たせるためにテーマカラーを無彩色にし、アクセントカラーもブランドをイメージさせるものにしていたり。
デザインって、レイアウトだけじゃなくて、色使いも考えることが大切なんです。
カラーコーディネート概論④
４回目ですね～。考えること多いな。
普段何気なく使っていた色にも、たくさんの意味がありました。
今回は、色相と色のイメージについてです。
色彩でできること
これまででやってきたことを簡単にまとめました。
○色のイメージを伝える、記憶させる
○メリハリをつける
○文章を読みやすくする
○ボタンへの誘導
○重要な情報を目立たせる
○情報を分離する
普段の生活やwebの世界において、色がどういった意味を持つのか簡単に書いてきました。
色のイメージ
今回は、色のイメージについてです。
もちろん個人差はありますが、人の七割は色について同じイメージを持つといいます。
赤：暑い、エネルギッシュ、情熱的、力強い
茶：重厚な、クラシック、紳士的、本格的、渋い
黄：陽気、楽しい、にぎやか、はつらつ
緑：新鮮、リフレッシュ、健康的、平和、落ち着いた
青：沈静、涼しげ、知的、クール
紫：高貴、優雅、気高い、セクシー
橙：元気、陽気、華やか、活動的
白：清潔、純粋、クリア、機械的
黒：高級、重厚、モダン、フォーマル
灰：大人の、都会的な、洒落た、バランスのとれた
茶色ないのほんとにむかつく
大体の人がこんなイメージですかね、簡単に書き出してみました。
でも色にはいいイメージだけでなく、マイナスのイメージもあると思います。
これも簡単に書き出してみます。
赤：幼稚、下品、過激、危険
茶：古い、地味、目立たない
黄：軽薄、未熟
緑：青臭い、おとなしい
青：冷淡、消極的
紫：悲哀、秘密、下品
橙：安っぽい、大衆的
白：空虚、虚しい、軽薄
黒：陰気、不吉、不機嫌
灰：控えめ、平凡、曖昧
良きも悪きもあるのです。
デザインにおける配色のバランス
○たくさんの色を使いすぎない
コーディネートと同じ、３色以内にまとめるのがキーだと思っています。
○テーマカラーを決める
サイトに応じて、どんなイメージを持たせたいのかをあらかじめ決めておきましょう。
テーマカラーで、大体のイメージを持たせます。最後までぶれないことが大事。
その後、ベースカラー70％、サブカラー25％、アクセントカラー5％を決めます。
割合はあくまでも理想です。
テーマカラーがそのままベースカラーになるのが一般的かも。
テーマカラーは高彩度色はお勧めしません。うるさくなる。
高彩度色はアクセントカラーくらいにしておくのがよき。
なので、できるだけ少ない面積のアクセントカラーで、インパクトを与えられるような配慮も大切。
実はこのアクセントカラーがユーザーのイメージに直結するんじゃないかと考えています。
ターゲティングも大切です。
男性向けサイトがまっピンクやパステルカラーだったら、少しイメージと違うといわれても仕方ないかもしれませんし、、、
ターゲットにもよりますが、色のイメージが大切なのです。
カラーコーディネート概論③
次は心理的効果について。
街中やwebにおいての色の価値について考えます。
色の心理的効果
暖色と寒色
赤やオレンジ、黄色などが暖色。温かみを感じられる色。
反対に、青系の冷たそうなのが寒色。サーモグラフィーとかみるとすぐわかりそう。
緑や紫はどっちにも属さない、中性色といいます。
進出色と後退色
暖色（明るい色）は、飛び出して見える。→長波長
寒色（暗い色）は、奥に引っ込んで見える。→短波長
これは色の波長が関係しているらしい。学生時代にスペクトルとか習ったけど、なんか関係ありそう。
膨張色と収縮色
早口言葉かよ
キーポイントは明度です。
最も大きく見える色は白、
反対に最も小さく見える色は黒。
女の子の洋服選びでも、気にしてる人多いですよね。
色使いがうまい人だと、上手に明度とか彩度とか気にして体型カバーしてそう、、、
余談ですが、碁石はこういった理由で0.3ミリ白い碁石のほうが小さめに作られています。
やわらかい色とかたい色
明度と彩度が関係します。
明度が高く、暖色系の色はやわらかい印象を与えます。
→ペールトーン、ソフトトーン、ライトトーン
反対に明度が低く、寒色系の色は堅い印象を与えます。
→ダークトーン、ダークグレイッシュトーン
軽い色と重い色
軽重感（けいちょうかん）というらしい。
明度が高いと軽く、明度が低いと重く見える。
webページの背景は白が多い。白よりも重い色がヘッダーに行きがちなので、目線を集めることにつながる。
興奮色と沈静色
色相と彩度が関係してきます。
興奮色は彩度の高い暖色系の色
バファリンのパッケージが真っ赤だったらなんかいやじゃないですか、そういうことです。
反対に沈静色は彩度の低い寒色系の色
松岡修造のテーマカラーが真っ青だったら、、、それはそれでちょっとありかもしれない
カラーコーディネート概論②
まだまだ続くカラーコーディネート概論！
配色の基本的な技法
アクセントカラー
少しの面積でも十分にインパクトを与え、ワンポイントとして使用できる色。
まとまりすぎてしまった配色に焦点を与えられる。
これがあると全体の印象が一気に強くなります。
色相、トーンが対照的で、特に明度差のある高彩度色が使われがち。
対象のどこに入れても良いです。
セパレーション
配色が強烈過ぎて見苦しいときや、逆に配色がぼけて見えるときに,
境界部分に別の色を加えることで、調和を得る方法。
ほかの色を引き立てるための色という意味合いなので、アクセントカラーとは違うらしい。あくまでも、脇役。
明度差のある無彩色や、低彩度の有彩色がお勧め。
グラデーション
段階的に、リズミカルに色の諧調を変化させること。
多色配列と呼ばれます。
色相のグラデーション
トーンのグラデーション
明度、彩度のグラデーション
いろいろな種類があるので、使いたい色に応じて使い分けていきましょう。
混色とweb出力
ＲＧＢ→加法混色
レッド、グリーン、ブルー
ＰＣモニタでは加法なので、混ぜれば混ぜるほど明るくなっていく
ＣＭＹＫ→減法混色
シアン、マゼンタ、イエロー
Ｋは黒のＫ
印刷では黒が準備できないので黒は別になるので、
インクでも黒だけは別で用意される
ｗｅｂセーフカラー：ＯＳやコンピューターなど環境の違いによらず、216色でブラウザの表示を一定にすること。古いモニターとかだと、色の誤差が出がちらしい
身の回りにおける色使い
視認性
注意を向けて対象を探すときの発見しやすさを言います。
看板とか注意喚起とか
周りとの明度差が重要な要素となります。
可読性
文字、数字の読みやすさ、対象の理解しやすさ
背景と文字の明度差がポイントです。
誘目性
注意を向けていない対象の発見されやすさ
有彩色かつ高明度
道路標識なんかがそうです。
識別性
複数対象の区別と認識のしやすさ
メトロの路線図とか！
関係ないけどメトロの路線クイズに強くなってきました。だいぶ覚えてきた。
さて、あと４，５回位は色の勉強かな。
カラーコーディネート概論
フォトショップでバナー作成をして、プレゼンまでしました。
後日、その様子をまたお伝えしますね。
お久しぶりです。
ミサイルはそろそろいい加減にしてほしい。
今日はカラーコーディネートについての記事をいくつか、、、
ふとしたときに役に立つかも知れないので、見てってね。
無彩色と有彩色
無彩色
黒や白、またはその中間におけるグレーなど、色味のないグループです。
このグループは基本的に、明度のみで調整していきます。
有彩色
その他赤や黄色、青、緑など、虹の７色なんかのことを言います。
この７色を円形にしてつなげて、24色をグラデーションのようにしたものを色相環といい、
色相環における正反対の位置にある色をお互いの補色といいます。
対角線上的な、一番遠い位置にある色の関係のことです。
色の３属性
色相：色味の性質、色合い
明度：色の明るさ
彩度：色の鮮やかさ
明度について
高明度
→白から始まり、ライトグレイと呼ばれる明るいグレーまで
中明度
→ミディアムグレイと呼ばれる、中間的なグレー
低明度
→ダークグレイと呼ばれる暗いグレーから、黒まで
無彩色を例に挙げたけど、無彩色はもともと明度でしか判断できないらしいので、
モノトーンは明度で調整しましょう。
明度と彩度の関係
正直文面だけで色の勉強とか無理がありすぎるｗ
トーンとは、色の調子のことを指します。
低彩度のトーン
ペールトーン（パステルカラーっぽい）
低彩度の中のトーンで一番高明度
女性的、かわいい、弱い、あっさりした、若々しい、やさしい、薄い、淡い
ライトグレイッシュトーン
高～中明度
明るい灰味の、落ち着いた、渋い
中～低明度
灰味の、にごった、地味な
ダークグレイッシュトーン
暗い灰味の、陰気、重い、堅い、男性的
中彩度のトーン
配色の基本的な技法
ライトトーン
高明度
浅い、澄んだ、子供っぽい、さわやかな、楽しい
ソフトトーン
高～中明度
やわらかい、穏やかな、ぼんやりとした
ダルトーン
中～低明度
鈍い、くすんだ、中間色の代表
ダークトーン
低明度
暗い、大人っぽい、丈夫な、円熟した
高彩度のトーン
ブライトトーン
高明度
明るい、健康的な
ストロングトーン
中明度
強い
ディープトーン
低明度
濃い、深い、充実した、伝統的、和風な
ビビットトーン
高～低明度
さえた、鮮やかな、元気な
無彩色のトーンでも、高明度から低明度までイメージが異なります。
白：清潔、冷たい、新鮮な
灰：洒落た、スモーキーな、さびしい
黒：引き締まった、重厚な、おしゃれな、高級な、フォーマルな、シックな
さて、次回もカラーの話です。
