Landscape for BASE

ユーザーマニュアル

テーマの特徴

Landscapeはトップページのフルスクリーン表示が特徴のテーマです。

写真の上に重なるキャッチコピー設定もできるため、画像編集ソフトを使わずに印象的なトップページを作成できます。また、中ページはシンプルな2カラム(左右レイアウト切替可能)にすることで、個性的でありながら買い物がしやすいオンラインショップが作成できます。

テーマはこちらから購入できます : DESIGN MARKET > Landscape

安心の無料アップデート

BASEに新機能が追加された際や、テーマにさらなる機能追加を行った際など、
ご購入いただいた方にはテーマの無料アップデートを提供しています。
アップデートが行われた際には、ご購入頂いたテーマも自動的に更新されますので安心してご利用頂けます。

専用サポートフォーラム

Landscapeは専用質問サイトにて常にご質問を受け付けており、
どんなご質問やカスタマイズのご相談も、デザイナー自身が積極的にお返事しています。
BASEでショップを運営するための相談所としてご利用ください!

Landscape サポートフォーラム


トップページの設定

メイン写真をアップする

トップページにアップした画像は、パソコンやスマホなどあらゆる画面サイズで綺麗にフルスクリーン表示されます。写真1つの時は静止画に、2枚目があると自動的にフェードインで切り替わるようになります。

1枚だけアップした時は静止画に、2枚目をアップすると自動的に左右カーソルが表示されフェードエフェクトで切り替わるようになります。(最大2枚まで)

トップページに写真があることを前提としてデザインされています。写真を使いたくない場合、このテーマはこのテーマは適していません。

メイン写真にテキストを重ねる

メイン画像の上にはキャッチコピー、ボタンを重ねることができます。ボタンのリンク先にカテゴリーページなどを設定し、季節やテーマごとのキャンペーンを組むことができます。

  • メイン画像(できる限り高画質な写真を!)
  • サブタイトル(メインタイトルの上の小さな文字)
  • メインタイトル(写真中央にくる大きな文字)
  • タイトル文字色(写真の明暗に合わせて読みやすい色を)
  • ボタンテキスト(メインタイトル下のボタンの文言)
  • ボタンリンク先(ボタンのリンク先)
  • タイトル書体(メインタイトルの書体)/ 2017年12月Update!
  • フレーム(枠による装飾デザイン)/ 2017年12月Update!

ボタンの色は全体設定「ワンポイントカラー」が反映され、サイト全体での色調の統一感を保ちます。


2017年12月 デザイン機能追加予定

従来はテキスト内容と色だけでしたが、書体と枠を設定することができるようになりました。書体はこれまでと同じセリフ体(Georgia)、サンセリフ体(Helvetica)、筆記体の3種類から。枠はボーダー囲み、上下ライン、白と黒の塗りの4種類。 これらの組み合わせによってよりオリジナリティのある演出ができるようになりました。

日本語の場合は単に明朝/ゴシックのみの変化となります。筆記体は英数字のみ。

書体や枠の組み合わせによってさまざまなデザインができます。

写真に合わせた文字色

ロゴカラー、ナビゲーションカラーはサイト全体で共通です。しかし、トップページだけはメイン画像に重なるため読みづらくなることがあります。

↑上記はトップ以外(中ページ)では背景が白いためテキスト色を黒にしているが、トップページのメイン画像上では見えなくなってしまう。

このような場合のために、トップページだけロゴやナビゲーションの文字色を変更することができます。カスタマイズ項目の「メイン画像にあわせてヘッダー文字色を変える」をオンにし、色を選択します。

この設定はトップページに限って割込み設定され、中ページには影響しません。

ロゴを画像にした時、画像に含まれる色をトップと中ページで切替えることはできませんので、写真選びでうまく調整してください。

メイン画像が2枚ある時にも、その切り替わりに応じて変動させることはできません。似た明るさの写真を選ぶ、あるいは2枚目の写真では文字の見づらさは妥協する、など工夫しましょう。

コンセプトメッセージ

メイン写真から下にスクロースした場所にコンセプトメッセージ(ポエム)を表示できます。

ただ商品写真が並ぶだけではなく、小さなショップならではのオーナーのひと言あるだけで、買い物をするときの気持ちは変わってくるものです。

改行などはHTMLタグが利用可能です。

ピックアップ商品の表示

ピックアップ商品として3点を大きく表示できます。
商品リストの最初の3つの商品がピックアップ対象として表示されます。BASE管理画面では商品順序をドラッグドロップで簡単に選択・並び替えができますので、個別にサムネイル写真やリンク先を手動入力する必要はありません。

ピックアップの見出しは初期設定では「FEATURED PRODUCTS」となっていますが、自由に変更できます。また、このピックアップ表示自体のON/OFFも選択できます。

お知らせ機能

