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

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

その他参考サイト

終わりに

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

  関連記事

激安・格安ホームページ制作の落とし穴|メリットとデメリット

「制作費●●円でホームページが手に入る」というキャッチコピーで集客をしている制作 …

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

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

バナーやポスター、フライヤー・チラシなど制作におすすめの参考書はこれ

最近仕事でアフィリエイト用のバナーを制作する事が多いのですが、結構頭を使います。 …

Mac版GRCは無いの?SEO対策に欠かせない検索順位チェックツール

GoogleやYahoo!の検索順位が確認できる検索順位チェックツールはサイト運 …

ホームページ制作を業者に依頼する時の注意するべきポイント

Web制作を、業者に頼む人には注意するべきポイントがあります。業者に頼めばホーム …

ホームページ制作の流れって?(前編)

ホームページ作成にあたって、お客様との間で必ず打ち合わせを行います。大体のホーム …

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

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

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

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

【緑色編】ロゴ集めました!企業やサービス、商品のロゴ制作の参考に!

皆さんはロゴを制作する際に何を参考にしていますか?センスやアイディアだけで制作が …

Webデザイナーにおすすめのブログ集!Webデザインの参考にどうぞ

Webデザインをする際に何かに躓くことってありますよね?「ここのデザインはどうし …

Message

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

CAPTCHA