Web関連

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

0

みなさんはじめまして。デザイナーの松田です。
今回はタイトル通り、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/

最後に

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

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    タブレットをビジネスで活用したい!企業事例を比較検討してみた

    iPadやタブレット、色々な場面で見かける機会が増えましたよね。スマ…

  2. Web関連

    ゲームから学ぶプログラミング

    みなさんはプログラミングと聞くと、どんなイメージを持たれますか?難しい…

  3. Web関連

    「レスポンシブEメールデザイン」で見込み顧客を一気に獲得!

    最近では持っていない人はいないというくらいスマートフォンを持っている人…

  4. SEO関連

    SEOにも効果がある!意外な問題点!

    SEO対策について、あまり重要視されていないけどサイトを運営していく上…

  5. Web関連

    初心者WEBデザイナー必見!アイデアを引き出すための秘訣3選

    WEBデザイナーの皆さん、アイデアが出ずに困ったことありませんか?アイ…

  6. Web関連

    脱・マンネリ化!仕事が楽しくなる3つのスイッチ

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテー…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    採用サイトで学生が1番気になっているところとは!?
  2. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWebサイトにしよう 第3回:【…
  3. Web関連

    最強のWebマーケターになるための便利ツールご紹介
  4. Web関連

    Google「Picasa」を「Google フォト」に統合
  5. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコ…
PAGE TOP