設定 パネルを作りました。自分のPCとVRヘッドセットでは、問題なく使えます。
ところが、座って遊んでいる人には手が届きません。スマホから来た人は、文字が小さすぎて読めません。片手だけで操作している人は、隣り合ったボタンを押し間違えます。
特別な機能を足す話ではありません。 いまあるパネルの数値をいくつか変えるだけで、使える人がはっきり増えます。この記事では、その3つを扱います。
この記事でわかること
- 文字サイズの目安と、確かめ方
- ボタンの大きさと間隔
- 音量をスライダーから段階に変える理由
- 高さを決め打ちにしないこと
ワールド内にUIを置く を試した状態から始めます。
使いにくさは、誰にでも起きる
「アクセシビリティ」と聞くと、特別な誰かのための対応に思えるかもしれません。実際には、多くの人が日常的に当てはまります。
| 場面 | そのとき困ること |
|---|---|
| 座って遊んでいる | 高い位置のボタンに手が届かない |
| 片手が塞がっている | 隣り合ったボタンを押し間違える |
| スマホから来た | 小さい文字が読めない。細かいドラッグができない |
| 立ちっぱなしで疲れた | 精密な操作をしたくない |
最後の1つに気づくと、話が変わってきます。疲れているときの自分も、この一覧に入っています。
だから、ここでやることは「配慮」というより 設計の質 です。押しやすいボタンは、誰にとっても押しやすいものです。
この記事で直すのは3つだけです。
- 文字を大きくする
- ボタンを大きく、離す
- 音量をスライダーから段階に変える
どれも数分で終わります。
実践：設定パネルを3か所直す
音量とミラーを切り替える設定パネルを作って、3つの調整を入れます。
1. パネルを用意する
床のあるシーンに、World Space の Canvas を置いて SettingCanvas と名付けます。
| 項目 | 設定 |
|---|---|
| Render Mode | World Space |
| Position | (0, 1.2, 2) |
| Scale | (0.002, 0.002, 0.002) |
| Reference Resolution | 1920 × 1080 |
「Add Component」で VRC Ui Shape を追加します。これがないとVRChatの中で触れません。スマホから正面に開く仕組みも、これが前提です。
(0, 1.2, 2) にしているのは、座っている人でも届く高さ だからです。目線の高さに置くと、座位の人には遠くなります。
2. 文字を大きくする
パネルに TextMeshPro でタイトルと項目名を置きます。
Reference Resolution が 1920 × 1080 のとき、目安はこうなります。
| 用途 | 文字サイズ |
|---|---|
| 見出し | 40以上 |
| 本文・項目名 | 28以上 |
| 注釈 | 24を下回らない |
数字だけでは判断しづらいので、確かめ方を1つ覚えてください。
Playして、パネルから 1.5メートル離れた位置 に立ちます。そこから無理なく読めるかどうかで決めます。
近づけば読めるのは当たり前です。離れて読めるかどうかが基準です。 座っている人は近づけないことがあります。
3. ボタンを大きく、離す
ミラーのオン・オフを切り替えるボタンを2つ置きます。
| 項目 | 設定 |
|---|---|
| ボタンの高さ | 80以上（Reference Resolution 1920×1080 のとき） |
| ボタン同士の間隔 | 24以上 |
| ボタン内の文字 | 28以上 |
間隔がいちばん効きます。 ボタンが接していると、片手のレーザーポインタでも、スマホの指でも、隣を押してしまいます。
さらに1つ。取り消しにくい操作は、他と離して置いてください。
- 「リセット」「全部消す」は、他のボタンから大きく離す
- できれば色も変えて、押す前に気づけるようにする
Layout Groupを使っているなら、Spacingの値を上げるだけで間隔が入ります。
4. 音量を段階に変える
ここが3つの中でいちばん効きます。
音量調整は、スライダーで作りたくなります。ところがスライダーは 押しながら動かす 操作です。
| 端末・状況 | スライダー | 段階のボタン |
|---|---|---|
| VRのコントローラー | 手が震えると外れる | 押すだけ |
| 片手で操作 | 押しながら動かすのが難しい | 押すだけ |
| スマホ | 指で隠れて位置が見えない | 押すだけ |
そこで、ボタン4つに置き換えます。
[ ミュート ] [ 小 ] [ 中 ] [ 大 ]
段階が4つあれば、実用上は足ります。「もう少し小さく」の細かい調整より、確実に押せること のほうが価値があります。
いま選ばれている段階は、ボタンの色を変えて示します。押した結果が見えないと、効いたかどうか分かりません。
選んだ段階を次回まで残すなら、PlayerDataで音量を保存する の仕組みをそのまま使えます。保存する値が数字から段階の番号に変わるだけです。
5. 3つの端末で確かめる
直したら、実際に見てみます。
| 確認 | 見るところ |
|---|---|
| デスクトップで1.5m離れる | 文字が読めるか |
| VRで座った姿勢を試す | ボタンに手が届くか |
| スマホから入る | 正面に開けるか、押し間違えないか |
スマホでの確認は必ず入れてください。 PCで作っていると、いちばん見落とす端末です。
高さを決め打ちにしない
もう1つ、パネル以外にも関わる話です。
VRChatのアバターは、身長がばらばらです。自分のアバターで作ると、それが基準になってしまいます。
| 決め打ちにしがちなもの | 起きること |
|---|---|
| 目線の高さに置いた看板 | 小さいアバターには見えない |
| 腰の高さのボタン | 大きいアバターにはかがまないと押せない |
| 頭がぶつからない前提の梁 | 背の高い人が引っかかる |
対策は単純です。
- ボタンは低めに置く。 高いところより、低いところのほうが届きます
- 看板は大きくする。 見上げても見下ろしても読める大き さに
- 通路は広く、天井は高く。 迷ったら余裕を持たせます
作っているあいだに、一度アバターを小さいものに変えて歩いてみてください。 見え方が変わって、直すべき場所がすぐ見つかります。
うまくいかないときは
- VRChatの中でボタンを押せない → VRC Ui Shapeが付いていません
- スマホで正面に開かない → パネルが見えていないか、遠すぎます。近づける位置に置きます
- 文字がぼやける → CanvasのScaleが小さすぎます。Reference Resolutionを上げてから調整します
- ボタンを押し間違える → 間隔が足りません。24以上に広げます
- 座ると届かない → パネルの高さを下げます。
1.2あたりが目安です - 押したのに反応が分からない → 選ばれている状態を色で示します
おまけ：先に知っておくと良いこと
- コントラストを確保する: 薄いグレーの文字は、明るい部屋でも暗い部屋でも読みにくくなります。背景と文字の明るさは、はっきり差をつけてください
- 色だけで区別しない: 「緑がオン、赤がオフ」だけだと、色の見え方が違う人に伝わりません。文字か形も一緒に変えます
- 音だけの合図にしない: 効果音で知らせるなら、見た目の変化も添えます。音を切っている人がいます
- 点滅を避ける: 速い点滅は体調に影響することがあります。ゆっくりした変化にします
- 1つやるだけでも効く: 3つ全部でなくて構いません。文字を大きくするだけでも、読める人が増えます
まとめ
使いやすいパネルは、3つの調整でできます。
- 文字は本文28以上。1.5メートル離れて読めるか確かめる
- ボタンは高さ80以上、間隔24以上。取り消しにくい操作は離す
- 音量はスライダーではなく段階のボタンに
- 高さを決め打ちにしない。低めに置いて、大きく作る
置く前の問いかけは、「座ったまま、片手で、スマホから使えるか」 です。ここを通ればたいていの人が使えます。
公開の手順を確かめるなら ワールドをアップロードする、端末を広げるなら Quest・スマホにも対応する へ進んでください。