AR-コンテンツ作成

スマホを使って体感するデジタル販促アプリ、Web、AR
ARイメージ

マーカー画像

について

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

3D画像

の使い方

COCOAR2のアプリを起動してマーカーにかざすと3D画像が表示されます。

商品やキャラクターなどを3D画像でご用意いただき、画面をスワイプすることで画像のアングルを変更することができます。

画像と一緒に撮影を楽しむことが出来るので、家具などの配置イメージやキャラクターの認知度アップに繋がります。

下の画像でサンプルが見れる

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

AR3Dマーカー
3Dモデル
作成時の注意点

COCOARでは3Dモデルをコンテンツとして表示させることができます。下記の内容に注意して3Dモデルコンテンツを作成してご入稿下さい。

obj、mtl、テクスチャファイルのファイル名制限

iOS : 半角英数字と「~ @ _  - =」の5つの符号のみファイル名に利用いただけます。

Android : 半角英数字と「~ @ _  - =」の5つの符号のみファイル名に利用いただけます。

レンダリングエンジンのガイドライン
  • ①画面が小さいため細かなオブジェクトは細部までは表示できません。
  • ②ポリゴンの増加に比例して、モデルの表示時間がかかることを考慮しながら作業を行ってください。
  • ③座標系の中心にオブジェクトを置いてください。また、エクスポートする時にその情報を含めてください。
  • ④.objファイルをエクスポート可能な3DCGソフトウェアをお使いください。
  • ⑤できるだけ簡単なモデルと、小さなテクスチャを利用してオブジェクトを作成する必要があります。
objファイル作成時の注意
注意点
推奨条件
補足
ポリゴン数
5000
スマートフォンなどの画面で再生されるため細かなオブジェクトは細部までは表示できません
推奨ポリゴン数を超えた複雑なモデリングファイルはスマートフォンなどのスペックでは再生できない可能性があります。ポリゴン数の削減などを行って下さい。
ポリゴンの面
三角形面
ポリゴンメッシュに三角形以外の多角形を利用されている場合COCOAR2に登録できません。変換ツールなどで三角形面に変換して下さい。
テクスチャ座標と法線
両方設定する
どちらかが未設定の場合、オブジェクトの輪郭、テクスチャ、色が正常に表示されません。必ず両方設定するようにして下さい。
3Dモデルのサイズ
10MBまで
ZIPファイルに含まれる総容量です。
上限値より大きな3Dモデルをご利用の場合は、通信環境など、お客様のご利用環境により動作不具合が発生する可能性が高いです。簡単なバージョンを作成して下さい。
objファイルのサイズ
5MBまで
5MB以上の.objファイルをご利用の場合は、通信環境など、お客様のご利用環境により動作不具合が発生する可能性が高いです。簡単なバージョンを作成して下さい。
マルチテクスチャの利用
利用しない
マルチテクスチャの利用はできません。 一つのポリゴンに一つのテクスチャを貼り付けて下さい。
NURBSサーフェス
利用しない
NURBSサーフェスには対応していません。NURBSサーフェスを利用している場合は、3DCGソフトウェアでNURBSサーフェスをポリゴン サーフェスに変換して下さい。
mtlファイル作成時の注意
注意:
テリアルファイルの一部設定項目についてCOCOARの現在のバージョンではレンダリング出来ない可能性があります。下記項目をご確認の上、オブジェクトの作成を行って下さい。
レンダリング対応表 (COCOAR Ver4.0)
種別 要素 意味 iOS Android
mtlファイル Kd 拡散反射成分
Ks 鏡面反射成分
Ka 環境光反射成分
d アルファ値(透過率)
Tr 発光色 - -
Ni Shininess - -
illum 照明モデル(1で鏡面反射無効, 2で有効) - -
tf transmission color - -
ns 鏡面反射角度 - -
sharpness refl(反射テクスチャ)の
解像度パラメータ
- -
テクスチャファイル map_Kd 拡散反射テクスチャ
map_Ka 環境光反射テクスチャ - -
map_Ks 鏡面反射テクスチャ - -
map_Ns 鏡面反射角度テクスチャ - -
map_d 透過率テクスチャ - -
disp 物体表面粗さテクスチャ - -
bump 凸凹テクスチャ - -
refl 反射テクスチャ - -
decal マテリアル色とテクスチャ色の融合割合パラメータ - -
その他
注意点
推奨条件
補足
マテリアルパスの利用
利用しない。
マテリアルパスは利用できません。アップロードするフォルダの中にテクスチャファイルを含めて下さい。
テクスチャファイル作成時の注意
注意点
推奨条件
補足
テクスチャのサイズ
常に2の累乗にして下さい。
例:64x64、128x128、等。
サイズが2の累乗でない場合、意図しない表示になったり、アスペクト比がずれるなどエラーを引き起こす可能性があります。
画像フォーマット
.png、.jpg、.bmp の三種類
左記のファイルフォーマット以外 (例:tiff,gifなど) は利用できません。
推奨ファイルサイズ
5MBまで
5MB以上の場合、通信状況によってダウンロードに大幅に時間がかかる可能性が高くなります。また、10MB以上の場合は、アプリが強制終了する場合もございます。
画像サイズ
4096px x 4096px 以下
推奨サイズ以上のサイズは 登録できません。 高解像度のテクスチャからテストし、徐々に解像度を下げて詳細まで表示される最小サイズにして下さい。
その他の注意
  • ①3DCGソフトウェアで作成したファイル名と中身を手動で修正しないで下さい。
  • ②obj、mtl、テクスチャファイルは1セットです。異なる3Dコンテンツのファイルを混ぜないで下さい。
  • ③MacPCで通常のzip圧縮を行いますと、不要ファイルが作られてしまいます。「MacZip4Win」等のフリーソフトを使ってzip圧縮することで、不要ファイルの作成を防ぐことが可能です。
印刷通販JBFサポートセンター

ようこそ、ゲストさま

ID

パスワード

パスワードを忘れた方はこちら
新規会員登録 ここまでできる!サービス" 自動見積りフォーム

オススメ・新商品

JBFでよく売れている定番商品 チラシ・フライヤー印刷について詳細はこちら 印刷+ポスティングの詳細
デジタル販促AR

商品メニュー

テンプレートダウンロード

印刷通販JBF Instagram

印刷通販JBF YouTube

印刷通販JBF TikTok

たいせつにしますプライバシー

取り扱いカード

VEGETABLE OIL INK

サポートセンター

ページトップへ

ページTOPへ