#概要
Unityで作成したゲームをブラウザ上に公開するとき、WebGLは非常に簡単で便利な方法になります。しかし、通常の設定のまま公開してしまうと、UIや画面サイズが崩れてしまい、せっかくのゲームが台無しになってしまいます。

本記事は、Unityで作成したゲームをWebGLで公開するときに重要な設定をまとめたものになります。

#①Canvasの設定

Canvasのインスペクターを開き、CanvasScaler を次のように設定する。
- UI Scale Mode を Scale With Screen Sizeに変更
- Reference Resolution の値をゲームシーンの画面サイズの値に変更
  （画面サイズが大きすぎるとブラウザ上で見づらくなるので注意）
- Screen Match Mode を Expand に変更

#②フォントの設定

Unityのデフォルトのフォント (Arial) の場合、ブラウザ上では表記が乱れてしまうことがあります。これを避けるために、配布フォントを使用する必要があります。おすすめのサイトを載せましたので、参考にしていただければと思います。
https://rwiiug.hatenablog.com/entry/font_matome
※フォントの利用規約には十分注意してください！

#③ビルドの設定

WebGLでビルドする時に、Player Settings を開き、Player > Resolution and Presentation > Resolution の値をゲームシーンの画面サイズの値に変更する。

##（おまけ）UnityRoomでゲームを公開する場合

WebGLでビルドする時に、Player Settings を開き、Player > Publishing Settings > Compression Format を GZip に変更する。

#まとめ
以上の設定をすることで、ブラウザ上でもUIが崩れずに正常にプレイすることができるかと思います。上記の設定をしてもUIが崩れることがあれば、コメントで教えていただければと思います。