前回の記事では、Gear360で撮影した映像素材をAdobe Premiere Proで編集するところまで行いました。

>Samsung Gear360撮影編はこちら!

>Adobe Premiere Pro編集編はこちら!

 

今回はこれらの素材を使ってInstaVR上でどのようにVRアプリを作成していくのかをご紹介します。フローを作成し、それに沿って素材作成とオーサリング、アプリ制作まで行います。

制作手法にはいろいろな考え方がありますので、ここでの説明は一つの例として参考いただければと思います。

 

クリエイターは必ずやっている!アプリのコンセプトを作ろう

まず初めに、基本的なアプリのコンセプトを作り、機能やコンテンツ制作でどう解決するかを決めておくことが重要です。実際のアプリ開発の制作フローでも最初に行われている行程でます。これはVRであるないに関わらず制作の現場で大事なポイントとなりますです。

今回のアプリのコンセプトは以下の通りです。

・各楽曲がスムーズに再生できるVR動画プレイヤーアプリ

-VRメニュー画面の作成で各楽曲に行き来ができる構造

・アーティストのファンや彼らを初めて知った方も楽しめるVRライブアプリ

-メンバー紹介を動画の各メンバーの上にいれて動画を編集する(Premire Proで完了)

-アーティストの紹介をInstaVRのホットスポット機能で入れる

-InstaVRのアクション機能でアーティストの音楽サイトに誘導し彼らの他の作品を知ってもらう

 

これでVRアプリがカンタン♪ フローチャートの作成

まずアプリ全体の構成がどのようなものになるのか図にしていきましょう。

こうして最初に全体を決めて俯瞰できるようにしておくことで迷わず作業を進めることができます。

VRの画面間の遷移を考える上で大事なことは”行き止まりを作らない”ことです。

前に進むだけののコンテンツでは、行き止まりができてしまい、最終的にユーザーはVR空間の中で取り残され何処へも行けなくなってしまいます。

次の画面への入り口を作ったら、同時に戻るための出口もセットで作ることを忘れないようにしましょう。

 

 

★VRメニュー画面って何?

VRメニューとはツアー開始前に表示するVR空間内のメニューのことです。

VR動画のヴァーチャルツアーの場合、ツアー開始後、決められた一つの動画コンテンツが再生されます。しかし動画コンテンツが始まる前に、メニューを表示して好きな動画を選ぶこともできます。

今回は2箇所で撮影を行いそれぞれ別の曲を撮影しているので、どの曲が最初になっても問題ありません。しかしどれか1曲に決めてしまうと、それが各ユーザーのすぐ見たい動画ではない場合、見たい動画にたどりつくまでいくつもの遷移が必要となるので親切な設計ではありません。

最初にユーザーに見るコンテンツを選択する自由を与えたい場合は、このVRメニューを最初の画面として表示することが有効になります。

逆に、建築物のような入り口から入って部屋から部屋へ移動するコンテンツや、連続したストーリーを掘り下げるコンテンツは迷う要因となる選択肢は少なくし、コンテンツに集中できるように設計しましょう。

今回のアプリで作成したVRメニュー

参考)GearVRのVRメニュー画面

 

■VRメニュー画面の作り方

今回はアーティストのイメージに合わせた背景とボタンをオリジナルで作成していますが、

必要な素材を用意するの基本的な考え方は以下の通りです。

・背景

上にメニューのボタンが乗って来ますのでシンプルな画像が向いています。ボタンが背景に溶け込んでしまってユーザーに気づかれないことがないように背景とボタンのコントラストはメリハリをつけましょう。

ex)ハワイ:何もない砂浜のビーチや空など単調な景色を背景にし、ボタンはビビッドな目立つカラーにする。建物などはボタンの邪魔になるので避ける、など。

撮影時にメニュー画面を想定した360度画像をいくつか撮影しておくことをオススメします。

もし、適した画像がない場合、Photoshopなどで合成して作成することができます。今回は撮影した360度画像を使用せず合成で作成しました。

