商品表現力を格段にアップ!「OPEbuilder」
|
 |
|
|
| 1.オペビルダーをインストールします。 |
|
体験版もあります。ぜひお試し下さい。
【ダウンロード先アドレス】
http://www.u-sys.net/opebuilder/down.html
|
| 2.コンテンツの作り方 |
| 2-1.撮影します。 |

画像をクリックすると動画が再生されます。
撮影した12枚の画像
|
コンテンツを作りたい商品をお手持ちのデジタルカメラで撮影します。
【推奨枚数】
12枚ぐらいがデータ容量、クオリティ的に最適な目安です。
それでは12枚の画像を撮影します。
360度÷12枚=30度
約30度くらいづつ水平に回転させて撮影をします。
【コンテンツをきれいに作るコツ】
・三脚を使用して、背景が動かないようにしましょう。
・背景に白い紙を使用すると商品が見やすくなります。
・回転台があるときれいに仕上がります。
【参考】
デジタルカメラで写真を撮影する時には、明るさやフォーカスなどを
お客様にて調整して頂く必要がございますが、写真のサイズ(解像度)については
特に指定する必要はございません。
OPEbuilderが自動的に画像サイズ(解像度)計算を行い、最適なコンテンツサイズにて処理致します。
|
| 2-2.撮影した画像をパソコンに取り込む |
|
撮影した画像ファイルをパソコンに移動させます。
※お使いのデジカメやパソコンによって取込方法が異なります。
|
2-3.オペビルダーに撮影した画像を取り込みます。
|
|
アプリケーションの使い方を動画でチェック!
(2-3から2-7までを動画でチェックできます。)

|
ダブルクリックします。
↓
↓
|
2-3-1.オペビルダーを起動します。
2-3-2.画像を取り込みます。
1.アイテム追加のボタン をクリックします。
2.プロジェクトに追加する画像ファイルを選択するウィンドウが開きます。
先ほど撮影した画像を保存したフォルダを指定して下さい。
3.先ほど撮影した画像ファイルを全て選択します。
4.開くをクリックします。
画像が取り込まれます。
|
| 2-4.トリミングエリアの調整します。 |

|
コンテンツで表示させたい部分をトリミングエリアで囲みます。
|
| 2-5.簡易プレビューで確認します。 |
|
右上の簡易プレビューを実行するボタン をクリックすると、コンテンツが自動再生されます。
簡易プレビューできちんと商品が表示されているか確認します。
(停止したいときは、再度簡易プレビューを実行するボタン をクリックします。)
【注意!】
右上の数字は、あくまでプレビュー時のみ使用するものです。
最終的に作成されるコンテンツの速度設定ではありません。
(最終的に作成されるコンテンツの速度は固定です)
|
| 2-6.コンテンツの書き出しを行います。 |

