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

デザインに関するガイドライン用のドキュメントを追加 #948

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,19 @@
コアは [VOICEVOX CORE](https://github.com/VOICEVOX/voicevox_core/) 、
全体構成は [こちら](./docs/全体構成.md) に詳細があります。)

## ユーザーの方へ

こちらは開発用のページになります。利用方法に関しては[VOICEVOX 公式サイト](https://voicevox.hiroshiba.jp/) をご覧ください。

## 貢献者の方へ

Issue を解決するプルリクエストを作成される際は、別の方と同じ Issue に取り組むことを避けるため、
Issue 側で取り組み始めたことを伝えるか、最初に Draft プルリクエストを作成してください。

### デザインガイドライン

[UX・UIデザインの方針](./docs/UX・UIデザインの方針.md)をご参照ください。

## 環境構築

[.node-version](.node-version) に記載されているバージョンの Node.js をインストールしてください。
Expand Down Expand Up @@ -34,11 +47,6 @@ npm run electron:serve

音声合成エンジンのリポジトリはこちらです <https://github.com/VOICEVOX/voicevox_engine>

## 貢献者の方へ

Issue を解決するプルリクエストを作成される際は、別の方と同じ Issue に取り組むことを避けるため、
Issue 側で取り組み始めたことを伝えるか、最初に Draft プルリクエストを作成してください。

## ビルド

```bash
Expand Down
19 changes: 19 additions & 0 deletions docs/UX・UIデザインの方針.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
## UI/UXデザイン方針

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

- 最も重視していることは、「ユーザーが作ろうとしたコンテンツが完成までたどり着くこと」です
Expand Down Expand Up @@ -25,3 +27,20 @@
- ショートカットキーを知らなくても良いような UI にしています
- 音声の品質を手軽に高められること
- 音声を調声できることがわかるようなファーストビューにしています

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

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

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

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

* キャンセルボタンは左