キャンペーン告知アプリ 基本操作マニュアル

2022/２1

■このアプリでできることバナーにて期間限定のお得なキャンペーンやクーポンを訴求することで、購入促進を行うアプリです。
カートページ以外の全ページにバナーが掲載されます。

●アプリの特徴
・カウントダウン方式でのキャンペーンのポップアップ表示
・サイトイメージにあわせた色変更
・テキスト以外に画像での告知、クーポン番号の表示が可能

・掲載イメージ：PCサイト

・掲載イメージ：SPサイト

2操作方法3

【1ーA】ダッシュボード：キャンペーン

＜ログアウト＞
管理画面からログアウトします。
＜キャンペーン一覧＞
登録済みのキャンペーンを確認できます。
→ 詳細：5P＜キャンペーン追加＞
キャンペーンの新規追加を行います。
→ 詳細：6,7P

4

【1ーB】キャンペーン一覧＜キャンペーン追加＞
キャンペーンの新規追加を行います。
→ 詳細：6,7P＜ID＞
キャンペーンを登録した順に自動で生成されます。
＜開始日時＞
キャンペーン開始日時です。
この日時よりポップアップが表示されます。
＜終了日時＞
キャンペーン終了日時です。
この日時に向けてタイマーがカウントダウンします。
ポップアップはこの日時で掲載終了となります。
＜タイトル＞キャンペーンタイトル名です。
＜ステータス＞ ※キャンペーンの表示基準→11Pキャンペーンの現在のステータスが表示されます。
・「掲載」現在掲載期間内です。
・「非掲載」現在掲載期間外です。
＜掲載期間＞
・「表示中」現在表示中です。
・「掲載予定」現在表示中の次に表示予定です。
・「掲載期間内」掲載期間内で3番目以降の表示のものです。
・「終了済」掲載期間外で表示されていません。
※ アイコン
・「詳細」登録したキャンペーンの確認ができます。
・「編集」登録したキャンペーンの変更ができます。
・「削除」登録したキャンペーンの削除ができます。

5

【1ーC】キャンペーン追加①＜キャンペーン開始日時＞
キャンペーン開始日時を設定します。
＜キャンペーン終了日時＞
キャンペーン終了日時を設定します。
＜タイトル＞
半角・全角問わず、100字内で入力ください。
＜本文＞【任意】
半角・全角問わず、100字内で入力ください。
＜クーポンコード＞【任意】
別途登録したクーポンコードを入力ください。設定しなければ、表示されません。
※クーポンマニュアル
https://help.shop-pro.jp/hc/ja/articles/1500004128582-ショップクーポ
ン機能とは＜リンク先URL＞【任意】
リンク先のURLを入力ください。設定しなければ、表示されません。
＜画像URL＞【任意】
設定しなければ、表示されません。
画像はカラーミー管理画面内の「ショップ作成＞画像ファイル管理」に登録し、URL欄の画像パスを入力します。
※画像マニュアル
https://help.shop-pro.jp/hc/ja/articles/1500004173002
・推奨サイズ
横幅は350pxを推奨しており、登録いただいた画像は自動的に横幅350pxになるよう調整されます。
縦幅は制限がありません。

6

