UGCセットのデザインを設定することで、サイトに表示されるUGCの見た目を自由にカスタマイズできます。レイアウト、色、余白、見出しなど、様々な要素を調整して、サイトのデザインに合わせた表示が可能です。
1. UGCセット編集画面を開く
UGCセット一覧から、デザインを設定したいUGCセットの「編集」ボタンをクリックしてください。
2. デザイン・スタイルタブを開く
UGCセット編集画面が開いたら、画面上部のタブから「デザイン・スタイル」をクリックしてください。
3. 設定するパターンテストの選択（パターンテストを実施している場合）
パターンテスト機能を使用してA/Bテストを実施している場合、「どのパターンのデザインを編集しますか？」というセクションが表示されます。
このセクションでは、編集したいパターンを選択できます。
オリジナルまたはテストパターンを選択する
以下のいずれかのラジオボタンをクリックして、編集したいパターンを選択してください。
- オリジナル: 元のUGCセットのデザインを編集します。
- test1、test2など: パターンテストで作成したテストパターンのデザインを編集します。パターン名が表示されます。
選択したパターンのデザイン設定が表示され、そのパターン専用のデザインを設定できます。
※ パターンテストを作成していない場合、このセクションは表示されません。
4. 見出しを設定する
見出しの種類を選択する
「見出し」セクションで、UGCセットの上部に表示する見出しを設定できます。
ドロップダウンメニューから、以下のいずれかを選択してください。
- 見出しなし: 見出しを表示しません。
- プリセットLetro画像: Letroが用意したプリセット画像から選択します。
- 画像アップロード: 独自の画像をアップロードします。
HTML: HTMLコードを入力して見出しを作成します。
プリセットLetro画像を選択する（プリセットLetro画像を選択した場合）
「プリセットLetro画像」を選択した場合、表示されるプリセット画像の一覧から希望する画像のラジオボタンをクリックして選択してください。
画像をアップロードする（画像アップロードを選択した場合）
「画像アップロード」を選択した場合、以下の手順で画像をアップロードしてください。
- 「ファイルをドラッグ＆ドロップ または」と表示されているエリアに画像ファイルをドラッグ＆ドロップするか、「ファイルを選択」ボタンをクリックして画像ファイルを選択してください。
画像がアップロードされると、プレビューが表示されます。
HTMLを入力する（HTMLを選択した場合）
「HTML」を選択した場合、表示されるテキストエリアにHTMLコードを入力してください。
例: <h1><test></h1>
5. レイアウトを選択する
5-1. レイアウトの種類を確認する
「デザイン・スタイル」タブ内の「レイアウト」セクションで、UGCの表示形式を選択できます。
現在選択可能なレイアウトは以下の5種類です。
- グリッド: UGCをグリッド状に表示します。
- カルーセル: UGCをカルーセル状に表示します。（UGCの表示可能件数：99件まで）
- タイムライン: UGCをタイムライン状に表示します。
- 縦長グリッド: UGCをアスペクト比9：16でグリッド状で表示します。
縦長カルーセル: UGCをアスペクト比9：16でカルーセル状で表示します。（UGCの表示可能件数：99件まで）
5-2. レイアウトを選択する
希望するレイアウトをクリックして選択してください。
レイアウトを変更すると、表示枚数や余白などの設定が自動的に調整されます。
6. 1ページあたりの表示数を設定する
スマホとPCの表示数を設定する
「1ページあたりの表示数」セクションで、スマホとPCそれぞれの表示枚数を設定できます。
表示数を設定する
- 「横」の入力欄に横方向の表示枚数（1～20）を入力してください。
- 「縦」の入力欄に縦方向の表示枚数（1～20）を入力してください。
※ レイアウトで「タイムライン」を選択している場合、「横」の設定は常に1になります。
※ レイアウトで「カルーセル」または「縦長カルーセル」を選択している場合、「縦」の設定は常に1になります。
7. Instagram投稿文の表示を設定する
Instagram投稿文の表示・非表示を選択する
「Instagram投稿文」セクションで、UGCにInstagramの投稿文（キャプション）を表示するかどうかを設定できます。
- 表示する: Instagram投稿文を表示します。
- 表示しない: Instagram投稿文を表示しません。
希望する方のラジオボタンをクリックして選択してください。
8. 動画UGCの自動再生を設定する
動画の自動再生を選択する
「動画UGCの自動再生」セクションで、動画UGCを自動的に再生するかどうかを設定できます。
- 再生する: 動画UGCを自動的に再生します。
- 再生しない: 動画UGCを自動的に再生しません。
希望する方のラジオボタンをクリックして選択してください。
9. カラーを設定する
9-1. メインカラーを設定する
「カラー」セクションで、UGCセットの配色を設定できます。
「メインカラー」の行で、カラーピッカーをクリックして希望する色を選択してください。
メインカラーは、UGCセット内のボタンやリンクなどのアクセントカラーとして使用されます。
9-2. UGCの背景色を設定する（Instagram投稿文を表示する場合）
「Instagram投稿文」を「表示する」に設定している場合、「UGCの背景」の行が表示されます。
- カラーピッカーをクリックして希望する背景色を選択してください。
- 背景色を透明にしたい場合は、「背景なし」のチェックボックスにチェックを入れてください。
9-3. UGCの枠色を設定する
「UGCの枠」の行で、UGCの枠線の色を設定できます。
- カラーピッカーをクリックして希望する枠線の色を選択してください。
- 枠線を表示したくない場合は、「枠線なし」のチェックボックスにチェックを入れてください。
9-4. UGCの文字色を設定する（Instagram投稿文を表示する場合）
「Instagram投稿文」を「表示する」に設定している場合、「UGCの文字」の行が表示されます。
カラーピッカーをクリックして希望する文字色を選択してください。
10. デザインをプレビューする
10-1. プレビューを開く
設定したデザインを実際のサイトでプレビューして確認できます。
- 画面右上の「デザインをプレビュー」ボタンをクリックしてください。
プレビュー確認モーダルが表示されます。
10-2. プレビューURLを入力する
- 「UGCセットを表示させるページのURLを入力してください。」と表示されている入力欄に、プレビューしたいページのURLを入力してください。
- 「確認する」ボタンをクリックしてください。
新しいタブでプレビューページが開きます。
11. 設定を保存する
デザイン設定を保存する
デザインの設定が完了したら、必ず保存してください。
画面右上の「デザイン確定」ボタンをクリックしてください。
保存が完了すると、「UGCセットを更新しました。」というメッセージが表示されます。