AR機能付き広告のコンテンツ使い方と作成方法

AR広告1か月無料

マーカー画像

について

AR機能付き広告のアプリで読み込むための目印となるマーカーはアプリを読み込むためのキーとなり、動画の表示位置にもなります。

動画の場合は、動画のサイズ比率に合わせたマーカーの作成をオススメしております。

画像サイズは480px×480pxから1920px×1920pxで作成下さい。(実際にマーカーを印刷した際は3cm以上、一辺4cm~10cm程度がお勧めです。)

ここがARマーカーイメージ
RGBカラーで作成してデータ容量は20Mまで
ARマーカーイメージ
.png
PNG形式の画像ファイルに付く拡張子のことである。透明色が使えるので透過画像を作る場合はコチラで保存しましょう。
.jpg
フルカラー(約1670万色)(24 ビットカラー)を扱うことができます。透明色は指定できません。

マーカーはチラシやパンフレット、カタログはもちろん、封筒、はがきやカレンダーなど様々な印刷物で登録することができます。

背景のあるチラシにマーカーを配置する場合
ARマーカーの作り方

ロゴマークなどの後ろに複雑な背景がある場合は単体ではなく、背景も含めた画像を作成して下さい。デザインの一部がマーカーの場合、デザインの一部をそのままマーカーとして切り抜いて下さい。マーカーは基本、色の濃淡で判別しているため、下記の様な画像では読み取りにくくなってしまいます。

認識しやすいマーカー
色の境界わかりやすいマーカー
色の境界がはっきりしている

色の濃淡で特長を捉えているため、濃淡が複数箇所にはっきちろある場合は認識しやすくなります。

色の境界わかりやすいマーカー
中央に特徴がある

画面中央から特徴点を捉えるため、中央に特徴点が多いと認識しやすくなります。

色の境界わかりやすいマーカー
枠で囲まれている

外枠があるとマーカーの境目を認識しやすくなります。また、ユーザーの行動として、外枠がある方が枠内にマーカーを収めようとするため、余計な部分まで画面内に収めなくなり、認識しやすくなります。

マーカーに不向きな画像

以下のような画像が、認識しづらいマーカーとなります。

※認識しても特徴点を正確に捉えられず、コンテンツが揺れて表示される事がございます。

グラデーションがかかっている
グラデーション
明暗がはっきりしない
明暗がはっきりしない
一定のパターンを繰り返す
一定のパターンを繰り返す
中央が空白
中央が空白
画質が粗い
画質が粗い
誌面上のマーカーが小さい
誌面上のマーカーが小さい
余白が広い
余白が広い
文字のみ
文字のみ

動画機能

の使い方

COCOAR2のアプリを起動してマーカーにかざすと動画が自動再生されます。トラッキング方式でスマホのかざす角度に合わせて動画の見える角度や表示サイズも変化する事が出来るので、動画がまるで飛び出しているように閲覧することができます。浮き上がったように見える動画はお客様に感動を届けることが出来ます。

右画像で動画サンプルが見れる

COCOAR2を右画像にかざすと動画サンプルをみることができます。

AR動画マーカー
動画
を作ってみよう!!

全世帯数の70% 以上の人がスマホを持つ時代。

つまり、誰もが簡単に動画を見て、動画を撮る時代となり、動画は情報発信の手段として今後も更に高い影響力を持つでしょう。こんな時代だからこそ、動画をご自身で作って楽しんでみてはいかがでしょうか。

※1(出典)総務省「通信利用動向調査」2015年

動画イメージ
動画ファイルの推奨値

COCOARでは以下を動画の推奨値としてご案内しております。また、こちらの推奨値は、多くのスマートデバイスに対応可能な値となっております。動画容量に関しては3G回線のユーザーも考慮しますと、10~15MB程度が理想的かと思います。

※下記、推奨値を満たしていない場合、正しく再生できない場合がございます。

※COCOAR2で登録できる動画の容量を50MBまでと制限を設けさせていただいております。

推奨条件
補足
ファイル形式
.mp4
動画規格の1つ(拡張子)
コーデック
H.264/MPEG-4 AVC
動画圧縮規格の1つ
プロファイル
ベースラインプロファイル(Baseline Profile)
圧縮技術・表現方法などの定義
レベル
Level 3.1/@L3.1
映像の品質を決めるパラメータ
フレームレート
15~30fps
1秒間に表示される描画数・コマ数
ビットレート
500~1500Kbps
1秒間に送信されるデータ容量
容量
10~15MB(登録可能な容量は50MBまで)
動画のサイズ
STEP1
スマホで動画を撮ってみよう。

最近のスマホは手ブレ機能つき、高解像度、色んな機能満載です。まずは動画を撮影してみて下さい。

