⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？

Instagramでは、ARで作成された技術を用いてストーリー投稿やビデオチャットを彩ることができることをご存知でしょうか？

Instagramのストーリーやビデオチャットにおいて、AR技術によるエフェクトやフィルターを活用した様々な演出を行うことができるのです。

本記事では、InstagramにおけるARエフェクト・フィルターのメリットや作り方にいて分かりやすくご紹介していきます。

1．そもそもARとは？

まず、ARとは何かについて簡単に紹介しておきましょう。

AR（Augmented Reality）は「拡張現実」と呼ばれており、現実世界をコンピュータによって拡張すること、あるいは、拡張された現実世界のことです。

もっとわかりやすく言うと、現実世界にコンピュータで作られた仮想てきなモノを重ね合わせることです。

近年人気の「ポケモンGO」がAR技術を取り入れた例としてイメージしやすいでしょう。現実の地図情報をもとに、ポケモンキャラクターを「あたかも目の前にいるかのように存在させる」ことができています。

そのほか、たとえば

  • 現実空間にスマホの画面越しに花びらを舞わせる
  • 部屋にインテリアを仮置きする
  • 気になる眼鏡や服を自分の顔や体で試着する

と様々な応用が可能です。

総務省の発表した「令和2年 情報通信白書」によると、AR／VRの市場は拡大する見通しであり、5Gもあわさって今後さらに普及が進むことが予想されています。

2．InstagramのARエフェクト・フィルターとは

Instagramには、アプリのカメラ機能にARエフェクト・フィルター機能がついており、撮影している動画をさらに華やかにデコレーションすることができます。

たとえば、人気キャラクターになれるARエフェクトや、キラキラや花びらといった画面全体を飾るARフィルターなど様々なものが提供されています。

2-1．InstagramのARエフェクト・フィルターが自分で作れるように

Instagramは、2019年8月14日にInstagramユーザーがAR（拡張現実）技術を活用したカメラエフェクトを作成して、Instagramのストーリー上で公開することができる「Spark AR」を提供開始しました。

InstagramのARフィルター「Spark AR」を活用することで、カメラに写った自分の顔や体を認識して頭に猫耳をつけたり、髭を生やしたり、また背景に蝶々を飛ばして楽しむことも可能になります。

実際世界にはいないキャラクターや加工を施すことができるARエフェクトは、Instagramのストーリーをより自分好みでおしゃれにカスタマイズすることができます。

ユーザーを惹きつける求心力のあるストーリー投稿を通して、Instagram上級者な気分になることもできます。

3．ARエフェクト・フィルター 3つのメリット

ARエフェクト・フィルターについてご紹介してきましたがお分かりいただけたでしょうか。

ARをフル活用したストーリー投稿などは、視覚的に楽しむことができるInstagramにおいてとても親和性の高い技術です。

Instagramにおいて、そんなSpark ARを活用するメリットとしては、

  • 遊べる
  • 試着できる
  • 話題やファンを作れる

といったものが挙げられます。

それぞれ以下で解説していきましょう。

3-1．遊べる

カメラでの撮影時にARエフェクトやフィルターを活用することで、視覚的に大変面白い写真を作成することが可能。

ほっぺたにハートマークを浮かばせたり、頭に猫耳をつけたりと人物の撮影をARによるエフェクト効果で彩ることができます。

また背景に蝶々を飛ばしたり、背景全体にハートを降らせたりすることも可能で、人物だけでなく風景写真にも採用することができるのです。

「ポケモンGO」などAR技術をフル活用したアプリや、ARの家庭ゲームが話題となるなど、AR技術は人々の生活に徐々に浸透してきています。

InstagramにおいてもAR技術を活用した撮影は今後もさらに進化していくことでしょう。

3-2．試着できる

InstagramのARフィルターを活用することで、様々なアイテムを実際に試着する擬似体験をすることが可能です。

洋服などのアパレルから腕時計や指輪など小物アイテムまで、まるで実際に試着をしているかのような経験を体験することができます。

ARフィルターをオンにしたカメラで体や腕を画面に映すことで、誰にも咎められず手軽に試着して購入後のイメージを思い浮かべることができるのです。

3-3．話題やファンを作れる

ARエフェクト・フィルターを使ったコンテンツは、ユーザーに対して普段のInstagramとは違った体験を与えることが可能。

マーケメディアさんの調査によると、ARの成長率は2020年までになんと71.6%と予想されており、人々のAR技術に対する興味関心の高さを伺うことができます。

Spark ARを加えるだけでいつものInstagramとは違う、一味違ったコンテンツになるので多くのユーザーから話題性を獲得することができます。

