Web関連

Webデザインで使える配色ツール5選!

みなさんはじめまして。デザイナーの松田です。
今回はタイトル通り、Webデザインの際に配色の参考になるサイトをまとめてみました。

みなさん、配色で悩んだ経験はありませんか?
僕はこれだ!と思える配色がなかなか決まらずに頭を抱えた苦い思い出があります…。
この機会に色についてあらためて見直しました。

配色に関してお悩みの方は参考にしてみてください!

配色ツール

Adobe Kuler

Adobeが提供するオンラインサービスです。
オンライン上で様々な配色パターンを作成、保存ができます。
また公開機能もあるため、自分の作成した配色パターンを公開できることはもちろん
他の人が作った配色パターンもチェックできるので、非常に便利なツールです。

リンク先:https://color.adobe.com/ja/create/color-wheel/

HUE/360

「HSV(色相・彩度・明度)」で色が選べるツールです。
Webで色を指定するときは基本的にRGB値で指定します。これはいわゆる「混色系」と言われる色のジャンルなのですが、このツールは「顕色系」と呼ばれる色相・彩度・明度に沿って色を選ぶことができます。

リンク先:http://hue360.herokuapp.com/

Color Scheme Designer 3

自動で様々な配色が吐き出される便利なツールです。
魅力的なのは、気になった配色が出てきたらすぐにサンプルページで確認できるところです。
これで組み合わせをいちいち試す手間が省けますね。

リンク先:http://paletton.com/

NIPPON COLORS

日本の伝統的な色をまとめたサイトです。
色の名前からその色のRGB値を確認することできます。
和風なサイトを作りたいときに役立つかも?

リンク先:http://nipponcolors.com/

Flat Design Gallery & Showcase

フラットデザインを考えている方にはおすすめのサイトです。
実際のサイトで使用されている色がすぐにわかります。完成イメージがわきやすいと思います。
またフラットデザインのサイトを色々なカテゴリから検索できるので、イメージに近い色をすぐに見つけることができます。

リンク先:http://flatinspire.com/

最後に

いかがだったでしょうか?今回のツールを使用すればだれでも簡単に配色ができます。
探している配色が見つかるといいですね!

ただ、デザイナーとしてはツールだけに頼るのではなく、基本的な色に関する知識は身に着けておきたいものです。
今度はツールの紹介ではなく、色に関してのあれこれを執筆したいと思います。
よろしくお願いいたします。

旅のすすめと使えるフリー画像素材サイト前のページ

【Web制作会社が調べた】第1回 ここがヘンだよSEO対策!?次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. AIに求められているものは、実は意外な物だった
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. SNS関連

    ビジネス特化のソーシャルメディア「Linkedin」

    さて今回はソーシャルメディアについて触れていこうかと思うのですが、みな…

  2. Web関連

    あなたのパソコンは大丈夫?~サイバー攻撃の脅威とその対策~

    日々報告されているサイバー攻撃。皆さんの対策は万全でしょうか。昨今の事…

  3. Web関連

    その言葉、大丈夫?間違いやすい日本語9選

    人とコミュニケーションをとるとき、自分の話している言葉がうまく伝わらな…

  4. Web関連

    新しい販売形態であるDtoCについて考えてみる

    目次- Direct to Consumer(ダイレクト・トゥ・カ…

  5. AI関連

    【ホームページ制作】採用はもうAI(人工知能)がやれば良い。

    巷ではAI(人工知能)の進化、活用が話題になっていますね。弊社でも…

  6. Web関連

    インターネットから必要な情報を選び出そう

    先日風邪を引いてしまったIAの加藤です。今の時代分からないことは、検…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. AI関連

    まだデジタル化してないの?そろそろウィズコロナ・アフターコロナについてちゃんと考…
  2. Web関連

    健康診断を行う理由と未来
  3. Web関連

    スマートフォンサイトの表示速度を上げるには?
  4. Web関連

    Web制作会社が教えるDDos攻撃からのWEBサイトを守る方法
  5. Web関連

    Web制作なら見積もりをもらおう
PAGE TOP