プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Adobe Kuler を使い倒す！カラーテーマ作成から配色のテストまでの作業工程
色んな配色パターンをつくれるのと、他の人がつくったパターンを見られるのがいいですね。 似たようなものにColor Schemerがありますが、こちらは有料ソフト。でもさすがにツールは使いやすく色盲のチェックやらサンプルサイトを表示できたりと優れています。ウェブ版はフリーですがそちらは用途が少し違うんですよね。 と、いうわけでコストの面もあってKulerに落ち着いています。 第1部 Kuler とは？ Kuler とは？ ツールを起動しよう ツールにアクセスする カラーテーマ作成画面へ移動する カラーを変えてみる Kuler とは？ Kuler とは？ KulerはAdobe製のオンラインカラースキーマで、カラーテーマをつくったり他の人が作ったカラーテーマを見ることができます。 デスクトップやFlickrの画像から色を抽出できたり、スウォッチにインポートできるファイル（.ase：Adobe
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
[Å] デザイナーの私が参考にしている「Webデザインをまとめているサイト」を一挙公開！コメントを添えてご紹介
[Å] デザイナーの私が参考にしている「Webデザインをまとめているサイト」を一挙公開！コメントを添えてご紹介
![[Å] デザイナーの私が参考にしている「Webデザインをまとめているサイト」を一挙公開！コメントを添えてご紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/5998bfdbaddf04e5fabbee8e405fa5409b4dbd12/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Fnoimage.jpg)
今年流行のフラットデザインで使われているカラーコード
【Diesel】Dieselで使われているカラー... / #F15C22 / #7A7B7D他...全42件
Photoshopで簡単に配色を確認する裏ワザ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 みなさんは写真やイラストを見たときに、「色使いうまいな！ どういう色構成をしているんだろう？」と思ったことがあるのではないでしょうか？ デザイナーなら誰しもそう思ったことはあると思います。 プロなら肉眼でもぴんとくるかもしれませんが、もっと正確に色構成を確認したい場合もあると思います。例えば、イラストなら最初から配色はできても、写真ではそれが難しいですよね。そこで色構成をチェックをすれば、より理想に近い配色に直すこともできるかもしれません。また、単に配色を確認して色使いを学ぶこともできますよね。 今回はそんな望みを簡単に叶えてくれる、Photoshopのあまり知られていないが意外と便利な機能をご紹介します。 やりかた 今回はこちらの写真を例に使います。 Step 1 「ファイル」から「web用に保存」を選択します。 ※ショートカットはcommand + a
日本の伝統色 和色大辞典 - Japanese Traditional Color Names
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
1年目デザイナーに読ませたい配色の考え方を学べる記事
配色センス0でも大丈夫！？服、インテリア、デザイ... / Webサイト制作において、私なりの色選定の考え方... / 色と人の感覚とウェブデザインのはなし - バニデ...他...全10件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