よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
Nitram+Nunca リアル・グラデーションの作法
写真を撮る機会は実に多くありますが、特に結婚写真は一生の記念になる大事な写真ですので、できるだけ良いものを残しておきたいものですね。 結婚前は何かと忙しくなりますが、疲れが残らないよう、写真撮影の前にはしっかり休息を取っておきたいですし、エステなども利用して、できるだけきれいな状態で撮影にのぞみたいものです。 そして、結婚写真は挙式当日に撮影されるカップルも多いですが、やはり慌しいこともあり、せっかくの写真も表情が硬くなってしまったという経験をお持ちの方もいらっしゃるのではないでしょうか。 結婚写真は最近は前撮りでゆとりを持って撮影される方も増えているようです。 メイクや着付けも時間をかけられますし、時間にも余裕がありますので、より自然な表情で撮影ができるのもメリットです。 そして、式当日とは違う衣装を選ぶことができるのも良いですね。 スタジオ撮影はもちろん、ロケーション撮影などで屋外での
もうこれで迷わない！色に関するお役立ち資料まとめ | P O P * P O P
色って何かと迷いますよね。センスだけでできればいいのですが、なかなかそうもいかないもの。そこで色の理論から、色が心理に与える影響までを網羅した資料をご紹介。 以前ご紹介した「これで完璧！ロゴデザインのためのお役立ち資料まとめ」と同じシリーズですね。 色に迷ったときにかなり使えそうですよ。詳細は以下からどうぞ。 いろいろ網羅されているのですが、いくつか気になるトピックをピックアップ。 ↑ 色関係の使えるオンラインツールいろいろ。 ↑ デスクトップから使えるツールもいろいろ紹介されています。 ↑ 色が心理に与える影響について。大事ですよね。 念のため、全部のカテゴリーをあげておきましょう。 Color Basics （色の基本） Color Psychology & Meaning （色が心理に与える影響および色の意味） Color Science & Theory （色の理論） Color
色で選べる Web デザインギャラリーまとめ
Web デザインを考えるとき、色彩のイメージはとても大切です。配色のヒントは Web 上だけではありませんが、配色に悩んだときに便利な、色で選べる Web デザインギャラリーをまとめてみました。 イメージに合った色の選び方や、レイアウトもとても参考になります。
相性の良い色を自動でピックアップしてくれる「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も生成可能
破綻しない色の組み合わせが簡単に作成できる「ColorJack: Sphere」 - GIGAZINE
色彩構成を決めるのはなかなか難しいものがありますが、この「ColorJack: Sphere」を使えば、色彩の理屈にぴったり合った感覚のみに頼らない正確な色彩構成が可能です。 詳細は以下の通り。 ColorJack: Sphere 例えばこの「Neutral」なら連続した色を簡単に選ぶことができます 「Analogous」ならもうちょっと間隔を開けて選択するので色彩に幅ができます 「Clash」は補色の関係を考えるのに使える 「Six-Tone」あたりは割と使いやすい 「Websafe」にするといわゆるセーフカラーのみで選択可能になります 元々の色の組み合わせ自体をスペクトラム風以外にもいろいろと変更可能で、カスタム設定すればこんなことも可能です
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
Windows Vistaの新色管理システム「WCS」とは
1月末にWindows Vistaが発売され、すでに1カ月以上が経過した。豊富な機能の追加が行なわれているにもかかわらず、基本的な部分での改善が感じられないという意見が多いが(筆者自身もそう評価している部分が少なくない)、いくつかの点では明確に改善されているところがある。 そのうちのひとつが、より優れたカラーマネージメントシステム「Windows Color System」(WCS)をはじめとする、カラーイメージング機能である。WCSはキヤノンのKyuanos(キュアノス)の一部を実装したものと言われているが、ほかにも変更点は多数ある。 Windowsのグラフィックシステムは、ICCプロファイルへの対応を行なった以外は、Windows 3.0の頃からさほど大幅な変更を受けていなかったが、Vistaでは大手術とも言える機能アップが図られており、それはディスプレイ表示、印刷、カラー管理など、さ
【レビュー】ColorJackがやってきた! - Firefox+JavaScript+Canvasでここまでできる!! (1) ColorJackとは | エンタープライズ | マイコミジャーナル
オンラインでカラーテーマを作成するサービスとしては、Adobe SystemsがAdobe Labsで公開したkulerを挙げることができる。kulerは同社の提供しているFlex2を活用して開発されたWebサービスで、Flex2でどういったことができるかを実証する、という位置づけにある。Flex2で開発されているので動作プラットフォームは当然Flash。Webサービスでありながらデスクトップアプリケーションのようにスムーズな動作が魅力だ。しかも同サービスで作成したカラーテーマは同社の他のプロダクトでも活用できるという優れもの。 図1 Adobe Labs – kuler kulerは興味深いWebアプリケーションだが、動作させるにはFlash Player 9.0.28.0が必要で、執筆当時はまだLinux版の同バージョンは提供されていなかった。2007年1月17日(米国時間)にLinu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
黄金比グラデーション・白銀比グラデーション - DesignWalker
Flickr Color Selectr
“色”でグッと引きつける！：NBonline(日経ビジネス オンライン)
http://tagland.net/tone/tone01/tone01_04.htm
http://youmos.com/news/farbtastic.html
日本の伝統色を組み合わせてみた - DesignWalker
hereticanthem co.,ltd. » なにかと使えるWebジェネレータのまとめ その１
//// COLOURlovers :: loving colours since 1981