光によるユーザ行動誘導のアイキャッチ

光を使ったユーザ行動を誘導するデザイン

本記事では「光がどのような役割を果たし、ユーザ行動を誘導していくのかを学ぶ」を目的にしています。

具体的には、方向を指し示すオブジェクトや文字ではなく、”光”を活用した方法を、画像やシーンを見て学びます。

STYLYのシーン画像

STYLYのシーン画像

サンプル

STYLY GALLERYからサンプル空間を体験できます。
https://gallery.styly.cc/Machio_Kinniku/829fee4d-e1cd-11e9-b34d-4783bb2170d0

記事で紹介しているSTYLY-Unity-サンプルプロジェクトのダウンロードは以下からできます。
対象フォルダ:STYLY_Examples > Light_Induction配下
https://github.com/styly-dev/STYLY-Unity-Examples

STYLY-Unity-サンプルプロジェクトの使い方は以下記事をご覧ください。

全体の流れ

STYLYのシーン、または記事内の画像を参考にして、光のユーザ行動の誘導に関して学んでいきます。

Unityやその他アプリなど、準備する必要はありません。

行動の誘導とは

ゲームやVR空間を作っていくうえで、ユーザの行動を誘導することは非常に大切です。

ユーザが目的地へ到達したり意図に沿った行動を起こしたりなど、ユーザに思い通りの行動を起こさせるには工夫が必要です。

それら工夫には様々な手段があります。ユーザを目的地へ急がせたい場合は緊迫した音楽を流したり、必ず取得して欲しいアイテムは目を引く立派な宝箱に入れたり・・・。

今回はそれら工夫の中でも”光”に注目していきたいと思います。

例えば同じ3Dオブジェクトで構成されたシーンでも、光の効果を加えるだけで「ここに入ってくれ!」というメッセージが深まり、ユーザの行動を誘導できます。

光の効果の有無ver1

光の効果の有無ver1


光の効果の有無ver2

光の効果の有無ver2

シーンを用いた具体例の紹介

実際のシーンを元に「光によるユーザ行動の誘導」とは何なのかを説明していきます。

博物館を模したような建物を制作しました。

闇の中に光を置く

周囲が暗い状況の中、光を置くことによって、ユーザの視線と方向性の誘導を行うことができます。

先の例でも紹介しましたが、ユーザが目的とは異なる場所へ寄り道することの防止やコンテンツへの注目などに役立ちます。

光効果なし

光効果なし


光効果あり

光効果あり

誘導灯

ユーザが進んでいる方向に自信を持って進めるように、誘導の役割を果たす照明をつけてあげましょう。

ホラーゲームなどで意図したものであれば問題はありませんが、真っ暗な道は進みにくいものです。

雰囲気に合わせて光の要素を加えましょう。今回は映画館でよく目にする客席誘導灯のような照明をつけました。

今回は周囲に壁があり、他の意図しない方向へユーザが進むことはありませんが、大きく開けた空間であっても、誘導灯の配置を工夫することでユーザの進行方向を誘導できます。

誘導灯

誘導灯

対象物を照らす

ユーザに特に注目して欲しいオブジェクトは直接ライトで照らしてしまいましょう。

照明からの光

照明からの光

上記の他にも、何が光を放っているのか?を明確にすると、よりリアリティが増します。

この時に使用する光の色は空間全体の雰囲気に合わせて調節しましょう。

今回はスポットライトの3Dモデルを作成し、配置しました。

スポットライト

スポットライト

目的地を指し示す

ゲームなどで多く使われる手法です。ユーザが到達して欲しい地点に光、または特殊なエフェクトなどを配置することによって目的地への誘導が可能です。

目的地の光効果

目的地の光効果

まとめ

光を使ったユーザ行動を誘導するデザインに関して、いくつか紹介したことを大きく2つにまとめると、

  • 光で目的のモノを照らす
  • 光の存在で指し示す

今回説明に用いたシーンは意図的に周囲を暗くしましたが、実際に制作していくシーンでは全体が暗いという場面は非常に少ないと思われます。

その場合は無理して光の効果を使うのではなく、記事冒頭で述べたような音楽や特徴的な3Dモデルを使用したり空間の形を変えたりなど工夫してみてください。

ぜひこの記事を参考にして、シーン制作に役立ててください。

最後まで読んでいただきありがとうございました。