menu

ツールを使って効率的に配色。カラーパレットのWebサービス4選

ディレクター心得

ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる無数の組み合わせに加え、実際の制作プロジェクトではクライアントの要望やブランドイメージといった制約があることも多く、スムーズに配色を決めるのは簡単なことではありません。

配色に行き詰った時はデザイナーに相談したり、同僚に意見を求めたりするのも1つの方法ですが、より効率的に時間を使うためには、さまざまなWebサイトで提供されているカラーパレットやカラーホイールを利用するのも効果的です。

こうしたカラーパレットやカラーホイールには決められた配色パターンを提供しているツールと、自分で色の組み合わせを決められるツールの2種類があります。前者を使えば必要以上に時間をかけることなく、一般的なデザインのメソッドからも外れずに配色パターンを決めることができます。オリジナリティを追求したいならもちろん後者を使うのがおすすめです。

Coolors

ユーザーから寄せられたさまざまな配色パターンが公開されており、「EXPORT」をクリックすると、カラーコード付きのパターンをPNGなどの形式でダウンロードすることができます。自分が作成した配色パターンをWeb上で共有できるのも特徴です。

iOS 7 colors

カーソルを上に置くと該当のカラーコードが表示されます。美しいグラデーションが多数用意されており、Webサイトのデザインのほか、iPhone向けアプリのアイコンなどにも利用することができます。

Adobe Color CC

プルダウンで「類似色」、「モノクロマティック」、「補色」といったカラールールを選択し、画面のパラメータ上の○印を操作することによって、好みの配色パターンを作成することができます。カラーホイール、パラメータ、RGB、カラーコードがすべて統合されたインターフェイスになっており、非常に使いやすいのが特徴です。カラーホイールとパラメータが連動するため複数のパターン候補を絞り込んだり、微調整したりしたい時に使い勝手のいいツールかもしれません。

HUE/360

ユーザーが選んだ色と相性のいい色を自動的に絞り込んでくれる機能が特徴です。「Brightness」から明るさを選択し、任意の色をクリックすると画面サークル上にそれにマッチする色だけが表示される仕組みになっています。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

導入事例 インテリア・ファッション分野 その1

Swifto Dog Walking|飼い主目線のIoT活用&良質のサービスで5つ星。 マンハッタン発の散歩代行サービス

関連記事

  1. Webデザイナーへの発注で最初に伝えたい、デザインの「背景&スト…

    「思い描いたイメージと全然違う」、「あれだけ強調したのに全く伝わっていなかった」…。Webディレクタ…

  2. 「オウンドメディアって何?」意外と知られていないトリプルメディア…

    「オウンドメディアって最近よく聞くけど、どんなもの?」。この質問に正確に答えられるWebディレクター…

  3. あらためて整理しておきたい、Webサイトにおける「色」の効果

    ECサイトの制作プラットフォームを提供しているShopifyのリサーチ結果によれば、ユーザーの購買は…

  4. 競合サイトの調査に活用できるGoogleの3つの機能

    大手調査会社ニールセンが2015年12月に発表したリサーチ結果によれば、日本におけるインターネット利…

  5. 画像編集をクラウド化して業務効率UP。無料オンライン画像編集ツー…

    コンテンツマーケティングがWebマーケティングの主流となり、Webサイトのあらゆる面に高いクオリティ…

  6. 意外と簡単?Webフォントの利用方法とメリット&デメリット

    CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Go…

  7. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

  8. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

PICKUP

PAGE TOP