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制作を、業者に頼む人には注意するべきポイントがあります。業者に頼めばホーム …

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

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

【参考】Webデザイナーのポートフォリオサイト!転職に活かせるポートフォリオを大公開

今回の記事はWebデザイナーを目指している方、Webデザイナー職に転職を考えてい …

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

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

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

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

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

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

デザインに参考になる面白い広告30選!広告はアイディアが重要!

広告はアイディアが重要です。限られた時間、スペースの中でユーザーの心に残るもので …

【CMS比較】WordPress以外のおすすめ・人気のCMSまとめ

ホームページやブログを構築する際にCMSを利用するケースが多くなってきました。「 …

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

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

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

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

Message

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

CAPTCHA