【1ーC】キャンペーン追加②②①＜ベースカラー＞【任意】「青枠」をクリックするとカラーパレットが表示されます。
①で希望に近い色をクリック後、②で濃淡をクリックしたものが、「キャンペーンバナー」の枠の色になります。
「オレンジ枠」に直接カラーコードを入力することもできます。
→ 詳細：10P※未指定時にはデフォルトで指定されるカラーコード(#4ab5f2) が表示されます。
＜表示位置＞「左下」「右下」「中央下」のいずれかに設定が可能です。
＜ステータス＞「掲載」「非掲載」を選択します。
※注意！「掲載」にしても設定の優先順位が低いと表示されません。
→ 詳細：12P＜タイマー機能＞「表示」「非表示」を選択します。

7

【1ーC】キャンペーン追加③＜閉じるボタンの種類＞「-」「×」を選択します。
「-」バナー右上の”-”をクリックするとバナーが縮小しますが削除されません。”-”を再度クリックするとバナーが元のサイズに戻ります。
「×」バナー右上の”×”をクリックすると完全に削除され再度表示されません。
＜プレビュー＞「表示位置」で設定した箇所に、プレビュー表示されます。
終了する際は、”グレーの領域をクリック”すると終了します。
＜保存＞
追加・修正した内容を保存します。
＜一覧へ戻る＞
登録した、キャンペーン一覧に戻ります。

8

【1ーD】キャンペーンバナー表示内容①②＜１：キャンペーン終了日時＞「キャンペーン終了日時」までの、カウントダウンが表示されます。
「タイマー機能」を ”非表示”にすると表示されません。
＜２：画像＞「画像」が表示されます。設定しなければ、表示されません。
＜３：タイトル＞「タイトル」が表示されます。

③④⑤⑥＜４：本文＞「本文」が表示されます。設定しなければ、表示されません。
＜５：リンク先URL＞「リンク先URL」が設定された「詳しくはこちら」ボタンが表示されます。
設定しなければ、表示されません。
＜６：クーポンコード＞「クーポンコード」が表示されます。設定しなければ、表示されません。
クリックすると、「クーポンコード」がコピーされます。
＜ベースカラー＞
左記サンプル画像のブルー個所部分を変更できます。
カラーコードを設定しない際は、グレー表示になります。

9カラーコードについて10【2ーA】カラーコードについて
カラーコードとは、Webページ上で表現される色を指定するための表記のことです。
カラーコードはシャープ（#）からはじまる6桁の16進数で表記されます。
例）白：「#FFFFFF」
黒：「#000000」
下記参考サイトはベースのカラーサンプルとカラーコードが一緒に記載されておりますのでご希望に近い色のカラーコードをコピーして御利用されることをおすすめ致します。

■参考サイト
・原色大辞典https://www.colordic.org/

参考：「＃」から始まる数字とアルファベットの部分が、カラーコードです11よくある質問12

【3ーA】よくあるご質問
Q：設定したキャンペーンが表示されません。
A:「キャンペーン開始日時」から「キャンペーン終了日時」まで掲載されます。
その期間以外はステータスが「掲載」でも表示されません。
Q：テンプレートは1種類ですか？
A:現状は1種類となります。表示に関するカスタマイズ設定することはできません。
Q：削除したキャンペーンを戻せますか？
A:削除したキャンペーンを元に戻すことはできません。
Q：クーポンを複数、またはランダム掲載できますか？
A:クーポンを複数同時＆ランダムに表示することはできません。
Q：カウントダウン以外の表示ができますか？
A:本アプリではカウントダウン形式のみの表示となります。
Q：クーポンを複数「掲載」設定した際に、表示する基準は何でしょうか？
A:複数設定した際は下記の順に優先的に掲載されます。
① 終了日時が近いもの② ①が同じ場合、開始日時が早いもの③ ①②が同じ場合、IDが若いもの
Q：カラーコードとは何でしょうか？
A:コンピュータにおいて、色を表示するために表記した文字列のことです。
カラーコードは下記サイトより選択ください。
→ 詳細10P■参考サイト：WEB色見本 原色大辞典
https://www.colordic.org/

13

【3ーB】よくあるご質問
Q：アプリの連携が失敗した際の対応方法
A:次のようなケースの時はアプリがカラーミーショップと連携ができていない事が疑われます。
下記の手順でアプリの連携をお願いします。

ケース1： インストール後の「同意項目（OAuth）」の認証を途中で離脱した時。
ケース2：キャンペーンを登録したが、ショップサイトにキャンペーンアプリの内容が反映されない時。
対応方法①インストール後に送られてきたメールより本登録を行います。
② 本登録後、管理画面にログインします。
③ 管理画面の左のメニューの「設定」ボタンをクリックします。

④ 「カラーミーショップと連携」ボタンをクリックします。
⑤ 再度「同意項目（OAuth）」をチェックし認可を行う。

⑥ 認可後、連携済み画面に遷移することを確認。
（すでに「同意項目（OAuth）」認可済みの場合は⑤を飛ばし、④→⑥に遷移します。）
14

【3ーC】よくあるご質問
Q：設定したキャンペーンが他の要素の後ろに隠れてしまう時の対応方法
A:サイト内で他の要素にz-indexが指定されている事が疑われます。
下記の手順でキャンペーンのz-indexの値を適切な値に調整するようお願いいたします。
対応方法①ショップ管理画面（https://admin.shop-pro.jp/）にログインします。
② 管理画面上部のメニューの「ショップ作成」より「デザイン」をクリックします。
③ 「利用中のテンプレート」より「テンプレート編集」をクリックします。
④ 「共通」ページの「HTML・CSSを編集」をクリックします。
⑤「CSS編集」内のコードの最上部に下記のコードをコピー&ペーストします。
.plugin-campain-wrapper {z-index: 20000;}※ z-indexの値はサイト内の各要素に指定されているz-indexの値を確認し表示の順番が正しくなるよう数値を調整してください。
⑥ 「プレビュー」ボタンをクリックし、キャンペーンの表示に問題がないか確認します。
⑦ 問題がなければ「保存」ボタンをクリックします。
⑧ 保存後、ショップサイトをリロードし、キャンペーンが正しく表示されるか確認してください。

15