また、素材画像提供サイトで購入することもできます。例えばAdobe Stockでは”Equirectangular”で検索すると様々な360度画像が選ぶ事ができます。

・ボタン

コンテンツの内容がわかるサムネイルや画像を使ってボタンを作成しましょう。背景に溶け込まない主張した色合いで作成し、光彩や影をつけることも効果的です。

サイズはどのくらいの大きさにするかによりますが、私が作成するときの目安として300〜500px程度で作成すると多少コンテンツの中で大きさを調整しても綺麗に表示されます。

 

■その他、今回作成した素材について

・リンク用アイコン画像:動画内で別の動画へ遷移するためのリンク、動画からメニュー画面へ戻るリンクのためのアイコン

・ホットスポット用アイコン画像:アーティスト紹介をホットスポットで表示するためのアイコン

・アクション用アイコン画像:アーティストのサイトへ遷移するアクションのためのアイコン

・ホットスポットコンテンツ画像:アーティスト紹介画像

・ホットスポット用BGMオーディオ:アーティスト紹介を閲覧している間流れるBGM

 

ではフローチャートの設計通りに InstaVRを使ってVRアプリを作成していきます。

InstaVRへログインし、新規プロジェクトを作成します。

※アカウントを作成していない場合はこちらから

 

 

  1. ローカルからInstaVRへ素材の取り込み

VRメニュー画面用に作成した全ての素材や、前回編集して作成した動画コンテンツをあなたのコンピュータからInstaVRにアップロードします。

作業は全てWeb上で行うので全ての素材をWeb上に上げておく事が必要です。

大きなデータを送信する場合、通信の安定した環境でアップロードを行なってください。

>アップロードの方法の詳細はこちら

 

 

  1. アップロードした素材一覧からオーサリング画面にコンテンツの追加

引き続き、ファイル選択画面からホームスクリーンの次に最初に表示させたいVRコンテンツをクリックしてオーサリング画面に追加します。ここではメニュー画面の背景を選びます。

この時、別のファイルを選んでしまうとそのファイルが最初に表示されてしまうので気をつけましょう。

次に、その他のVRコンテンツもオーサリング画面に追加します。

今回は、メニュー画面 > ライブ動画3本  と、順番に追加しました。

 

 

  1. オーサリング

①初期表示位置の確定

全てのコンテンツの取り込みが終わったら各画面の初期表示位置を確認し調整します。

初期表示位置はその画面が表示されて一番最初に目に入る位置です。基本的には見せたい被写体を視点の正面に表示するようにします。

カメラの撮影方向が誤っているとこの位置が任意の位置ではない事がありますのでチェックしていきましょう。

プロセスとしては、左のサムネイルから調整したい画面を選んでクリックして表示 > カメラリセットで現在の初期表示位置を確認 > オフセットのバーを左右に動かして任意の位置に調整

>初期表示位置についての詳細はこちら

これを各画面で行っていきます。

 

②リンクの設定

フローチャートの指定通りにリンクをつけていきます。

アイコンデザインの適用や細かいリンクの配置位置については後回しで、まずは各画面が漏れのないようリンクされることを優先してください。

先に挙げた、”行き止まりを作らない”リンクができているか確認してください。

>リンク設定についての詳細はこちら

 

③ホットスポットやアクションの設定

ホットスポットやアクションのコンテンツの用意がある場合はこれを設定していきます。

ホットスポットはプレビューで確認をおこない予定通りのコンテンツが設定できているか確認しましょう。

アクションではURLか電話番号が設定できますが、間違った記述がないか確認しましょう。

 

④リンクアイコンデザインの設定

それぞれのリンクに適したデザインを設定します。

リンクにはただ画面をつなぐというだけではなく、様々な意味が含まれる場合があります。

進むためのリンク、戻るためのリンク、メニュー画面に帰るためのリンクなどカテゴリに分けてユーザーが一目で見てわかりやすいアイコンを作成し設定します。

