- 更新日: 2019年7月1日
- 公開日: 2015年10月2日
素人でもプロ並みの配色ができるデザインパターン参考サイト21選
Webデザインで大変重要な要素の一つ、配色。ベテランデザイナーでさえ一度配色に悩んでしまうと悪循環からなかなか抜け出せないときもあるほど
難しい世界です。その奥深さを象徴するかのように、Web上には配色に関するツール・サイトが数多く公開されています。
覚えておくとイザというときに役に立つ、無料のオンラインツール・サイトをご紹介します。
目次
- 為になる鉄板「原色大辞典」
- シーン別配色見本32パターン
- イメージ別「配色パターン」
- 色の組み合わせに迷ったらここ！
- 豊富な色情報「配色の見本帳」
- ランダムに色を生成「coolors」
- 文字の色まで提案「ウェブ配色ツールVer2.0」
- 鉄板の「AdobecolorCC」
- シンプルに色を探せる「HUE/360」
- プレビューで確認「materialpalette」
- 多数のカラーパレット「ColorHunt」
- 色を探したいとき
- 色の検索に優れた「ColorHexa」
- 本や雑誌を参考にしたいときは「ColorofBooks」
- UPした画像でカラーパレット「colorhunter」
- あのサイトの配色は？「WebColorsData」
- その他配色で困ったときに見たいサイト
- グラデーションなら「shade」
- フラットデザインの参考に「FlatUIColors」
- 日本の伝統色「NIPPONCOLORS」
- 色を選んでサイトデザインを検索「designshack」
- ノンデザイナーの為の配色理論
- 12色の色が与える印象について。
- COLOURlovers
為になる鉄板「原色大辞典」
「色の名前とカラーコードが一目でわかる」サイト。原色、和色、洋色の名前とカラーコードの一覧、背景色と文字色の組み合わせツールなど色に関する情報が豊富に掲載されています。他にも気分に合わせて色を選ぶツールや電車の色の一覧など、遊べて学べるサイトです。
シーン別配色見本32パターン
株式会社スタイルリンクのブログより、シーン別の配色見本です。ポップで楽しいイメージ、品のある知的なイメージなど32パターンの色の組み合わせを提案しています。配色の基礎についてもわかりやすい解説があります。
Webデザインを学習されている方にはこちらも参考になると思います。
イメージ別「配色パターン」
シンプル、ダークといった印象別に配色パターンを掲載しているサイト。他にも色の組み合わせチェックツールや、色の基本情報などを掲載しています。
色の組み合わせに迷ったらここ！
豊富な色情報「配色の見本帳」
ベースカラーを選ぶと、色の成分情報とカラーパターンを検索することができるサイト。配色技法に則った色の組み合わせを提案してくれます。
ランダムに色を生成「coolors」
スペースキーを押すだけでランダムにカラーパレットが生成されるツール。表示された色の色相や彩度、明度などを直感的な操作で変更したり、メインとなる色を固定し、他の色をランダムに表示させて組み合わせを試すといった使い方ができます。
文字の色まで提案「ウェブ配色ツールVer2.0」
カラーピッカーを操作して色を作成し、すぐにプレビューでサイトイメージを確認できるツール。ロゴや文字などの色を自動的に選定してくれます。操作方法や配色のヒントが日本語で丁寧に説明されています。
鉄板の「AdobecolorCC」
指定したカラールールに基づき、カラーホイールを用いた直感的な操作で色の組み合わせを試せるツール。様々な色のパターンも用意されています。
同名のiPhone,iPad,Android向けのアプリもあります。こちらはカメラが検知した映像から色を抽出しカラーテーマを作成する機能、保存したカラーテーマを共有する機能を有しています。
シンプルに色を探せる「HUE/360」
色相、彩度、明度を直感的に操作することで色の組み合わせが試せるサービス。一つ色を選ぶと相性の良い色を提案してくれます。選択された色が下部に表示され、いくつかの色を比較することも可能。デザイナーでない人でも、色の三要素についての理解を深めることに役立ちます。
プレビューで確認「materialpalette」
用意された色の中から2色を選ぶとプレビューが表示されるサイト。選んだ色の情報が画面右下のYourPaletteという欄に記憶され、色をクリックするとカラーコードがコピーされた状態になったり、まとめてダウンロードすることができます。
多数のカラーパレット「ColorHunt」
様々カラーパレットが毎日登録されているサイト。カラーパレットを選ぶとプレビューが表示され、色のイメージを確認できます。
CodeCamp提供のデザインマスターコース
当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は
- デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
- Webデザイナーとして転職・フリーランスも可能になる
- 実際にWebサイトを作るのでポートフォリオとしても使用できる
詳細はこちらから確認してみてください！▶︎https://codecamp.jp/courses/master_design
色を探したいとき
色の検索に優れた「ColorHexa」
検索欄に色名やカラーコードを入力すると、その色に関する様々な情報を表示するサイト。検索欄に入力した時点で候補の色がその色と共に表示されるのがユニークです。
本や雑誌を参考にしたいときは「ColorofBooks」
ファッション誌やスポーツ紙などの書籍を検索し、配色を確認できるサイト。例えばファッション誌なら、男性／女性、10代向けや一般OL向け、雑誌名など、イメージに合ったものを検索できます。Photoshop用のカラーパレットもダウンロード可能。
UPした画像でカラーパレット「colorhunter」
画像をアップロードすると自動的に色を抽出し、カラーパレットを作ります。使う画像に合わせてベースカラーを決めるという方には便利なツールです。
あのサイトの配色は？「WebColorsData」
サイトのURLを入力すると、そのサイトに使われている色が表示されます。色の一覧の他、色相の分布図やカラーホイール、似た色を使った他サイトも表示してくれます。
お探しの記事は見つかりませんでした
＼一流デザイナーのスキルが身に付く／
その他配色で困ったときに見たいサイト
グラデーションなら「shade」
グラデーションを作ることができるツール。カラーコードを入力してベースカラーを決め、色やグラデーションの各種値を調整して作成します。作成した色のCSSプロパティが表示されるのが便利です。
フラットデザインの参考に「FlatUIColors」
流行のフラットデザインに使える色を選べるツール。色をクリックするとカラーコードがコピーされた状態になるので、そのままペーストできます。用意されている色は20種類です。
日本の伝統色「NIPPONCOLORS」
日本の伝統色を調べることができるサイト。桑染、撫子など日本古来からの色の名前をクリックすると、サイト全体に色が表示され、RGB、CMYKの各カラーモード、カラーコードがわかります。Webデザインだけでなく、伝統色の名前の勉強にもなります。
色を選んでサイトデザインを検索「designshack」
海外のギャラリーサイト。色を選ぶとその色を使ったサイトデザインやロゴなどを表示します。
ノンデザイナーの為の配色理論
おばらつかささんによる配色理論のスライド。色選びに失敗する理由と各配色理論を、デザイナーでない人向けにわかりやすく説明されています。
12色の色が与える印象について。
HandyWebDesignより、１２色の色が与える印象についての記事。色はなぜ見える？という基本知識から始まり、ベースカラー・メインカラー・アクセントカラーの割合まで丁寧に解説されています。
COLOURlovers
配色に関するコミュニティサイト。カラーパレットを共有したり、トレンドのデジタル作品をチェックすることができます。
おわりに
以上簡単にご紹介しました。配色に時間がかかりそうだと感じたら、目的に合ったツール・サイトを上手く活用して、制作期間の短縮、より良いデザインを目指してみてはいかがでしょうか？
お探しの記事は見つかりませんでした
- この記事を書いた人
- murase miho
