「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント

最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot

私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色

この前日本に一時帰国していてWEB制作の学校とか顔出す機会があったんですが、日本だろうが、海外だろうが『色』に関する悩みはやっぱ万国共通のようですね。 配色一つでセンスが問われますし、配色一つの為に膨大な時間を使ったりする、デザインをする上で考える『色』についてはセンスも時間も必要な非常にデザイナーとして神経使うとこなんじゃないでしょうか？ しっかし、僕がそうだったんですが、配色って本当に意識していないと何が良くて何が悪いのか中々判断つかない、デザインしていても一つの色ばかり見ていたらその色が何か気に食わなくなってきて、違う色を試してみたり。いくつかの色を併用してみたり、でもやっぱり戻してみたり。行ったり来たりで何が”良い配色”なのかがわからなくなったりすることが多いんですね。 んなことしていたら、『色』について悩む時間だけで丸一日過ごすなんてこともざらにあったりしたわけです。デザインしだ

WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立

Color Hexaは色に関する情報をたくさん教えてくれるサービスです。 色の構成から似た色、反対の色などなど。 Webサイトの配色決めなどにも利用できそうですよ。 フォントや背景色、ボーダーにその色を使ったときの見た目も教えてくれます。 以下に使ってみた様子を載せておきます。 まず「Color Hexa」にアクセスしましょう。 カラーコードなどで色を検索しましょう。 このように色の構成などなど様々な情報が知れます。 似た色、反対の色、フォントや背景に使うとこんな感じなど、 実際に利用するときに役立ちそうな情報もたくさんあります。 色について困ったときは是非使ってみましょう。

多くのwebデザイナーが、行き詰ったときに吐かれる台詞。 それが『センス』です。 センスがない、というのはよく聴く言葉です。 しかし、色彩感覚とは『センスの問題』ではなく、たんに勉強不足というケースも少なくありません。 今回はそんな色をテーマにしたエントリーをまとめて見る事にします。 とにかく最初に学ぶ基礎 この色彩系の分野においては圧倒的にwebクリエイターボックスブログが強いので、その中でこれは使えるぞというエントリを何個か抽出しています。そのほかにも、ちょっと古い記事でもとても参考になるものからもご紹介いたします。 正直私のブックマークが配色、色彩、色で60近くのエントリーがありました。 色で学ぶ部分と言うのは「広く浅く」では無く、どちらかと言うと「狭く深く」のほうが強い気がします。なので、そのブックマークの中から、かなりというかもう限界まで厳選した物をご紹介いたします。 配色パター

webサイトを作成するときに、どうしてもサイト全体の色を決められないという人の為のエントリ。 本当は少し濃いオレンジ系が食べ物屋に向いているとか、薄いグレーが高級感や落ち着きを出すようなページだとか、清潔感のあるイメージを作る為には黒を背景にしては駄目とかというお話を先にしたほうが良いかもしれないのですが、そんなのにとらわれてもしょうがない気もするので、気にせずいきましょう。 サイトカラーをツールに任せる kuler 直感的に色を決めたい人向け。 よさそうな配色パターンが決まったら以下をクリック。 これで直感的にサイトカラーを決めれるはずです。たぶん。 もっともっと直感で決めたいという人は以下 Color Theory 『難しい事を考えるのは嫌なんだ。もっとこう、ばっと、ズババっとくるのないのか』という人にはこのサイトがお勧め。 マウスポインタを好きなカラーの上に乗せるだけの、とても簡単な

カテゴリー別配色アイデア100配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 配色に関するおすすめサイトCOLOURlovers色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。 ウェブ配色ツール Ver2.0以前「配色に自信がなくても！Web デザインが好きになる配色ツ