フラワーバレンタイン WEB 制作用素材データ 収録内容につ...

フラワーバレンタイン WEB制作用素材データ 収録内容について

フラワーバレンタイン推進委員会

この度はフラワーバレンタイン 2014へご参加いただき誠にありがとうございます。 さて、ホームページの製作にお使いいただける素材データをご用意いたしましたので、使用に当たっての注意点をご確認のうえ、ご活用くださいますようよろしくお願い致します。

＜収録内容＞

１．バナーデータ 全７サイズを収録しております。データは GIF形式です。ご用途に合わせて、是非ご活用ください。

ポスターデータとリンクしたデザインのバナーは、貴社サイト内でのバレンタインページへの誘導や、フラワー

バレンタイン公式サイトへの窓口として活用いただけます。

フラワーバレンタイン公式サイトでは、著名人のインタビューコンテンツもあり、一般の方に「フラワーバレン

タインとは？」を知っていただくためのコンテンツが満載です。是非ご活用ください。

なお、バナーサイズが貴社サイトにマッチしない場合は、トリミング加工しての利用も可能といたしますので、

ご活用ください。

タイプ①

160×600／336×280／468×60

ポスターデザイン要素をそのまま活かしたバナーです。自社サイト内でのバレンタインコーナーへの誘導等にご活用ください。

▲160×600

▲336×280

▲468×60

タイプ②

250×250／120×600

バナー下部にスペースを設けたデザインをご用意いたしました。貴社ロゴやキャッチフレーズテキスト等配置いただき広くご活用いただけます。アフィリエイトプログラム等の広告にご利用いただくことも可能です。

▲250×250

▲120×600

タイプ③

640×200／320×50

スマートフォンサイトでの利用にオススメのサイズのバナーです。 オリジナルアプリ「花贈り navi」の紹介を掲載いたしまた。

▲640×200

▲320×50

２．ポスターデータ ２０１４年度版ポスターの主要素材を、パーツ別にご提供いたします。データは EPS/PSD/GIF/PNGの４形式をご

用意いたしました。是非、貴社サイト内にて「フラワーバレンタイン」販売コーナー設置等、ご活用ください。なお、参考としてポスター全体イメージも収録していますのであわせてご活用ください。

＜収録内容＞

（全 18種類×４形式）

フラワーバレンタインのポスターは全国の花店店頭でも展開され、消費者への刷り込み効果の高いビジュアルイメージです。EC各社様の取り組みにより、実店舗と併せてインターネット上での拡散を図ることによりフラワーバレンタインキャンペーンの更なる認知拡大が推進されるものと考えております。

３．ブログパーツ設置案内 ※本パーツは 2013年 12月 2日～一般公開でご利用ください。

（コンテンツ制作は事前にご準備いただくことが可能です。）

ポスターデータをベースに、ユーザーに楽しみながらフラワーバレンタインを知っていただく「ブログパーツ」

を配布しております。本パーツは、「フラワーバレンタインとは」「グリーティングカード配信」から構成されてお

り、グリーティングカードは下記 2種を実装しております。

① 男性から女性へ：メッセージ配信

② 女性から男性へ：フラワーギフトおねだりカード配信（貴社商品へのリンクを埋め込むことが可能です。）

４．動画利用に関するご案内 フラワーバレンタイン推進委員会制作の動画 2種を、貴社販促でもご利用いただけます。

動画は「youtube」上にアップされておりますので、貴社サイトからのリンク、もしくは埋め込み掲載が可能です。

詳細は収録書面にてご確認ください。

＜フラワーバレンタイン WEB制作用素材データ 利用に当たっての注意点＞

それぞれの画像にはカラープロファイルを埋め込んでおりません。データを開く際にはカラープロ

ファイルを設定しないでください。カラープロファイルの設定によって、各パーツの色味が相違す

る可能性がありますのでご注意下さい。

使用に当たっては、ホームページ製作用のデータとしてのみお使いください。印刷物等への使用は

お控えください。

本データは参加者の協賛金を元に製作されています。第 3者への配布はお控えください。

本データの提供は、個別参加者向けのデータとなります。ネットワーク系組織（JFTD、イーフロー