あまり多くカテゴリ分けをすると却って分かりづらくなるのでカテゴリ分けは少なくシンプルに行いましょう。

 

⑤リンクアイコンの位置の調整

リンクを適した位置に配置します。

部屋のと部屋の間をリンクで進むのであればドアの上にリンクを配置する、といったようにリンクの位置はリンク先に関連づける事が大切です。

またメニューへ戻るリンクなど、各画面に同じ意味を持つリンクがある場合はどの画面でも同じ位置に配置すればユーザーが迷うことはありません。

また、不用意にあちこちに配置してデバイスや頭部を必要以上に動かさないように設定しましょう。

共通のボタンはどのコンテンツでも同じ位置に配置する。

 

⑥ホットスポットやアクションのアイコンデザイン設定

基本的にはホットスポットやアクションの内容が把握できるデザインを設定しましょう。

今回は少し高度な設定をしています。ホットスポットはアーティストの胸ポケットに花を差すようなデザインにしており、なんだろう?と開いてみるとアーティストの説明が閲覧でき、BGMが流れるようにしています。使い方次第でこうした遊び心を取り入れることも可能です。

アクションで音楽サイトへのリンクを設定していますがこちらはシンプルにテキストで表記しています。

これでオーサリングが完了しました!

 

 

  1. ブランディング

スマートフォンのアプリとして作成するためにいくつかの設定が必要です。

アイコンやホームスクリーンの設定、スマホのジャイロ機能や1眼/2眼表示切り替えなどをこのブランディング画面から行います。

 

①アイコン

スマートフォンのホーム画面で表示されるアプリアイコンを設定します。

ディスプレイの大きなスマホに合わせて画像が鮮明に反映されるようにiOSで180×180px、Androidで192×192px程度の大きさで制作すると良いでしょう(2017/05現在)

大きいサイズに合わせておけば小さいディスプレイで表示される際には自動的に縮小されます。

アプリをストアに申請する場合、アイコンは様々なサイズが求められます。

iOSでは最大で1024px、Androidでは512pxが必要になりますのであらかじめこちらのサイズで作成しておき、用途に応じて縮小して書き出す方が効率的です。

アイコンの下にはアプリ名を設定します。

 

②スプラッシュ

アプリを起動中のローディング画面です。基本的にはシンプルなデザインが多く見られます。

InstaVRのフリー版をご利用の方は変更ができません。プロ版をご利用の方は1920×1080で作成します。

 

③ホームスクリーン

アプリの起動後の画面で、1920×1080で作成します。この画面を飛ばして起動後すぐVRコンテンツを開始することも可能です。

このホームスクリーンを設定すると、1眼/2眼表示切り替え、ジャイロ機能の有無、歪み補正の有無、をコンテンツ開始前に変更する事ができます。

主な設定は画面下部で行いますので上にボタンが表示されることを想定して背景画像を作成してください。

デフォルト表示は以下の画像のようになっていますが、ホームスクリーン詳細設定でデザインに合わせて画像を設定する事ができます。

今回は使用しませんがホームスクリーンには他にも機能がありますので用途に合わせて色々試してみてください。

 

 

  1. パッケージ

InstaVRではAndroid, GearVR, iOS, Wed, Oculus, HTC VIVEのアプリにパッケージ化する事ができます。

どのパッケージ化も基本的にはボタン一つで完了します。

各アプリへの設定や申請方法については別の記事でお話しします。

 

 

  1. ダウンロード

クラウド上でパッケージ化したアプリは、あなたのコンピューターにダウンロードする必要があります。

ダウンロード画面ににはパッケージされたアプリのリストが表示されますので、こちらからダウンロードを行ったり、Webでの表示を確認しましょう。

以上で、撮影から行った動画コンテンツのアプリ化が一通り完了しました。

次に、制作したアプリを多くの人に見てもらうために、アプリのパッケージと申請を行っていきましょう!