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

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

その他参考サイト

終わりに

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

  関連記事

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

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

デザイナーは参考にしよう!オシャレな年賀状まとめ【企業編】

さて、今年も残すところ1ヶ月を切りました。皆さんの2014年はどんな年でしたか? …

2015年初売り福袋合戦!正月特設サイトでWebデザインを学ぼう!

2014年ももうすぐ終わりですが何も思い起こす事はありませんか?大掃除や年末ジャ …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Message

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

CAPTCHA