バーチャル空間における動線と導線

# はじめに
　HIKKYの伊東(ふれふれ)です。

　ゲーム系プログラマー歴3年目の22歳という超新米ではありますが、
　Vket CloudでHeliScriptを使った面白いギミックを日々頑張って開発しております。

　今回の内容は、
　「初めてバーチャル空間を作ってみたい！」
　「どう考えながらワールドを作ればいいか分からない」という方を対象に、
　業務で担当したワールドを例に出しながら「動線と導線の意識」を紹介をしていきます。

:::note warn
### 前置き
Webページでよく使われる**導線**の定義とは別とさせていただきます。
属性としては、建築デザインなどのニュアンスが強いです。
:::

## 動線と導線の違い
### 動線　- 移動できるルート全般
![動線](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/8dbc9a00-1741-3ff2-2589-10fbe42224e9.png)

　ワールドでユーザーが動けるルートの事。
　とにかく移動できる経路であれば、動線としてカウントできます。
   
　**移動できる範囲 ＝ 動線**

### 導線　- 自然にコンテンツへたどり着く為の線
![導線](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/7e422b25-dc4c-ce8a-343d-65096814052d.png)

　前述の動線に制作サイドの誘導意図を持たせたもの。
　水族館や美術館などで見かける"**順路**"が該当します。
   
　**動線＋意図or誘導 = 導線**

 
:::note info
#### 導線の重要性
頑張って作ったコンテンツもアクセスや誘導が悪いと、
気づかずスルーされたり、たどり着く前に離脱しされてしまうケースがあります。

頑張ってこだわったコンテンツに触れてもらう為にも導線の意識は重要です。
:::


## 導線を考える上で重要な要素
まずはサクッと全部紹介してから、各要素を解説していきます。
　
**👀視認性**
　パッと見てどこに行けばいいか、何があるかが初見でも分かる事。
　リスポーンした時のカメラ画角に導線やゴールが見えているなど。
  　
**🎗️ 必然性**
　ユーザーが違和感なく自然に従ってくれる"手触り"の意識。
　行けそうな場所を透明なコライダーだけで塞ぐような、
 　メタ的強制力を極力減らす工夫。
  　
**⛔ 滞留性**
　わざと動線を塞ぐようにモノを置いて、その場に滞留が生まれるような仕掛け。
　ディズニーのお土産ショップやドンキの陳列レイアウトで用いられている考えです。
  　
**🌀 回遊性**
　導線に沿って進むと、ぐるっと1周して特定の場所に戻ってくるような経路。
　ダクソ3のマップ構造から、現実の建築デザインまで幅広く用いられています。


## 各要素の解説

### 👀視認性
**大人でも子供でも、誰でもパッと見てわかる！**
　
道、ゲート、誘導灯、階段などは"日常で見かける移動経路"に向かいがちなので、
こういった要素を盛り込むのがオススメです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/520bca49-1fdb-03e6-1c00-d5649329a527.png)
特に「とりあえず、進めばなにかある」と思えるような道を用意してあげることで、
入ってすぐの離脱を予防することに繋がります。

  　
しかし代わり映えしない景色を進むだけでは"作業"になってしまい、飽きが来る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/ac76a034-b4cc-7616-f9b6-2d99c79a5fb6.png)
そこで、「進んでいくと奥からどんどん道が生えてくる」という仕組みにすると、
登場演出によって誘導が生まれて迷わなくなる上に、
操作に対するインタラクションが生まれて、手触りがよくなる一石二鳥テクニックです。

:::note info
##### 視認性の向上
何かアクティブになった場合は、0.5sくらいの登場アニメーションを付けると、
視認性が向上し、注目してもらえる可能性が上がります。
アニメーションも直線的ではなく、イージングをﾓﾘﾓﾘ入れましょう。
:::

---
### 🎗️必然性
**良い動線を生み出す上で避けるべきは、悪い動線を減らす事。**

バーチャル空間における良い動線は、
行ける場所/行けない場所が「現実の法則」や「潜在的な意識/常識」に合っているかが
評価の主軸になります。
　
動線を遮断する為の「見えない壁」は**メタを感じやすく、冷めてしまう原因**にもなります。
見えない壁はなるべく排除し、3Dオブジェクト＋コライダーで動線を塞ぐ方が親切です。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/14f4b635-b564-1914-bd64-a6edd4be5eb0.png)
壁や柵があるから進めない、飛び越えられない。というごく普通な遮断
※荷物の山を作って行けそうな場所を塞ぐ手法もオススメです
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/f5bf0528-7119-ca91-ff8d-8f19d9e1e795.png)
ゲートが下りているから進めない、何か条件を満たしたら上がって進めるはず。という認知

