[WIP]カラー+スタイルの調整 [OKLCH版]

[romot-co]

内容

• カラーをM3的な形でOKLCHで出力
• カスタムカラーの設定
• パレットを出力
• スタイルの調整

(ダイバージョン避けるため先にプルリクにいたします)

関連 Issue

ref #1810

スクリーンショット・動画など

スクリーンショット

カラーパレット

基本ロールおよびカスタムカラー
(Linkはtakuseaさんのprimitive-blueが元 / それ以外は色相を0度から45度ずつ変化させたもの

80%明度

パレットシェイド

その他

カラーについては、出力したものをCSS or SCSSに取り込むだけでもいいように思えています
(ユーザーが動的に変更したいのでなければ不必要

[Hiroshiba]

すみません！　まだ色々と途中なのかもなのですがいくつかご質問が･･･！

• レビューした方が良いか（まだ途中？設計だけとか方針だけとか一部だけレビュー？）
• 全体的にコントラストが下がった第一印象、何か意図とかあれば知りたい
  • もしかしたら僕がライトモードのPrimaryでしか試してなくてそういう印象に感じがちなだけというかだけかも
• （単純な興味ですが）ちなみにPrimary以外の色を試すことはできるか
  • まだサクッと変更する機能は含まれてなさそう感＆Secondaryも変えないとダメそう感

[romot-co]

@Hiroshiba
ありがとうございます！(意図などを書けておらず失礼しました！

レビューした方が良いか

いまのところ大丈夫です！
方針だけは別途決めておければと思っております！

VOICEVOXっぽいカラー設定(印象)とは

→ 個人的には「緑」とわりとビタミンカラーりな以下のトップイメージの印象...ただUIに使うと彩度が高くなりすぎそうなので中間ぐらいに落とす・複数色はマルチトラック以外には使わない
https://voicevox.hiroshiba.jp/dormitory/
→ 抽象的すぎる＆各人のイメージが違いそうなのでムードボード(なんかVOICEVOXっぽいと思えるものをみんなで集めるだけでも)をつくるのがよさそうかも

開発のやりやすさ的に色の振れ幅をどうしよう？

1. 最小限にする

ほぼプライマリとセカンダリとエラーのみ基準

Pros: 開発しやすい・破綻しづらい
Cons: 表現力は狭まる

2. 細かく・動的にする

動的な変更や複数の役割を扱えるようにする

Pros: ユーザーにより動的な変更やテーマに対応できる・ロールごとのルールを詳細に設定できる
Cons: 多人数で行うのに無理がある

スタイル(カラー)開発に使う手段

1. SASSでRGBA(現状同様)
2. Material Design 3やOKLCHなど

---

全体的にコントラストが下がった第一印象、何か意図とかあれば知りたい

こちら単に今の設定値が微妙な感じです！修正します

---

（単純な興味ですが）ちなみにPrimary以外の色を試すことはできるか

設定ファイルpublic/color-schemes/default.jsonを修正することでできますが、
いまのところ計算式が固定です…

[Hiroshiba]

一旦お答えまで！！

VOICEVOXっぽいカラー設定(印象)とは

そういえば一応デザインイメージを一番最初に列挙したことがあります！　せっかくなのでここにも貼ってみます。

• 若々しい
• 落ち着いた
• クリエイティブな
• ツール感のない
• シンプルな
• カジュアルな
• 自然な
• 今風な

ちなみにプライマリーカラーを緑にしたのは、白黒はダメだけど何か無理やりでもいいから色をつけねばと思って、「自然な」の解釈を若干曲げてライムグリーンにしたためです。
どうしても音楽制作ソフトとは合わない部分もあると思うので、使いやすさを犠牲にするぐらいならデザインのVOICEVOXらしさを犠牲にするのはやぶさかではないです･･･！

開発のやりやすさ的に色の振れ幅をどうしよう？

1はプライマリやセカンダリから他の色を自動的に決める、2は細かい部分まで一つ一つ設定する、という感じでしょうか？
（動的に設定するというところがちょっとわからなかったです）
難しいですね･･･。その二択なら･･･うーーーん、2かなぁ･･･。

大体の値は主要なものから自動計算されてデフォルト値が設定される、とかでもいいかも･･･？
ユーザー側でテーマも作りやすそうですし･･･。
ちょっとちゃんとわからずに言ってるのでなんか変なこと言ってるかもです 🙇

スタイル(カラー)開発に使う手段

これは2のMaterial Design 3やOKLCHなどで確定で良い気がします！　やっぱりテーマ機能は実装したい気がするので。
MD3にするかOKLCHのどちらにするかはまだ未定そう！

[romot-co]

@Hiroshiba
ありがとうございます！

そういえば一応デザインイメージを一番最初に列挙したことがあります！　せっかくなのでここにも貼ってみます。

こちら承知しました！個人的にはすごく納得できました！
(みなさんと共通認識持ちつつ進められれば

どうしても音楽制作ソフトとは合わない部分もあると思うので、使いやすさを犠牲にするぐらいならデザインのVOICEVOXらしさを犠牲にするのはやぶさかではないです･･･！

こちらは少なくとも色についてはVOICEVOXさを維持できればなあと…！
とっつきやすさ大事そう

1はプライマリやセカンダリから他の色を自動的に決める、2は細かい部分まで一つ一つ設定する
大体の値は主要なものから自動計算されてデフォルト値が設定される

わかりづらくすみません！自動計算で出せるとは思うのですが、
フルに使うと役割がいっぱいある: ex: Primary / Secondary / Secondary Variant / Tertiary / Outline Variant ... ので
多人数で開発時にスタイルつけるとき、どこがどの役割かよくわからなくなるかなあと

1: 細かい役割は使わない: 表現力× みんな使える ⚪︎
2: 細かい役割を使ってみる: 表現力⚪︎ みんな使える ×

ぐらいの感じです！
2.だけど面倒なのは基本使わず1.風味あたりがよさそう

これは2のMaterial Design 3やOKLCHなどで確定で良い気がします！　やっぱりテーマ機能は実装したい気がするので。
MD3にするかOKLCHのどちらにするかはまだ未定そう！

承知です！

[Hiroshiba]

多人数で開発時にスタイルつけるとき、どこがどの役割かよくわからなくなるかなあと

たぁしかに･･･････。
これちょっとOSS GUIアプリ開発が初めてなので、正直なところわからないですね･･･。
色々作って定義していく2で行くにしても、色数は少なめの方が確かに開発はしやすそう。なんにせよ手探りになってい競う！