#2HOME設定（ビジュアル、商品一覧、コレクション、ニュースなど）

1. Introduction / 文字、写真によるメッセージ

トップページを開くと最初に表示されるエリア。テキスト + 写真で余白を生かしたレイアウトで、静かで印象的に。

💡

ポイント

写真とテキストを自由なパターンでレイアウト
テキストサイズ、フォント、写真のフェードイン効果の選択
利用したい写真によって表示位置を細かく指定可能なアジャスト機能

【TOP】Introduction ON/OFF	イントロダクションエリアの表示/非表示。イントロを利用せず商品一覧サムネイルを表示するだけのシンプルなデザインにもできます。
⌊ タイトルテキスト	メインのキャッチコピーを入力します。
⌊ リードテキスト	タイトル下にある小さな文字のリード文章を入力します。読ませる、というよりはデザイン的な要素になるよう意図的に小さめのフォントになっています。空欄にすると非表示にできます。
⌊ リードからのリンク	リード文章の下にリンクを設定できます。空欄にすると非表示となります。
⌊ リンク先URL（空欄でAboutへ）	リンク先のURLを指定します。空欄にしておけば自動的にAboutページリンクされます。
⌊ フォント	Introductionのタイトルフォント（明朝、ゴシック、手書き風）を選択できます。リード部分などは全体のフォント設定に依存します。
⌊ タイトルサイズ	タイトルの文字サイズを調整できます。数値は画面サイズに応じた相対的な値ですので、プレビューを見ながら適当なものをお選びください。
Introduction 画像1	画像1枚目をアップロードします。画像は2枚を重ねるように表示、または1枚を単独表示というレイアウトを前提としています。推奨比率として、デモサイトなどでは縦長写真を利用していますが、横長であってもうまくいく場合もあります。画像の位置を微調整できる機能を下に解説しています。
Introduction 画像2	画像2枚目をアップロードします。画像を1枚のみにしたい場合は、「画像2」は削除して「画像1」の方にアップロードしてください。
⌊ 画像表示エフェクト	画像のフェードイン効果のパターンを選択できます。
⌊ 基本レイアウト（PCサイズ）	タイトル左寄せ：テキストが左、画像が右タイトル中央左寄せ：画像が左、テキストを画像の右端に配置タイトル中央：テキストを中央寄せ、画像は下に中央配置タイトル右寄せ：画像が左、テキストを右寄せどのパターンの場合でも、画像削除することで「テキストのみ」のデザインにすることができます。どのパターンの場合でも、タブレット以下の画面サイズでは中央寄せになります。
⌊ テキストと画像の重なり	「タイトル左寄せ」「タイトル中央左寄せ」の場合に、意図的にタイトルを画像に重ねることができます。フォントサイズや英語か日本語かによって自動改行ポイントが異なるため設定値は相対的になりますが、「+」が大きいほど重なるエリアを大きく取ることになります。
⌊ 画像と下のコンテンツが重なってしまう場合の補正	Introduction画像エリアの高さは1枚目の画像サイズを基準にします。そのため、1枚目が横長で2枚目が縦長であった場合、特にスマホサイズなどで2枚目が下方にはみ出してしまい、下に続くコンテンツに重なってしまうことがあります。その場合、この補正をONにすることで重なりを解消できます。OFFの状態で問題ない場合はOFFのままにしてください。

「基本レイアウト」の設定による違い

タイトル左寄せ

タイトル中央

タイトル中央左寄せ

タイトル右寄せ

画像表示位置の微調整機能 📐📏

画像の縦横比率によって、ちょうど良い位置を数値で直接指定できます。写真をアップロードした後にもし違和感があればこちらで微調整してください。

※レイアウトが「タイトル中央」の場合、また各レイアウトでタブレット以下のサイズで中央寄せとなっている状態では、下記の「画像表示位置の微調整」は反映されませんのでご注意ください。

調整用グリッドを表示して数値で位置を調整できます。

▶︎画像位置の微調整	微調整機能をONにすると、テーマが持っている初期値を無視し、以下で設定する数値が採用されます。
⌊ 調整用グリッド表示（1マス=5）	設定作業をするためのグリッド（マス目）を表示します。「1マスが数値の5」を意味します。「10」を入力すれば2マス分移動できます。反対方向に移動させたい場合は「-10」とします。 ※グリッドでの調整はPC表示で有効となり、タブレット、スマホサイズでは画像枚数による自動調整となります。
▷ 2枚表示用：画像1 上からの位置	画像を2枚設定している場合の、画像1（左側）の上からの位置を整数で入力。（初期値：0） ※数字は必ず半角で入力、カーソルが入力欄出るとプレビューに反映されます。
▷ 2枚表示用：画像1 左からの位置	画像を2枚設定している場合の、画像1（左側）の左からの位置を整数で入力。（初期値：0）
▷ 2枚表示用：画像2 下からの位置	画像を2枚設定している場合の、画像2（右側）の下からの位置を整数で入力。（初期値：-10）
▷ 2枚表示用：画像2 右からの位置	画像を2枚設定している場合の、画像2（右側）の下からの位置を整数で入力。（初期値：-5）
▷ 1枚表示用：上からの位置	画像を1枚だけ設定している場合の、上からの位置を整数で入力。（初期値：0）
▷ 1枚表示用：右からの位置	画像を1枚だけ設定している場合の、右からの位置を整数で入力。（初期値：10）

