デザイナーならきっと分かる(?)謎解き&ツールを作った話

聡明なIT、Web系のデザイナーの皆さんがワクワクする謎解きの時間です。
下記は何と書いてあるのでしょうか？

デザイナーならきっと大丈夫！

画像だとアレなので文字列にしています。

9932cc 6b8e23 fff ff0 fdf5e6 40e0d0:2 fff ffffe0 cd5c5c f0e68c afeeee:4 fff fffaf0 fffff0 808080 66cdaa f0f8ff ?

※ あくまでジョークなので謎が解けなくてもデザイナー業務に何も問題ありません。
※ いつもの自分の記事であれば「成果物のリンク」の方を先に記載するのですが、ネタバレを防ぐために色々書き方を工夫して一番最後にツールのリンクを貼っています。
※この記事内に「ヒント」を3つ用意しているので、分からない方はゆっくりスクロールしてみてください。

きっかけ

「kurokkyさん、デザイナーの子に何かメッセージありますか？」

そんな面白そうなお題を貰ったので
「じゃぁ、IT系のデザイナーにしか分からないようなメッセージにしてみたい」というのが頭をよぎりました。

思いついたらやるしかない…

と、いうことで作ったのが冒頭の暗号文(？)です。

では、これより下はヒントと解答が続くことになるので、先に解きたい方はスクロールに気をつけてください。（改行多めにしています）

ヒント 1

#000

デザイナーの方これ脳内でどう変換されますか？

ヒント 2

40e0d0:2

問題文をよく見ると「:」の後に数字があるものがありますね…

ヒント 3

1文字だけ実装が難しかったので無理やり実装しました。

解き方 & 解答

この暗号はRGB値をcolor nameにすることからはじまります。
この記事の例題であれば

9932cc 6b8e23 fff ff0 fdf5e6 40e0d0:2 fff ffffe0 cd5c5c f0e68c afeeee:4 fff fffaf0 fffff0 808080 66cdaa f0f8ff ?

は以下のように変換できます。

darkorchid olivedrab white yellow oldlace turquoise:2 white lightyellow indianred khaki paleturquoise:4 white floralwhite ivory gray mediumaquamarine aliceblue ?

次はwhite(fff)を空白スペースにします。

darkorchid olivedrab   yellow oldlace turquoise:2   lightyellow indianred khaki paleturquoise:4   floralwhite ivory gray mediumaquamarine aliceblue ?

とりあえず、数字のついてないものは先頭の文字だけにします。

d o   y o turquoise:2   l i k paleturquoise:4   f i g m a ?

ここまで来ればなんとなく想像ついたと思います。
「:」があるものは何文字目か？です。
そして最終的にfffがあった部分を除いてスペースを取ります。

do you like figma ?

という文字列になります。（弊社ではデザインツールとしてFigmaを使っています。）

尚、ヒント3は主要なcolor nameに「x」という文字列がなかったためです。（変換ツールではRGB値にはない「xxxxxx」という文字列になるようにしています。）

変換ツール & まとめ

使う方がいるか分かりませんが、こちらに用意しています。

今回は、デザイナーに限らずIT業界にいると「#000」と見ると「あー、黒だなぁ」と脳内変換されるのを利用した謎解きでした。

「頭の体操になったなぁ」とか「color nameなんて覚えてねぇよ！」って方含めて面白いと思った方はスキを押してもらえるとありがたいです。