Relation メイン写真・動画

メイン写真の設定

サイトの第1印象となるメイン画像です。「写真選びがすべて」とはいえ、うまく表示できるように細かく設定項目があります。

メイン画像の上にはキャッチコピーに加え、YouTubeの動画プレイヤーも表示できます。

メイン写真の設定

■TOPメイン画像

サイトの顔となるメイン画像をアップロードします。画像はどのような画面サイズでもできるだけ画面を覆うように表示されますが、ほとんどの場合、横長の画像が最も適しています。一般的な写真サイズ「4:3」「3:2」程度であればうまく表示されます。

スマホ時のトリミング位置はもう少し下にある「メイン画像の寄せ指定」で調整できます。

メイン画像上の文字色

メイン画像の明暗に合わせて色を指定します。この色はナビゲーション色にも適用されます。

メイン画像上の文字シャドウ

メイン画像上のキャッチコピー、ナビゲーションにシャドウを付けることができます。

■メインキャッチ

キャッチコピーを入力します。半角で「＜br＞」と入れると改行できます。

⌊ メインキャッチ書体

メインキャッチの書体を「ゴシック体（太字）」「ゴシック体」「明朝体」「手書き風（英数字のみ）」から選択できます。

　⌊ メインキャッチ文字サイズ

メインキャッチの文字サイズを微調整できます。文字量に合わせてバランスの良いサイズを選びます。

⌊ 概要テキスト

メインキャッチの下にくる概要文を入力できます。入力しなければそのスペースには何も表示されません。

コミットボタンテキスト（空欄で表示OFF）

自由な文言のボタンを設置できます。ここから商品ページ、コミュニティページにリンクすることができます。

コミットボタンリンク先

httpsから始まるリンク先URLを入力します。特定商品の場合、商品を登録して商品ページに行き、そのURLをコピーしてここにペーストします。コミュニティAppによるページの場合、「ショップURL/community」になります。

『#itemblock』と入れると、このあと設定する「商品一覧ブロック」にページ内リンクで移動することができます。

■動画プレイヤー：サムネイル(なしでも可)

動画プレイヤーのサムネイル画像を設置します。サムネイルがない場合、再生ボタンのみ表示されます。

⌊ YouTube動画URL(空欄で動画プレイヤーOFF)

再生したいYouTube動画URLを入力します。入力しない場合、再生ボタンは表示されず動画プレイヤーはOFFになります。（※YouTubeの短縮URLは利用できません）

メイン画像枠デザイン

メイン画像からコンテンツに繋がる部分にデザイン装飾を入れることができます。

メイン画像 枠カラー（背景色に合わせます）

枠デザインの部分の色を設定します。このデザインフレームは背景色とは連動しませんので、背景色と同じ色に設定します。

デザインフレームに、背景パターンを設定することはできませんので、もし背景にパターン画像を利用する場合は「メイン画像枠デザイン：なし」にしてご利用ください。

　⌊ メイン画像の寄せ指定（スマホ表示時のトリミング）

横長のメイン画像が、スマホ縦表示になった時のトリミング位置を微調整できます。例えば、デモサイトでは、人物が中央より右にある構図の画像をメイン画像としています。

メイン画像は中央を維持したまま、スマホでは左右の均等にトリミングされ、縦長となるスマホの縦向き画面で表示すると左のように、人物が切れてしまいます。

そこで、スマホの時に「中央寄せ（デフォルト）/ 右寄せ / 左寄せ / やや右寄せ / やや左寄せ」の設定ができます。



「中央寄せ」左右50%の位置で中央に配置、「右寄せ」画像の右端を画面右に合わせるように配置、「左寄せ」は左に合わせます。「やや右寄せ」「やや左寄せ」は25%ほどどちらかに寄せます。「中央」と「左右寄せ」の間くらいの位置に配置されます。

デモサイトの例では「やや右寄せ」にすることで、人物がうまく表示されました。

このような設定でもうまく配置されない場合、画像そのもののトリミングを調整してみてください。

new メールマガジン登録フォーム

メイン画像には、ボタンに替えて『メールマガジン登録フォーム』を設置することができます。
メールマガジンAppをインストールし、「メルマガ登録フォーム ON/OFF」をONにしてください。

ここに登録フォームを設置する場合、すぐ上の「概要テキスト」で、「それがメルマガ登録である」ことが分かるような文章にしましょう。それが分かりづらく「意図せず登録してしまった」ということになってしまうと、ショップ運営者に対しての不信感に繋がります。

メインビジュアルには設置せず、ページ下部にある「メルマガ登録ブロック」のみの利用もできます。その場合は「メルマガ登録ブロック」の設定で別途説明文を設定できます。

設置ができたら、お客さまがどのような流れで登録されるのか、自分のメールアドレスで確認しましょう。

ページの下の方に表示する「メルマガ登録ブロック」と合わせて、効果的にメルマガ登録者を増やし、興味を持ってくれた人と継続的な接点を持ちましょう！