キャラクター関連のダイアログを再設計 #2505
キャラクター関連のダイアログを再設計 #2505
Conversation
|
🚀 プレビュー用ページを作成しました 🚀 更新時点でのコミットハッシュ： |
|
方針はなるほどと感じました！！ キャラクター周りの操作を「一覧用」と「詳細用」に分けて、前者で並び替え、後者でデフォルトスタイルの設定ができる！ 1点 UX 的に気になったのが、デフォルトスタイルを選択したい人、あるいはキャラクターを並び替えしたい人が、まずそのために「キャラクター管理ダイアログ」を開かないといけないことに気づけない可能性がありそうに思いました！ ではどうするべきなんだという案は。。。。。。まだ浮かんでいません。。。。。 |
|
デフォルトスタイル選択とキャラクター並び替えが埋もれてしまうのはたしかにですね…！ 一応意図を書いてなかったので書くと、OOUI的なダイアログにし他のダイアログと足並みを揃えることです。他のダイアログではエンジン・辞書・プリセットなど対象となるオブジェクトごとにダイアログがある一方、キャラクターはタスクベースでダイアログが区切られていたのでそれを統一する目的です。 ただOOUIにするとオブジェクトがメインでタスクがサブになるので、どうしてもタスクを一番に目立たせるのは難しくはなりますね…キャラクター・スタイルに関する各種カスタマイズ項目がそこに集約されていると直感で分かるようにできればベストなのですが… 名称も（辞書は違いますが）エンジン・プリセットが「～の管理」なのでそれに合わせようということでそうしていました。ただ確かに管理という名前だと、キャラクターという項目自体に対する追加削除などの操作ができるダイアログっぽく捉えられそうですね。 より実態に伴う名前だと「キャラクター」…だとダイアログ内で扱う対象の名前で辞書ダイアログの名称と統一できますが、短くて説明不足な感じもするので「キャラクターの設定」とか…？ |
|
なるほどです！！！ 分かりやすいのが「読み方・アクセント辞書」で、これは本来CRUDの対象になってるのは「単語」かもです。 「キー割り当て」や「プリセット管理」は確かにOOUIになってそうです。 という分析をした後「キャラクター管理」を見直すと、ユーザーが設定したいのは並び順やスタイル順序なので、この観点から考えるとパッとわからない度が高めかも。 ････････とここまで書いてて勘違いに気づきました！！ |
|
メニューバーの項目名としてはその後にできることがわかりやすいことが要件でありそうですが、それでいくと複数のことができるダイアログなので定めにくいですね…！ 追加で１つ思ったのは、このダイアログから扱えるオブジェクトはキャラクターとそのスタイルの２つなので、「スタイル」も文言に入れたほうがいいのかもと思いました。「キャラクター・スタイル」もしくは辞書と合わせて「キャラクター＆スタイル」のような。 そして肝となるのがその後につける語で、キャラクター・スタイル自体の編集ではなく、それに関連するサブ機能のカスタマイズであることを示せるような語であるべき…「管理」や「設定」だとそこが満たされていない、ということですよね。思いつくものだと下３つが例として挙げられそうです。
他にいい案があれば…もしくは、それ自体の追加削除はできないがそのものに関連する設定項目をいじれるページ・ダイアログにメニューから飛べるような既存アプリの例に心当たりがあれば…！ |
|
名称はたしかに「キャラクター・スタイル」にカスタマイズとか、あるいは何も書かないとかありな気がしました！！
ちょっとパッと思いつかないのですが、クリエイター向けツールに結構多いような･･･気がする･･･？ 他にはトーク系じゃなくてソング系も同じ悩みを持ってそう？ボカロ、SynthV、VoiSona等々･･･。 色々見回って UX が色々気になったとこがあったのでちょっと列挙してみます 🙇
|
|
例示ありがとうございます…！持ってるソフトウェアの範囲で少し調べてみました↓ voicepeak、Voisona、SynthVはそもそも並べ替えなどキャラクター関連の設定項目を持っていなさそうでした。
OpenUTAUも調べたところ、「シンガー」ダイアログがあり、そこから音域ごとに原音のファイル名にPrefix, Suffixをつける機能や、各エイリアスごとのオフセットや子音部などのパラメータ設定の、確認ができるようになっていました。編集についてはそのダイアログ内から別ソフトを起動して行うような構造になっており、OpenUTAU自体は持っていなそうでした。
CLIP STUDIOのアセットも（削除はできますが）一応調べました。これは、一応「アセットの管理」内でお気に入りの付け外しや同期のする・しないの切り替えなどを行えそうでした。 複数ご指摘ありがとうございます…！
確かにボタンに見えづらくはあるかもです。IconButtonにテキストボタンと同じ枠のついたスタイルを増やすかですね…。線だらけになりごちゃつきそうなのと、IconButtonに枠有り無しのバリエーションが増えることで他の場所でどちらにするか迷うようになることが懸念点です。
ラベルなど付与するのが確実ですが、できればこれ以上要素が増えて複雑にしたくないのもありツールチップの内容を
たしかにです。意味合い的にも戻るを左にしたほうが良さそうなのでそうします…！
動画サイトやブログサイトでカード自体をクリックするとそのコンテンツ自体、その中の制作者名をクリックすると制作者ページなど、クリック可能な要素内にボタンは一応昨今ではよく使われてはいるので、どの程度許容できるかですね… 詳細を表示などの文言を入れて明示すれば良くないそうですが、カードのサイズが増えるため一覧性が減り、UIの見た目が複雑になり認知負荷が高まりそうではあります。
まとめると中に何の項目が詰まっているのかは分かりづらくなる反面、分けた場合将来的にキャラ並べ替え、デフォルトスタイル以外のキャラクター・スタイルに関するカスタマイズ項目が増えるたびに、ダイアログが更に重複していく懸念もあります。 |
|
色々ありがとうございます！！！！！！ 項目が多くなってくると、メニューに「（オブジェクト名）管理」等を用意するしかなさそうですね！！！ まとめるほど項目が多いのか考えましたが、このプルリクエストの実装だけでもすでに「キャラクター並び替え」「試聴」「利用規約の閲覧」「デフォルトスタイルの変更」機能が備わってそう！ デフォルトスタイル機能がUX的にだいぶ遠くに配置されることになるけど、まあ結構操作に慣れてきた人向けの機能なのでそこまで問題ではなさそう！ 使い方は変えないといけなそうなので、忘れないようにメモしておきました。
これは再生ボタンだけ専用でコンポーネントを作っちゃえば良さそうかも！
すみません、ここ別の課題もあることに気づいたのでコメントまで 🙇 「音声サンプル」という単語がキャラクター数分並んでるのを確かに見づらいんですよね。。。。
たしかに！！！ |
これは難しいところで、メイン画面のものだと唯一の再生ボタンかつ高優先度なものなので目立つ、かつサイズ大になるようなFAB的なスタイルにする必要があると思うのですが、この画面のキャラ分×3でそれをやると目立つ要素が多くなりすぎるかもですね…もしくは同コンポーネントでpropsで分岐するか、としても両者で求められるものの差分が割と多いかも‥っていう感じで迷いです。もしくは後述のデザイン変更で解決できるかもです。
ボタン上ボタンを避ける方法を考えると、1つはWebページ側同様キャラアイコンの部分だけ詳細ページに飛ぶようにして、手がかりがなくならないよう以下のようにホバー時に詳細を見る等の表示をするようにする方法かなあと思います。
Pros
Cons
もう1つ思いついたのは、結構実装に変更が必要となるのですが、キャラのカードはクリックで選択のみにして、サイドなどに選択したキャラクターに対して色々できるプロパティパネル的なものを置くことです。Google Fontsの、プレビューする文章の内容やフォントサイズを変更できるのが近しいかなと思います。またはWindows 11のエクスプローラーの右側に出る詳細ウィンドウなど。
Pros
Cons
|
|
レビュー空いてしまってすみません！！！（風邪で１週間ほど消えました。。。） いろいろ考えてくださってありがとうございます！！ 提案を眺めさせいてただいて、なんかそろそろ良い落とし所が見えて来そうな気がしています！！！ クリックしたときに詳細が右に表示されるの、アリだと思うのですが、サンプルボイスを聞くために「キャラクリック→詳細へ移動→再生ボタン」という操作が必要になるのが気になっています。 例えばこういうのとか･･･。（そういえばwebページのソングがそんな雰囲気でした） ちょっとサンプルボイス３種は不要という制限の一部解除でなにか良い案あればぜひ見てみたいです！！！！！ |
であればやはり従来通りキャラの項目内に各操作UIを置く方向で考えたほうが良さそうですね…！
なるほどです。それだとコンパクトに纏まりそうですね…！
|
|
なるほどです、案良さそうに思いました！！ 並び替えボタンですが、これメニューバーのアイテムにあるのは他のダイアログにないのでちょっと混乱するかも･･･？ 何か他にいい方法とか思いついたりしますか？ |
|
他の方法を考えると、ボタンを別の場所に移すだけだと結局その場所で同じ問題が起こりそうなので、下記のようにメニューボタンを作ってその中の項目として格納することが考えられました。この場合トーク・ソングのトグルボタン横が違和感を感じなさそう…？
ただ、更に奥になってしまうので、そこはトレードオフですね…！ |
|
なるほどです！！ ありかも。 まあとりあえずメニューバーに置くのが無難なのかなぁと感じました！ UIほぼ固まってきた気がします、ありがとうございます！！！ ちなみにapple musicとspotifyとamazon musicはアルバムをホバーすると再生ボタンが出て（＝再生ボタンを隠してて）、再生ボタンを押すと再生、再生ボタン以外のとこを押すと詳細表示、タイトルもクリッカブルでした。 |
承知です！将来の機能の追加変更の際にまたUI変更が入りそうなので、度重ならないためにも今回はペンディングする形でもとに戻しますか…！
ホバー時の案内より分かりやすくするとなると、やはりホバーするまで分からないというネックを解消するために常時何か手がかりを表示することになると思います。
アイコンもキャラ名もクリッカブルにするのはそうすべきだと思いました！おそらくデメリットが無さそう。 |
|
なるほどです！ ちょっとChatGPTさんにも聞いてみて面白かった案を2つほど紹介してみます：
一旦どの形でもいいと思うので、キャラクター一覧とスタイルをまとめて１ダイアログにする方針で進めてみていただければと！！！ |
|
OKです！ありがとうございます！ |
|
指摘箇所の修正が完了しました。 |
| <BaseIconButton | ||
| v-if="characterInfo.metas.styles.length > 1" | ||
| icon="chevron_right" | ||
| label="次のスタイル" | ||
| @click.stop="rollStyleIndex(speakerUuid, 1)" | ||
| /> |
There was a problem hiding this comment.
どうしても無理だったら、再生ボタンは１つだけにし、ノーマル音声のみしか再生できないとかも最終手段としてありかもとちょっと思いました。。。
スタイル別音声を聞く手段がなくなりますが、再生ボタンのみにできるのでかなりデザイン的な課題が解決できるのではと。。
あるいは再生ボタン＋次のスタイルの音声に移動するボタンのみ、とか。。。
まあ今まではサンプル音声を聞くのみか、あるいは詳細ページへ遷移するのみだったのが、機能をまとめるということなので、結構諦めないといけないものもあるのかなぁと 😇
|
すみません遅くなりました！！ 変更ありがとうございます！！ 良いデザインなんだけど、ちょっとどう進行しようか迷っていて相談したく･･･！ 🙇 現状のデザインを以前のものと比べると、デザイン的にはかなり良いんだけれども、「キャラクター詳細画面に進める」ことがUX的に若干伝わりづらくなってるかな～～～と感じています･･･！ というのも、このプルリクが長くなっていて takusea さんに負担になってないかなと思い･･･ 🙇 もしよければ、デザインを新旧２つどちらも実装されている状態にして、開発時のみ新しい方を表示することも可能です！ |
|
なるほどです！ |
|
承知しました！！ （ @sevenc-nanashi さんにも共有です。あと、より良いアイデアあれば 🙇 ） とりあえずmainブランチに追従してコンフリクトを解消していただければ！ んで問題はその後ですね。。。共存する形でmainにマージするとすると･･･
これで差分がわかりやすくなり、将来もしものことがあったときにrevertしやすくなる･･･はず････？ メニューアイテム周りは @sevenc-nanashi さんのリファクタリングPRのマージを待ってから作業するとやりやすいはず･･･！！ あーーーーーーーーーーーーーあるいは、今課題になっているのは一覧ダイアログの再生ボタン等なので、むしろこれらだけ開発時のみ表示（製品版では表示しない）にするとか・・・？ |
内容
キャラクターに関連したダイアログがデフォルトスタイルのダイアログとキャラクター並べ替え・試聴のダイアログに分かれているのを構造から再設計し、キャラクターの管理ダイアログとして1つに統一します。
変更が大きいのでこの方向性で大丈夫かどうかという提案の意味も含めたPRです。
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））
DefaultStyleSelectDialog（キャラクター管理ダイアログ（詳細））
スクリーンショット・動画など
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））・キャラクター並び替え表示時
DefaultStyleSelectDialog（キャラクター管理ダイアログ（詳細））
その他
変更差分をわかりやすくするために各ダイアログの名称はそのままですが、後にCharacterListDialogとCharacterDetailDialogなどより実態に伴った名称に改名するつもりです。