トップページに表示するお知らせを3件まで設定できます。日付、内容、リンク先を手動で入力します。ブログ機能と連動する訳ではありませんのでご注意ください。


サイト全体に共通するカスタマイズ

ロゴデザイン機能

ロゴの書体を15種類のデザインフォント(英数字)から選択できます。
またショップ名の長さやフォントのバランスを見ながら文字サイズも調整が可能です。もちろん画像も利用可能です。

ロゴ画像の使い分け機能

デザイン編集画面のロゴ設定で「画像を使用する」をONにすると、テキストの代わりにロゴ画像を使用できます。

この「基本設定のロゴ画像」はサイト全体を通して、またデザインテンプレートとは関連しない場面(BASEアプリなど)でも使用されるものです。

Landscapeではトップページにおいて、ロゴがメイン写真に重ねて配置されるため、ロゴを白抜き透過画像にしたい場合も出てきます。そのような場合のために、トップページだけに使用するロゴ画像を設定できます。

メイン画像設定の上にある「【TOP】トップ用透過ロゴ」に、透過画像をアップロードします。白抜き透過画像の場合は当然、白い背景上では見えなくなりますがアップロードされていれば問題ありません。

「基本設定のロゴ画像」を色付きの透過画像にしてれば、中ページやBASEアプリなどの代表画像としてそれを利用、トップページのみで白抜きにした「トップ用透過ロゴ」が表示されます。

更に、中ページだけをまた異なる背景色に合わせたものにしたい場合、中ページ用のロゴも別途設定できます。

デザイン編集項目の一番下「中ページ用ロゴ」からアップロードしてください。

カラーデザイン機能

ロゴ色、背景色、テキスト色、ワンポイントカラーを自由に設定できます。ワンポイントカラーはサイト内のボタン、サイドナビのリンク色、商品名見出しの下線などに利用され、サイト全体での統一感の中にポイントとして活かす色となります。

レイアウトの切替機能

2カラムのサイドバーを右側にするか、左側にするかをスイッチ1つで切替えることができます。

サムネイル画像の枠ありなし

商品一覧画面でのサムネイルにて、白フチの有無を選択できます。

商品写真が白バックか、背景ありか、などによって変わってきますので、商品登録後に切り替えてお好みの方をお選びください。

さっと作れるテキストバナー

サイドバーの一番上にテキストバナーを作成できます。バナー画像を作る暇がない時など、テキスト入力と背景色だけですぐにバナーを表示できます。例)セールバナー、送料表示、イベントバナー等

画像バナーエリア

サイドバーには2箇所に画像バナーを挿入することができます。バナー画像をアップロードし、リンク先を設定するだけで表示が完了します。

緊急メッセージ

発送に遅れが出てしまう時、災害などでの配送遅延、などの緊急メッセージを表示できます。タイトルと本文を入力することで、ショップ名のすぐ下に赤色バナーで表示されます。

独自のOGP画像の設定

BASEではOGPも自動生成されます。商品ページがシェアされた場合、商品画像や商品説明が。商品ページ以外では、ショップロゴ画像やショップ説明が自動的に生成されます。

基本的にはBASEにお任せで問題ありませんが、Landscapeでトップページ用に透過画像を設定した場合、商品ページ以外のOGPに透過したロゴが表示されてしまいます。その場合のために、OGP画像を独自で設定することができます。デザイン編集画面の一番下に、OGP画像として設定した画像をアップロードしてください。
アップロードした画像は商品ページ以外のOGP候補として追加されます。商品ページでは引き続き商品画像が利用されます。

OGPの扱われ方は、SNS側のルールよって異なります。適正なサイズなどはその時々でお調べください。

「OGP」とは、FacebookやTwitterでシェアされた時にプレビューとして表示される画像や説明文のことです。
(一般的な用語ですので、ここでは詳しい説明は省略します。分からない場合は検索エンジンで「OGPとは」などと検索してください。)


商品詳細ページの設定

関連商品のタイトルはデフォルトでは「RELATED ITEMS」となっています。このような表現はお客様に心理的な部分に働くため、意外と重要です。なのでLandscapeではこの表現を自由に設定することができるようにしています。

例えば…

・関連商品
・この商品を見ている人はこんな商品も見ています
・この商品を買った人はこんな商品も買っています
・こちらもおすすめ
・YOU MAY ALSO LIKE...

など、商品構成やお店の雰囲気、またどのような顧客層かによって検討してみてください。

テーマの利用方法やカスタマイズに関して質問しあえるサポートフォーラムを開設しています。

BASE Design Info

こちらのテーマもおすすめです。

その他にもBASE DESIGN MARKETには素敵なテーマがたくさんあります。
テーマごとに特徴がありますので、ショップの用途に合わせて選んでみてください。

BASE DESIGN MARKET