ラ）を通じてご参加いただいている方で、本データをご利用になられたい場合は、別途個別参加（１

口１万円）によりご参加ください。

フラワーバレンタインブログパーツの設置方法①

<script type="text/javascript" src="http://www.flower-valentine.com/blogparts2014/js/script.js"></script>

【設置タグ】

①ブログパーツの設置場所

ウェブサイト内の任意の場所にブログパーツ用の表示スペース（160×300px）を割り当ててください。

②ブログパーツの設置

割り当てたスペースのHTMLソース上の位置に以下の設置タグをそのまま記述してください。

160px

300px

＊「おねだり商品」はフリー入力となります。→「おねだり商品」のカスタマイズ表示は次ページを参照

<script type="text/javascript" src="https://www.flower-valentine.com/blogparts2014/js/script.js"></script>

＊ブログパーツを設置するページがSSL（https）に対応したページの場合は以下の設置タグをご利用ください。

フラワーバレンタインブログパーツの設置方法②

<script type="text/javascript" src="http://www.flower-valentine.com/blogparts2014/js/script.js?i1=http://www.example.com/images/form_item0.jpg&u1=http://item.rakuten.co.jp/floreal/bq_01_b/&t1=【フロレアル】 ブーケロン Aタイプ（ピンク）&i2=http://www.example.com/images/form_item1.jpg&u2=http://item.rakuten.co.jp/floreal/ba_01_c/&t2=【フロレ

アル】ベーシックアレンジメントAタイプ（グリーン＆白系）&i3=http://www.example.com/images/form_item2.jpg&u3=http://item.rakuten.co.jp/floreal/1dozen2/&t3=ワンダズンローズ 12本のバラの花束 「クレイジートゥ」&i4=http://

www.example.com/images/form_item0.jpg&u4=http://item.rakuten.co.jp/floreal/bq_01_b/&t4=【フロレアル】 ブーケロン Aタイプ（ピンク）&i5=http://www.example.com/images/form_item1.jpg&u5=http://item.rakuten.co.jp/floreal/ba_01_c/&t5=【フロレアル】ベーシックアレンジメントAタイプ（グリーン＆白系）"></script>

【設置タグ（おねだり商品の記述例）】

③おねだり商品の表示

設置タグ内におねだり商品の情報を記述することで、ブログパーツ内に独自のおねだり商品を表示することができます。

＊「script.js」に続けておねだり商品のサムネイル画像、リンク先URL、商品名を記述してください。　　　（i：サムネイル画像のURL　　u：リンク先URL　　t：商品名）　＊サムネイル画像のサイズ：63×63pix

＊１つの商品につき「i,u,t」のセットで記述してください。（i,u,tの順番で記述してください。）

＊複数商品の場合は「i1,u1,t1」,「i2,u2,t2」,「i3,u3,t3」のように連番で最大5個まで記述できます。

＊各パラメータは書き出しのみ「?」、その後は「&」を使用して、スペース無しで続けて記述してください。

＊商品名の中に半角の「&」がある場合は全角の「＆」に変換をお願いします。

フラワーバレンタインブログパーツの設置方法③

【おねだり商品の画像】

入力フォームやグリーティングカード内のおねだり商品の画像は、以下のルールに基づいて表示されます。

●ファイル形式：jpg  ,  gif  ,  png

●ファイル容量制限：無し

●表示方法

　・入力フォーム：設定された画像の左上から63×63pxを表示　　　　　　　　（拡大/縮小は無し）

　・グリーティングカード：設定された画像の横幅が63pxになるように拡大/縮小し、　　　　　　　　　　　　　縦幅は同じ割合で拡大/縮小して表示

フラワーバレンタインブログパーツの設置方法④

・エンコード前 【フロレアル】 ブーケロン Aタイプ（ピンク）

●URLエンコードの例

【テキストが文字化けする場合】

サーバーの文字コードの設定よっては、ブログパーツ内の「おねだり商品」の商品名の日本語テキストなどが文字化けすることがあります。

その際は「おねだり商品」の商品名のテキストを「UTF-8」の文字コードにURLエンコードして記述するようにしてください。