<動画の形式>
iPhoneのお客様
.mov
Apple社の動画再生ファイル形式です。iPhoneで再生可能です。
Androidのお客様
.mp4
色んなOS・ブラウザ・スマホで対応している主流の動画形式となります。弊社のAR動画の入稿形式はこのmp4形式のみのご対応となります。
.avi
Microsoft(Windows)での標準動画形式です。古くから使われている形式です。

movやaviの形式をmp4形式に変換する場合、アプリや編集するソフトが多数有りますので、編集環境と入稿状況に合わせて変換ソフトをご利用下さい。

動画撮影
STEP2
動画を編集してみよう。

動画編集ソフトは無料を含め有料のソフトが多数あります。まずはフリーソフトで動画編集を体験頂きそれからお客様の目指される動画のクオリティに合わせて有料のソフトをお使い頂く事をお薦めいたします。まずは各OSで展開されている無料の純正動画ソフトを御案内いたします。

WindowsOSをお使いのお客様はマイクロソフトがフリーで配布しているWindowsムービーメーカー動画編集ソフトはいかがでしょうか。
MacOSをお使いのお客様はアップルストアのアプリiMovieはいかがでしょうか。
動画編集イメージ
本格的な動画、自分で作成するまでは・・・と動画作成をアウトソーシングしたい方

動画制作に特化したマッチングサービスサイトをご紹介いたします。適切な価格とそれにあった価値をご依頼者であるお客様と動画を作制作者を直接結ぶサイトです。無料相談や実績がすぐにご確認いただけます。

動画編集イメージ
STEP3
動画をコンテンツデータとして登録する

できた動画をARのコンテンツデータとして登録していただくとマーカーを読み取った後、動画を見ることが出来ます。

※AR機能付き広告1ヵ月無料プランをご利用の場合は1マーカーに付き1コンテンツになります。

1ヵ月無料プランをご利用で複数コンテンツの登録をご希望の場合はサポートセンターへご相談下さい。

着せ替え機能

の使い方

COCOAR2のアプリを起動してマーカーにかざすと画像選択し、カメラ機能で写真や動画を撮影することが出来ます。この機能を利用したのが「着せ替え機能」です。

透過画像を使うことで実際の人と、画像とを融合させます。画像を人物にかざし、服やぼうし、アクセサリー、鞄などの試着イメージを撮影することが出来ます。アパレル関係の店舗または通販サイト、貸衣装、写真館などに最適です。着せ替え機能でシミレーションすることで実際の商品の購買意欲刺激します。

右画像で着せ替え画像サンプルが見れる

COCOAR2を右画像にかざすと着せ替えサンプル画像をみることができます。

AR着せ替えマーカー
着せ替え画像
の作り方(Photoshop版)
STEP1
着せ替えにしたい画像を選ぶ

試着画像に向いているのは実際に試着した人物またはトルソーに着せた服の画像です。平置き服でも着せ替えすることはできますが、リアルな雰囲気は出ません。また、横を向いている画像も合わせたときに試着しにくい画像になってしまうので注意が必要です。

<画像の形式>
.png

●画像の容量は1枚1MBまでとなっており、10MBを超えるとエラーになります。画像の容量を下げていただくことで登録が可能となります。

※画像サイズを小さくする、圧縮ソフトで圧縮するなどで容量を軽くしてください。

STEP2
画像をPhotoshopで開き不要な部分を削除する

試着時に反映させたい部分を残してすべて削除します。削除部分の選択方法はいろいろありますが、一般的な方法をご紹介します。

画像編集はそのまま保存すると編集前にもどせない場合があります。画像編集は編集前のデータとは別に別名保存して作業することをオススメします。

Photoshopで透過画像を作る方法

【1】背景レイヤーのロックを解除して透明にする

背景レイヤーはロックされていて、そのままでは背景を透明にはできません。背景レイヤーのロックを解除して通常のレイヤーに変換することで、背景レイヤーに透明を含めることができるようになります。

  1. ウィンドウ/レイヤー選択して、レイヤーパネルを開きます。
  2. 背景レイヤーの錠のアイコンをクリックします。
  3. レイヤー名が「レイヤー 0」に変更され、レイヤーのロックが解除されます。
背景レイヤーのロックを解除
【2−A】消しゴムツールを使用する
  1. ツールパネルから「消しゴムツール」を選択します。
  2. 画像をドラッグします。ドラッグした部分が透明になります。
  3. オプションパネルで消しゴムのサイズやモードを変更し、調整します。
  4. 間違って消してしまった部分を復元するには、ヒストリー消しゴムを使用します。

Alt キー(Windows)/Option キー(Mac OS)を押しながらドラッグすることで、消した部分が復元されます。

注意:
ヒストリー消しゴムは、画像のカラーモードやプロファイルの変換後、およびカンバスサイズや画像解像度を変更した後は使用できません
消しゴムツール使用
【2−B】マジック消しゴムツールを使用する

