クトゥルフ神話TRPG「誰がロックを殺すのか」で利用するカスタムCSSを作成させていただきました！
実際に使ったCSSにつきましては公開できませんが、どんなデザインに仕上がったかを見て貰いたかったので、記事にしました。
どんな物語が紡がれたのか、そしてLive2Dなども準備してめちゃくちゃ力を入れられているようなので、ぜひYouTubeのライブおよびアーカイブをご覧下さい！（なおうちは未通過なので視聴できていません……）
成果物
残念ながら誰ロクを回っていないため、唯一知っている『バンドメンバーの物語』という情報から、音楽っぽいデザインに仕上げました。
音楽っぽいUIといえば……「NieR:Automata」ですね！
ということで、NieR:Automataをリスペクトしつつ『音楽っぽい』かつ『配信画面で見やすい』かつ『（作るのが大変なので）今までに無いうちの技術力』を盛り込んだカスタムCSSを作成してみました！
ルームチャット
一番最初に作ったCSSで、一番最後まで調整を重ねたCSSでした。めちゃくちゃ時間掛かってしまった……
音楽ということで『五線譜』をイメージして作成しました。罫線はboederとみんな大好き疑似要素（::beforeと::after）で作成してます。一定間隔のバランス取るために:rootで指定して、calc()で計算させるなど、1つ弄ったら勝手に連動して綺麗なパターンになるよう完備されています。どこにも出さないけど自分が楽になる事は惜しまない。
右側のアイコンはICOON MONOさんの素材を活用させて頂いてます。SVGファイルも配布されてるのめちゃくちゃ便利なんですよね！今回はダウンロードしたSVGを疑似要素およびbackground-imageで表示させています。キャラクターの担当楽器と、カラーを合わせて淡く表示させているのが個人的推しポイントです！かわいく表示できて満足の逸品ですね！！
フォントは個人的お気に入りのZen Old Minchoを利用しました。Google FontsはカスタムCSSとの相性抜群なので、みんな利用しようね！！
ちなみにフェードインとアウトも付けてるよ。使ったCSSは以下の記事に載せているのと同じなので興味ある方はチェック！👍
吹き出し
こちらもルームチャットと同じく五線譜をモチーフにしています。ただ同じデザインじゃ映えない……と思って、ココフォリアの吹き出しと同じく黒が基調のデザインにしました。シックな感じで“ロックさ”が出てるんじゃないかな？と思ったりしています。
罫線と背景の記号はルームチャットと同じ技術を利用しています。記号はUnicodeに存在する「ト音記号𝄞」と「ダブルフラット𝄫」をそのまま利用しました。Unicodeくん、フォントさえ存在すれば色々な記号や文字があるので凄いですね（その反面、幽霊文字とかもありますけど）。
斜めになっているのはルームチャットとの差別化、かつ斜に構えてる感じです。こういうの作ったこと無かった、と思って実装してみました。斜めに歪めているのはskew()を利用しています。ただ親要素に指定したら子も斜めになるので、子には逆の値を持たせて相殺させてます。
フォントはルームチャットと同じくZen Old Minchoです。統一感を出すため、ですね！
ステータス
ルームチャットと吹き出しは五線譜だったので、ステータスは音響系のUIに似せたいな……と思って思いついたのが『音量調整バー』でした。ボツ案ではイコライザ（緑～黄～赤に光る音量がわかるアレ）とか、オーディオインターフェースのつまみ（AG03の左側についてる上下に動かせるアレ）とか、色々考えてはいたのですが配信画面がゴチャゴチャしたりするのを嫌って、シンプルなデザインだけど音楽っぽさが残るデザインになりました。
音量調整バーらしく左側にはスピーカーを表示。これは上に同じくSVGを疑似要素で表示させてます。
ステータスバーはheightを調整して細めつつ、widthの可変が発生する要素へ疑似要素でドラッグできそうなボタンを持たせています。そのおかげでHPやSANの可変が発生した場合、丸いボタンも一緒に動いてくれるオシャレさんとして生まれました。
ステータスの名称はpaddingで無理矢理変更しています。正直オシャレじゃないけど上手く表示されればOKの精神で生きてます。
数値についてはなにも変えていません。そのままのキミで生きていて。
フォントはUIをイメージした、という事もありドット風に変更しました。明朝体だと見えづらい＆他との差別化も含めて良い選択だったかなと個人的に自負しています。使ったフォントは、こちらもGoogle FontsのDotGothic16です。
それでは～ 👋👋
