このページの本文へ

みんなが作った7000種類のカラーチャート集

もう配色には困らない!「Adobe Kuler」

2009年01月21日 08時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

 「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな(得意な)色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。

 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」(クーラー)だ。Kulerは、さまざまな色の組み合わせ(配色パターン、Kulerでは「テーマ」と呼ぶ)をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上(2009年1月現在)ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ(以降の説明はログインしているものとして進める)。

Adobe Kuler
Kulerのトップページ。5つの色を組み合わせたカラーチャートが、Kulerで作成できるテーマだ

 Kulerのてっとり早い使い方は、とにかくサイト上で好みの配色パターンをみつけること。画面左側のナビゲーションに「Most Popular」(一番人気)「Highest rated」(高評価)といった項目が並んでいるので、まずは評判のいいテーマから眺めてみよう。

Adobe Kuler
「Most Popullar」(一番人気)のテーマを上から30種類表示させてみた。気になるカラーチャートをクリックすると詳細情報を確認できる。ちなみにKulerはFlash製。動作はけっこうサクサクだ

 気に入ったテーマがあればクリックしてみよう。すると、選択したテーマが上部に大きく表示され、中央部にはテーマの詳細な情報が並ぶ画面になる。この状態で右上のアイコンをクリックすると、Kulerの「お気に入り」への追加、テーマファイルのダウンロード、選択されたテーマをもとにした新たな配色パターンの作成が可能だ。ここではひとまず、Webサイトのプロトタイプデザインに使うために、テーマファイルとしてダウンロードしてみよう。

Adobe Kuler
任意のテーマを選択した状態で表示される3つのアイコン。左から、「お気に入りへ追加」「テーマファイルのダウンロード」「このテーマをもとに編集」を意味している

 ダウンロードしたテーマファイルは、Adobe Swatch Exchange(AES)という形式になっていて、PhotoshopやIllustratorなど、Adobe Creative Suite 2(CS2)以降の各アプリケーションでスウォッチとして取り込める。たとえば、Photoshopで利用する場合、ダウンロードしたASEファイルをドラッグ&ドロップでPhotoshopに放り込むだけですぐに使えて便利だ。

Adobe Kuler
ダウンロードした「zen and tea」というテーマをPhotoshopのスウォッチパネルに追加してみた。ASEファイルをPhotoshopにドラッグ&ドロップするだけの手軽さ。右側の5つが追加された配色パターンだ

 あとは、配色パターンをもとにサイトの基調となる色、差し色を決めて、実際のデザインにあてはめていこう。編集部でも、既存のWebデザインのテンプレートをベースに、Kulerで手に入れた配色パターンを適用してみた。以下がその画像だ。これだけでもだいぶ印象が変わる。ぜひ、いろいろなテーマを試してみよう。

Adobe Kuler
人気の配色パターンで既存のテンプレートをカスタマイズしてみた。左側は元のテンプレートデザイン、右側がテーマ「zen and tea」をベースに変更したもの

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング