意識低い系がプロダクト公開するときにデザインを誤魔化すために入れるUnityAssetとノウハウ

# プロダクトを公開するのは割とメンドイ

最近、VZeroというプロダクトを公開しました([VRMでブラウザで動く多人数オープンワールドゲームVZeroを作った](https://qiita.com/kotauchisunsun/items/e40d23997a8e3f63e3d4))が、それに伴って、めんどくせぇ。と思う作業が色々ありました。
基本的には、VZeroは技術調査であって、デザインはこだわらない。というスタンスなのですが、まぁ。世の中、見た目から入られるので、どうやっても30点か、40点ぐらいの見た目は確保する必要があります。この記事は、

**30点、40点の見た目を確保するための意識低い系のUnityAssetとノウハウの紹介です。**

あ、そういう人なので、全体の見た目のクオリティが低いのはご了承ください。


# 作例紹介

今回紹介するアセットを組み合わせると以下のような絵が作れます。自分が趣味で作った作例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/2d184ecd-2af7-b6b5-8319-8522834dda9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/1c3449f6-d4c7-b41c-15a2-f03c9127bbc4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/1c42105e-789f-b303-3774-941a3924dcd8.png)


# サンプルシーン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/4b072ff1-8370-c91a-c75a-ff84667af1db.png)

とてもUnity臭のするシーンです。これを改良しています。


# SkyBoxを設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/9999030a-df26-da4a-7b68-ba1cfaab5186.png)

とりあえずデフォルトのSkyBoxを回避します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/52b2efc1-6b25-833b-f7c4-4b39180a75b1.png)

[AllSky Free - 10 Sky / Skybox Set](https://assetstore.unity.com/packages/2d/textures-materials/sky/allsky-free-10-sky-skybox-set-146014)

今回使ったのは、AllSkyというAssetのFree版です。有料版もあるんですが、無料版でも、5,6個綺麗な画像が入っているので、適当に選べばいいと思います。

# Material+ReflectionProbeを設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/9215bd9f-4d0b-a689-fcdc-df9d52227ae3.png)

Real MaterialsというAssetのマテリアルを入れます。アルミやガラス。スチールなど色々リアルの物体を模したマテリアルが入っているので、リアル寄りだと結構便利です。今回は、SphereにAluminium、CubeにMarble Polished Whiteを設定してます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/5c989a2d-969d-7601-f22d-752744447a17.png)

[Real Materials Vol.0 [FREE]](https://assetstore.unity.com/packages/2d/textures-materials/real-materials-vol-0-free-115597)

これだとあんまりきれいじゃないですよね？ここで、環境光を設定します。Reflection Probeというものを設定します。

[Unityのライティング「Reflection Probe」を使用して反射を表現する](https://styly.cc/ja/tips/reflctionprobe_unity_lighting/)

このReflection Probeを設定すると、印象がグッと変わります。とりあえず上の記事通りやると綺麗になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/9c2486c5-2105-eb91-6b97-6ec6930a1206.png)

# とりあえず水を張る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/beb2bf0d-4687-d436-094a-2029f6bdd993.png)

とりあえず水張っておきます。今回、入れたのはVRWaterShaderというアセットです。もともとのPlaneのマテリアルに、Middle Waterというマテリアルを付けただけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/b7a22d80-f650-30f3-b473-5dc1452b00b2.png)

[VRWaterShader](https://assetstore.unity.com/packages/vfx/shaders/vrwatershader-108207)

こいつもReflection Probeの効果が強く、割と万能感あります。ちなみにReflection Probeを切るとこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/79e3343b-7fc7-0f30-e8cb-a08870bc08c8.png)

味気ないですね。なんとなく思っていることとして、

- 高品質で書き込まれている情報量の多い背景
- 物体に反射するマテリアル
- 水(反射があり予測不能な動きのあるもの)
- 環境光(ReflectionProbe)

あたりが鉄板かな。と思います。多分プロは情報量を引くことが上手でいい感じになると思うのですが、素人なので、とりあえず情報量モリモリで見てる人の脳みそをオーバーフローさせる方が綺麗と錯覚させられる気がします。知らんけど。

# 撮影効果を付ける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/f1833492-932c-6bf4-ed1a-ffc6aefcecbd.png)

