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

[romot-co]

内容

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

Pros 良くなる点

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

Cons 悪くなる点

• ないはず

実現方法

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

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

VOICEVOXのバージョン

0.2.1

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

その他

[Hiroshiba]

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

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

[romot-co]

@Hiroshiba

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

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

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

[Hiroshiba]

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

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

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

[romot-co]

@Hiroshiba

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

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

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

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

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

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

[Hiroshiba]

なーーーーーーるほどです！！！

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

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

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

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

[romot-co]

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

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

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

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

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

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

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

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

• 左右
  大域 ← → 詳細

• 上下
  大域 ↑ ↓ 詳細

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

[Hiroshiba]

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

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

[sigprogramming]

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

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

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

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

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

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

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

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

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

[romot-co]

@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]

@sigprogramming

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

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

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

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

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

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

---

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

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

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

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

[sigprogramming]

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

ルール（大域←→詳細の方向）について

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

Cubase

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

SynthV

VoiSona

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

決め方について

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

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

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

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

---

@Hiroshiba

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

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

レイアウト案

[Hiroshiba]

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

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

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

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

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

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

[romot-co]

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

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

---

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

---

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

[sigprogramming]

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

@Hiroshiba

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

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

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

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

大体の曲でキャラは１人（トラックがいらない）はずなんですが･･･。

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

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

トラックリスト＆ミニマップ（特にミニマップ）が大きいのは、おそらく、

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

かなと思います。