【制作実績】ココフォリアのカスタムCSSを作成致しました

クトゥルフ神話TRPG「誰がロックを殺すのか」で利用するカスタムCSSを作成させていただきました！

【ライブ告知】

＿＿＿＿＿うだるような暑さの8月。

あなたたちは4人でロックバンドを組んでいる。

クトゥルフ神話TRPG『誰がロックを殺すのか』

🎶放送日時🎶
・2/16(金)/17(土)/18(日)　 20:00~

感想タグ：#みとめる誰ロク pic.twitter.com/v5D1OyU5Do
— るま⚙🥼＠大天才博士Vtuber (@karolab_RUI) February 14, 2024

pixiv

#CoCシナリオ #CoCシナリオ10000users入り【CoCシナリオ】誰がロックを殺すのか【秘匿 – pixiv 【はじめに】このシナリオはクトゥルフ神話TRPGのシステムを用いたものである。シナリオ記載内容の全ては、オンラインボイスセッションを想定して書かれている。基本ル…

実際に使ったCSSにつきましては公開できませんが、どんなデザインに仕上がったかを見て貰いたかったので、記事にしました。

どんな物語が紡がれたのか、そしてLive2Dなども準備してめちゃくちゃ力を入れられているようなので、ぜひYouTubeのライブおよびアーカイブをご覧下さい！（なおうちは未通過なので視聴できていません……）

成果物

残念ながら誰ロクを回っていないため、唯一知っている『バンドメンバーの物語』という情報から、音楽っぽいデザインに仕上げました。

音楽っぽいUIといえば……「NieR:Automata」ですね！

NieR:Automata 開発ブログ

『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログこんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記…

ということで、NieR:Automataをリスペクトしつつ『音楽っぽい』かつ『配信画面で見やすい』かつ『（作るのが大変なので）今までに無いうちの技術力』を盛り込んだカスタムCSSを作成してみました！

ルームチャット

一番最初に作ったCSSで、一番最後まで調整を重ねたCSSでした。めちゃくちゃ時間掛かってしまった……

音楽ということで『五線譜』をイメージして作成しました。罫線はboederとみんな大好き疑似要素（::beforeと::after）で作成してます。一定間隔のバランス取るために:rootで指定して、calc()で計算させるなど、1つ弄ったら勝手に連動して綺麗なパターンになるよう完備されています。どこにも出さないけど自分が楽になる事は惜しまない。

右側のアイコンはICOON MONOさんの素材を活用させて頂いてます。SVGファイルも配布されてるのめちゃくちゃ便利なんですよね！今回はダウンロードしたSVGを疑似要素およびbackground-imageで表示させています。キャラクターの担当楽器と、カラーを合わせて淡く表示させているのが個人的推しポイントです！かわいく表示できて満足の逸品ですね！！

フォントは個人的お気に入りのZen Old Minchoを利用しました。Google FontsはカスタムCSSとの相性抜群なので、みんな利用しようね！！

MDN Web Docs

border – CSS: カスケーディングスタイルシート | MDN border は CSS の一括指定プロパティで、要素の境界を設定します。これは border-width, border-style, border-color の値を設定します。

MDN Web Docs

::before (:before) – CSS: カスケーディングスタイルシート | MDN CSS において ::before は、選択した要素の最初の子要素として擬似要素を生成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられま…

MDN Web Docs

::after (:after) – CSS: カスケーディングスタイルシート | MDN CSS において ::after は、選択した要素の最後の子要素として擬似要素を生成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます…

MDN Web Docs

:root – CSS: カスケーディングスタイルシート | MDN :root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では :root は要素を表し、詳細度が高いことを除けば html セレクターと同等です…

MDN Web Docs

calc() – CSS: カスケーディングスタイルシート | MDN calc() は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。、、、、、、

吹き出し

こちらもルームチャットと同じく五線譜をモチーフにしています。ただ同じデザインじゃ映えない……と思って、ココフォリアの吹き出しと同じく黒が基調のデザインにしました。シックな感じで“ロックさ”が出てるんじゃないかな？と思ったりしています。

罫線と背景の記号はルームチャットと同じ技術を利用しています。記号はUnicodeに存在する「ト音記号𝄞」と「ダブルフラット𝄫」をそのまま利用しました。Unicodeくん、フォントさえ存在すれば色々な記号や文字があるので凄いですね（その反面、幽霊文字とかもありますけど）。

斜めになっているのはルームチャットとの差別化、かつ斜に構えてる感じです。こういうの作ったこと無かった、と思って実装してみました。斜めに歪めているのはskew()を利用しています。ただ親要素に指定したら子も斜めになるので、子には逆の値を持たせて相殺させてます。

フォントはルームチャットと同じくZen Old Minchoです。統一感を出すため、ですね！

Wiktionary

𝄞 – ウィクショナリー日本語版

Wiktionary

𝄫 – ウィクショナリー日本語版

ステータス

色合いは分かりやすくダミーにしてます。また、それぞれの色を自由に弄れるようにしてます

ルームチャットと吹き出しは五線譜だったので、ステータスは音響系のUIに似せたいな……と思って思いついたのが『音量調整バー』でした。ボツ案ではイコライザ（緑～黄～赤に光る音量がわかるアレ）とか、オーディオインターフェースのつまみ（AG03の左側についてる上下に動かせるアレ）とか、色々考えてはいたのですが配信画面がゴチャゴチャしたりするのを嫌って、シンプルなデザインだけど音楽っぽさが残るデザインになりました。

音量調整バーらしく左側にはスピーカーを表示。これは上に同じくSVGを疑似要素で表示させてます。

ステータスバーはheightを調整して細めつつ、widthの可変が発生する要素へ疑似要素でドラッグできそうなボタンを持たせています。そのおかげでHPやSANの可変が発生した場合、丸いボタンも一緒に動いてくれるオシャレさんとして生まれました。

ステータスの名称はpaddingで無理矢理変更しています。正直オシャレじゃないけど上手く表示されればOKの精神で生きてます。

数値についてはなにも変えていません。そのままのキミで生きていて。

フォントはUIをイメージした、という事もありドット風に変更しました。明朝体だと見えづらい＆他との差別化も含めて良い選択だったかなと個人的に自負しています。使ったフォントは、こちらもGoogle FontsのDotGothic16です。

MDN Web Docs

height – CSS: カスケーディングスタイルシート | MDN height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizing が border-box に設定されていた場合…

MDN Web Docs

width – CSS: カスケーディングスタイルシート | MDN width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域…

MDN Web Docs

padding – CSS: カスケーディングスタイルシート | MDN padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

Google Fonts

DotGothic16 – Google Fonts Dotgothic 16 is based on the old 16×16 Gothic bitmap font that recreates the feel of pixel fonts from old video games, cell phones and computer screens on print

それでは～ 👋👋

よかったらシェアしてね！