Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ソング: 各パネルの位置と用途を明確にする #2265

Open
romot-co opened this issue Sep 9, 2024 · 18 comments
Open

ソング: 各パネルの位置と用途を明確にする #2265

romot-co opened this issue Sep 9, 2024 · 18 comments
Assignees

Comments

@romot-co
Copy link
Contributor

romot-co commented Sep 9, 2024

内容

パラメータ設定・ツールパレットなど現状置く場所が決まっていないものがあります。
今後の一貫性に問題や迷いが出そうなため、おおむねの位置や役割を目安として決めます。

Pros 良くなる点

  • 今後の機能追加において迷わなくなる
  • ツール変更などが行いやすくなる

Cons 悪くなる点

  • ないはず

実現方法

ツールパレット: (ex: ペンと消しゴムの切り替えなど): 右側 / 上部 / フローティングなど案を作成し試行 / キーボードショートカットとUIでの選択・設定の両方使えるようにする
ツールバー: プレイヤーとしての状態を下部に分離するなど?(かわりに上部を確保する
パラメータ設定や詳細: パラメータで決められるもの...右側?(モードや選択中のオブジェクトにあわせて切り替わってもいいかも)

いくつか試作して最低限位置を判断

VOICEVOXのバージョン

0.2.1

OSの種類/ディストリ/バージョン

その他

@romot-co romot-co self-assigned this Sep 9, 2024
@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 10, 2024

パラメータ設定や詳細: パラメータで決められるもの...右側?(モードや選択中のオブジェクトにあわせて切り替わってもいいかも)

これ結構選択不可能なオブジェクトがありそうで迷いそうなんですよね~~~
例えばスコアシーケンサとか、トラック一覧とか(ルーティング設定に必要そう?)
とはいえインスペクタは使い慣れてる UI だとは思うので採用したみはありますね!

@romot-co
Copy link
Contributor Author

@Hiroshiba

これ結構選択不可能なオブジェクトがありそうで迷いそうなんですよね~~~
例えばスコアシーケンサとか、トラック一覧とか(ルーティング設定に必要そう?)

こちらいまのところそんなに無いかもと考えているのですが、
混沌とする前に出てきた時にどうするか目安はあったほうがいいかもぐらいになります!

ルーティングとかもありそうですが
どちらかというと
選択したノートであれば: 発音位置を微妙に前後にずらすスライダー…音素の詳細設定…みたいな場合がありえそう?

@Hiroshiba
Copy link
Member

こちらいまのところそんなに無いかもと考えているのですが、
混沌とする前に出てきた時にどうするか目安はあったほうがいいかもぐらいになります!

「UIで自然に選択しないオブジェクトの詳細設定をしたくなった時に困りそう」と考えてます!(念の為の再確認)
そういうのが出てきた時はまあ・・・・・・無理やり選択可能にする感じですかね。。。。。。
あるいは、その自然に選択しないオブジェクトを右クリックしたら「インスペクターを表示」メニューが出てくるとか・・・。

まあでも、普通クリックしないオブジェクトであっても、インスペクターを出すためにクリックしてくれる気もするので、あまり気にしなくてもいいのかもですね!

@romot-co
Copy link
Contributor Author

romot-co commented Sep 11, 2024

@Hiroshiba

「UIで自然に選択しないオブジェクトの詳細設定をしたくなった時に困りそう」と考えてます!(念の為の再確認)
そういうのが出てきた時はまあ・・・・・・無理やり選択可能にする感じですかね。。。。。。

ありがとうございます、そのとおりかと思います…!

インスペクタは開閉可能にして:

  • スコアならばスコア自体がオブジェクトとしその右に詳細パネル
  • トラック一覧であればトラック一覧の右にパネル

たくさんになるなら3点ドットメニュー内に押し込むとか、右クリックや表示メニューで切り替えるとか色々ありえそうですが
まずはどういうのがありえそうか相談・検討できれば…!

(個人的にはDAWをつくりたいわけではないので過度に複雑にはしないほうがいいかも…と思っています

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 11, 2024

なーーーーーーるほどです!!!

インスペクター機能といえば、よくあるのはウィンドウの右端や下端にずっと表示されていて、直前に選択したオブジェクトの詳細設定ができるパネルですよね。
確かに複雑というか、近年の手軽なソフトのGUIでは見かけないかもですね。一般的になじみがあるのだと、パワポぐらい・・・?

トラック一覧であればトラック一覧の右にパネル

ウィンドウの右端等ではなく、オブジェクトの右側に表示ってことですよね。なるほどと思いました!

オブジェクトの隣にインスペクターパネル表示だと、開閉によって他の UI のパネルの座標が移動してしまうと煩わしく感じるかも・・・?
他の手として例えば対象オブジェクトに重ねて表示もできそうだけど、たぶんオブジェクトをGUIで操作しつつ詳細設定ができるのがインスペクター機能の利点の一つだと思うので、ダメそう。
あとは他のパネルが移動しないよう、バルーンみたいなのを出す手もある・・・?かもだけど、ちょっと表示域が小さすぎるかも・・・。
う~~~~ん。

@romot-co
Copy link
Contributor Author

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

直前に選択したオブジェクトの詳細設定ができるパネルですよね。

ウィンドウの右端等ではなく、オブジェクトの右側に表示ってことですよね。なるほどと思いました!

そうなります!
いただいた案のほかで変形だと

  • 編集対象をクリックしたらフローティングで近くに表示

とかでもいいかもです(案外ウザい可能性あり

あんまり固めすぎると自由にできないのも嫌かなあと思うので

まずはざっくり全体および各サブ要素ごとに

  • 左右
    大域 ← → 詳細

  • 上下
    大域 ↑ ↓ 詳細

ぐらいだけ決めておけばよさそうかな、と。
(これの逆はやらない…ぐらいで)

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 13, 2024

ちょっと考えたんですが、オブジェクトの近くに配置、結構成り立たないこともありそうかも?という直感があるかもです・・・!
例えばツールバーに置いてるオブジェクトの詳細設定をしたいとか。
(この例のニーズは無いかもですが、再生速度を下げたいとか)

ちなみにSynthVとかVoisonaいじってみたのですが、そもそも意外と設定の数が少なそうな印象がありました!
例えばどちらも微分音の設定はできなかったです。(意外)
Voisonaはインスペクターなしで全部GUI上で設定できるようになってそう。
意外とグローバルなインスペクター1つだけにして、かつオブジェクトごとに切り替えもしなくてもいいかもしれない。

@sigprogramming
Copy link
Contributor

sigprogramming commented Sep 16, 2024

ちなみにSynthVとかVoisonaいじってみたのですが、そもそも意外と設定の数が少なそうな印象がありました!
例えばどちらも微分音の設定はできなかったです。(意外)

微分音は結構特殊なので(周波数比が簡単な整数比にならず、響きが複雑になりやすい)、一般的な12平均律の12音と比べて、ほとんど使われないかもです。(歌の場合は微分音というより、ピッチをずらす感じになると思います)

チューニング(centではなくHz)の設定は、伴奏がオーケストラなど(基準が442Hzなど)の場合に合わせたりできるので、あると良いかもです。

また、VOICEVOXの場合は簡易mixのための機能(エフェクトなど)もあった方が良いかもと思いました。
ソングエディタ上である程度mixもして書き出せると、mix専用のソフトやVSTを通さずにそのまま動画編集ソフトに読み込んで使えるので、使いやすくなる&音声のクオリティを上げやすくなるかなと思います。
特にコンプレッサーは(ソングは音量差が結構大きいので)あった方が良いと思います。

現在ボリューム・パンがトラックの下部に表示されていますが、これをトラックのインスペクターの方に移動して、そこにルーティングやエフェクトの設定を置くのも良いかなと思います。
こうすることで、トラック選択時にtrack-itemの高さが変わるのを無くせますし、インスペクター(またはその上)に透過無しの立ち絵を表示したりもできると思います。

トラック一覧であればトラック一覧の右にパネル

将来ミニマップを実装するかもしれないというのを考えると左が良いかもと思いました…!
(トーク側は左に立ち絵があってその右にAudioCellが並んでいるので、それに近い形で左に立ち絵+トラックインスペクター、その右にトラックリスト+ミニマップの形をイメージしています!)

Voisonaはインスペクターなしで全部GUI上で設定できるようになってそう。

VoiSonaは音素タイミング等はGUIですが、アーティキュレーション等は右クリックから設定orショートカットになってそうです。

@romot-co
Copy link
Contributor Author

@sigprogramming
ありがとうございます!こちらすごく意図がわかりづらくすみません!

将来ミニマップを実装するかもしれないというのを考えると左が良いかもと思いました…!
(トーク側は左に立ち絵があってその右にAudioCellが並んでいるので、それに近い形で左に立ち絵+トラックインスペクター、その右にトラックリスト+ミニマップの形をイメージしています!)

雑資料で申し訳ないのですが:

トラックとイベントの関係については以下のような感じかなと…!
https://xd.adobe.com/view/c2464ec4-6a37-468b-a727-cfd2825e7147-9715/


で、全体としては: 以下のようなざっくりパターンを決めておくのがいいのかなーと
https://xd.adobe.com/view/4ca59a28-ef47-4683-82d3-0f5bbc49b970-19f6/

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 17, 2024

@sigprogramming

VOICEVOXの場合は簡易mixのための機能(エフェクトなど)もあった方が良いかもと思いました。

なるほどと思いました!!
動画編集ソフトの方にもコンプレッサーとかはあるので、意外と動画だと需要は小さめかも?(もしかして動画編集ソフトにコンプ機能ない・・・?)
動画編集する必要はないような、例えばそのままSNSやDiscordに共有するとかして欲しい気持ちもあるので、本当に簡易的なmix機能の実装は賛成です!

トラック一覧であればトラック一覧の右にパネル

将来ミニマップを実装するかもしれないというのを考えると左が良いかもと思いました…!
(トーク側は左に立ち絵があってその右にAudioCellが並んでいるので、それに近い形で左に立ち絵+トラックインスペクター、その右にトラックリスト+ミニマップの形をイメージしています!)

こちらちょっとイメージ難しいかもでした。
トラック一覧が縦長にあって、その周辺にミニマップがあるとすると、ピアノロールはどこに・・・的な。

ちなみに全然関係ないのですが、トークが立ち絵左なのは、昔は立ち絵表示がない中実装され、詳細設定欄が右にあり、どこに立ち絵表示しようかなってなって左になりました。
今思えばテキストは左から右に読むので、立ち絵は左に置いておいた方がキャラクターが読んでる感があっていいかも。
逆にソングの場合、ノートは右から流れてくるから立ち絵は右に表示した方が良い・・・・・とまではいかないけど、右に表示してもいいかも。


@romot-co パネルの配置規則を決めておくのなるほどです!!

画面の右や下に行くほど詳細になっていき、親は左にあるの、個人的には賛成です!
Figmaとかパワポとかがそんな感じなイメージがあります。イラストツールは親(レイヤー)が右ですが。

ルーティングどこに置くか迷いますね。。。。。
個人的にはトラックは今のVOICEVOXのように左端に一覧表示が良いのかなと思っているのですが、この場合トラックの詳細設定をどこに置くかがめちゃくちゃ難しい。。。。
個人的にはマウスカーソルが左右にシャトルランするのは仕方ないとして、右端しかないんじゃないかと感じてます。。。。

あとこれはパネルの配置と違うのですが、ソングソフトはピアノロールと全トラックのミニマップ同時表示は必要がないのではと感じてます。
選択中のトラックのミニマップだけで十分そうだなーーーーーーと。
(VoisonaもSynthVも、上に全く使わないトラック+ミニマップを常に表示して、よく使うピアノロール欄の縦幅を狭くしてる印象)

@sigprogramming
Copy link
Contributor

sigprogramming commented Sep 19, 2024

@romot-co
スライドありがとうございます!
ルール・決め方について、なるほどです!

ルール(大域←→詳細の方向)について

他のソフトがどうなっているか見てみたのですが、左右や上下ではなく「中央と周辺」になっているソフトもあったり、
大域←→詳細(親←→子)というより役割で配置が決まっていそうなソフトもありました。

Cubase

(インスペクターは、トラックリスト&ミニマップにフォーカスが当たっているときは選択中のトラックの設定、ピアノロールにフォーカスが当たっているときはピアノロールの設定になります)

SynthV
VoiSona

なので、詳細の方向を右or下とするのも良いと思いますが、もっと柔軟に決めるのもありかも…?と思いました。
(でも基本右or下で良いかも…)

決め方について

スライドの、所属を考える → 重要度を考える → 常時表示の必要性を考える の流れで良さそうに感じましたが、
所属(親子関係)だけでなくUI上での関連や使い勝手も考慮しても良いかもと思いました。

例:ボリューム・パンについて考えると

  • ボリューム・パンはチャンネルに所属(チャンネルはトラックに所属)
  • 重要度は高い(mix時に頻繁に変更)
  • 常時表示でも良いかも
  • 使い勝手を考えると他トラックのボリューム・パンも同時に(横に)表示されていた方が良さそう

→ 案:トラックリストorミキサー内に常時表示 など


@Hiroshiba

こちらちょっとイメージ難しいかもでした。
トラック一覧が縦長にあって、その周辺にミニマップがあるとすると、ピアノロールはどこに・・・的な。

以下の画像のような形をイメージしてました…!
ですがこの形だと、右に詳細を表示するのが難しくなるかも…(ピアノロールの横幅が狭くなるので)

レイアウト案

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 19, 2024

@sigprogramming あーーーなるほどです!!!とてもよくわかりました、ありがとうございます!!

配置的に初学者にとってなかなかややこしい(実はいちばん興味あるのはピアノロールだけど、それ以外の面積が大きい)かもとちょっと思いました!
玄人モードでの初期配置としてとかならありかも?
ちょっとトラックとトラック詳細の位置関係が直感的じゃないかもですが、例えばいろんなののインスペクタが表示されるとか・・・・いやちょっと難しいか・・・。

他のソフトがどうなっているか見てみたのですが

このまとめ面白いですね!!!
こうやって見比べると思うのですが、この狭さでピアノロール編集できるんですかね・・・・?
みんな画面がめちゃくちゃ大きいのかな。(いつもノートPCの画面より2周りくらいの画面サイズで作業してます)

あとやっぱりトラックリスト&ミニマップがなぜすごい面積取ってるのかが不思議ですね・・・・。
大体の曲でキャラは1人(トラックがいらない)はずなんですが・・・。

でも、少なくとも慣れてる人向けの答えと、慣れてない人向けの答えは違うのかもと感じました。
分ける必要があるか(慣れてない人向けのは慣れてる人に難しいのか)まだわかりませんが、考えるときは分けても良いのかも。

@romot-co
Copy link
Contributor Author

romot-co commented Sep 19, 2024

@sigprogramming @Hiroshiba
ありがとうございます!
たぶん同じことを話してるかもと思ったのですが
また明日資料にいたします…!

各エディタの構造、参考になります!


あくまで目安であり柔軟にするのに賛成です!
ルーティングなどわからないものが出てきた時にざっくりどこに配置するかを決められるようになるのが目標かな、と


基本的には情報階層(役割と親子)ごとにグループをまとめ、関連項目は近接させる、あふれるものをどう出すのか決める、などかなーと

@sigprogramming
Copy link
Contributor

sigprogramming commented Sep 21, 2024

@romot-co
資料助かります…!よろしくお願いします…!

@Hiroshiba

こうやって見比べると思うのですが、この狭さでピアノロール編集できるんですかね・・・・?
みんな画面がめちゃくちゃ大きいのかな。(いつもノートPCの画面より2周りくらいの画面サイズで作業してます)

図は文字が見やすいように各エリアの大きさを変えて描いています、実際はピアノロールはもっと広いです!

私はフルHDのモニターを使用していますが、Cubaseのレイアウトでも3オクターブくらい表示できますし、SynthVではトラックリストで3トラック表示した状態で2オクターブ近く表示できるので、縦方向が狭いと感じることはあまりないです。
歌の場合は1.5~2オクターブくらいを表示できれば問題は無いかなと思います。

ちなみにCubaseはパネル開閉ボタン(VSCodeの右上にあるもの)がついていたり、各パネルに何を表示するかをカスタマイズできたりします。

大体の曲でキャラは1人(トラックがいらない)はずなんですが・・・。

大体の曲はハモリがあるので、2~3トラック以上になると思います。

あとやっぱりトラックリスト&ミニマップがなぜすごい面積取ってるのかが不思議ですね・・・・。

トラックリスト&ミニマップ(特にミニマップ)が大きいのは、おそらく、

  • DAWの場合
    • たくさんあるトラックの内容を表示するため(全体把握のため)
    • イベント(リージョン)の編集・選択のため
      • ピアノロールは打ち込み時に(必要なときに)開いて使用する感じ
    • オートメーションを描きやすくするため
  • 歌声合成ソフトの場合
    • 複数のトラックの内容を表示・選択するため(全体把握のため)
    • ピアノロールは1.5~2オクターブ表示できれば十分で、残りのスペースをミニマップとして活用するため

かなと思います。

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 24, 2024

私はフルHDのモニターを使用していますが、
歌の場合は1.5~2オクターブくらいを表示できれば問題は無いかなと思います。

なーーーーーーるほどです!!!
自分は1280x720のHD環境で作業していて、SynthVはトラックリスト欄を一番狭くした時(トラック2つ分)で表示されるのは1オクターブと白鍵3つ(7分の3)で、これだと狭いなーと感じてます。

スクショ

image

大体の曲はハモリがあるので、2~3トラック以上になると思います。

あ、確かにです!!!


表示範囲が変えられるミニマップはあったほうが良いだろうなと思いました。必要な人は必要そう。
一方で常時表示する必要もなさそうに感じます。初学者には不要なのと(とより先にピアノロールに関心を持ってほしい)、まあ環境によっては縦方向厳しいのと。
(ちなみにSynthVとVoisonaは最低1トラック分を常時表示で、CeVIOは完全に非表示にもできました)
個人的には、開閉可能にできれば分かりやすくていいんじゃないかなと思いました!

@sigprogramming
Copy link
Contributor

sigprogramming commented Sep 26, 2024

@Hiroshiba

自分は1280x720のHD環境で作業していて、SynthVはトラックリスト欄を一番狭くした時(トラック2つ分)で表示されるのは1オクターブと白鍵3つ(7分の3)で、これだと狭いなーと感じてます。

スクショありがとうございます、確かにHD環境だと狭くなりますね…

表示範囲が変えられるミニマップはあったほうが良いだろうなと思いました。必要な人は必要そう。
一方で常時表示する必要もなさそうに感じます。初学者には不要なのと(とより先にピアノロールに関心を持ってほしい)、まあ環境によっては縦方向厳しいのと。
(ちなみにSynthVとVoisonaは最低1トラック分を常時表示で、CeVIOは完全に非表示にもできました)
個人的には、開閉可能にできれば分かりやすくていいんじゃないかなと思いました!

私もトラックリスト&ミニマップを開閉可能にするのが良い気がしました!

「トラックリスト&ミニマップのみ表示」と「ピアノロールのみ表示」を切り替える形も考えましたが、歌エディタではトラック数は多くならないと思うので、「トラックリスト&ミニマップのみ表示」は無くても良さそうに思いました。

@romot-co
Copy link
Contributor Author

romot-co commented Sep 26, 2024

こちらごめんなさい、まだ資料まとまっていないのですが、ミニマップについて考えたことを文で取り急ぎ…!

  • マルチトラック前提なら通常のDAW的なトラックリスト式が一番よさそう
  • 開閉式でよさそうだがシンガー設定をどこに置くか考える必要あり?: トラックリストとピアノロールでシンガーが被る

ユーザーの頭にある想定(メンタルモデル)が謎なのですがおそらくは:

あるシンガーを歌わせたいお気持ち(歌声合成):

  • 全体の構造 = ピアノロールで完結する
  • ミニマップの意味: ピアノロールの全体像

曲をつくりたいお気持ち(DAWなどの場合):

  • 全体の構造(曲) = ミニマップ(トラックリスト)
  • ミニマップの意味: 曲の全体像
  • 各トラックは曲全体のうちの1トラックであり、ピアノロールはトラックの詳細編集

わかりやすいかはともかくとして

曲全体の構造をつくる(箱をつくる) → 箱に対して詳細を設定する...という流れ

DAWだと:
先に楽器を選び、曲の構造(箱)をつくり、箱の詳細を打ち込むという流れ

ミニマップの意味が異なるかも


おそらく: シンガーを歌わせようとする人と、曲をつくろうとする人とで想定される脳内モデルが違いそう

どちらにも対応する必要がありそう


とはいえ歌声合成アプリでそんな大量のトラックを使う必要なさそうなのと
実際は操作順は一定でないので

  • 初期状態のミニマップはシンガー+カラオケWAVトラックの2トラック
  • 最初からシンガー分の箱は用意
  • 最初からピアノロールは開いている

ぐらいがよさそうかもです

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 27, 2024

@sigprogramming

「トラックリスト&ミニマップのみ表示」と「ピアノロールのみ表示」を切り替える形も考えましたが、歌エディタではトラック数は多くならないと思うので、「トラックリスト&ミニマップのみ表示」は無くても良さそう

同感です!
理由はどちらかというと、ミニマップを常時表示したい需要に対応できなそうだなぁと思ったので…!

@romot-co
大まかにルートが2つあるのもなるほどです、考えやすそう!

開閉式でよさそうだがシンガー設定をどこに置くか考える必要あり?

たしかに。必ず1つトラックを常時表示にするとか…?でも縦幅的に厳しそうかなぁ。わからない!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants