月報BLUEBNOSE 2024年04月号(#3)
BLUE B NOSEの更新情報をお届けします
記事ストックの底が見え始めました。他の業務と並行して書き続ける、発信し続けるのは難しいので、また書き溜める時期を設けようと思います。
3月、4月なんてまだまだ先だと先月書き溜めている時は思っていましたが、光陰矢の如し。あっという間に崖っぷちです。
まだ少しはストックがあるので、どこかで思いつけると楽観視して気を持ち直し、まずは先月の更新情報から。
───────────────
■ 先月の記事・トピック
───────────────
・基本施策は「ケ」x「実存性ペルソナ」マーケティング
https://bbns.jp/services/952/
2024年03月06日 公開 / 87回表示・読了見込 12分
・サンプル事例のテーマ、仕様概説
https://bbns.jp/tech/953/
2024年03月20日 公開 / 56回表示・読了見込 10分
━━━━━━━━━━━━━━━━━
■ その他の更新コンテンツ
━━━━━━━━━━━━━━━━━
・CSS比較関数を用いたレスポンシブについて
https://note.com/bbns/n/nbbc572af9b27
2024年03月13日 公開 / 読了見込 12分
・月刊BLUEBNOSE 2024年03月号(#3)『Webサイトはバックオフィスのバロメーター』
https://bluebnose.theletter.jp/posts/fc85a3a0-ca29-11ee-9f61-098d24e3f2a4
2024年03月15日 公開 / 読了見込 7分
・Vite+Dart Sass+Vanilla JSな開発環境について
https://note.com/bbns/n/nd336d15e59e4
2024年03月27日 公開 / 読了見込 11分
───────────────
■ 青鼻の独白
───────────────
OSやブラウザの設定に則って、"prefers-color-scheme"を用いたメディアクエリ、`@media (prefers-color-scheme: dark)`によるダークモードを採用しているBLUE B NOSE（以下:BBN）では、コントラスト比のコントロールをするためにも、カラーマネジメントとしてMaterial Design(Material Design 3）のカラーシステムをアレンジして取り入れている。
執筆している現段階では、Material Design 3で採用されている「HCT」をSass上から自由に取り入れることは難しく、妥協案としてOklch空間による調色を採用せざるを得ないからだ。
Material Design 3のシステム、ツールを使ってキーカラーからカラーパレットを生成、ダウンロードして使用する方法も可能だが、それでは手間が大きすぎる。
手元のSass、カラーをコントロールするファイルの上で完結していた方が、システム的なカラーパレット生成には向いている。それも、使い慣れているHEXでできるものが良いという判断もある。
ただ、近年ではわざわざ変換しなくても、lch()、lab()、oklab()、oklch()といった色空間をそのままCSSでも使えるようになっている(https://griponminds.jp/blog/relearn-css-color/)ので、Oklab(https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklab)やOklch(https://developer.mozilla.org/ja/docs/Web/CSS/color_value/oklch)で設定したいのなら、それも別に問題ないだろう。
Oklchなら、"https://oklch.com/"に適当な色を入れて試してみるのも良い。
どのモデル、色空間が優れている、劣っているという話ではないのだけど、OklabとOklchなら後者の方がより洗練されているイメージがあるので、BBNのカラーパレット生成にはOklchを採用している。Oklchの方がHCTの挙動に若干近そうという要素もある。
ただ、だからといって2色以上を混色する時にもOklchが良いという話ではない。
BBNで採用させてもらったこちらのリポジトリ(https://github.com/drwpow/better-color-tools)でも、二色を明るくしたり、暗くしたりする関数は、Oklab空間で実行してある。これは、Oklch空間より、混色時のコントロールが容易だからだろう。
ココからが本題だ。近年使用可能になったcolor-mix()関数(https://developer.mozilla.org/ja/docs/Web/CSS/color_value/color-mix)だが、`color-mix(method, color1[ p1], color2[ p2])`と、method、色空間を指定することができる。指定可能な色空間には、OklabもOklchも含まれている。
ただし、Oklabは"rectangular-color-space"、Oklchは"polar-color-space"。色空間の性質上、混色した際の挙動は同じにならない。
試しに手近なブラウザと適当なサイトを開いて、開発者ツールを開いた上で`background-color: color-mix(in oklab, yellow, blue);`や`background-color: color-mix(in oklch, yellow,blue);`のように書き込んで、差を見比べてみて欲しい。Oklchの場合、組み合わせによっては色相が予想だにしない変化を起こすことがある。（上手くいく可能性もある）
OklabやOklchのモデル、色空間の性質に詳しい人ならいくらでも使いこなせるのだろうが、そうでない門外漢が使うなら、Oklabの方がハンドリングしやすいだろう。
なぜ、color-mix()を使うのか？ カスタムプロパティと別の色を混色したり、カスタムプロパティ同士の混色にも使えるからだ。Sassの側でmixするなら、ライトとダークで別の色パレットを用意しておいた場合、ダークモードでない時の混色と、`@media (prefers-color-scheme: dark)`でダークモード時の混色を記述しなければならないが、color-mixなら、カスタムプロパティを指定して混色すれば一回で済む。
この時、Oklchだとコードからは想定しない結果を返すことがある。そういう事故を防ぐなら、color-mix()時のメソッドは、`in oklab`がよりベターである、というお話。
単色を調整する場合はOklch、混色する場合はOklab。
それぞれの向き不向きを把握した上で、上手に新たな色空間、color-mix()関数も取り入れたい。
───────────────
■ 編集後記
───────────────
color-mixの話はまだまだ深掘りできるので、まだ用意できていない記事はこの辺りを触れようかなという心持ちです。とりあえず4月分のコンテンツを捻りつつ、来月以降の記事もどうするかもう一度考え直さねば......。
本腰を入れたコンテンツマーケティング、配信型メディアの運用も多少結果が見え始める頃なので、振り返りや分析等も記事にしてみましょうかね。各SNSの反応等も、近いうちに赤裸々に語ってみましょう。
今回のcolor-mixのように、Substack限定のコンテンツもまだまだ準備していますので、Substackのフォロー、メールアドレスのご登録も心からお待ちしております。
それでは、来月の月報BLUE B NOSEもお楽しみに。
───────────────
ご意見やご感想、ご質問等ございましたら、info@bbns.jp までお寄せください。
もし、SNSで何か発信される際は、#BLUEBNOSEや@bluebnoseをつけて発信していただけますと幸いです。
忌憚のないご意見、ご感想を、スタッフ一同心よりお待ちしております。
───────────────
【月報 BLUE B NOSE 2024年04月号 (#3)】
BLUE B NOSE 運営窓口
info@bbns.jp
〒630-8217
奈良県奈良市橋本町3-1 BONCHI
（株式会社 FRATELLO内）
https://bbns.jp
───────────────
このメールマガジンは、BLUE B NOSE’s Substackにご登録いただいた皆さまにお届けしています。
ご登録がまだの方は、下記からご登録ください。
また、配信停止や配信設定の変更をご希望の方は大変お手数ですが、本メール下部のUnsubscribeのリンクよりお手続きいただくか、info@bbns.jp までお知らせください。