Webデザイン

配色パターンの参考に!Webデザインで頼りになる厳選サイト7選

配色パターン

    ブロガーB君
    うーん。困ったなあ。
    デザイナーサニー
    どうしたんだい?B君
    ブロガーB君
    ブログのデザインでいつも「配色」のことで悩んでしまうんですよね。
    デザイナーサニー
    なるほどね!確かに配色パターンで悩んでしまうと手が止まってしまうことって多いね!じゃあ、今回はそんな悩みを解消してくれる配色パターンの参考になるサイトを紹介しよう!
    ブロガーB君
    ええ!そんな便利なサイトがあるんですか!?早く教えて下さいよ!
    デザイナーサニー
    OKOK!僕が普段良く使っている配色パターンサイトはこの7サイトだよ!

    原色大辞典

    haisyokudaiziten

    私が一番頻繁に使っているのが「配色大辞典」というサイトです。サイト上部のタブで様々なカテゴリーを選ぶことができて便利です。私がよく使うのは「原色大辞典」、「パステルカラー」、「洋色大辞典、「メトロカラー」あたりです。参考にしてみてください。

    → 配色大辞典

    Adobe Color CC

    adobecolor

    結構メジャーな配色パターンサイトがこのAdobe Color CCじゃないかと思います。以前はAdobekulerというサイトでしたが、名前変わったようです。

    色を選択(5つの色が表示されている三角マークが下に表示されている色)の類似した色、モノクロマティック、トライアド、捕色、間食(コンパウンド)、シェード、さらに自由にカスタムした配色パターンを表示することができます。

    → Adobe Color CC

    Color of Book

    colorbook

    本や雑誌の表紙からホームページで使える色を調べることができるサイトが「Color of Book」というサイトです。

    結構色々な雑誌(スポーツ誌、ファッション誌、アウトドア、格闘技)から配色されている色を調べることができて面白いです。性別やジャンル分けされていて調べるのも簡単です。

    → Color of Book

    Paletton

    paletton

    サイトを開くとカラーホイールと隣接して選択した色の組み合わせが表示されるパレットがあります。
    ホイールの上部に設置されているボタンから選ぶと色の数や組み合わせを選択することができます。

    見た目は上で紹介してAdobe color CCに似ています。

    → Paletton

    0 to 255

    0225

    グラデーションの配色パターンを調べることができるサイト「0 to 225」です。

    選んだベースカラーを基準にグラデーションを確認することができて意外と重宝します。もっと濃い、もしくはもっと薄い色にしたいって時にスムーズに色を選択することができます。

    → 0 to 225

    Colors

    colors

    サイトを開き、スペースキーをクリックすると様々な配色パターンを自動で選んでくれるサイトです。適当に選んでいるのではなくバランスのとれた配色で表示されるので直感的に使うことができて、配色パターンに悩んだときはこれで解消できたりします。

    → Colors

    NIPPON COLORS

    nihoncolor

    NIPPON COLORは日本の伝統的な配色を表示してくれるサイトです。サイト自体がお洒落で洗練されているのでかなり参考になります。

    色はRGB、CMYK、16進数で確認することができます。

    → NIPPON COLOR

    まとめ

    最近では、アフィリエイトサイトなどにもデザインを求められる時代となってきました。その中で配色パターンなどが苦手だという方も結構多いので今回はこのような配色パターンで参考になるサイトを選別してみました。

    頭の中で配色を考えてもなかなか答えにはたどり着けません。Webデザインはある程度の直感も必要です。その手助けにこのようなサイトを利用してみてはいかがでしょうか?

      ブログを差別化するアバターサービス

      avaimage

      あなたは自分のブログのアバターに不満はありませんか?Avamoveでは、あなたのブログを差別化する為のアバター作成を請け負います。顔出しできないけどブランディングアップしたい場合はアバターを作り、キャラクターを立てることが大切です。


      世界に一つだけのあなただけのキャラクターを作成して他のブロガーとの差別化にご利用ください^^


      Avamoveはあなたのアフィリエイト活動を応援しています!


      アバター制作の詳細はこちら

      コメントを残す

      *