カスタマイズ実験室

「配色サンプルを作る」を書き始めてから、すっかり色からのアプローチが楽しくなってしまいました。

で。まさに色からwebデザインにアプローチするサイトを見つけて、とっても楽しくなっちゃったので、みなさんにもご紹介します♪


Colors - CSSMania
http://www.cssmania.com/colors/

英語サイトだけど、色のコードだけわかれば…いや、コードなんて知らなくても、気に入った色をクリックするだけで楽しめるから大丈夫♪

CSSManiaのサイトのスクリーンショットで良く使われている色が並んでいます。


ずらーっと並んだ全189色

青とグレーの色幅が多いかな。
かく言うこのブログも水色がメインです。^^
だって、目が疲れにくいし、他の色とケンカしないし、嫌味がないから使いやすいんだもん。

そこをあえて(笑)、赤い色を見てみましょう。色のコードは#CC1919。


指定した色か類似色を含むサイトデザインのサムネイルが並びます

うひゃー、カッコイイ！
自分じゃ絶対できない色づかいとデザイン♪　


サイドに出てくるカラーパレットも要チェック

ベージュ系と赤の組み合わせ、いいよねー♪

とか言いつつ、#E5E5E5や#CCCCE5のサムネ群にすごくそそられる(笑)。ベースカラーとして使いやすいし、品良くまとまるのかもしれない。


やっぱりね、王道だけど、よいデザインをいっぱい見て目を肥やすことが大事だと思うんですよ。時には遠回りに感じることもあるけど、自分のセンスを育てていかないと模倣から抜け出せないし、心も頭もストックがあっという間に空になっちゃいますからね。

というわけで、今日はこの辺で。
多少なりとも参考になれば嬉しいです。^^

お花見までもう少し♪

※記事の内容は、執筆時点の状態に基づいて書いています。Seesaaブログの改変に合わせて書き直していない場合がほとんどですので、ご了承ください。

前回まではこちら

• 配色サンプルを作る(1)
  
• 配色サンプルを作る(2)

AdobeのKulerは人が作った配色を参考にするものでした。単に配色を作るだけのものは他にもあります。今日はその一例をご紹介します。


HTML Color Combination Chooser - Web Design for Developers
http://colors.napcsweb.com/colorschemer/index.html

英語ページですが、英語がわからなくても、スライダの意味がわかれば使えると思います。カラーパレットを見ているだけで、楽しいですし♪
Kulerより軽く、さくさく動く気がしますね。



Monochromatic


Analogic(base + neighbours)


Analogic+(base, neighbours + compliment)


Split Complimentary


Triadic


Dobule Contarast


とまぁ、こんなふうに、いろいろなテイストの配色サンプルが得られます。いろいろいじって確認してみてください。

やみくもに色を決めるのではなく、こうして計画的な配色をしたほうが、より洗練されたWebデザインができるのにねぇ…という自嘲と反省をたっぷり味わいつつ終わります。^^;


↓参考になったら、クリックで応援してね！↓


マイペース更新ですが、今年もどうぞよろしく♪

※記事の内容は、執筆時点の状態に基づいて書いています。Seesaaブログの改変に合わせて書き直していない場合がほとんどですので、ご了承ください。

前回の「配色サンプルを作る(1)」はこちら。
Kulerの配色サンプルを見たり、自分好みにカスタマイズしてみました。


トップページに気に入ったものがなかったら、どんどんどんどんページをめくっていきましょう。ただ、今日現在、全部で17,811例（1,782ページ）ありますから、1つずつ見ていくには膨大すぎです。1,000ページを超えるボリュームを一気に見ると、眼精疲労＆頭痛に見舞われるでしょう。経験者は語る(笑)。

そんに膨大なデータを効率良く探すための手掛かりとして、「Themes」を使うのがいいのではないかと思います。Newestだけでなく、他のカテゴリもぜひ見てみてくださいね。


Themeは左サイドにあります


あるいは、キーワード検索も有用かと。
検索窓では、配色名の検索ができます。webサイトで「Kulerの△△という配色を参考にしました」と書いてあることもあります。そういのはそのまま配色名を検索すればいいし、色のイメージになりそうな言葉で検索するのも面白そう。例えば「ocean」「snow」「autumn」「leaf」とかね。

試しに、「berry」で検索してみました。

原寸を表示するには、2回クリックしてね

一番上は、柊のイメージのクリスマスカラーですね。ラッピングとかにも使えそう♪　他は意外と渋い？　ブルーベリーぽいのが多いかな？


写真から色を抽出することもできます。
ブログで使うとしたら、ヘッダーの写真に合った色を探すなんて使い方ができそうです。

最近撮った写真で試してみます。



「Create」「From an Image」「Upload」の順にクリックして、自分のパソコン上の画像をアップします。flickrの画像を使う時は「flickr」ボタンをクリック。

原寸を表示するには、2回クリックしてね

あら、意外といい感じ♪　
フランス人の女優さんが映画の中で来ていた服を思い出します。

• もっと使いこなすためのノウハウが欲しい
  
• 自分もカラーやテーマを公開したい
  
• PhotoshopやIllustratorからKulerを利用したい

という上級者のあなたは、下記の公式ヘルプをご覧ください。

Kuler とは何ですか - Adobe
http://kb2.adobe.com/jp/cps/787/7875.html

CS4、CS5では、Kulerパネルというものが使えるそうです。とっても便利そうね。けど、私はCSだから関係ないわ…(笑)。


さらに次回に続きます...

　← クリックしてもらえたらすごく嬉しい♪

※記事の内容は、執筆時点の状態に基づいて書いています。Seesaaブログの改変に合わせて書き直していない場合がほとんどですので、ご了承ください。