- 2009年3月10日 10:00
- Web制作
Web制作で配色に関してはやはりとても悩みます。
普段からいろいろなサイトを見たりしながらインスピレーションで色を決める事もあるのですが、そんなにポンポンと良いアイデアが出る事なんて都合の良い事はあまりありませんよね。
そんなとき、いつも頼りにしているのが今回紹介するような配色のサンプルや配色を導き出してくれるサイトです。
このようなサイトで他の人が作ったサンプルを見たり、自分で配色を作ったりしていると「やっぱりコレしかないかなぁ」と思ったり「おっ！これ良いかも？」 と言うアイデアが浮かんできます。
気に入ったサイトももちろんあるのですが、本気で煮詰まった時はいろいろなサイトを見たりしています。
皆さんも配色で悩んだら、このようなサイトで脳をリフレッシュしてみて下さい。
きっと良いアイデアが浮かびますよ。
知っている方もたくさんいるとは思いますがAdobeが運営しているサイト kuler
基本的に英語ですが、日本語のFAQ等 も用意されています。
visibone.comのcolorlabです。左側にある色をクリックしていくだけと操作もとても簡単です。
「任意の色をクリックして下さい...」と日本語のナビゲーションも出てきます。
配色とは関係ありませんが、Country codeの世界地図なども置いてあります。
neteffect.dkのcolormatch、こちらはのサイトは左側に色を選択するメニュー右側がプレビューといった構成になっています。
右側のサンプルを見ながら左側の色や明るさ、各文字の色などを細かく調整可能です。
細かく設定出来るのでじっくりと考える時には良いかもしれません。
colorbe.com、こちらはカラーパレットを検索、作成出来るサイトです。
右上にある「Create Color Palette」をクリックすると自分でパレットを作成する事が出来ますが「Search Color Palette」にキーワードを入力して他の人が作ったパレットを検索してみると良いかもしれません。
表示されているパレットの中から気に入った色をクリックすると、その色が利用されているパレットを検索する事もできます。
次はssions.eduのiluです。とっても簡単操作です。
左上の画像を見ながら下の円のところに付いている△をぐるぐる回すとどんどん色が変わっていきます。
右のスライド部分で明るさなども調節出来てお手軽・簡単です。
colorschemer.comのColorschemer Online こちらは任意の色の近似色や対比色の一覧表示をしてくれます。
onlineでの提供もしているのですが、その他色に関するソフトウェアもTOPページでいろいろと提供しています。
ただし英語のソフトだけで日本語版はありませんのでご注意下さい。ソフトの使い方など動画も用意されているので、英語が分からなくても使える事は使えるかもしれません。
pourpre.comのcolordbは選択した任意の一つの色に対していろいろなアプローチで配色を提示してくれます。
表示されている色の左上、白くなっている角をクリックすると「memory」と書かれたメニューに追加されますので、好きな色を「memory」に追加して「HTML template」メニューで見ると配色のサンプルが表示されます。
中心あたりにある「Harmonies」メニューの一番右にあるボタン？をクリックすると左側に表示された色を一気にmemoryに追加する事が出来ます。
Accessibility Color Wheelは日本版があります。
こちらは前景色（文字色）と背景色を選択するとその色の組み合わせがを正常色覚、第1色覚異常、第2色覚異常、第3色覚異常ではどのように見えるのかを提示し、問題の有無が分かります。
アクセシビリティを重視するサイトなどでは重宝するサイトです。
ColorBlenderは任意の二つの色を選択すると二つの色の階調を表示してくれます。
階調表示は設定によって1段階から10段階まで設定出来ます。
階調表示されたを16進、RGB、RGB%で表示してくれるのでグラデーションの中間色のコードを調べたいときなどに使うと便利ですね。
最後はCOLORINSPIRATORです。
こちらは inspirator の名の通り色の数を決めて「mix」ボタンを押すと、自動で次々に色の組み合わせを作ってくれます。
自分で色を決めて何かをするというものではありませんが、いろんな色の組あわせを見ていると 「！」 とひらめいた利する事もあるので煮詰まった時にはこのようなサイトの方がよいかもしれません。
以上10このサイトを紹介してきましたが、気に入ったサイトはあったでしょうか？
サイトの色を決めるときは何かと迷ってしまいがちですが、こんなサイトがあれば悩む時間も短縮されます。
普段からいろいろなサイトを見たりしながらインスピレーションで色を決める事もあるのですが、そんなにポンポンと良いアイデアが出る事なんて都合の良い事はあまりありませんよね。
そんなとき、いつも頼りにしているのが今回紹介するような配色のサンプルや配色を導き出してくれるサイトです。
このようなサイトで他の人が作ったサンプルを見たり、自分で配色を作ったりしていると「やっぱりコレしかないかなぁ」と思ったり「おっ！これ良いかも？」 と言うアイデアが浮かんできます。
気に入ったサイトももちろんあるのですが、本気で煮詰まった時はいろいろなサイトを見たりしています。
皆さんも配色で悩んだら、このようなサイトで脳をリフレッシュしてみて下さい。
きっと良いアイデアが浮かびますよ。
知っている方もたくさんいるとは思いますがAdobeが運営しているサイト kuler
基本的に英語ですが、日本語のFAQ等 も用意されています。
visibone.comのcolorlabです。左側にある色をクリックしていくだけと操作もとても簡単です。
「任意の色をクリックして下さい...」と日本語のナビゲーションも出てきます。
配色とは関係ありませんが、Country codeの世界地図なども置いてあります。
neteffect.dkのcolormatch、こちらはのサイトは左側に色を選択するメニュー右側がプレビューといった構成になっています。
右側のサンプルを見ながら左側の色や明るさ、各文字の色などを細かく調整可能です。
細かく設定出来るのでじっくりと考える時には良いかもしれません。
colorbe.com、こちらはカラーパレットを検索、作成出来るサイトです。
右上にある「Create Color Palette」をクリックすると自分でパレットを作成する事が出来ますが「Search Color Palette」にキーワードを入力して他の人が作ったパレットを検索してみると良いかもしれません。
表示されているパレットの中から気に入った色をクリックすると、その色が利用されているパレットを検索する事もできます。
次はssions.eduのiluです。とっても簡単操作です。
左上の画像を見ながら下の円のところに付いている△をぐるぐる回すとどんどん色が変わっていきます。
右のスライド部分で明るさなども調節出来てお手軽・簡単です。
colorschemer.comのColorschemer Online こちらは任意の色の近似色や対比色の一覧表示をしてくれます。
onlineでの提供もしているのですが、その他色に関するソフトウェアもTOPページでいろいろと提供しています。
ただし英語のソフトだけで日本語版はありませんのでご注意下さい。ソフトの使い方など動画も用意されているので、英語が分からなくても使える事は使えるかもしれません。
pourpre.comのcolordbは選択した任意の一つの色に対していろいろなアプローチで配色を提示してくれます。
表示されている色の左上、白くなっている角をクリックすると「memory」と書かれたメニューに追加されますので、好きな色を「memory」に追加して「HTML template」メニューで見ると配色のサンプルが表示されます。
中心あたりにある「Harmonies」メニューの一番右にあるボタン？をクリックすると左側に表示された色を一気にmemoryに追加する事が出来ます。
Accessibility Color Wheelは日本版があります。
こちらは前景色（文字色）と背景色を選択するとその色の組み合わせがを正常色覚、第1色覚異常、第2色覚異常、第3色覚異常ではどのように見えるのかを提示し、問題の有無が分かります。
アクセシビリティを重視するサイトなどでは重宝するサイトです。
ColorBlenderは任意の二つの色を選択すると二つの色の階調を表示してくれます。
階調表示は設定によって1段階から10段階まで設定出来ます。
階調表示されたを16進、RGB、RGB%で表示してくれるのでグラデーションの中間色のコードを調べたいときなどに使うと便利ですね。
最後はCOLORINSPIRATORです。
こちらは inspirator の名の通り色の数を決めて「mix」ボタンを押すと、自動で次々に色の組み合わせを作ってくれます。
自分で色を決めて何かをするというものではありませんが、いろんな色の組あわせを見ていると 「！」 とひらめいた利する事もあるので煮詰まった時にはこのようなサイトの方がよいかもしれません。
以上10このサイトを紹介してきましたが、気に入ったサイトはあったでしょうか？
サイトの色を決めるときは何かと迷ってしまいがちですが、こんなサイトがあれば悩む時間も短縮されます。
- Newer: EXCEL（エクセル） 2007で印刷時に2ページ目以降にも見出しを印刷する方法
- Older: 携帯電話のメールアドレス変更サイト一覧
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://webpersons.jp/mt/mt-tb.cgi/553
- Listed below are links to weblogs that reference
- 配色のサンプルを作成してくれるジェネレータ10選 from Web Persons [ウェブパーソンズ]｜Web担当者向け情報サイト