・エンコード後 %e3%80%90%e3%83%95%e3%83%ad%e3%83%ac%e3%82%a2%e3%83%ab%e3%80%91%20%e3%83%96%e3%83%bc%e3%82%b1%e3%83%ad%e3%83%b3%20A%e3%82%bf%e3%82%a4%e3%83%97%ef%bc%88%e3%83%94%e3%83%b3%e3%82%af%ef%bc%89

●URLエンコードの方法

h"p://www.tagindex.com/tool/url.html

以下のようなウェブサイトにURLエンコードのフォームがございますので、変換したい文字列を入力し、文字コードを「UTF-8」に指定し、エンコードしてください。

トラブルシューティング

●URLエンコードの確認

ブログパーツが正しく表示されない場合は以下の点をご確認ください。

　フラワーバレンタイン推進委員会　事務局　東京都中央区東日本橋3-6-17山一ビル4F（財団法人日本花普及センター内）　TEL：03-3664-8739　FAX：03-3664-8743　  

　mail：jfpc@jfpc.or.jp

●キャッシュのクリア

ブラウザのキャッシュ機能により最新のファイルを受け取っていない可能性があります。キャッシュ（一時ファイル）をクリアしてから再度ご確認ください。→キャッシュのクリアの方法は以下のようなサイトをご参照ください。　h"p://nanapi.jp/40706/

●設置タグの確認

●ドメインの確認

設置タグが正しく記述されているかご確認ください。→文字や記号の間違い、全角半角の区別、余分なスペースや改行の有無など

表示しようとしているページのドメインが、事前に事務局側で設定しているドメインと同一かご確認ください。

おねだり商品に日本語を使用している場合は、正しくURLエンコードされているかご確認ください。特にエンコードの際に指定する文字コードが「UTF-8」になっているかどうかご確認ください。

これらの点をご確認いただいても問題が解消されない場合は、大変お手数ですが事務局までご連絡ください。

フラワーバレンタイン推進委員会制作の動画 2 種を、貴社販促でもご利用いた

だけます。動画は「youtube」上にアップされておりますので、貴社サイトから

のリンク、もしくは埋め込み掲載が可能です。

① オリジナルショートムービー ロングバージョン（4分 51秒）

http://youtu.be/Q5KxD3KH9VI

② オリジナルショートムービー ショートバージョン（1分 1秒）

http://youtu.be/LEHbH6pDk-I

③ フラワーバレンタイン×LOVE WORDSフラッシュモブ（5分 2秒）

http://youtu.be/hddy8jVZni8

※youtube動画の貴社サイトへの埋め込み方法については、

google社提供 youtubeのヘルプページをご参考ください。

https://support.google.com/youtube/answer/171780?hl=ja

【動画埋め込み事例】

動画活用による販促効果が注目されています。

本ムービーは「思わず花を贈ってみたくなる」、

観た人をそんな気持ちにさせてくれる作品です。

BGMはヴァイオリニスト竜馬氏による

フラワーバレンタインオリジナルテーマソング。

動画利用に関するご案内

株式会社日比谷花壇

オンラインショップ

昨年度の各社の取り組みで、ネットショップ向けツールを活用した事例をご紹介いたし

ます。是非ご参考にご覧いただき、貴社サイトコンテンツでご活用ください。

※デザインは昨年度のものとなります。

【バナー活用事例】

フラワーバレンタイン公式 WEB サイトへの誘導の他、サイト内、バレンタインコンテンツ

への窓口として活用いただけます。

バナー利用事例

株式会社パーク・コーポレーション

青山フラワーマーケット ブランドサイト

株式会社小田急ランドフローラ

小田急フローリスト

オンラインショップ

株式会社日比谷花壇

ブランドサイト

【ブログパーツ設置事例】

パーツ自体に動きがありますので、静的ページにもアイキャッチが生まれ、ユーザーへわ

くわく感を与えることができます。

ブログパーツ利用事例

ユーザーがクリックすると、「フラワー

バレンタインとは？」のガイダンスが

はじまります。

自社サイトで、コンテンツを用意する

必要なく、ユーザーへの啓もうが図れ

ます。