💡

ポイント

位置微調整機能は通常はOFF、もし微調整したい場合にON、写真を変更した場合などは一旦OFFすることをお勧めします。
ウェブサイトが閲覧される画面サイズは多種多様です。全ての場面で印刷デザインのように完璧にすることは不可能ですので、妥協点を見つけることが大切です。
特に2枚表示させる場合、全ての画面サイズで重なり具合を厳密に指定することはできません。重なっても良いイメージ写真を使用するなどの工夫がおすすめです。
もし作品写真そのものを使用し「絶対に重ねて見せたくない」という思いがある場合、写真を1枚のみにすることをおすすめします。

利用したい写真、レイアウトが全て確定していれば、オリジナルテーマとしてオーダーメイドすることもできます。完璧を求める場合はご検討ください。
https://basedesign.info/customize/

Introductionからのスクロールボタン

【TOP】スクロールアイコン

Introduction からページ下にスクロールを促すような、スクロールボタンを表示。３種類のデザインから選択できます。スクロールはスワイプやマウス操作ででき、機能的にはなくても問題のないものですのでデザイン的な要素としてご利用ください。

2. 商品一覧

BASEではトップページに商品一覧（商品登録が新しい順）が表示されるのが基本となっていますが、それを表示するかどうか選択できます。

後述する「コレクション」からカテゴリーごとの商品一覧への導線を作る場合、またはオンラインショップ的な要素を出来るだけ無くしたい場合などは非表示にできます。

商品一覧の表示 ON/OFF	トップページの商品一覧の表示
⌊ 商品一覧見出し	トップページの商品一覧に見出しをつけたい場合に設定します。空欄で非表示にできます。

3. コレクション

コレクションはトップページの前半に表示する「画像 + リンク先URL」を１セットとしたタイル型のメニューセクションです。リンク付き画像を６つまで設定することができます。

💡

見た目は商品一覧と似ていますが、掲載する商品数によって、なんらかのカテゴリーに分類して見せたい場合などに最適です。カテゴリーAppと自動連動している訳ではありませんので、工夫次第で自由な使い方が可能です。

【TOP】コレクション ON/OFF	コレクションを利用する場合はONに
⌊ コレクションタイトル	コレクションの見出しを設定。用途によって自由に見出しを決めることができます。
⌊ コレクション1 画像(縦横比は統一)	より自由にデザインしていただくため縦横比率を指定していません。アップロードされた画像をピッタリと表示します。ただし必ず全ての画像で縦横比を統一してください。縦横比が統一されることで、折り返した時にうまく整列させることができます。表示サイズは後述の「画像の並べ方」によって異なりますが、ピクセルサイズは長辺で800pxあれば十分です。
⌊ コレクション1 ラベル	画像の上にのせるラベル名を入力。ラベルは入力しなければ表示されません。画像自体に文字を入れてバナーのように利用することも可能です。
⌊ コレクション1 URL	コレクション画像からのリンク先URL。カテゴリー一覧にする場合、カテゴリーAppでカテゴリーごとのページを表示させそのURLをここにペーストします。
	（最大６枚まで繰り返します。）
⌊ コレクション列数	列の数を2列〜4列で選択することができます。画像数、奇数具数に応じて、最適な列数を選択してください。（スマホサイズでは2列になります）
⌊ コレクション隙間	コレクション画像ごとの隙間を設定します。
⌊ ラベルデザイン	画像にのせたラベルのカラーを設定します。

4. テキストニュース

トップページに表示するお知らせを3件まで設定できます。

日付、内容、リンク先を手動で入力します。ブログ機能と連動する訳ではありませんので、ブログとは別のシンプルなテキストニュースとして利用できます。

5. ビジュアルセクション

トップページの商品一覧下には画像や動画によるビジュアルセクションを設定します。下にスクロールして行った時の新たな動線、踊り場的な演出として活用できます。

【TOP】ビジュアルセクション画像	画像をアップロードします。レスポンシブでトリミングしながら表示されるため、あくまでビジュアルイメージとしての画像がおすすめです。画像なしでビジュアルセクションがOFFになります。
⌊ セクションキャッチコピー	キャッチコピータイトル
⌊ タイトル書体	書体
⌊ リードテキスト	タイトル下のリードテキスト
⌊ ボタンテキスト	ボタン名
⌊ ボタンリンク先	ボタンのリンク先URL
⌊ テキストカラー	白または黒のみのシンプルな設定です

6. ブログApp連動ブログ新着記事

ブログAppに連動した新着お知らせも表示できます。ブログの新着3件がサムネイルとともに表示されます。

【TOP】ブログApp連動新着表示ON/OFF	ブログ新着記事を表示するかどうか
⌊ 見出しテキスト	ブログの見出し
⌊ 日付を表示する	ブログの日付を非表示にできます。OFFにすると新着一覧、ブログページ、ブログ記事ページで日付が非表示になります。あまり日付が関係しない内容で利用する場合にご利用ください。 ※見た目上で非表示にしているだけであり、BASEで保存された日付が消える訳ではありません。BASEのアプリ上などでは表示されます。またブラウザで「ソースコードを表示」するなどした場合は日付が分かります。したがって、「デザイン的にすっきりさせるためだけの非表示であること」をご認識ください。