メインコンテンツにスキップ

汎用ビジュアル(カバーページ・テーマスタイル)|設定ガイド

カバーページ

カバーページでは「前景」と「背景」を調整できます。カバーページ専用の背景を個別に設定することも可能ですが、特に設定がない他のページと同じ背景が自動的に適用されます。

前景

すべてのデバイスで正しく表示されるようにするため、キャンペーンの重要情報は前景に配置してください。


1. ツールバーの画像+テキスト編集をそのままご利用いただけます

2. 画像のみのアップロードにも対応

- パソコン&タブレット:1500(w)x1200(h)px

- スマートフォン:500(w)x700(h)px

背景

カバーページ専用の背景を表示するよう設定できます。オフにした場合はキャンペーン全体で共通の背景が使用されます

1. デフォルトで斜線模様と単色をご用意

2. カスタム背景にも対応

- パソコン&タブレット:2400(w)x1600(h)px

- スマートフォン:800(w)x1422(h)px
ファイルサイズ9MB以内

背景はデバイスの画面幅に応じて拡大縮小されるため、トリミングされたり引き伸ばされたりすることがあります。トリミングされても問題ない、重要な情報を含まない画像をご使用ください!!

サンプルスタイル

  1. 前景:画像+テキスト/背景:デフォルト

    これはシステムのデフォルトスタイルです。お好みに応じて、キャンバス上でキャンペーンタイトルや概要説明を編集し、画像をアップロードしてボタンの色や文字を変更するだけで完成します!キャンバスの各ブロックをクリックすると編集できます~

    *画像は背景処理(透過PNG)済みのものを使うと背景と馴染みやすくなります
    *このサンプルのボタン文字サイズは24px、角丸は30pxです

2.前景:画像のみ/背景:単色

これは最もシンプルで手早い方法です!
デザイナーにパソコン版・スマートフォン版のメインビジュアル画像を2枚用意してもらい、そのままフォアグラウンドの「画像のみ」欄にアップロードするだけです。
背景色はメインビジュアルと同じ色に設定してください。


サイズ:
-パソコン&タブレット:1500(w)x1200(h)px

- スマートフォン:500(w)x700(h)px

メインビジュアル画像上には必ずボタンやアイコンを配置し、参加者をキャンペーン参加へ誘導するデザインにしてください!

3. 前景:画像のみ/背景:カスタム


もう少しこだわりたい方へ!
背景をカスタムしつつ前景の画像と馴染ませたい場合は、前景画像を背景処理(透過)してからカスタム背景の上に配置してください。

前景:
-パソコン&タブレット:1500(w)x1200(h)px

- スマートフォン:500(w)x700(h)px
背景
- パソコン&タブレット:2400(w)x1600(h)px

- スマートフォン:800(w)x1422(h)px

メインビジュアル画像上には必ずボタンやアイコンを配置し、参加者をキャンペーン参加へ誘導するデザインにしてください!

テーマスタイル

スタイル設定には、設問ページ・結果ページ・キャンペーン進行中の画面における背景、文字色、タイトル、ボタンデザインなどが含まれます

1. キャンペーン背景

  • 単色または画像を選択可能

    画像サイズ
    -パソコン&タブレット:2400(w)x1600(h)px

    - スマートフォン:800(w)x1422(h)px

  • マスク
    システムのデフォルトのマスク値は0.5ですが、自由に調整できます。主に背景の透明度を上げることで、背景の上に配置された文字をより見やすくするためのものです。

マスク設定 0-イメージ

マスク設定 0.45-イメージ

*「友達を招待して参加」ボタンは「シェアフロー」内で編集してください。

2. タイトル・選択肢・ボタン

タイトル:モジュールの設問ページ・結果ページのタイトル文字、応募フォームの案内文、抽選案内の文言(おめでとうございます!あとX回抽選のチャンスがあります)、賞品受け取り案内

選択肢:議題投票、クイズ、心理テストなど、設問ページに選択肢があるモジュールに適用されます

ボタン:キャンペーンの流れの中で表示されるボタンに適用されます。例:フォーム入力、賞品受け取り、受け取りへ進む、賞品を見る各ボタン

【設定画面と実際の表示の対応図】

こちらの回答で解決しましたか?