UI/UX デザイン方針

基本方針

メモ程度ですが、VOICEVOX の UX や UI のデザインの設計方針を共有します。

最も重視していることは、「ユーザーが作ろうとしたコンテンツが完成までたどり着くこと」です
この思想から、以下のことを意識してデザインしています
- 使いたくなるように感じること
- 作業の流れがわかりやすくなっていること
- 操作のために考える必要がないこと
また、「より良いコンテンツを作ってもらうこと」も重視しています
この思想から次のことも意識しています
- 音声の品質を手軽に高められること
- クリエイティブなソフトウェアであること

具体的にどういう実装に落とし込まれているかを紹介します。

使いたくなるように感じること
- できる限り多くの人に届くようなソフトウェアにするために、無料で配布し、品質をなるべく高くしています
- ダサいと感じられないようにするために、新しめの見た目デザインを目指しています
- 未来のユーザーにネガティブな印象を持たれないようにするために、SNS でネガティブなお気持ちは控え、ユーザーのネガティブな疑問は積極的に解消します
作業の流れがわかりやすくなっていること
- テキスト入力から音声の書き出しまでができるようなファーストビューを意識しています
- あってもなくても良いような機能はなるべく目立たない UI にしています
操作のために考える必要がないこと
- シンプルな UI を意識しています
- 難しい単語を避け、シンプルな文面を意識しています
- ショートカットキーを知らなくても良いような UI にしています
音声の品質を手軽に高められること
- 音声を調声できることがわかるようなファーストビューにしています

デザインの意思決定のプロセス

まだ試行錯誤を重ねていますが、だいたいこのような流れで進めています。

デザインの外観を Issue などで提案する
- 考慮抜け漏れを早期に見つけるためのステップです
- テキストでも手書きの図でもサンプル実装でもなんでも OK です
実際に実装してプルリクエストを作成
- UI/UX デザインは触ってみないとわからない部分が多いので、実装をお願いする形になります
問題箇所を洗い出す
マージ
全体のデザインを見て必要であればメンテナーが微調整

細かいデザインガイドライン

キャンセルボタンは左

名称

ユーザーに提示する場合は「ディレクトリ」ではなく「フォルダ」
マルチエンジン周り
- VOICEVOX API 準拠エンジンのことは「エンジン」
  - VOICEVOX のエンジンなのか準拠エンジンなのかわからない場合は「VOICEVOX 準拠エンジン」
- VVPP ファイルはそのまま「VVPP ファイル」、説明が必要なら「VOICEVOX 準拠エンジンパッケージ」
VOICEVOX エディターと同じ UI を用いたソフトウェアの総称は「VOICEVOX 系ソフトウェア」
- 正式名称は「VOICEVOX 系統 UI ソフトウェア」、長いのでほぼ使わない