↓
↓
|
2-6-1.テンプレートデザインの選択
実際にページに載せる際のテンプレートデザインを選択します。
1.PC用テンプレートデザインデータ書き出し用のボタン をクリックします。
2.テンプレートデザインの選択ウィンドウが開きます。
お好みのデザイン(枠の色・コンテンツのサイズ)をお選び下さい。
コンテンツのサイズの種類は下記の通りです。
[回転] 7種類 | [静止画]
6種類 |
| 回転250x250 | 静止画250x250 |
回転250x250 (自動再生版) | 静止画300x400 |
| 回転300x400 | 静止画400x300 |
| 回転400x300 | 静止画450x600 |
| 回転450x600 | 静止画500x375 |
| 回転500x375 | 静止画600x450 |
| 回転600x450 | - |
他にもお客様独自のテンプレートデザインも弊社にて承っております(有料)
お気軽にお問い合わせ下さい。
3.デザインを選択後、このデザインで作成をクリックします。
2-6-2.保存先の選択
1.コンテンツの保存先を選択します。
2.OKをクリックします。
2-6-3.データファイル作成設定
作成するデータファイルの幅サイズ(解像度)を入力します。
100〜2500まで入力が可能です。
【推奨幅サイズ(解像度)】
800程度がデータ容量、クオリティ的に最適な目安です。
データファイルの幅サイズ(解像度)について。
|
| 2-7.コンテンツデータの完成です。 |
|
指定した保存先に
・opedata.swf
・opezoom.html
・opezoom.js
・opezoom.swf
以上、4つのファイルが自動生成されます。
※ファイルのアイコンはパソコンにインストールされているソフトによって変化します。
【注意!】
これら4つのファイルで一つのコンテンツを構成しています。
ファイルを移動する際は、必ず4つセットで行って下さい。
|
3.既存のページにコンテンツを組み込みます。
コンテンツ組み込みの際の代表的な方法2種類をご紹介致します。
|
A.コンテンツを表示させたいhtmlファイル(例:panda.html)のあるフォルダに
コンテンツデータ(4つ)を入れる方法(こちらの方が簡単です)
|
↓
↓
↓
↓
↓
|
3-A-1.コンテンツデータ(4つ)をコンテンツを表示させたいhtmlファイル(panda.html)と同じフォルダに移動します。
3-A-2.自動生成された「opezoom.html」を開きます。
テキストエディタ(お使いのHP作成ソフトのソースコード表示、またはメモ帳など)で開きます。
3-A-3.コンテンツを表示させるためのタグをコピーします。
「opezoom.html」の
<!-- OpeZoomテンプレートエリア(開始) -->から
<!-- OpeZoomテンプレートエリア(終了) -->までコピーします。
3-A-4.コンテンツを表示させたいhtmlファイル(panda.html)を開きます。
3-A-5.コンテンツを表示させたい位置にペーストします。
3-A-6.コンテンツを表示させたいhtmlファイル(panda.html)を上書きします。
3-A-7.完成です。
|
B.コンテンツを表示させたいhtmlファイル(例:panda.html)があるフォルダ(例:html)の中に
コンテンツデータ(4つ)の入っているフォルダ(例:panda)を入れる方法
|
↓
↓
↓
↓
↓
「ペーストしたタグ内」

画像をクリックすると拡大します。
↓
「opezoom.js」

画像をクリックすると拡大します。
↓
|
3-B-1.コンテンツデータ(4つ)の入っているフォルダ(panda)をコンテンツを表示させたいhtmlファイルのフォルダ(html)に移動します。
3-B-2.自動生成された「opezoom.html」を開く。
テキストエディタ(お使いのHP作成ソフトのソースコード表示、またはメモ帳など)で開きます。
3-B-3.コンテンツを表示させるためのタグをコピーします。
「opezoom.html」の
<!-- OpeZoomテンプレートエリア(開始) -->から
<!-- OpeZoomテンプレートエリア(終了) -->までコピーします。
3-B-4.コンテンツを表示させたいhtmlファイル(panda.html)を開きます。
3-B-5.コンテンツを表示させたい位置にペーストします。
3-B-6.ペーストしたタグの中の
文字列 “opezoom.js”と“opedata.swf”
の前にコンテンツの入っているフォルダ名を追加します。
(各1カ所ずつ)
例)コンテンツの入っているフォルダ名が「panda」の場合、
opezoom.js → panda/opezoom.js
opedata.swf → panda/opedata.swf
にします。
3-B-7.修正が終わったら、上書きをします。
3-B-8.次に、自動生成された「opezoom.js」を開きます。
テキストエディタ(お使いのHP作成ソフトのソースコード表示、またはメモ帳など)で開きます。
3-B-9.文字列 “opezoom.swf”
の前に、コンテンツの入っているフォルダ名を追加する
(2カ所あります)
例)コンテンツの入っているフォルダ名が「panda」の場合、
opezoom.swf → panda/opezoom.swf
にします。
3-B-10.「opezoom.js」の修正が終わったら、上書きします。
3-B-11.完成です。
|
4.データをアップロードする。
修正したファイルとコンテンツのデータをお使いのFTPソフト等を使用してサーバーにアップロードします。
きちんと表示されるか確認してください。
|
|
OpeBuilder - Copyright (c) 2006-2008 UOZU SYSTEM All rights reserved.