#2 HOME設定
メイン画像、コンセプト、コレクション、ニュースなど
1. メイン画像
最大3枚まで設定できるメイン画像はトップページを開いた時に大きく表示されるビジュアルイメージ。お店の雰囲気を伝えるお気に入りの写真、その時のセール告知など、ネットショップの顔となります。
ポイント
・写真はパソコンやスマホなどあらゆる画面サイズで最大限に大きく表示
・スマホ用に縦長画像を設定可能
・写真にはキャッチコピーを重ねることができ、更にフォント、レイアウト、フレームデザインまでカスタマイズ可能
・２枚目の画像がアップロードされるとスライド表示に — 最大3枚まで追加できますが、写真２枚目があることがスライドギャラリーのスイッチとなるため、スライド表示したい場合は必ず1枚目の次に2枚目から設定してください。
| ◾️メイン画像 n枚目 | 画像をアップします。画像のピクセルサイズは大体1200px程度あれば十分です。レスポンシブで表示されるので、縦横比の指定はありませんが、横長〜正方形であれば大体の領域が表示されます。 |
| ⌊ トリミング時の画像寄せ | スマホ画面など、画面が縦長になった状態での画像の「寄せどころ」を指定できます。 |
| ⌊ スマホ縦用画像 | スマホ縦表示の時専用に縦長画像を用意することができます。「スマホ縦用画像」にアップした画像は、画面サイズがスマホ縦表示の場合にメインの画像に切り替わり表示されます。 |
| ⌊ サブタイトル | メインタイトルの上にくる少し小さなテキストです。 |
| ⌊ メインタイトル | メインのキャッチコピーです。 |
| ⌊ メインタイトル◊ | メインタイトルの下の小さなサイズのテキスト。少し長めの説明文などに。 |
| ⌊ タイトル書体 | メインタイトルの書体を選択できます。 |
| ⌊ タイトルフォントサイズ | メインタイトルの文字サイズを調整できます。 |
| ⌊ テキストカラー | 文字色は背景とする写真に合わせて画像ごとに設定できます。 |
| ⌊ タイトル配置 | テキストの配置を「中央寄せ / 右寄せ / 左寄せ」から選択できます。 |
| ⌊ フレーム | タイトルのセットを枠で囲んだりする装飾デザインが選べます。「四角で囲む / 上下ライン / アンダーライン / すりガラス / 塗り（白）/ 塗り（黒）」など様々なデザインが可能です。 |
| ⌊ ボタンテキスト | メインタイトルの下にボタンを設置できます。ボタンの色は全体のカラー設定で行なった「アクセントカラー」が反映されます。 |
| ⌊ ボタンリンク先 | 上記ボタンのリンク先URLを入力します。 |
| ⌊ スライド切替り速度 | スライドの切り替え速度を設定します。 |
| ⌊ タイトルのフェードイン効果 | 設定したタイトルテキストがフワッとフェードイン。左右中央のレイアウトに応じてより自然な方向からフェードインします。 |
もしスライド写真を4枚以上に増やしたい場合、HTMLコーディングの知識があればHTML編集Appでカスタマイズして増やしていくことは可能です。もしご自身では難しい場合はカスタマイズオーダーをご検討ください。
2. コンセプト
写真+文章でショップのコンセプトを表示できます。商品紹介に移る前にお店の想いを伝えましょう。
| ◾️ コンセプト ON/OFF | コンセプトセクションの表示 |
| ⌊ コンセプトイメージ | ショップを象徴するような写真を選びましょう。ショップのロゴ画像をここで大きく見せるのもおすすめです。 |
| ⌊ コンセプト見出し | コンセプトの見出し |
| ⌊ コンセプト本文 | お店の魅力を伝えられるようなテキストを |
| ⌊ ボタン名（空欄でボタン非表示） | リンクテキスト |
| ⌊ リンク先URL（空欄でAboutページへ） | リンク先URL |
| ⌊ レイアウトタイプ | 写真とテキストのレイアウトを選ぶことができます。 |
| ⌊ コンセプトエリア背景色 | コンセプトエリアの背景色を選択できます。その下に続く全体の背景より少しだけ明るい/暗いなど、わずかにトーンを変えた色にするとおしゃれです。 |
3. コレクション
コレクションはトップページの前半に表示する「画像 + リンク先URL」を１セットとしたタイル型のメニューセクションです。リンク付き画像を６つまで設定することができます。
多くの場合、画像付きのカテゴリー一覧メニューとして利用されます。カテゴリーAppとは連動していませんので、カテゴリー以外の自由な使い方が可能です。
| ◾️コレクション ON/OFF | コレクションを利用する場合はONに |
| ⌊ コレクションタイトル (空欄で上詰め) |
コレクションの見出しを設定。空欄で上詰めとは、タイトルを空欄にするとコレクションエリアは上のセクションにピッタリくっつきます。もしタイトルは不要、かつ上にぴったりくっつけたくない場合、タイトル欄に「全角スペース」を入れてください。 |
| ⌊ コレクション1 画像 (縦横比は統一) |
縦横比率を指定していません。ただし必ず全ての画像で縦横比を統一してください。ピクセルサイズは長辺で800pxあれば十分です。 |
| ⌊ コレクション1 ラベル | 画像の上にのせるラベル名を入力。ラベルは入力しなければ表示されません。 |
| ⌊ コレクション1 URL | コレクション画像からのリンク先URL。 |
| （最大６枚まで繰り返します。） | |
| ⌊ 画像の並べ方 | 列の数を2列〜4列で選択することができます。（スマホサイズでは2列になります） |
| ⌊ レイアウトタイプ | 「ボックスレイアウト / ボックスレイアウト（隙間なし）/ 横幅ぴったり」から選択できます。 |
| ⌊ ラベルカラー | 画像にのせたラベルのカラーを設定します。 |
ラベル名が長くなりすぎないように工夫し、どうしてもラベル文字数が多い場合は「画像の並べ方」を2列や3列にしておく。または「レイアウトタイプ」をより広い面積を利用できるものを選ぶようにしてください。
4. テキストニュース
トップページに表示するお知らせを3件まで設定できます。
日付、内容、リンク先を手動で入力します。ブログ機能と連動する訳ではありませんので、ブログとは別のシンプルなテキストニュースとして利用できます。
5. ビジュアルセクション
トップページの商品一覧下には画像や動画によるビジュアルセクションを設定します。下にスクロールして行った時の新たな動線、踊り場的な演出として活用できます。
| 【TOP】ビジュアルセクション画像 | 画像をアップロードします。画像なしでビジュアルセクションがOFFになります。 |
| ⌊ セクションキャッチコピー | キャッチコピータイトル |
| ⌊ 文字色 | 文字色 |
| ⌊ タイトル書体 | 書体 |
| ⌊ リードテキスト | タイトル下のリードテキスト |
| ⌊ ボタンテキスト | ボタン名 |
| ⌊ ボタンリンク先 | ボタンのリンク先URL |
| ⌊ YouTube動画を埋め込む | ONにすることで、動画モードとなり、上で設定した画像の代わりに動画を表示させます。 |
| ⌊ YouTube動画ID | YouTube動画IDを入力します。動画URLの「https://www.youtube.com/watch?v=○○○○○○」の○○○○○○部分（11桁の英数字）をコピーしてペーストしてください。 |
動画機能は視聴用ではなく、「音声なしで背景で流れるビジュアルムービー」的な使い方を想定しています。動画はスクロールしてこのエリアに差し掛かると自動再生されます。
6. ブログApp連動 ブログ新着記事
ブログAppに連動した新着お知らせも表示できます。ブログの新着3件がサムネイルとともに表示されます。
| 【TOP】 ブログApp連動 新着表示ON/OFF | ブログ新着記事を表示するかどうか |
| ⌊ 見出しテキスト | ブログの見出し |
| ⌊ 日付を表示する | ブログの日付を非表示にできます。OFFにすると新着一覧、ブログページ、ブログ記事ページで日付が非表示になります。 ※ 見た目上で非表示にしているだけであり、BASEで保存された日付が消える訳ではありません。 |