Webサイトを作っていて「色選びって難しい!」と感じたことはないでしょうか。筆者自身もネットサービスやブログをいくつか運営していて、時には企画から実装、簡単なデザインまで自ら行うことがあります。しかし、どちらかというと本職はWebエンジニアですので、一連の作業の中で「デザイン」は特に苦手とするところです。中でも「色選び」に関しては、何かのツールの手助けがなければできない作業だと感じています。そこで今回は、そんな「色選び」をちょっと楽しく手助けしてくれる「Web Site Color Picker」というサービスを紹介します。

Web Site Color Picker

サイトの「キャプチャ」から色を分析してくれるサービス

Web Site Color Pickerは、Webサイトの「キャプチャ」を利用してそのサイトで使われている「色」を抽出してくれるサービスです。

サイトで使われている「色」の統計を表示してくれるだけでなく、Twitterアカウントでログインすることでオリジナルのカラーパレットを作成・保存することもできるようになっています。

使い方は簡単で、色の分析をしたいサイトのURLを入力して「SEARCH」ボタンをクリックするだけ。

たとえば「http://twitter.com/」を実際に分析してみると、以下のような結果が表示されます。

Twitterのサイトの色を分析した結果

結果の上段に色の分析結果が表示されています。具体的には、

  • URLで指定したサイトのキャプチャ
  • そのサイトで多く使われている色
  • そのうちトップ10の色の割合を示した円グラフ

といった結果が表示されています。

さらに、その下に表示されている「color mapping」では、「サイトの大体どのあたりにどの色が使われているか」を示してくれています。

キャプチャを利用したグリッド表示のカラーマッピングが表示される

このマッピングの各グリッドをクリックすることで、後述するカラーパレットの作成が簡単に行えるようになっています。

APIの利用で構想が実現

「CSSから色コードを抽出して表示してくれるものや、写真の色味を分析するサイトは見たことがあったのですが、Webサイトの画面のキャプチャからサイトの色味を分析しているものは見かけたことがなく、あれば便利なのに……と常々思っていた」

そう語るのは、このサービスの作者であるYUKI＜@yuki930＞さん。

WebサイトにはCSSだけでなく、画像、Flashなどが使用されていて、そういったコンテンツの持つ「色」が、サイト全体の「色」(イメージ)を構成していることはしばしばあります。

CSSの分析だけでは画像やFlashの色が無視されてしまいますし、かといってサイト全体を手動でキャプチャしてアップロード……というのは面倒です。Web Site Color Pickerの優れている点は、それらの問題を解決しているところでしょう。

そして、このサービスの肝となる「画面キャプチャ」の取得には「HeartRails Capture API」を利用しているそうです。

YUKIさん曰く「肝心のサイトのキャプチャを自動的に取得する仕組みが、レンタルサーバーではハードルが高かった」とのことで、以前から構想はあったものの、製作自体はしばらく断念していたと言います。

しかしYUKIさんは、たまたま「Mashup Award 6」のAPIを眺めていた時に、自分のやりたいことが実現できるAPIを見つけ、約一週間でWeb Site Color Pickerを完成させたそうです。

Web Site Color Pickerは、アイデアを実現するために超えなければならない技術的な障壁を、APIの利用によって乗り越えたサービスの好例といえるでしょう。

自分だけのカラーパレットを作成・保存

冒頭でも紹介したように、このサービスはTwitterアカウントでログインすることで、自分だけのカラーパレットを作成し、保存しておくことができます。

色はマッピングのグリッドをクリックするだけで簡単に選択できる

ひとつのパレットに保存できる色数は10種類。保存したカラーパレットはTwitterアカウントでログインすることで、いつでも参照できるようになっています。

保存したパレットデータはキャプチャと一緒に表示されて分かりやすい

デザイナーさん以外にも使ってほしい

このサービスの主な想定ユーザーは「配色に悩んでいるWebデザイナー」なのですが、YUKIさんは「プログラマーやディレクター」の人たちにも使ってほしいと語っています。

「たとえば、簡易な管理画面で自分自身で彩色を行う場合や、『こういう色味で作ってほしい!』とデザイナーさんに依頼するための資料を作る時などに役立つと思います」

サイトを作る際にカラーパレットのサイトを利用することはよくありますが、「あのサイトのような配色にしたい」という時に簡単に使えるサイトはなかなかありません。

Web Site Color Pickerはそんな色選びが簡単にできるサービスですので、ぜひ一度お試しください。

著者紹介

F.Ko-Ji

ブログやネットサービスを運営するブロガー兼Webエンジニア。大手IT系企業、ベンチャー系Web開発企業を経てフリーに。『F.Ko-Jiの「一秒後は未来」』というブログや、「Meity」「DailyFeed」「梅酒.in」といったサービスを運営しています。