タグ

色に関するstudydesignのブックマーク (5)

  • グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ

    ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Chartable https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎない カラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化

    グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ
  • デザインで「人間が感覚的に見分けやすい色」を選ぶ方法をデータ可視化のプロが解説

    ある特定の色を表現するために利用される色空間には、RGBやHSV、HSLなどがあり、それぞれの色空間で色を表現する方法が異なります。データ可視化ツールのDatawrapperでCTOを務めるGregor Aisch氏が、「人間が感じる色」に基づいて色を使い分けるには、色空間が重要であると自身のブログで語っています。 How To Avoid Equidistant HSV Colors https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/ Take Care of your Choropleth Maps https://www.vis4.net/blog/2011/12/choropleth-maps/ Aisch氏が色の選択の重要性に気づくきっかけとなったのは、「The Guardian」が公開していたアメリカ

    デザインで「人間が感覚的に見分けやすい色」を選ぶ方法をデータ可視化のプロが解説
  • Appleが策定したスマホやPCの画面をもっと豊かな色合いで表現できる色空間「Display P3」とは?

    色の見え方には個人差がありますが、その色をいくつかの数値で示し、定量的に表現できるのが色空間です。代表的な色空間はsRGBやAdobe RGBですが、そうした旧来の色空間よりも豊かな色合いを表現できる、Appleが策定した次世代の色空間「Display P3」について、ブラウザエンジン「WebKit」のエンジニアであるNikita Vasilyevさんが解説しています。 Wide Gamut Color in CSS with Display-P3 | WebKit https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ Display P3はsRGBの持つ色空間をすべてカバーした上で、sRGBよりも35%大きい色空間を持ちます。画像はDisplay P3で表現できる色の範囲にsRGBで表現できる色の範囲

    Appleが策定したスマホやPCの画面をもっと豊かな色合いで表現できる色空間「Display P3」とは?
  • UIデザイナーから学ぶ!今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説

    デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です

    UIデザイナーから学ぶ!今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
  • UDing ディザ | UDing | TOOL | TOYO INK 1050+

    UDingシミュレーターの進化版が登場!ディザリングを活用し色変更をせずにカラーUDを実現しました。 「UDing ディザ」とは これまでカラーUDを取り入れづらい理由として、「使用できる色が制限される」「色の変更で配色イメージが変わってしまう」などがありました。「UDing ディザ」は、そうしたご意見を踏まえて開発した新しいカラーUD支援ツール。「ディザ処理」を活用し、色変更をせずに配色デザインを表現することができます。 「UDing ディザ」の特徴 「UDing ディザ」によるディザ処理は、「明度差」を利用した画像処理方法です。元の色の「少し明るくした画像」と「少し暗くした画像」を組み合わせて、「市松模様」「縦じま模様」「横じま模様」のいずれかにすることで、遠目には同じように見えながら、カラーUDに対応したデザイン配色デザインを実現しました。 「UDing ディザ」の使い方 「UDin

  • 1