0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ハロプロメンバーカラーの公式によるCSS指定への感謝の表明②:8RGB指定の妥当性と新たな優位性

0
Last updated at Posted at 2026-05-26

8RGB指定というのはハロプロメンバーが公式で色空間をCSSで指定してくれたこと、それをつかってタイムライン画像の自動生成に取り組む際、HEXの複雑性に端を発して、新しい色空間の指定法、8ステップRGBグリッド色空間指定法(英: 8-Step RGB Grid Color Space Specification Method)をnoteで記事にしたものを参照してほしい。また自サイトでその画像を公開しているのでハロプロ二興味がある人はぜひこちらに。

そこで述べたこの手法の優位性は。その圧倒的簡便性・UIのわかりやすさ、引き出しといいう使い方との類似性、コードの持続性でした。また欠陥については色指定の際に#b9d9ebではなく#$567のように記述することにより解決した。

次に考えなければいけないことがこの量子化によって、必要な色が損なわれてしまうのではないかという懸念だ。要するにHEXのように6文字で細かく指定していた時の区別がつかないのではないかということを考えなければいけない。

そこで検証に使うのが、先ほどのハロプロメンバーの公式HEXです。
何人公式ページからとったHEXをこの手法で量子化してみます。

結果の全員はスプレッドシートを見てください。ここでHEXで指定したものと8RGBで量子化して逆変換でHEXにして指定した色が一致しているかどうかを述べているわけではありません。アイドルのメンバーカラーのようにデザインを深く考えなければいけない時にこの手法を使おうといっているわけではないことを理解してほしいです。
要するにHEXで指定したときに別の色になっているメンバーが8RGBにより同じ色になってしまうようではこの手法の限界が来ていることが示されてしまうのです。

よく表を見ていただけると、同じHEXの人が同じ8RGBで同じ色になるのは当然のことですが、似た色ではあるがHEXで異なった指定をしているメンバーはきちんと違う色に8RGBによってもなっていることがわかります。わかりやすいのがモーニング娘。26の弓桁朱琴さん並びに赤のメンバーです。

名前 メンバーカラー HEX 8RGB 逆変換HEX
弓桁朱琴 ピュアレッド #db0025 #$601 #D01030
米村姫良々 イタリアンレッド #e70033 #$701 #F01030
橋迫鈴 ピュアレッド #e70033 #$701 #F01030
川嶋美楓 ピュアレッド #e70033 #$701 #F01030
吉田姫杷 ピュアレッド #e70033 #$701 #F01030
秋山眞緒 ライトレッド #e70033 #$701 #F01030

なぜ名前が違うのにHEXが同じメンバーが複数いるのかが公式の意図なのか、適当なのか、半角全角が混在している(実用上は問題ない)ことには、ここでは触れないでおきますが、要するに他の人とは別のHEXが充てられているのです。そしてきちんと別8RGBの値となり別の色になってることがわかります。むしろ別の名前なのに同じHEXになっているのは、ちょっとよくわかりません。

また

名前 メンバーカラー HEX 8RGB 逆変換HEX
小野田華凜 ピンク #F57EB6 #$735 #F070B0
小野田紗栞 ピーチ #F57EB6 #$735 #F070B0
筒井澪心 ロイヤルブルー #0033a0 #$015 #1030B0
相馬優芽 ブルー #005eb8 #$025 #1050B0

などからもわかります、HEXで違いを示したメンバーは別の値になっています。ここで、とても感がいい人はわかるかと思ったかもしれません、スプレッドシート上、弓桁さん米村さん以下レッドメンバーはなぜ近くの行にいないのかや、これは何順でソートされた行列になっているのだと。このソートはメンバーの名前などではなく、8RGBの値をR順、次にG順、B順、要するに8RRGの値をそのまま3桁の数字として並べたものになります。

要するに8RGB指定により簡便にした値によって色空間を簡単にソートできるようにもなります。これは前の記事により触れていなかった利点になります。もちろんHEXでも6文字でソート、16進法の3つの値でソートは可能ですが、スプレッドシートで簡単にソートとはいかないのです。HEXで、色でソートすることに何の意味があるのかと聞かるかもしれませんが、今はデザイナーだけでなく誰もが色を指定し、それをデータで管理することなどよくあることだと思います。それを『一意』にソートすることはとても便利なことです。

ここでもう一つ疑問があるかもしれません。なぜ白:#ffffffのメンバーが8RGB(777)になっているのに、真っ白なんだと。240,240,240の#F0F0F0ではないかと。そうですこの手法にはもう一つ欠点があります。それはとてもよくつかわれる値#000000と#FFFFFF、すなわち黒と白にがそれぞれ少しグレー寄りになるのです。これでは気持ち悪いのでこの二つに関しては例外として扱うことで8RGB法を改善します。すなわち000と777は例外で#000000と#FFFFFFをあてます。

前回の記事でも貼りました、8RGB指定のUIのデモをCloudflare Workesに公開しましたので、それを触ってみてください。
https://tools.yxmxgxn.workers.dev/8rgb/
別の値になるとほぼ視覚的にも色が変わることがわかると思います。またUIの設計の際にクリックした値の前後+1,-1が左右にあるのでとても色の違いが分かりやすいです。

ここまでで8RGB法の妥当性を簡単な例で示しました。前回の記事で優位性と欠点と#$記述による解決を示しました。この記事でIDによるソートという新たな優位性を示しましたが、ソートしたときに色相がそろわないことに気持ち悪さ、B桁はきれいにグラデーションになりますが、G、Rが飛び飛びになります。もちろんすべてをきれいに並べることは不可能ですが、単純化した8RGB指定の提案するうえで、単純HSL指定(英:Simplify HSL Specificaton)を思いついたのでそれは次回の記事に。

前回はアイドルのメンバー紹介で締めましたが、今回はこれで締めます。

オタクA「あの人、有澤一華さんのオタクだよね、メンバーカラーの画像作ってるんだけど。」
オタクB「そうそう、公式が#$567と色指定を指定したからデザインが楽になったらしいよ。」

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?