これだけは知っておきたい、色の基本原則まとめました。
海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい、日本語抄訳しています。 デジタル時代のデザイナーとして、絵の具やインクなどの顔料だけでなく、さまざまなアプローチから色の使い方を学ぶことができます。実際に、人間の目は数百万色の色合いを識別することができます。しかし、2〜3色の配色を決めるだけでも、大変な作業に感じてしまうことがあります。 なぜならデザインの配色を決める作業は、主観的（英: Subjective）であると同時に、とても科学的（英: Scientific）でもあります。色は雰囲気（英: Mood）や、感情（英: Emotion）、物の見方（英: Perception）に強く影響し、意識的そして無意識に注目を集めることができます。 デザイナーやマーケーターにとって、
【便利Webツール】ランダムでいい感じのカラーパレットを作ってくれる配色ツール「Coolors」
配色ツール大好きなおつぱ（ @OZPA ）です。 今回はスペースキーを押すたびにランダムでいい感じのカラーパレットを作ってくれる配色ツール、Coolorsのご紹介。 Coolors – The super fast color palettes generator! Coolorsはスペースキーを押すたびにランダムでカラーパレットを作ってくれる配色ツールです。 スペースキー！ スペースキー！ 基本的な使い方はこれだけ。 パレット内のカラーはクリックすることでロックできます。 カラーをロックした状態でスペースキーを押すと、それ以外の色がロックしたカラーに合わせて変更されます。 任意のカラーコードを入力することもできます。 メインカラーを決めて、そのカラーをロック→パレットを作成、なんて使い方がCoolではないでしょうか！ 面白いのはカラーコードの抜き出し方。 これだと思う配色が出来上がったら
配色に役立つ11のサイト
WEBデザインを行う上で重要なファクターの一つである配色：カラーリング。ロゴやブランドイメージなどから導きだすケースが多いと思うが、困ってしまうのは明確なイメージがなく、キーカラーが決まらないとか、キーカラーとの組み合わせがイマイチしっくりこないなど、配色で頭を悩ませることは結構あるのではないだろうか。 そこで今回は、そういう時に役立ちそうな10サイトを紹介したい。各サイト共に試してみたが、思わぬ組み合わせや自分では積極的に使わない色や自分の好き嫌いを再確認できて結構面白い。こういったサイトを活用して効率化を図ったり、新境地を開いてみてはいかがでしょうか。
「信頼感の青」「安心できる緑」など色がマーケティングで果たす役割とは
By etaKate マーケティングにおいて「色」の果たす役割は非常に大きく、「購買行動の9割を目から得た情報によって決定している」という研究結果があるほどで、色をいかに上手く使うかがマーケティング成功のポイントの1つです。企業は実際のところどのように色を使っているのか、それはどのような効果を生んでいるのか、SNS専門のコンサルティング会社Bufferのレオ・ウィドリッチ氏が実例を使ってまとめています。 Why Facebook Is Blue: The Science of Colors in Marketing - The Buffer Blog http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue 多くのウェブサイトや企業のロゴイメージにおいては、ある明確な目的があってその目
配色を考えやすくするための様々なルール ｜https://wp.yat-net.com/name
色は、見た人に対して、そのものの意味を伝えることができます。そのため、色の選択を誤ると正しい意味を伝えることができません。 色とは、デザインを行う上で欠かすことのできない要素であり、プロジェクトの成功にも大きく関わっているため、デザイナーにとっては非常に気を使う要素といえます。 世の中には、何万色という色が存在します。デザイナーは、その中からパターンを組み合わせ、最適なものを選択しなければなりません。 しかし、デザインには意味がある以上、そこにはルールが存在します。そのルールに沿って配色することで、デザイナーは正しい選択ができます。 今回は、配色を行うために知っておくべき、知識やルールを解説したいと思います。 色の色相環と虹 配色と自然の関係 色相、彩度、明度 色調（トーン） 色の役割分担 色の意味 色を選んでみる まとめ 参考文献 1.色の色相環と虹 色の相関を表すのに「色相環」というも
Webサービスのイメージカラーを無作為に調べてみた｜インターネット界隈の事を調べるお
昨日、LINEのカンファレンスに行ってきたのですが、ぼんやりと「緑色を見るとLINEって感じだよなぁ」と思いました。これまで緑といえばあの渋谷の会社を連想してたのですが・・・。 他にも、色の組み合わせだけで特定のWebサービスを連想することができるものはあります。クリムゾンレッドだったら楽天とか。そんなわけで、Webサービスのイメージカラー（使用されている色）を調べてみました。なんだかオーラソーマ・カラーみたいです。 サービスはジャンル別に思いついたものを次々と取り上げた感じですので、脈絡がない箇所もあるかもしれません。色はスクリーンショットからのスポイトという地味な作業により調べております。 1、2行目はEC関連ですが、比較的暖色系も使われており、女性を意識したものも多いのかなって。逆に3行目はお堅いサービスなので青系が多い。以外なのがSNSも青系が多いんですね。3行目と4行目は配色が似
ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集 | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Webデザイナーとして就職するために学生のうちにやっておくべき5つのこと | キャリアバイト
憧れのWebデザイナー。Webデザイナーと聞いて『なんだかハードル高いな…』と思っていませんか？ 確かに、その人独自のセンスや感性はWebデザイナーとして働く上で重要になってきます。 しかし、逆にそれだけでは立派なWebデザイナーになれる訳ではありません。 そこで今回は、初心者の方でも将来Webデザイナーとして就職するために学生のうちからやっておくべき5つのことについてご紹介します。 1.お気に入りのデザインを深掘る みなさんは”このデザインが好き！”というデザインはありますか？ 好きなデザインのテイスト、配色、雰囲気…何でも構いません。とにかくまずは"デザインに興味を持つ"ところからスタートしましょう。 といっても、多かれ少なかれ自分の好きなデザインはあるはず。 大切なのはその後です。 その”好きなデザイン”についてどこが好きなのか考えてみましょう。 このようにデザインへ興味・関心をもつ
[O]フラットデザインカラーリングのコツを探すための７つの検証 – Olein 〜オレのインタレスティングなこと〜
検証１ http://dribbble.com/shots/1059591-Home-Automation-Flat-App-Design まずはこちらを検証してみました。 色のバランスを見てみるとペンタードと呼ばれるバランスに近いような気がします。色数が増える場合には、このようなバランスを保って配色を心がけるといいでしょう。（フラットデザインに限らず） ※ペンタード配色とは？ 色相環を５等分した色相同士の配色のこと 背景がブラックということもあってか、彩度は押さえ気味な印象でトーンも高くありません。こう、見た感じパンチのある色はほとんどありませんよね。落ち着いた印象です。 そうすることによって背景色とのバランスも取れるように考えてあります。 検証２ http://dribbble.com/shots/1052090-AirportChatter-V2-Concept/attachment
これは気になる！最近のウェブデザインで人気のカラーをまとめたスウォッチ素材
前回紹介したフラットなユーザインターフェイスを作成する際にぴったりなカラースウォッチの第二弾がリリースされていたので、紹介します。 今回は442種類のカラーがセットになっており、前回のVol.1を含めてダウンロードできます。
デザインセンスが壊滅的な私が良い感じの配色を実現させている方法 - あなたのスイッチを押すブログ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
フラットデザインに似合う色を集めたカラーパレット『Flat UI Colors』
フラットデザインに似合う色を集めたカラーパレット『Flat UI Colors』 『Flat UI Colors』は最近のWebデザインのトレンドとなっている“フラットデザイン”に合う典型的な色を集めたカラーパレット。 カラーコードの形式を選択して目的の色をクリックすればクリップボードにカラーコードがコピーされるようになっています。 典型例ということで公開されている色数はそれほど多くありませんが、どれかキーとなるカラーを見つけてその色を中心にカラースキームを組んでいくという上では、1つのたたき台となる色探しに使えるサイトだと思います。 さて話はそれますが、少なくとも今のフラットデザインブームの走りは2010年ごろマイクロソフトが公開した“Windows Phone 7”頃から始まり現在のMSのプロトタイプすべてで採用されている「Modern UI（旧Metro UI）」に他ならないと思いま
【配色・色見本 Webサイト紹介】 - 10個のweb配色ツール【色の見本】
ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお
色選びで迷った時に！配色のインスピレーションを得られるツールまとめ6つ | Goodpatch Blog
MEMOPATCHをご覧になっている方のほとんどがWebデザインやUIデザインに関わっている方だと思います。そして多くのデザイナーが頭を悩まされるのが配色ではないでしょうか？。そこで今回は配色の参考やインスピレーションを得られるツールを6つご紹介します！ COLRD http://colrd.com/ 大まかな色から、その色が使われている写真やカラーパレット、グラデーション、パターンを探す事ができるサイトです。カラーパレット、グラデーション、パターンにはそれぞれに使える便利な機能があるのでご紹介します。 ・カラーパレット 検索して出てきたカラーパレットは編集可能で、Photoshop用にカラーパレットをダウンロードできる（.acoファイル) ・グラデーション 検索して出てきたグラデーションはcssのコードを生成することができる ・パターン パターンはそのまま使えるパターン素材（繰り返し可能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインで使う「色」について考えよう Web touch meeting #66
http://handywebdesign.net/2013/09/how-do-you-find-better-color-without-a-tool/
この秋、デザインやファッションに使いたい10色 -2013年秋のトレンドカラー
新着記事
新着記事
