WordPress QandA

【必見】配色デザインが苦手とは言わせない!サイトをお洒落に彩る便利サイトを紹介!

はじめに:カラーセンスがなくても大丈夫!

https://youtu.be/wn1TcWSfIY4
【厳選】もう悩まない!配色デザインおすすめサイト8選‼️

当サイトでは様々なテーマをご紹介していますが、いくらステキなテーマを購入されても、デザインセンスがないとテーマの魅力を十分に引き出せません。私も先天的にカラーセンスがあるわけではありません。

そんな時に後天的にでもカラーセンスを引き上げるには、理論を勉強したり、便利なサイトを利用していく必要があります。

今回は、色についての基本をおさらいした後に、カラーセンスがなくても、センスのある配色を設定できる便利なサイトをご紹介していきます。

本記事をおすすめしたい方

・色について学びたい

・WEBサイトのデザインを行っているが上手くいかない

・どんな配色をすれば良いのか分からない

・便利な配色サイトを探している

 

といった方達におすすめの記事となっています。

 

 

デザインに優れたWPテーマはたくさんあります。下の記事にて有料テーマを一覧にして見やすくしておりますので、是非比較してみてください!

 

 

価格で比べるワードプレステーマ
【最新版】WordPress有料テーマの予算・値段(価格)を比較!無料テーマじゃダメ?

有料テーマの選び方のコツとは? テーマ選びを始めるにあたって、実は世界でWordPressのテーマは1万以上存在するらしいんです。そのすべてに目を通すには、何日もかかってしまうほどです。では、どのよう ...

続きを見る

 

色の持つ意味・性質

引用元:pixabay

サイトを便利に使用するのことも非常に有用ですが、色の持つ意味などを知識として持っておくと、より選択する際の判断材料になると思います。ここでは一部だけお伝えして行きたいと思います。

色の歴史

1666年、アイザック・ニュートンは光線がプリズムを通過すると赤、オレンジ、黄、緑、青、藍、紫の7色に分散されることに着目して、太陽光が色の混合物であることを発見しました。

 

 

私たちが様々な色を見ることができるのは、ある物体が特定の波長を反射したり吸収したりしているからです。人間の目は、この波長を色として認識しているのです。

 

 

色の持つ意味の基礎

 

例えばは、ある人にとってはエレガントな色で、時には繁栄をイメージさせますが、別の人にとっては不快なもの(死、絶望、悪、喪)を連想させることもあります。

 

 

たとえサイトやロゴ、名刺であっても、単色だけを使ってはいけないのです。2色以上の組み合わせでないと効果的ではありません。

 

 

しかし、最近のモニターは1600万色以上もの色を表示できるため、その中から最適な色を選ぶのは至難の業です。そのため、間違った選択をするのは簡単なのです。

 

 

伝統的な色彩理論では、他の色を組み合わせて作ることができない色は3色しかなく、具体的には3色から他の色が作られるとされています。赤、黄、青の3色が「原色」です。

 

 

原色を混ぜると、緑、オレンジ、紫の2次色になります。3次色は、1次色と2次色の組み合わせです(黄橙・マリーゴールド、赤橙・バーミリオン、赤紫・マゼンタ、青紫・バイオレット、青緑・アクアマリン、黄緑など)。

 

 

RGBカラー:光をベースとした色のことです。「RGBはRed、Green、Blueの頭文字を取ったもので、黄色に代わって緑が入る原色です。コンピュータのモニターやテレビではRGBが使われていますが、印刷では使われていません。

 

 

CMYKカラー:これは顔料に基づいています。「CYMK」は、シアン、イエロー、マゼンタ、ブラック(Kは黒の略)のことで、この4色を使って他の色のほとんどを実現することができます。CMYKはRGBよりも少ない色数で表現できるため、印刷に利用されています。

 

 

カラー

色の持つ意味と性質

なぜラスベガスは赤いネオンの街なのか、考えたことはありますか?

 

引用元:pixabay

 

 

それは、は精神を落ち着かせる青よりも、人を危険な行動に走らせるからです。科学者たちは、色が人間の脳に影響を与えることを研究・実証しました。興奮する色もあれば、食欲を増進させたり、暖かさや冷たさを感じたりする色もあります。

 

 

前述したように、色は主観的なものであり、私たち一人ひとりにとっての色の影響は異なりますが、一般的に言われている意味は以下のとおりです。

 

 

色の意味

黒:神秘、気品、死、悪、権力、弔い。
青:悲しみ、冷静さ、忠誠心
緑:豊かさ、自然、爽やかさ。
黄色:幸福、集中、希望
赤:情熱、怒り、危険、愛。
白:純粋さ、清潔さ、無邪気さ。
紫:王族、贅沢、富、洗練。
クリーム色:エレガンス、ピュア
グレー:保守的、格式。