撮影効果というと、[Post Processing Stack v2](https://docs.unity3d.com/Packages/com.unity.postprocessing@3.0/manual/index.html)が強いと思います。ただ公式のドキュメントはわかりにくいなぁ。と思うので以下のドキュメントが良いです。

[Unity ルックデヴ講座 Post Processing Stack v2編](https://gaprot.jp/2018/08/01/unity-lookdev-post-processing-stack-v2/)

今回、やってみて思ったのですが、自分の演出の引き出しが少ないと、どれも似たような感じの絵になるので、ちゃんと使いこなすには難しいなぁ。という印象です。たぶん、上の絵もどっかで見たことある感が強いと思います。


# 小物がめんどくさい

**ゲームやプロダクトを作る際、必要なんだけど、用意するのめんどくせぇ。**

と思うものが結構あります。どちらかというとこちらの方が有用かも。

## とりあえずアイコンが欲しい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/a19fa76a-c2f6-62b8-d337-a1e369620d85.png)

[139 Vector Icons](https://assetstore.unity.com/packages/2d/gui/icons/139-vector-icons-69968)

UnityAssetStoreの画像を引用するとこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/9919292b-7679-559c-ed94-16712415fa54.png)

プロダクトにおいて、"音声のミュート"とか、"設定ウィンドウを出す"とかそういう機能はありがちだと思います。しかし、それをテキストとボタンで"Mute"とか"Settings"とかでやると、え。ダサい。アイコンにしてよ。みたいなことを言われると思います。いや、モックだし？本番にはちゃんとするし？まだデザイン素材上がってこないし？みたいなことを言っても、それしか言わないメンドクサイ人が居るので、雑に逃げるのに導入が楽で豊富な絵柄がそろっているのでGoodなアセットです。

## とりあえずSEが欲しい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/964b7d56-1c7c-f900-d9a6-7249c32e7843.png)

[FREE Casual Game SFX Pack](https://assetstore.unity.com/packages/audio/sound-fx/free-casual-game-sfx-pack-54116)

**面セレクトとか、キャラセレクトする際に、"ピロッ"って音欲しいですよね？**

アレです。必要なんだけれども、ネットから1つ1つこだわって探して来たり、自分でシンセで作るのも面倒だったりします。なので、そこそこのクオリティがパッキングされてるのが楽です。あと、外部から取り込むとライセンス表記が必要だったりするので、こういうものでスキップする方が工数削減になります。

## スマホ用にジョイスティック欲しい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139643/b15cc812-4d57-f9d0-2b42-2dd540cf27c4.png)

[Joystick Pack](https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631)

VZeroは一般公開していませんが、Android版が存在します。そのため、移動系のUIを作るのにジョイスティックが必要になりました。ハイ。画像とロジック作るのめんどくさいですね。なので、アセットストアからもらってきます。中身をよくよく見ると何個か入っており、固定表示のジョイスティックだったり、タップしたところから出現するジョイスティックが入ってたりします。その割にファイル数とかも少ないので、取り回しやすかったです。


# 意識低い系のノウハウ

**個人で作るものにデザインとしての統制とかブランディングとか、まぁ別に気にしなくてもいいんじゃねーの？なんか見た目綺麗な方がいいんじゃねーの？**

という割と意識低い感じの私が参考にする感じです。1つ勘違いしてほしくないのは、意識が低い人(私)が参考にするのであって、「引用や貼り付けている記事の執筆主や製作者が意識低い系だ。」とは言っていません。

## Unity固有系

- [【Unity臭】Unity特有の安っぽさを消臭してマシな画面を作る](https://qiita.com/Plum_Very/items/06df5ed018ab23cf38c2)
- [Unity臭さを消す方法10連発](https://qiita.com/ruccho_vector/items/014d9751e0e63c11db39)

Unityもコモディティ化しており、あ、この演出の感じ、Unityのデフォルトだよね。みたいなものがばれたときに、クオリティが一段下がって見える。みたいなことがあると思います(実際に低いかは別として)。そういうのを回避するのに便利かな。と思います。


# 演出のネタ帳

個人的に大好きなのを2つ。

岡崎体育のMusic Video

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/ioVMVKrkeL">https://t.co/ioVMVKrkeL</a></p>&mdash; こたうち@VTuberエンジニアΩ (@kotauchisunsun) <a href="https://twitter.com/kotauchisunsun/status/1337673581430358017?ref_src=twsrc%5Etfw">December 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

てさぐれ部活ものOP

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/YXgMnEtVzg">https://t.co/YXgMnEtVzg</a></p>&mdash; こたうち@VTuberエンジニアΩ (@kotauchisunsun) <a href="https://twitter.com/kotauchisunsun/status/1337674094540550144?ref_src=twsrc%5Etfw">December 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こういうちょっと斜に見るコンテンツは結構好きで、逆に勉強になるな。と思います。
Music Videoは確かに、いろんな人のMVで似たような演出みたことある！！って思います。現実の映像だと、大体こんな感じの演出だよね。みたいなのが分かります。てさぐれ部活もののOPは歌詞をちゃんと聞いてみると、すごくあるあるwwwwってなります。なので、演出の一覧みたいな視点で見ると、この2つの動画はすごく役に立つと思います。


# 撮影効果・特殊効果

アニメの撮影効果・特殊効果だとこのサイトが良いです。

[用語だけでは解りにくかったので、アニメの撮影処理を実際の使用例を見せつつまとめてみた（GIFあり）](http://usapen3.hatenablog.com/entry/2016/12/18/234110)

素人だと、「つけパン」とか、「パンアップ」とか、ちょっとだけ用語を知ってる専門用語ってあると思います(私もそう)。じゃあ、それって定義ってどんなんなの？実際に使われている場面は？どういった効果を狙ってるの？作品にこの効果を入れてる合理性はあるの？みたいなゴリゴリした詰めをされると答えに窮すると思います。まぁ私はプロじゃないし？別に私がいいと思ったからそうしただけだし？お前から金もらって作ってるわけじゃないから変える気ないし？って逃げるのもありですが、そういう時に上のサイトを見ると、アニメの場面において、どう効果的に演出が使われてるのか。が分かるので、割と納得感が強いと思います。あと、ここにある演出をProcessingStackとかで再現すると、そこそこ汎用性があって、おもろいんじゃない？みたいなことは思ってます。


# ストーリーテリング

演出という面では舞台なんかの技法もあります。**例えば、勇者と魔王の決闘という場面を描くときに、勇者は右？左？どっちに描くべきでしょうか？答えは右です。**

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「漫画の先輩や舞台観劇などから学んだ絵の演出意図」<br>昔ブログに文章で書いたことを簡単に表現できないか、と思って描いてみました。 <a href="http://t.co/ri9yZ4KYxe">pic.twitter.com/ri9yZ4KYxe</a></p>&mdash; かん だんち (@dankoromochi) <a href="https://twitter.com/dankoromochi/status/505567085670301696?ref_src=twsrc%5Etfw">August 30, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[アニメで主人公サイドが（視聴者から見て）右側なのには何か深い理由があるんですか？](https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1148857921)

別に"絶対に右に書く"という必要はないと思いますが、おそらく日本人が「右に書いているのが主人公。」というのに訓練されすぎているので、そこをひっくり返してまで演出する理由は少ないかなぁと思います。べたに決まってることがあれば、そこは乗る方が聴衆は違和感の少ないものは作れるだろうな。みたいな感覚値はあります。


# 画面構成

止め絵だと写真のノウハウが割と役に立ちます。

[写真を始めたらまず覚えたい基本のカンタン４構図](https://photo-studio9.com/4-basic_composition/)

大体、3分割法を意識すればいいのかなぁ。と思ってます。前に貼った作例が、とりあえず真ん中には寄せない。三分割のライン上に乗せる。とか、そういうのを意識しています。
定型のパターンが決まってるので、逆にこれ以上綺麗にするのは、素人だと無理だと思うので、プロでもない限り定型を模倣する方がコスパは良いと思います。


# 感想

VZeroを作ってるときに、「ひたすらめんどくせぇな・・・」と思うことがありました。それが、「小物がめんどくさい」の内容です。別に自分が適当に使う分にはこだわらないけど、自分以外の他人が使うことを考えると、入れとかないとなーとか思うと、入れざるをえなかったりします。でも、多分こういう話ってどこにでもあって、**興味のあるとこ以外やりたくない。**ってまぁまぁあると思います。最近、見た中で納得感の強かったのが、[「AWS で独自の自然言語モデルを構築する」](https://aws.amazon.com/jp/blogs/news/build-your-own-natural-language-models-on-aws-no-ml-experience-required/)にあった、

**「Undifferentiated Heavy Lifting」(差別化につながらない重労働)**

という言葉です。個人的には割とピンとくる感じがありました。いや、違うだろ。ゲームにおいて、見た目やUXってのはコアであり、そこに投資しないのは信じられない！と思う人もいます。まぁ、そういう人は頑張ってください。というのが私のスタンスで、80点90点のクオリティにいつまでも到達できず、リリースできないぐらいだったら、適当に30点40点で出せばいいやん？アマチュアなんだし。みたいなことは思います。本当にお金を稼ぐつもりのプロダクトでは別ですが。
というわけで、自分が時間かけて50点ぐらいしか稼げないのであれば、アセット使って短時間で30点,40点稼ぐのもまぁありなんじゃない？今回のやつは無料だし。と思うので、やってみればいいと思います。この内容全部追って、実際に手を動かすのすら出来ないのに、クオリティが大事。みたいなことを言う人もいると思うので、やっただけえらい！公開したらもっとえらい！って私は思います。べたを真似れるのも一技術だと思います。なので、なんかQiitaでUnityのめんどくさいのを雑に楽に解決する記事があったな・・・と思ったときに思い出してもらえれば幸いです。