またそのようなコンテンツは、積極的に投稿したくなるため拡散力のあるコンテンツであると言えます。

Instagramのリールにおいても、ARエフェクトやフィルターを使った動画は話題性を集めるだけでなく、ファンを獲得できることからも、人々の興味関心をひく人気アカウントとなることができます。

4．ストーリー等でのARエフェクト・フィルターの使い方

4-1．リアルタイムでエフェクトを適用したストーリーを撮影する

リアルタイムでエフェクトを適用したストーリーを撮影する方法は簡単。ストーリーの投稿画面を開いたら、画面下部にあるエフェクトの一覧から任意のエフェクトをタップします。

エフェクトが上手く適用されていることを確認し、中央の撮影ボタンを押しましょう。長押しすると動画の撮影がスタートし、短くタップすると写真が撮影される仕組みです。

あとは、任意でスタンプやテキスト記入などをおこない、ストーリーズ親しい友達連絡先など共有したい範囲をタップすれば、ストーリーに投稿できます。

エフェクトはデフォルトで50種類ほどが使えるほか、一番左にスワイプすると表示されるエフェクトをチェックボタンをタップすると、Spark ARのエフェクトギャラリーに移動します。

エフェクトギャラリーには、ユーザーが投稿したさまざまなエフェクトが閲覧・保存できるので、そこから好みのものを探すのもいいでしょう

4-2．カメラロールの写真・動画にあとからエフェクト加工を施す

ストーリーの投稿画面を開いたら、画面左下にある四角いアイコンをタップします。端末のアルバムやカメラロールが参照できるので、ストーリーに投稿したい写真や動画を選びましょう。

続いて、画面上部にある丸い顔アイコンをタップ。デフォルトで使えるエフェクト50種類ほどが表示されるので、好みのものを選択して完了ボタンを押してください。

先に述べたように、Spark ARで配信されているエフェクトは端末のアルバムにある写真や動画の加工には利用できません。仕上がりを確認したら、任意でスタンプやテキスト記入などをおこない、ストーリーズ親しい友達連絡先など共有したい範囲をタップしてストーリーに投稿できます。

4-3．ビデオ通話中にエフェクト・フィルターを適用する

インスタのビデオチャット（ビデオ通話）機能でも、エフェクトを活用できます。

方法はいたって簡単。ビデオ通話中、エフェクトボタンをタップするだけです。画面下部にデフォルトで使えるエフェクト50種類ほどが表示されるので、好みのものを選択してください。

画面に映っている自身の顔やその周囲に、リアルタイムでエフェクトを効かせることができます。相手側の画面には、エフェクトが適用された状態の自分の顔が写る仕組みです。

肌や輪郭、血色などを自動で補正してくれるので、化粧前や寝起きで顔を見られたくないときにも便利。また、背景を隠す効果があるエフェクトなら、家が散らかっていたり、同居人が入り込んでしまったり、といった都合の悪い部分を隠す用途としても活用できます。

5．エフェクトの作成方法

ARエフェクトを作成するために、必要なものはこちらの４つ。

①SparkAR

こちらから無料でダウンロードすることができます。

https://sparkar.facebook.com/ar-studio/download/

②Facebookアカウント

③Instagramアカウント

FacebookアカウントとInstagramアカウントを連携しておく必要があります。

④素材作成のためのツール（PhotoshopやIllustratorなど）

※④は、SparkAR内のサンプル素材やロイヤリティフリーの素材などがあれば、ツールを使わずとも作成できます。

5-1．素材の準備

まずは表示させる素材を準備します。素材には透過PNGを使用します。

今回はfacemeshを使用するので、SparkARのこちらのページからfacemesh用の素材をダウンロードします。

https://sparkar.facebook.com/ar-studio/learn/articles/people-tracking/face-reference-assets

ダウンロードした素材の中に下記のような画像がありますので、こちらを使って素材を作成します。

今回はスマホに転送し、Adobe Sketchを使用してお花とそばかすメイク風のイラストを作成しました。タップするとデザインが変わる仕様にしたいので黄色と白の2パターン作成します。

イラストが完成したら、facemesh素材を非表示にし、透過保存して素材の完成！

5-2．Facetrackerで顔に素材を表示させる

SparkARをインストールして開いたら「New project」をクリックします。編集画面が表示されたら左の列のカメラマークからプレビュー画面のモデルを選択することができ、様々な肌のトーンに合うように調整ができます。

またPC搭載のカメラに切り替えることもできます。

①素材をインポートする

まずは、左下のAssetパネルの「＋Add Assets」をクリック。「Import from Computer」から先ほど作成した素材をすべてインポートします。

②Facetrackerをインサート

