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（明度

はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ

$ cat file.txt | sed -r "s/(.*hoge.*)/\x1b[38;5;9m\1\x1b[0m/g" 解説 色付け処理 \x1b[38;5;9mはこれ以後の文字列を赤色に変更するための特殊な文字列であり、\x1b[0mはこれ以後の文字列をデフォルトの色に戻す。 これを出力すると、赤色の「文字列」が出力される。 上記の文字列のうち\xb1はESCの16進数表記である。38のところを48にすると文字色ではなく、背景色を変更することができ、9を変更することで色を変更することができる。色のコードは0~255まで存在する。 この色付け処理について詳しく知りたい場合は、 https://misc.flogisoft.com/bash/tip_colors_and_formatting を参考にすると良い。 置換処理 sedコマンドは正規表現を用いて置換を行うシェルコマンドで、"

路線バスは人々の生活を大きく支える交通手段のひとつといっても過言ではありません。 そうしたなかで、車内の座席は青色のものを見かけることが多くあります。なぜ路線バスの座席は青色が多いのでしょうか。 日本バス協会が2021年度に公表した「日本のバス事業」によると、2021年度のバス年間利用者数は45億3300万人となっています。 そんな多くの人が利用する路線バスの車内といえば、椅子が並び天井からはつり革がぶら下がっています。また、走行中に捕まるポールなどには降車ボタンが備わっています。 では、ここで路線バスの車内を思い浮かべてください。そうすうと多くの人が青い座席が印象に残るかもしれません。 実際にGoogleで「路線バス 車内」と検索するとそのほとんどが青い座席の写真が出てきますが、なぜ路線バスの座席に青色が採用されるのでしょうか。 国土交通省の担当者は「バスの室内色彩はルールに則って決めら

これは designing plus nine Advent Calendar 19日目の記事です。 こんにちは。ritarと申します。 今年の10月頃、YouTubeに大きいデザイン変更がありました。 アイコンの変更、角丸やレイアウトなど全体的に一新されているのですが、中でも自分が仰天したのは「アンビエントモード」という新機能です。 アンビエントモードこのモードをオンにすると、動画の下側のUI領域が、まるで動画部分から光が漏れているかのようにじんわりと色づきます。 これを見たとき自分は度肝を抜かれました。なんたってUIの領域にコンテンツの色が侵食しているのです。 これを踏まえて、最近UIと色について考えたことを、UIデザインの歴史を振り返りながら記していきます。先に要点を言うと、UIはどんどん「無色透明」になっていくと考えます。これは「技術が生活に浸透することによってUIは存在感を減らし

カラー写真って不思議。 どうして、あんなにきれいな色がでるんだろう。 自分で描けないだろうか。 と思ったので、手描きしてみました。 理屈としては知っている 過去に、印刷の工場を見学したことがあるので、カラー印刷のしくみは理屈としては知っている。 写真の色をC（シアン）M（マゼンタ）Y（イエロー）K（ブラック）の四色に分解して、色のツブツブを並べていくと、それが合わさってカラー写真に見える……ということで合ってますよね。 CMYKのしくみ カラー写真を手描きする。ということはどういうことか。 つまり、CMYKに色分解したシアン、マゼンダ、イエロー、ブラックの、点の集まりを、それぞれなにかを使って、自分でポチポチ描いていけばよいのではないか。 まず考えたのは、カラーのカーボンシートを使ったやり方だ。 カラーカーボンを差し替えて重ね塗りする CMYKそれぞれの色の版を別々にプリントアウトし、固定

夏です。木々の緑が鮮やかな季節がやってきました。 [tsujimotterの母校、北大にて撮影] 植物の葉を眺めてると、私はいつもこんな疑問を思い浮かべます。 どうして緑色なのだろうか？ 色は、私たちは幼い頃から知っている身近な存在です。その一方で、とても神秘的な存在でもあります。 色とは何だろうか？ 考えれば考えるほど、その正体が分からなくなってしまうのです。 たとえば、みなさんは色の仕組みに関するこんな問いに答えられるでしょうか？ ・空の色が青色なのはなぜだろう？（太陽の光は白色のはずなのに） ・絵具を混ぜて金色が作れないのはなぜだろう？（そもそも金色っていったい何なのだろう） ・モルフォチョウの翅の色がきらびやかな青色をしているのはなぜだろう？（自然界には青色をした物質はほとんどない） 今回考えたいのは「植物の葉はなぜ緑色なのか？」です。 この問いを突き詰めていくと、分子の中にある電

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

2020年9月15日、Ｊリーグオフィシャルネーム＆ナンバー導入が発表されました。 J.LEAGUE KICK 画像引用元： https://www.jleague.jp/news/article/17893 オフィシャルネーム＆ナンバーの導入の理由 上記のURLには以下のように説明されています。 【視認性向上の取り組みについて】 「これまでのネーム＆ナンバーのデザイン選定には視認性を確保するための基準などが明確に定められておらず、観戦・視聴環境によっては背番号の視認が困難なケースも見受けられました。この度、ユニバーサルデザインを取り入れた統一デザインを採用し、使用するネーム＆ナンバーとユニフォームとのカラーコントラストにも一定の基準を設けるなどの取り組みによって、Ｊリーグ公式試合全体の観戦・視聴環境の向上につなげていきたいと考えています。」 （2020年9月22日追記）上記の言葉にもあるよ

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周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた（ひよこ鑑定士か？）この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何？光（色）を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、本記事では『色弱者』という呼称で表記する。 日本人男性の5％、女性の0.2％がこの色

コツコツと開発を続けてきた、テキストエディター向けの色テーマ「Iceberg」。開発6年目にして、とうとうGitHubのスター数が1,000を越えました！めでたい🎉🎉🎉

この記事は、アクセシビリティ Advent Calendar 2019 - Adventar23日の記事です。 皆さん、CUD（カラーユニバーサルデザイン）、してますか？　一流のデザイナーならみんなやっているというCUDですが、一つの壁があります。 それが、これ。 https://www.nig.ac.jp/color/handout1.pdf　図4より。色盲の人に見分けにくい色のシミュレーション 左端がもともとの色。中央と右が緑、あるいは赤を検知する細胞が無い人の色の見え方で、判別が困難になる色の組み合わせを示しています。 CUDを身に着けるために、これらの色の組み合わせを丸暗記するのはなかなか面倒であり、忘れてしまう可能性もあります。これを体系的に理解して身に着けることはできないか？というのが今回の記事の目的です。 とりあえず色盲とか色弱について理解しよう 人間の目は、3種類の細胞を使

ごきげんよう、和風デザイナーの清水です。 みなさんは日本の夏といえば、何を想像されますか？ スイカ、ラムネ、かき氷、夏祭り、太鼓の音・・・ いろいろな想像が膨らみますね！ 今回は、日本の夏を思わせる和風デザインのつくり方をご紹介していきます。 日本ではいつから夏なのか現在では、7月〜9月くらいまでが夏というイメージが強いですが、古来の日本ではどうだったのでしょうか？ 暦の上では、立夏（毎年5月6日頃）から立秋（毎年8月8日頃）までが夏とされています。 日本では月毎に和風月名がついており、5月は皐月、6月水無月、7月は文月、8月は葉月と呼ばれています。 皐月早苗を植える月といういみの早苗月から皐月になったと言われています。 古来より稲作文化が根付く日本らしい名前ですね。 水無月水無月と書くと夏だから水がなくなるのかな？と思われがちですが、実は水無月を現代語で表すとみのつきつまり、水の月です

こんにちは(\( ⁰⊖⁰)/) GWを挟んで少し日数が経ってしまいましたが、4/26（金）に行われた、DIST.26 「Webサービスの個性を支えるデザイン」 にて、esaのデザインについて発表させていただきました。 DIST.26 「Webサービスの個性を支えるデザイン」 - connpass > 補足・感想・余談 など補足・感想・余談 など 今回の発表は、以前沖縄のHackers Champloo 2018でお話させていただいた、『esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること』の内容をベースに、今回のDISTの「Webサービスの個性を出していくにはどうしたらいいか？」というテーマをあわせて、再構築してみた内容になります。 DIST主催の沖さんから今回のお話をいただく際に、このテーマを決めていただきました。 余談ですが、最近は自分で発表したいテー

注釈： 波長（um） 網膜錐体の励起 私たちの目が、 background-color: #9B51E0 を、この紫色だと知覚するのはなぜでしょうか。 長い間、私はその答えを知っていると思っていましたが、よく考え直してみると、かなり大きな思い違いをしていることに気付きました。 そこで、この思い違いを、電磁放射、光生物学、測色学、表示用ハードウェアについて探求しながら解消していこうと思います。本文の構成は次のようになっています。飛ばし読みしたい方は好きな章から読んでください。 電磁放射 可視光線 人間が知覚する輝度 色の定量化 視覚の生物学的メカニズム 色空間 ライトとギルドの等色実験 色空間と色度の可視化 色域とスペクトル軌跡 CIE XYZ色空間 画面のサブピクセル sRGB sRGBヘキサコード ガンマ補正 ヘキサコードから眼球まで 輝度設定について 書き切れなかったこと 参考文献 で

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.