Eggs of Designer

新宿在住の現役WebデザイナーがWeb・デザイン・SEO・アフィリエイト・ダイエット・生活・人生などについて気ままに語ります。

【配色】おすすめ配色ツール・カラーチャートで美しい色選択を!

web制作関連 ツール

フリーランスで仕事が欲しいならここ

      2015/07/21

circle-colorful-colors-2091-825x550

Webデザイナーとしてホームページやバナーなどを制作しているのですが、どうしても「色使い」を考える事に苦手意識があります。配色を変えるだけで全く違った印象になるため、カラー配色はwebデザインにおいて重要な部分です。配色はデザインを行う上で欠かすことのできない要素であり、目標達成や成功に大きく関わってきます。だから余計悩んで考え込んでしまいます。センスで色を選ぶ方法もありますが、色の相性をセンスだけで完璧に選択するのは難しいです。制作時に毎回考え込んでしまう色選びですが、とても便利なツールがあるので、いくつか紹介します。

 配色とは

配色とは、色を組み合わせて新たな効果を生み出すことを言います。

配色一つでサイト離脱率に大きな差が出ると言います。そのため、ホームページやバナーの用途・機能などを最大限に活かせる配色になるよう考えなければなりません。勿論、美的センスも重要です。相性のいい配色、相性の悪い配色がある為、色彩調和した配色を施す必要があります。用途や機能を活かせる+美的であることが配色を考える上で最も重要な要素だと考えます。

おすすめ配色ツール・カラーチャート

kuler

スクリーンショット 2015-02-14 13.51.41

ホームページURL

さまざまな配色を世界中の人と共有できるオンラインサービスです。オンライン上で色んな配色パターンを作ってその場で確認できる点と、他の人がつくったパターンを見られる点がおすすめです。デスクトップや画像から色を抽出できたり、スウォッチにインポートできるファイルを保存できるなど十分な機能があります。

日本の伝統色 和色大辞典

スクリーンショット 2015-02-14 13.53.02

ホームページURL

日本の伝統色(456色)の名前とカラーコードが一目でわかるWEB色見本です。色検索や人気色、カラーピッカーなどの機能も充実してます。シンプルで使いやすいのも特長です。

ウェブ配色ツール

スクリーンショット 2015-02-14 13.54.10

ホームページURL

カラーピッカーで1色を作ると、自動的に配色を作成してくれるツールです。Webサイトのプレビューを見ながら配色調整が可能です。配色に自信がない人や初心者の方におすすめです!

Coolors

スクリーンショット 2015-02-14 13.55.31

ホームページURL
スペースキーを押すたびにランダムでいい感じのカラーパレットを作ってくれる配色ツールです。基本的な5色の配色を「スペースキー」で送りながら好きな組み合わせを探すだけなので、とてもシンプルな構造です。

Flat UI Color

スクリーンショット 2015-02-14 13.56.36

ホームページURL

フラットデザインにピッタリの色を探す事が出来ます。余計な操作は一切必要なし。各カラーをクリックする事でコードなどを取得可能です。

Color of Book

スクリーンショット 2015-02-14 13.57.45

ホームページURL

本屋や雑誌から、その配色を分析してくれるサービスです。性別やジャンルから候補の雑誌も選択できるので、ターゲットに合わせた配色を検討する事が出来ます。

その他参考サイト

終わりに

本日紹介したサイトをチェックしとけば配色に困る事はない・・・はず。(笑)

  関連記事

WEBデザインに必要不可欠なAdobe Creative Cloud!まずはIllustratorやPhotoshopをマスターしよう!

WEBデザイナーを目指す方は必ず買っておくべきデザインソフトがあります。その名も …

効果の高いLP(ランディングページ)を作る為の参考サイト一覧!

クライアントは様々な目的を持ってWebサイト制作を依頼してきます。例えば、商品A …

jQuery初心者が最初に必要な基礎知識

楽天booksにてWeb制作の現場で使うjQueryデザイン入門を購入しました。 …

おすすめのフリー素材サイト(写真、画像、背景、アイコン等)を集めてみた

ホームページやフライヤー、ポスターを作成する際に必ず必要となる素材ですが、皆さん …

【EC-CUBE編】レンタルサーバー比較!EC-CUBEにおすすめのサーバーはこれだ!

ホームページを公開する際に悩むのがサーバー選びですが、運営者それぞれでサーバー選 …

当サイト経由でホームページ、フライヤー制作の受注が入った。

「メディアサイトを立ち上げて良かったこと、悪かったこと」でも触れましたがサイト運 …

デザイナーの名刺はオシャレが当たり前!?参考にしたいデザイン名刺

勉強会やITイベント、交流会等で名刺を交換する機会があるのですが、デザイナーやク …

記事を人気順に並べるプラグイン!『WordPress Popular Posts』

WordPressには便利なプラグインが多数存在します。プラグインの導入によって …

【おすすめ】マウスでなぞるだけでスキャン可能!マウス型スキャナがおすすめ

マウスの形をしたスキャナを発見したので紹介しちゃいます。その名もマウス型スキャナ …

おしゃれなWEBデザインを集めた参考サイトを紹介!WEBデザインは見て勉強。

Webデザインをこれから勉強しようと思っても、実際どこから初めていいかわからない …

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA