プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
Googleが提唱する「マテリアルデザイン」の普及をフォローするカラーツールが登場
Googleでは2014年から新しいUX体系として、デバイスの違いを乗り越えて操作性に統一感を持たせ使いやすさを向上させた「マテリアルデザイン」を提唱。声かけだけではなく統一サポートサイトとして「Material.io」を開設し、情報共有や普及に努めています。このサイト内に、アプリにどんなカラーパレットを用いればいいのかを助ける新たなカラーツールが登場しました。 Color Tool - Material Design https://material.io/color/ アクセスすると、最初は下の方がグレーアウトした状態。ページのどこかをクリックすると…… ツールを使えるようになります。左側にページレイアウト、右側に「マテリアルパレット」が置かれています。 ページレイアウトは文字中心のものや画像が中心になるものなど6種類が用意されていて、「＜」「＞」で切り替え可能。今回は5番のレイアウト
配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ - NxWorld
「いつも同じような感じになってしまう」「このキーカラーに対してどんなアクセントカラーが合うのか」といったデザイン（配色）時の悩みを手助けしてくれるものやインスピレーションをもらえるもの、オリジナルのカラーパレットを簡単に作成・出力できるなど、配色・カラーに関連する便利なサイトやツールのまとめです。 似たようなサイトも多いですが、使いやすさ・見やすさ・情報量などの点でそれぞれ違いがあるので、こういったツールをお探しの方はひと通り試して自分に合ったものを見つけてみてください。 December 22, 2014 追記 「Material Design Color Palette Generator - Material Palette」「Material UI | Material UI Colors」「flatuicolorpicker : Best Flat Colors For UI D
単語を入力するとそのイメージに合ったカラーパレットを自動生成してくれる「Colores」
単語を入力するだけでイメージにぴったりな画像を提示してくれ好きなカラーを直感的に探し出してカラーパレットやカラーコードを表示してくれるネットサービスが「Colores」です。 Colores http://colores.manugarri.com/ これがColoresのトップページ。単語を入力するテキストボックスがあるだけという超シンプルなデザインです。 例えば「tree(木)」と入力するとこんな感じでカラーパレットやイメージ画像をずらりと表示してくれます。 単語にぴったりの画像と、その画像に使われている主な色がカラーコード付で表示されるので、イメージにあうカラーコードをすぐに調べられるというわけです。 また、イメージに合うカラーパレットは正方形や…… 長方形で表示されるので、これをクリックすると…… Dribbbleというデザイナーのコミュニティサービスにジャンプ。入力した単語にぴっ
指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。
デザイナー必見！デザインに役立つ配色の基本【初級編】 | ajike switch
こんにちは。 アジケに入社してもうすぐ９ヶ月目になります、デザイナーの原です。 さて、今回はデザインをする上で、知っているときっと役立つ「色」について書いていきます。 色の３属性 どのような「色」も必ず３つの要素からできています。それが「色の３属性」です。 【色相】赤や青など色の種類。 【明度】明暗。明度を上げると白になり、明度を下げると黒になる。 【彩度】色の鮮やかさ。彩度のない無彩色（白・灰色・黒）、彩度のある有彩色に分けられ、彩度が高いと派手な印象に。 トーン 明度と彩度を合わせた呼び方。色の調子のことで、配色を考えるのに重要な役割を持ちます。 【各トーンの意味】 v = ビビッド（鮮やかな） b = ブライト（明るい） s = ストロング（強い） dp = ディープ（濃い） lt = ライト（浅い） sf = ソフト（柔らかい） d = ダル（鈍い） dk = ダーク（暗い） p
日本の伝統色が一目で分かり三原色・カラーコードも調べられる「NIPPON COLORS」
紅・山吹色・橙など日本古来の色の名称は実際にどんな色なのかイメージしづらいときがあるもので、そんな時に色を調べるのにもってこいなのが、様々な「日本の色」を知ることをできるサイト「NIPPON COLORS」です。 NIPPON COLORS - 日本の伝統色 http://nipponcolors.com/ NIPPON COLORSのトップページはこんな感じ。最初の画面は「櫨染(はじぞめ)」に設定されています。 知りたい色にカーソルを合わせてクリックすればOK。今回は撫子(なでしこ)をクリック。 クリックすると全画面が撫子色に変化。 撫子色の部分を良く見ると、カラーコードの番号も書かれています。撫子であれば「DC9FB4」。 色の三原色の配合も画面に表示されており、撫子色はC(シアン)が2、M(マゼンタ)が43、Y(イエロー)が3の配合。絵の具を混ぜて色を作ったりするときなどに参考になり
エンジニアのための配色まとめ - Qiita
無彩色 白と黒との混合で得られる色（白と黒自体も含む）の総称。 白・黒・さまざまな濃度の灰色が含まれる。 彩度が0であることを表す。 無彩色でない色は、有彩色である。 via 写真技術 色と陰影（手代木さんblogより） - 写真技術と光への道でフォトディレクション-Jimdo撮影編 有彩色 白、黒、灰色以外の色味を持った色のこと。 有彩色にはさらに、純色、清色、中間色に分類される。 以下のような図を、 等色相面 と言う。 via 純色、清色、中間色｜株式会社ノイエデザイン 純色 各色相において、最も彩度が高い色。 ただし、色空間によっては純色以外にも彩度が最大になる色がある。 清色 清色はさらに、明清色、暗清色に分類される。 清色にはくすんだ印象がなく、濁りがない色という特徴がある。 明清色 純色に白だけを加えた色。 ピンクや水色など 暗清色 純色に黒だけを加えた色。 紺色や茶色など 中
簡単便利な色設定 SOLARIZED
課題 ターミナルでは，ソフトが ANSI escape code を使用して色を指示し，ターミナルエミュレータ(Putty, Terminal.app)がそれを解釈して着色を行います．ほとんどのターミナルエミュレータのデフォルト設定は，昔のハードウェアリーソースが乏しかった頃の名残を引き継いでいるため，コントラストが不自然に大きく視認性が悪いという問題があります． 例えば，Putty で ansi-color-sh [キャッシュ] を使って全組み合わせを表示させてみると，下図のようになります． 目がちかちかします． これを改善するためにターミナルエミュレータの設定を行う必要があります．しかし，そこで悩ましいのが配色．デフォルトの 16 色が不適切なのは明らかだけど，どういう 16 色を選んだら良いのかはセンスの問題もあり，納得のいく設定いにするのは意外と面倒． その悩みを解決してくれるのが
世界のテキストエディターから - 番外編 テキストエディターの配色を考察してみる
テキストエディターの配色を考える前に、少し昔のことを思い出してみましょう。我々が何げなく使っているコンピューターの歴史をひも解くと、個人がコンピューターを所有する以前は大学や研究機関に非常に高額が大型コンピューター（メインフレームなど）やミニコンピューターを設置し、使用者は直結した端末（コンソール）を使用していました。 各パーツの小型化や普及を伴う価格の低下から、個人が所有できるパーソナルコンピューターが市場に出回るようになりましたが、1981年に登場したIBM PCは表示能力もMDA（Monochrome Display Adapter）というテキスト表示と印刷に特化したものでした（解像度自体は720×350ドットと後発のCGAよりも高いため、同解像度でグラフィック表示を行うサードパーティ製グラフィックコントローラも後に登場）。純正もしくはサードパーティ製のビデオカードを追加して、ようや
nlog(n): ターミナルの配色はアンバーで
ターミナルソフトを、アンバーディスプレイのような配色に設定する。 DEC 社の VAX は実に格好よかった。コンソールが魅力的だった。広い机の一番奥にディスプレイが備え付けられていて、斜め上向きになっていた。操作する人間にとっては、見下ろすようになっており、人間工学的にもよく考えられた配置になっていたのだ。ディスプレイは小さくて、オレンジ色の文字が並んでいた。大きい本体を小さいコンソールで操作するというアンバランスさがよかった。オレンジ色の文字が表示されるディスプレイは、アンバーディスプレイと呼ばれていた。アンバーとは琥珀{こはく}の意味である。 私は、ターミナルソフト Tera Term にアンバーディスプレイの配色を設定している。ターミナルの色にはこだわる人も多い。グリーンディスプレイ風の配色にしている人も結構いるのではないだろうか。大型汎用機の端末はたいていグリーンディスプレイだった
インプレスブックス - 本、雑誌と関連Webサービス
これからのWebサイト制作は「Studio」で！ 発売日： 2025/3/21 好評発売中 Web作成・マーケティング 詳細を見る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
