IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい - Qiita
CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。 https://luncheon.github.io/lch-color-wheel/ この記事はその経緯です。 HSL 色表現と色相変数 CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。 色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。 .btn { background-color: hsl(var(--hue), 100%, 60%); border: 2px solid hsl(var(--hue), 100%, 40%); } .btn:hover { box-shadow: 0 0 8px hsl(var(--
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
カラーパレット設計ツールのJSONをFigmaのVariablesに取り込むプラグインをつくりました｜Hiroki Tani
このFigmaプラグインは何？このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。 2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer Prism PrismはGitHubのデザインシステムであるPrimerのチームが開発したツールです。HSLの値あるいはカーブを操作して色を決められます。また同じ色相の組み合わせをWCAG 2系のコントラスト比を元に評価できます。彼らの設計に基づくツールなので、柔軟性はないですがシンプルなツールと言えます。 Exportする方法Exportは画面の右上にあるExportからできます。表示されるJSONをクリップボードにコピーしてください。 Figma Variab
色を決めよう -デザインシステム構築奮闘記⑤-｜ヌマタ
こんにちは！atama plus プロダクトデザイナーのヌマタ @n_m_ta です。 この連載は、スタートアップのインハウスデザイナーたちが、デザインシステムを1から構築する様子をまとめ、誰かの参考になればという趣旨ではじめました。 デザインシステムの構築に至るまでの経緯や、プロダクトの概要についてはこちらをご覧ください。 前回は、ムードボードを作りました。今回は、コントラスト比を意識しながら色を決めた話についてお伝えします。 本記事は、2019年に実施した取り組みをまとめたものです。 これは atama plus Advent Calendar 2023 と デザインシステム Advent Calendar 2023 の5日目の記事です。 コントラスト比が足りないムードボードを作り、言葉と見た目の両面から「らしさ」の認識合わせができました。次に、私たちは色を決めることにしました。このタ
シンボルカラー選定の色々｜きよえ氏さん
こんにちは！Goodpatch UIデザイナーのきよえ氏です。 今回は、Webサービス（またはアプリ）のシンボルカラー選定に必要な、色に関する知識や準備に焦点を当てた話を色々書いていきます。 カラー選定のゴール今回取り上げる「シンボルカラー」は、サービスのあらゆる場面で利用されます。Webサービスでは、主にデザインシステムのプライマリーカラーに利用されますが、名刺や広告、採用活動などでも利用されます。したがって、デジタルだけでなく、印刷物においても一貫した色を再現できる必要があります。 これを踏まえて、シンボルカラーを数値化すると次のようになります。一般的に、以下を決めることがカラー選定のゴールになります。 RGB / HEX：Webデザインで利用 CMYK：フルカラー印刷で利用 DIC / PANTONE（もしくは色見本）：特色印刷で利用 アウトプット例： 色を見る色は、同じ数値でも条件
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
Accelerating GitHub theme creation with color tooling
CompanyEngineeringAccelerating GitHub theme creation with color toolingLearn why the GitHub Design Infrastructure team built a dedicated color tool and how they use it to create new color palettes for GitHub. Dark mode is no longer a nice-to-have feature. It’s an expectation. Yet, for many teams, implementing dark mode is still a daunting task. Creating a palette for dark interfaces is not as simp
人間の目に優しい色合いを設計するためのカラースペース -HUSL
iOS 7にも採用されているような落ち着いたパステルカラー、同じ明るさで異なる色合いを組み合わせたカラースキームなど、人間の目に優しくより見やすくなるように色合いを設計するためのカラースペース「HUSL」を紹介します。 HUSL -Human friendly HSL HUSL -GitHub HUSLは「Human friendly HSL」の略で、RGBのカラースペースに幾何学的な変換して設計されています。カラーの定義はHSLのように色相（hue）と輝度（lightness）を使い、彩度に「saturation」ではなく「chroma 」を使用します。 彩度のsaturationとchromaの違いは、こんな式になるようです。 Saturation（彩度：S）＝ Chroma(C) ／ 明度(V) 参考：イメージクリエーションの構築と基礎知識の習得 どんな感じかは、デモですぐに試すこと
スライド資料のデザインが劇的に良くなる！現場で学んだフォント・色の選び方｜fuyuna blog｜デザイン・ライフスタイル・キャリアについて書くデザイナーのブログ
「作りたい資料に適したフォントがわからない」 「どの色を選べばいいかわからない」 「スライド資料のデザインをもっと洗練させたい」 スライド資料をデザインするとき、こんな悩みを持つ方は多いのではないでしょうか？ スライド資料の印象は使用する「フォント」と「色」によって大きく変わり、うまく活用すれば見る人の心を動かし、行動を促す資料を作成できます。 そんな効果的な資料を作成するには、フォントと色の基本知識が必要不可欠です。それぞれについて学ぶことでデザインセンスが高まり、あなたのスライド資料に適した色とフォントを、効率よく選べるようになるでしょう。 ということで、この記事ではスライド資料のデザインに役立つ「フォント」と「色」の基本知識から、適切な種類を選ぶポイント、もっとデザインを学びたい方におすすめの書籍まで、フォントや色に関するノウハウをたっぷり紹介していきます！ デザインに苦手意識がある
Sim Daltonism
From the perspective of a color blind person, some colors are impossible to distinguish. Sim Daltonism lets you visualize colors as they are perceived with various types of color blindness. Move the Sim Daltonism window over something on the screen and see what it looks like with a color blindness. With this app you can check the accessibility of websites and other user interfaces, make your visua
高評価“色彩”謎解き冒険ゲーム『Hue』Steamにて期間限定で無料配布開始。モノクロ世界で色を集める少年の物語 - AUTOMATON
パブリッシャーのCurve Gamesは5月26日、『Hue』Steam版の無料配布を開始した。配布期間は6月9日2時まで。Steamユーザーであれば、期間内に入手することで配布期間終了後もプレイすることが可能だ。本作のSteamでの定価は1480円となる。 『Hue』はパズルアドベンチャーゲームだ。主人公となるのはHueという名の少年。彼は行方不明の母を探すべく、無彩色の危険な世界を冒険する。そして探索を通して、各地で色の破片（coloured fragments）を拾い集めていく。Hueの冒険を通して、愛や喪失、実在性や自責といったテーマのストーリーが展開されるという。 本作では拾い集めた破片と同じ色にステージの“背景色”を変えることが可能。背景と同じ色の物体は背景と同化し、消滅してしまうシステムとなっている。この仕組みを利用しながら障害物を消したり、仕掛けを解いたりしながら攻略を進め
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
Colors & fonts - Home
OkColor | Figma Community
JSON to Color Variables | Figma Community
Huetone • Make colors accessible
とある絵師が塗る肌色が明らかに緑がかっているけど指摘できない