マジック消しゴムツールを使用することで、近似色の領域を1クリックで削除することができます。

  1. ツールパネルから「マジック消しゴムツール」を選択します。
  2. 透明にする部分をクリックすると、クリックした色の近似色が消去されます。
マジック消しゴムツール使用
  1. 画像内で、連続しない色の範囲の近似色を消去するには、オプションパネルの「隣接」のチェックをはずしてからクリックします。
隣接チェック
【3】透明な背景を維持して画像をPNG形式で保存する(容量10MG以内にする)
【3-A】「保存」、または「別名で保存」で保存
  1. ファイルメニューから「保存」または「別名で保存」を選択します。
  2. 名前を付けて保存 ダイアログボックスで、「ファイルの種類」プルダウンリストから「PNG」を選択し、「保存」ボタンをクリックします。
  3. 「保存」ボタンをクリックし、保存する場所と名前を指定して「OK」をクリックします。
PNG選択
【3-B】「Web およびデバイス用に保存」または「Web 用に保存」から保存
  1. ファイル/書き出し/Web 用に保存(従来)を選択します。
  2. Web 用に保存 ダイアログボックス右上のファイル形式が「PNG」になっていること、「透明部分」にチェックが入っていることを確認します。
  3. 「保存」ボタンをクリックし、保存する場所と名前を指定して「OK」をクリックします。
書き出し
STEP3
着せ替えしたい服を中央に配置する

不要な部分を調整した画像をそのまま中央へ配置します。

偏った部分に撮影したいものがあるとそのまま撮影時にも偏ってしまうので撮影がしづらくなってしまいます。

適切な位置に調整しましょう。撮影時は画像を大きく調整出来ないので、小さく配置してしまうと撮影しにくくなってしまうので注意が必要です。

中心に配置
STEP4
透過画像をコンテンツデータとして登録する

できた透過画像をARのコンテンツデータとして登録していただくとマーカーを読み取った後、画像が表示され、試着することが出来ます。

※AR機能付き広告1ヵ月無料プランをご利用の場合は1マーカーに付き1コンテンツになります。

1ヵ月無料プランをご利用で複数コンテンツの登録をご希望の場合はサポートセンターへご相談下さい。

フォトフレーム機能

の使い方

COCOAR2のアプリを起動してマーカーにかざすと画像選択し、カメラ機能で写真や動画を撮影することが出来ます。この機能を利用したのが「フォトフレーム機能」です。フォトフレームデザイン画像を透過画像にすることで撮影する人物とフォトフレーム画像を一緒に撮影することができます。

キャラクターやロゴマークなどを利用してオリジナルフォトフレーム画像で撮影することが出来るので限定フレームや記念フレームなどキャンペーンやイベントを盛り上げることができます。また、SNSなどで広めやすいので認知度アップにも繋がります。

右画像でフォトフレームサンプルが見れる

COCOAR2を右画像にかざすとフォトフレームサンプル画像をみることができます。

ARフォトフレームマーカー
フォトフレーム画像
の作り方(Photoshop版)
STEP1
フォトフレーム画像を作成する

キャラクターやロゴなどを使用したフォトフレームをデザインして作成します。表示させたいキャラクターを表示させたい位置に配置します。キャラクターを中央に配置してしまうと、一緒に写真を撮る際に人物が隠れてしまいますので注意が必要です。

<画像の形式>
.png

●画像の容量は1枚10MBまでとなっており、10MBを超えるとエラーになります。画像の容量を下げていただくことで登録が可能となります。

※画像サイズを小さくする、圧縮ソフトで圧縮するなどで容量を軽くしてください。

●16:9のサイズの画像をご利用いただければ、ほぼ全画面での表示が可能にございます。COCOARアプリを再生させている端末のディスプレイサイズによっては、全画面に表示されず、背景が映る場合がございます。

※近年の携帯端末は16:9の画面サイズが主流となっております。

STEP3
透過画像を作り、画像を保存する
STEP4
透過画像をコンテンツデータとして登録する

できた透過画像をARのコンテンツデータとして登録していただくとマーカーを読み取った後、画像が表示され、画像を一緒に撮影することが出来ます。

※AR機能付き広告1ヵ月無料プランをご利用の場合は1マーカーに付き1コンテンツになります。

1ヵ月無料プランをご利用で複数コンテンツの登録をご希望の場合はサポートセンターへご相談下さい。

新規会員登録はこちらから
サポートセンター問い合わせ先
オススメ・新商品
AR機能付き広告
商売繁盛!販促Labo
商品メニュー
テンプレートダウンロード
ISO14001認定印刷工場
たいせつにしますプライバシー
取り扱いカード
VEGETABLE OIL INK
サポートセンター
ページトップへ