最初に黄色バージョンのエフェクトを作成します。

左上のSceneパネルの「＋Add object」をクリック、「Facetracker」をインサートします。

このFacetrackerが顔を認識し、素材が追従するようになります。

③Facemeshをインサート

Facetrackerをインサートしたら、さらに「＋Add object」をクリック、「faceMesh」をインサートします。

faceMeshは素材を表示させるパネルのようなものです。

素材が顔に追従するようにFacetrackerの配下にfaceMeshを設置します。

④Materialsを作成する

Facemeshを選択しながら、右側のインスペクタの「Materials」から「＋」をクリックし「Create new materials」を選択するとAssetパネルにマテリアルが追加されます。このMaterialとFacemeshは対になっていますので、わかりやすいように名前を変更しておくことをお勧めします。今回は「Face_Mat_Yellow」にしました。

次に、Materialを選択したまま右側のインスペクタの「texture」から、アセットパネルの黄色バージョンの素材を選択すると、顔にイラストが表示されます。「Shader Type」で7種類の質感を選択することができ、今回は「Face Paint」を選択しました。「opacity」でフィルターの濃さを調整できます。

⑤おまけ：肌をきれいにする

「Facetracker」の下に新しく「Facemesh」をインサートします。

同じ方法で「Material」を作成したら今回はファイルを選択するのではなく「Shader Type」から「Retouching」を選択すると肌を滑らか見せることができます。「Skin smoothing」でパーセンテージを調整してください。

黄色バージョンのエフェクトはこれで完了。

タップしてエフェクトを切り替える機能を設定しない場合はここで完成です。

5-3．Patch editorで画面をタップするとエフェクトが切り替わるようにする

次は、Patch editorを使用して黄色バージョンと白バージョンの切り替えを行っていきます。黄色バージョンと同じFacetracker配下に、③～④と同じ手順で白バージョンも作成し2パターンのエフェクトを作成します。この時点では2つ重なって表示されています。

①Patch editorを表示させる

メニューバーの「View」から「Show/Hide Patch editor」を選択すると、メイン画面の下にPatch editorが表示されます。

②Patch editorを編集する

次にPatch editorの中で右クリックして「screen tap」を追加します。

出てきたボックスの右上「tap」とある矢印をドラッグ&ドロップすると、先ほどと同じ画面が出るので次は「counter」を追加します。また同じように「counter」の矢印をドラッグ＆ドロップして「equals Exactly」を2つ追加します。

「screen tap」＞「counter」＞「equals Exactly」の順番です。

ここまで来たら、SceneパネルからFacemeshを選択し右側の「Visble」の左の矢印をクリックします。そうするとパッチエディターに表示されるので「equals Exactly」からの矢印でつなぎます。

「Counter」の中の「Maximum Count」に「２」と入力します。ここは、パターンの最大値を入力します。「equals Exactly」の下の枠にはそれぞれ「０」「１」と入力します。０は最初に表示されるエフェクト、１は1回タップすることで切り替わる2つ目のエフェクトです。

これでエフェクトの切り替えの設定の完了です。

プレビューの右上のメニューから「Simulate touch」にカーソルを切り替えることで、プレビュー上で切り替えが試せます。

5-4．テストしてデモ動画を撮影する

エフェクトが完成したら、実機でテストを行います。

メニューバーの「test on device」からInstagramの「Send」を選択しInstagramアプリへエフェクトを送ります。

この時に後の申請で必要となるデモ動画を撮影して保存しておきます

5-5．申請して完成

エフェクトが完成したら、SparkARの管理画面「SparkAR Hub」

（https://www.facebook.com/sparkarhub/publish/effect/）でエフェクトの申請をします。

タイトル、デモ動画、キャプチャ、アイコン、紹介文など必要事項を入力します。

（エフェクトの紹介文のみ、英語で入力する必要があります。）

Publishすると、審査中ステータスになり承認がおりたらアプリで使用が可能となります。

承認までの期間はバラバラですが、公式では10営業日程度となっています。エフェクトの公開日と、公開終了日を選択することも可能です。

エフェクトの公開後はSparkAR Hubでインサイトを確認することもできます。

6．まとめ

nstagramのARエフェクト・フィルターについてそのメリットや作り方も併せてご紹介してきましたが、いかがだったでしょうか。

InstagramでARエフェクト・フィルターを活用することで

  • 遊べる
  • 試着できる
  • 話題やファンを作れる

といったメリットを享受することができます。

AR技術を様々な分野で活用する市場は、今後も延びていくことが予想されています。

ぜひ本記事を参考に、様々なシーンでのInstagram運用に役立てていただければ幸いです。

⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？