![Webサイトの”色”を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](http://blog.v-colors.com/wp-content/uploads/title/1322.png)
ポートフォリオサイトを作ってみました！9999 views
ポートフォリオサイトのデザインを新しくしてみました♪12458 views
PROJECT311-震災寄付作品集-のサイト作成のお手伝いをさせていただきました17780 views
自社サイトをリニューアルしたりしました。9557 views
WEBフォント使ってみました！&キュートなフォントのご紹介☆13853 views
この記事は 約 3 分 で読めます。
新サイトを作りました！
その名をWeb Site Color Pickerといいます♪
早いものでお役に立ちますでしょうかシリーズも第6弾となりました☆
![capture 500x500 Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](http://blog.v-colors.com/wp-content/uploads/capture-500x500.png "capture")
このサイトは、素敵なWebサイトから配色を学ぶために便利に使えるシンプルなツールです。
お気に入りのデザインのWebサイトのURLを入れてSEARCHボタンをクリックすると、そのサイトで使われている色を抽出、分析して自動的に色コードと共に表示します。
使い方はこんな感じです。
![pick top 500x132 Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](http://blog.v-colors.com/wp-content/uploads/pick-top-500x132.jpg "pick-top")
分析してみたいサイトのURLを入れてSearchボタンを押すと…
![pick search 462x500 Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](http://blog.v-colors.com/wp-content/uploads/pick-search-462x500.jpg "pick-search")
こんな感じで、サイトの色を分析して使われている色を自動で表示します！
ただ、なにせ自動解析。
私的にはこのサイトのベスト10はこの色じゃなーい！！ってことも多々あるかと思います。
ご安心ください！抽出機能を設けました！
![pick choice 500x257 Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](http://blog.v-colors.com/wp-content/uploads/pick-choice-500x257.jpg "pick-choice")
![pick choice zoom Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](../wp-content/uploads/pick-choice-zoom.jpg "pick-choice-zoom")
これを使えば、ある程度解析した分析結果から好きな色だけをスポイトで取得して
保存しておくことができるんです！
![pick save 500x96 Webサイトの色を自動で抽出、分析するサイト [Web Site Color Picker]作ってみました♪](../wp-content/uploads/pick-save-500x96.jpg "pick-save")
保存したデータはあとから閲覧することもできます。
とにかくわかりやすく、使いやすくするために
とてもシンプルな機能になっています。
デザイナーさんだけでなく、管理画面の着色で悩んでいるプログラマーさんなども
ぜひ試してきれいな色で管理画面をグレードアップさせてみてはいかがですか？＾＾
色コードを表示していますので、すぐに使えますよ♪
素敵なWebサイトから配色の妙技を学んで
デザインに役立ててくださいね♪
P.S
このサイトを作成するにあたり、ハートレイルズさまのスクリーンキャプチャサービス、
HeartRails Capture APIを使わせていただきました。
このサービスなくしてはこのサイトはできませんでした。
この場を借りて御礼申し上げます。
本当にありがとうございました！
Fireworksの使い方やデザインTipsなどをあつめたサイト、Fireworksマニアオープンしました！ »
