CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単
CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。 中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。 oklch.fyi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 OKLCHカラーとは カラーモデルとは 色域とは OKLCHの構造 OKLCHだと明るさの一貫性が簡単 OKLCHだとシェードも簡単 OKLCHだとグラデーションも美しい カラースペースのサポート 最大彩度 ブラウザのサポートとフォールバック OKLCH
webアクセシビリティ、デザイン面での最初の難題「緑オレンジ問題」を考える｜加藤朋義
「このボタンは目立たせたいから、オレンジにしよう！」 そう思ってデザインすると、「このオレンジはアクセシビリティ未達です」と指摘が入る。 目立つ色を使ったのに、アクセシビリティに達していない。そんなちょっと腑に落ちない経験をしたことないでしょうか。 ここではデザイナーさんがひっかかりやすいwebアクセシビリティ問題No.1（個人調べ）といえる緑オレンジ問題を詳しくみていき、解決方法を考えます。 「緑オレンジ問題」とは冒頭のように、ボタンを目立たせようとしてオレンジ色を選んだ瞬間、アクセシビリティ上で問題が発生する可能性があります。 ↓ 以下のボタンをご覧ください。 良い感じのオレンジだと感じる人が多いかと思います。 しかし、このオレンジはアクセシビリティ基準をクリアしていません。 （ここでいう「アクセシビリティ基準」とはWCAG2.2レベルAAを元にします。初心者の方は「なんかみんなが基準
back check デザインシステムのプリミティブカラーを拡張した事と学び｜りょっすぃ
back check とはback check は、採用候補者の経歴や実績を確認できるリファレンスチェックサービス。コンプライアンスチェック機能もあり、企業が適切な人材を採用できるよう支援する。 用語デザインシステム：デザインをする上でのルール。これを決めておくと、複数人でサービスを作る際にページごとにバラバラな見た目になりにくいので便利。 プリミティブカラー：デザインシステムのルールの１つ。そのサービスで使用できるカラーパレットのこと。 デザインシステムでは、管理しやすいよう色一つ一つに名前をつける。プリミティブカラーは一般的にGreen-200のように色名-番号と命名され、番号が小さいほうが薄い(背景色との差が少ない)色となる。 経緯以前は、グレー10種に対し、有彩色（緑・青・赤）は4種と、サービス上で使用している最低限の色のみ設定されていた。 以前のプリミティブカラー複数の明るい有彩
グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator
美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。 そしてここで紹
失敗しない美しいUIにする配色の選びかた【実践編】 | PhotoshopVIP
Refactoring UIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プロセス
LCHは、UIにベストなカラースペース｜hirotoarakawa
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
artience株式会社｜感性に響く価値を創りだし、心豊かな未来に挑む
製品・ソリューション 製品・ソリューション トップ 市場・用途で探す エレクトロニクス オプトエレクトロニクス モビリティ エネルギー パッケージ メディカル・ヘルスケア 建築材料・住空間 印刷 製品カテゴリで探す 色材 電子材料・光学材料 接着材料 コーティング インキ その他 よくあるご質問 ソリューション ソリューション トップ リサイクル パッケージ モビリティ 電子デバイス バイオサイエンス 抗菌・抗ウイルス コラム 展示会 研究開発 研究開発 トップ 開発方針・体制 テクノロジープラットフォーム 研究所概要 会社情報 会社情報 トップ 社長メッセージ Brand Promiseと理念体系 経営方針 会社概要 役員一覧 事業紹介 artienceグループの歴史 動画アーカイブ 株主・投資家情報 株主・投資家情報 トップ 経営情報 経営情報 トップ 社長メッセージ 経営計画 ガバナ
ブランドカラー選定に必要な4つの基本プロセス｜Goodpatch Blog グッドパッチブログ
デザイナーのみなさま、突然ですがこんな悩みはありませんか？ ブランドカラーを何色にするべきか、どのように決めたらよいか迷ってしまう。 いつも無難な色を使いがちでデザインの幅が広げづらい。 なぜこの色なの？と聞かれた時にロジカルな回答ができるか心配。 デザインをしていると、このような悩みを一度は持ったことがあるのではないでしょうか。 プロセスの中で必要とされるカラーの選定は、1つの難関ですよね。 0→1フェーズのデザインを得意とするグッドパッチでは、目には見えないサービスのコンセプトを決定するところから、ブランドカラーやサービスロゴなどで実際の形にする提案までを担当させていただくことが多々あります。 実際に私が担当したプロジェクトでは、とある企業さまの新規デジタルメディアの立ち上げを担当させていただき、その際Webサイト内とサービスロゴに使用するブランドカラーの提案をさせていただきました。
CSSとコンポーネント設計に対する考察 - uhyo/blog
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ
ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Chartable https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎない カラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
LOL Colors - Curated color palette inspiration
LolColors Curated color palette inspiration. In need of a total site redesign, ground-up build, or other extensive design work? Check out our various lists of the top web design companies for an objective look at the best web design agencies around. Looking for help with marketing as well? We've got you covered with our rankings of the best digital marketing companies in the country! Sorting and "
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
Chain - Dynamic color relations in Skech
A process for building out color palettes
GitHub - ment-mx/Prism: Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.