しかし、国や地域によっては、特殊な解釈があるようです。中国では、黒は高品質と信頼の証です。イランでは青は不滅の意味を持値ます。緑は、日本ではハイテク、中東では幸運、南米では死を意味します。黄色は、メキシコでは喪の色、サウジアラビアでは力強さを感じさせる色です。

 

 


赤は、中国では幸運、ヨーロッパでは危険、コートジボワールでは喪の色、トルコでは死と、複数の意味を持ちます。白は、日本では喪に服すという意味があります。

 

 

原色大辞典

まずは、基本的な有名なサイトからおさらいしていきましょう。「原色大辞典」下のように様々な色を視認し、自身の気に入ったカラーコードを得ることができます。このサイトはとても有名で便利ですのでホーム画面に保存しておいても良いと思います。

(↑これはAFFINGER6専用のPhoto Galleryプラグインを使用しています)

画像をタッチすると原色大辞典にリンクすることが可能です。

AFFINGER6のホームページはこちら

Color Hunt

 

 

Color Huntは、ユーザーによって投稿された4色の組み合わせの配色パターンが表示され、それぞれにお気に入り「Likes」の数が示されています。

 

 

それによってどの配色が客観的に人気なのかを知ることができます。

 

 

メニュー

・New(新着)
・Trendy(流行)
・Popular(人気)
・Random(ランダム)

お気に入りの配色が見つかったら、色の部分をタップするとカラーコードが表示されます。

 

 

また、自分でお気に入りの配色を投稿して反応を見ることも可能です。

 

 

Palletable

  1. Palletableはひたすら色の好き嫌いを選択し5色のカラーパレットを作成するサイトです。好きな色の場合はLikeの「L」、嫌いな色の場合はDislikeの「D」を選択していきます。直感的なサイトで非常に面白いです。

Happy Hues

Happy Huesは配色のパターンだけでなく、実際に使用した時のサイトのイメージのサポートまで行ってくれます。左側で気になる配色を選択すると右側の部分で仮のWEBサイトでの配色例を示してくれます。具体例まで知りたい方におすすめのサイトです。

NIPPON COLORS

●明るく楽しい、幸福感、記憶力を高める、判断力をアップさせるなどの効果が期待できます。

日本に伝統的に伝わる色を活用したいときにオススメのサイトです。日本独自の色をデザインに使用されたい方は是非活用してみてください。このサイトは非常に美しく、見るだけでもカラーセンスが上がるような感覚があります。気になる方は、ギャラリー画像からリンクしてみてください。

Random Material Palette

中央の画面をタップするだけで自動で様々な配色を提案してくれるサイトです。また、文字や円形など5種類の違う画像で配色を確認できるのでイメージがよりしやすくなっています。ある色をロックしたり、一つだけ色を変えたいという場合はスポイト部分を押すとギャラリーの最後にあるように自分で色を選択することも可能です。

カラコル・Color Pick Eyedropper

この色いいな・・と写真や風景、WEBサイトなどをみて感じ、自分のサイトに取り入れたいと思われる方も多いと思います。そんな写真や画像から色を抽出できるピッカー機能を持つアプリも増えてきています。

ギャラリーで紹介しているのはアップルストアでフリーダウンロード可能な「カラコル」とGoogleのChrome拡張機能で利用できる「Color Pick Eyedropper」です。

カラコルは非常に簡単で、カメラでその場で撮る、画像フォルダから画像を取り出す・・という手順で知りたい色の写っている画像をアプリ上に配置し、その色に触れるだけでカラーコードを知ることができます。

フリーソフトのため、もし知らなかった方は是非活用してみてください。かなり便利です。

まとめ:WEBサイト作りにおけるカラーセンスの磨き方

 

Admin
Admin
最後まで読んで頂いてありがとうございます!

 

 

いくつかの配色サイト(カラー・デザインに関するサイト)を厳選してお伝えしてきました。このような配色サイトを利用することで、私のようにカラーセンスがない人でもそれなりの配色をすることができるようになると思います。

 

 

ここでご紹介したサイト以外にも、まだまだ数えきれないくらいのサイトがありますので、これは是非伝えたいなと思った時はリライトしていこうと思います。また、カラーセンスは知識を蓄えていくことでも後天的に育成は可能と思いますので理論を勉強するのも一つの手だと思います。一緒にお洒落なサイト作りをしていきましょう。

 

 

admin.s

「最高のWordPress・ホームページ製作体験をあなたに」をキャッチフレーズにWordPress歴7年、企業のホームページ製作や記事作成500本以上に携わる管理人がWordPressテーマ・ホームページ製作Q and A・ランキング特集などお伝えしていきます。

-WordPress QandA