キャラクター関連のダイアログを再設計 #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
|
内容
キャラクターに関連したダイアログがデフォルトスタイルのダイアログとキャラクター並べ替え・試聴のダイアログに分かれているのを構造から再設計し、キャラクターの管理ダイアログとして1つに統一します。
変更が大きいのでこの方向性で大丈夫かどうかという提案の意味も含めたPRです。
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））
DefaultStyleSelectDialog（キャラクター管理ダイアログ（詳細））
スクリーンショット・動画など
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））
CharacterOrderDialog（キャラクター管理ダイアログ（一覧））・キャラクター並び替え表示時
DefaultStyleSelectDialog（キャラクター管理ダイアログ（詳細））
その他
変更差分をわかりやすくするために各ダイアログの名称はそのままですが、後にCharacterListDialogとCharacterDetailDialogなどより実態に伴った名称に改名するつもりです。