:::note info
##### コライダーの付け方について
床のコライダーは3Dモデルに沿って精密である必要はないです。
階段の1段1段キッチリ置いて、カメラがガタガタ揺れてしまうケースがあり、
その場合は、斜面コライダー１つの方が"滑らかな手触り"を提供できます。
:::

---
### ⛔滞留性
ある程度足止めをして滞留を生むことで"賑やかさを演出"するのも大切です。
一番見て欲しい、盛り上がって欲しいコンテンツで活用できます。
　
もちろん、ワールド自体が盛り上がっている印象を演出する手段としても有効です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/ce310900-096f-47ff-fbe4-b0c1c4c9f2d9.png)
右のレバーをクリックして、
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/e519056f-ce52-9708-0e21-ad9fc7332426.png)
展示モデルがランダムで出てくる。

 　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/451fdcb7-1899-3c8b-9d9f-08fcfbd5e256.png)
「同じ空間に、誰かが確実にいる」というのはフラっと入ったワールドの、
賑やかさの印象に影響を与えるので、常に人がいるようなバーチャル空間を作る時には、
リスポーン地点から他の人を見かけるような仕組みは重要です。

:::note info
##### "他の人がいる事"も演出の内
直接ユーザーが見えなくても、例えばエレベーターが動いて階を移動してたり、
入店のベルが鳴ったり、扉の開閉音といった音による演出、
誰かが居た跡のようなものがあるのも「他の人がいる」という認識に入ります。

空間に合わせた形で「人がいる事の演出」にこだわるのもオススメ。
:::
---
### 🌀回遊性
大きくても、小さくても、ぐるぐる周回できる事。
逆に言えば、「来た道を引き返す以外に、初期地点に戻る手段を提供する」ことです。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/9137ce77-1dfa-7216-dbc9-ab1f25eeb55b.png)
終端に着いたら、来た道を戻らせないでワープを用意してあげると、、、
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/a507a76c-cda8-fbbc-38b8-5966b62722bb.png)
簡単に戻ってこれる。

このワールドはルートが３つに分かれているので、
次のルートに行くまでの"手間のかかる動線"を省く必要があったので手軽なワープ方式を採用しました。
　

:::note info
##### 行き止まりだけが"終点"じゃない。
初期地点に戻るのが終点のタイプ、特に美術館などの展示系は、
折り返して別の作品を見せる手法が多く、ユーザー自身が、
「戻ってきたなら、これで終わりか。」と自己完結してくれます。
　
行き止まりが終点のタイプは上記のような自己完結が無いため、
しっかりと「これで終わり」というような演出を出す方が親切な設計と言えます。
:::
---

### 一人称視点と三人称視点での誘導の違い
例に出している画像では、"三人称視点が主流である前提"で導線が作られています。

#### 誘導を目的とした床のデザインの場合
【三人称視点】誘導性◎
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/b7e2eed0-7cfd-062c-9a05-8c301959b79d.png)
俯瞰で見えるので、矢印をはっきりと視認できる。
　
【一人称視点】誘導性 △
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/e05e76b2-792c-5ceb-4224-9ad6ef747347.png)
地面とカメラが平行に近いので、地面の矢印は、あまり見えない。
**UVスクロールで動きを付けたりと、ひと手間加える必要がある。**

#### 案内の看板、掲示板の場合

【三人称視点】誘導性 △
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/3743b856-7361-cce4-2f8b-23691aafcd36.png)
逆に**俯瞰したカメラが原因**で誘導性を失うパターンです。
[看板] - [アバター] - [カメラ]と、必ずアバターが間に挟まるせいで**正面の視認性**が悪く、
三人称視点の場合、看板は効果的とは言えません。

【一人称視点】誘導性◎
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951063/250a11eb-10bb-584e-e57f-800c1f8cd631.png)
見やすいですね。
アバターなど、他の情報が入らないので看板の情報だけを仕入れる事が出来ます。

ただし、文字だけは全く読まれない or その言語を読めない人向けに
**必ずイラストも付けて情報を伝える**事が大切です。
　
こういったカメラの取り回しの違いが一人称視点と三人称視点では大きく異なる為、
しっかりと、**視点を意識した誘導**を取り込むことをオススメします。

## 最後に
他にもバーチャル空間では色々な要素を取り入れることで、より良いものになります。
アニメーションやインタラクション性、効率的な作り方など、沢山あります。
是非、リアルの建築デザインやゲームのマップなどからもヒントを得てください。
　
この記事が良いバーチャル空間を生み出す一助となれば幸いです。