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

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

その他参考サイト

終わりに

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

  関連記事

Illustratorが無料!?イラストレーターの機能を持ったフリーソフトまとめ

イラスト作成ソフトは、写真やイラストなどを編集しポスターや名刺、フライヤーような …

ロゴ制作に役立つ情報。企業ロゴに隠された意味・秘密・狙い【PCメーカー編】

企業ロゴを見渡すととてもユニークな物が多いです。デザイナーはセンスだけでデザイン …

【保存版】検索エンジン比較!GoogleやYahoo以外のおすすめの検索エンジン

日本国内の検索エンジンではYahoo!とGoogleが大半のシェアを占めます。僕 …

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

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

【保存版】バナー制作の参考サイトまとめ!効果が出る・成約につながるバナー制作を

ホームページやランディングページの中身が充実していても、入り口であるバナーが微妙 …

【熊・クマ・くま編】デザインの参考に!キャラクターを集めてみた。

たまに「ロゴにキャラクターを入れたい」「サイト内にキャラクターを登場させたい」「 …

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

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

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

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

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

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

【おすすめ】初心者向けIllustrator(イラストレーター)参考書まとめ(2015年最新版)

参考書シリーズは以前から何度か紹介しておりますが、結構多くの方に読んで頂いていま …

Message

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

CAPTCHA