UNIVERSE for BASE

BASEデザインテーマ「UNIVERSE / ユニバース」ユーザーマニュアル

UNVIERSEご検討の方へ

UNVIERSEの特徴は、あらゆるテーマからでも1つの色から濃淡を変えてきれいにデザインできること、柔軟な商品ページレイアウトデザイン、おしゃれなスライドや画像演出、決済方法などをわかりやすく表示、そしてお店紹介の充実…
説明しきれないほどたくさんの工夫が盛りだくさんのテーマです。購入前にはデモサイトはもちろん、こちらのマニュアルを見てどんなことができるのか、ぜひチェックしてください。

サンプルサイト

テーマカラーを白にしたデザインのセレクトショップを想定した架空のデモサイトです。

UNIVERSE ライブデモサイト

モバイルプレビュー

再生ボタンがついた画像は、動画(無音)で再生できます。
見終わったらもう一度クリックして止めておいてください。

ショップサンプル

様々なショップを想定したサンプルサイトです。ライブデモではなく、一枚の大きな画像になっています。

どのサンプルも、画像編集ソフトを一切使わずにBASEの設定項目だけでデザインされています。






はじめましょう!

これ以降は、実際にUNIVERSEを選んで頂いた方に向けたカスタマイズ方法を丁寧に解説しています。
項目は左メニューから該当する項目を選んでジャンプできます。

もしどうしてもわからない部分は、専用のサポートフォーラムを作ってあるので気軽に質問してください。

UNIVERSE 助け合いフォーラム

全体共通の設定 (色とロゴ)

ショップロゴは、ロゴ画像をアップロードすることができます。

もし特にお店のロゴがない場合でも、デザイン編集画面でフォント、サイズ、太さ、字間を変えながらすぐにデザインできます。

最新版では上記プレビューから少し改善されています。ロゴがアルファベット表記の場合は「フォント」の一覧から選択します。もし日本語表記の場合「フォント[日本語]」からゴシックか明朝かだけを指定できるようになっています。

カラースキーム設定

「あちこち設定できる故に、バランスが崩れる」ということを防ぐため、UNIVERSEの色設定はおおきく2つだけ。1つはサイト全体の色となる「ヘッダーカラー」、そして「ワンポイントカラー」です。

「ヘッダーカラー」は次の場所に影響を与えます。自動的に明度差をつけて配色されるので、統一感のある色設定ができます。ヘッダーカラーを決めたら、その上に文字がきても読みやすくなるように「ヘッダー上の文字色」を決めましょう。

色1を1つ決めるだけで、明度が違う色が自動的に配色されるんだね! あちこちで色設定があると、バランスが難しいんだけど、これなら僕にもできそうだ!

ワンポイントカラーとは

ワンポイントカラーは、トップページメイン写真につけるボタン、「カートに入れる」のボタンなどに使われます。

そこまで主張するものではないけど、「ここぞ」というところで訪問者の関心を強く引く効果があるよ!
だから、目立たせたいからといってあちこちで違う色を使うんじゃなく、サイト全体で1つだけワンポイントカラーを決めて「ここぞ」を統一しているんだね!


トップページの設定(メイン写真)

メイン写真の仕組み

  • パソコンやスマホなどあらゆる画面サイズで最大限に大きく表示され、画面の縦横比に応じて四隅がクロップされる。
  • 写真1つの時は静止画に、2枚目があると自動的にフェードインで切り替わるようになる。
  • 写真にはキャッチコピー、サブキャッチ、タグラインのテキストを重ねることができ、更にフォント種類、サイズ、左右中央レイアウト、フレームデザインまでカスタマイズできる。
  • 画面スクロール時にずれてスクロールされることで、奥行き感のある印象的な演出に。(2枚ある時のみ)

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

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

メイン写真を設定してみよう!

メイン写真の設定項目別の解説

それぞれの項目は図の通りに対応しています。

入力したテキストがどこに対応するかは、赤いラインで示している通りです。入力欄を空欄にすればそれ自体は表示されないので、言いたいことやデザインを見て、必要なものだけ入力すれば大丈夫です。例えば全部があると情報量がが多すぎるとおもえば、「サブタイトル+メインタイトル」「メインタイトル+リードテキスト」といった組み合わせがよいでしょう。

メインタイトルはフォントとサイズを選択できます。入力する文字数によってバランスを見る必要があるので、まずは「言いたいこと」を書いてみてから、微調整してください。

次に、図の中の (1)〜(4)について説明します。

(1) タイトル配置

タイトルテキストの配置を「中央寄せ / 右寄せ / 左寄せ」から選択できます。写真の構図などに合わせて試してみてください。

左右寄せを選んだ場合でも、スマホの縦表示画面では中央寄せされることに注意!
横幅がとっても狭いのに「右だ左だ」なんてチマチマやってられないからね!

(2) フレーム

「フレーム」は、タイトルのセットを枠で囲んだりする装飾デザインが選べます。

キャッチコピー、色、フォント、配置、そしてフレームを組み合わせ…。
BASEのデザイン編集画面は、リアルタイムに反映されるからとても楽しいね!

でもブラウザはかなり頑張ってる状態だから、あれこれ編集ずーっとやってるとちゃんと反映されなくなるときがあるよ。そんな時はブラウザを「再読込み」してみて。 それでもだめならブラウザの「キャッシュ」を削除してみる、ブラウザを再起動してみる、とかで解決すると思うよ。

(3) スマホ画面での画面寄せ

スマホ画面など、画面が縦長になった状態でのメイン写真の「寄せどころ」を指定できます。

メイン写真は殆どの場合、横長の写真を使うことになります。画面も横長なら良いのですが、画面が縦長になったとき、写真は「それでも画面を大きく覆うぞ!」となるため、結果的に「左右を大きく切り取って中央だけ拡大」ということになります。

この機能は地味にうれしいな。

(4) スライド切替り速度

2枚のスライドが切り替わる速度を「5秒、7秒、10秒」から選択できます。

タイトルのテキストを、任意の場所で改行したい場合

どうしてもある場所で強制的に改行したい場合、HTMLタグの「 <br /> 」を入れれば改行されるよ。

 <br />
(半角にしてから)かっこ開ける、びー、あーる、すぺーす、すらっしゅ、かっこ閉じる。

例えば上の「まってな、かーちゃん」の場合、「まってな、<br />かーちゃん」と入力してあるんだ。<br /> はHTMLタグだから必ず半角でね。

強制的に改行してあると画面サイズによっては変になることもある。文字の量による具合は、できるだけ「タイトル文字サイズ」で調整して、そこそこの妥協点でよしとするのがいいと思う。
もし絶対こうしたい!というデザインがあるなら、Photoshopとかで画像自体に文字デザインをつけて、上にかぶせるテキストは全部非表示にするのも手だ!

トップページの設定(その他)

特別ニュースバナー


ピックアップ商品の表示

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

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

スマホで小さく3つ横並びにするか、1つづつ大きく並べるかを選べます。


トップページに表示される商品数について

BASEのほとんどのテーマでは、トップページで下に行けば行くほど、すべての商品を無限に読み込んで表示するようになっています。しかし、商品数が多いほど「全商品を、新着順に、無限に読み込む」ということが訪問者にとっては効率的とは言えない表示形式になる場合があります。

そのため、UNVIERSEではあえてトップページでの無限読み込みをせず、固定数(ピックアップ + 上位12件)だけを表示し、その下に特集カテゴリーセクション、購入案内のあるフッターウィジェットを表示して、訪問者とショップにとってより有意義な動線を作れるように設計しています。

お知らせ機能 1(テキスト入力版)

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

お知らせ機能 2 (ブログApp 連動版)

テキスト入力版のお知らせとは別に、ブログAppに連動した新着お知らせも表示できます。トップページの下の方に、ブログの新着3件がサムネイルとともに表示されます。

この場合、ブログ1つ1つに必ず画像が必要であることにご注意ください。


特集カテゴリーセクション

特集カテゴリーセクションとは、トップページをスクロールしていった下の方に、もう1つの大きなビジュアルを作り、ボリューム感と見ごたえ感を演出するセクションのことです。

メイン画像と同じように、写真、キャッチコピー、ボタンからのリンク先などを設定できます。

この場合、石鹸の写真を大きく取り上げて、石鹸カテゴリーページにリンクさせているんだね!

商品一覧サムネイルのレイアウト(TOPとカテゴリー一覧共通)

商品一覧でのサムネイル列数を3か4から選べます。この設定は、トップページ、カテゴリーページで適用されます。
設定状態はパソコンの広い画面での状態となり、幅の狭くなったタブレット、スマホ画面ではレスポンシブに3列、2列と自動的にレイアウトされます。


商品ページのカスタマイズ

商品ページはレイアウトを大きくカスタマイズできます。商品説明テキストの位置、画像ギャラリーの位置、それぞれ2パターンを組み合わせることで、合計4パターンのレイアウトを作成することができます。

さらに商品写真ギャラリーは、4、3,2コマのサムネイル表示、1コマでそのまま大きく表示する、の合計4パターンから選ぶことができます。

全体の統一設定ですので、全体的な写真の量、説明のボリュームなどによって好みのレイアウトを見つけてみてください。

商品ページ:テキストレイアウト

ON:コンパクトな商品説明 / OFF:商品説明は広いエリアで

商品ページ:画像レイアウト

ON:コンパクトな商品説明 / OFF:商品説明は広いエリアで

つまり、写真や説明がさほど多くなければ「左側に写真ギャラリー、右に説明」っていうシンプルなレイアウトが合うかもしれない。
写真も説明もすごいボリュームの場合は「下の広いスペースにどどーん」というレイアウトにしたりできるんだね。

しかも、文章と写真、2つの設定はそれぞれ独立して変えられるから、組み合わせれば4パターンのレイアウトが可能なんだ!

商品ページ:写真サムネイル表示

画像レイアウトが2パターン選べるっていったけど、さらに「サムネイル画像のレイアウトを4パターンで選べる」ということだね。たとえば、「画像レイアウト」を下に展開するパターンにして、更に写真ギャラリーを「そのまま表示」にしたら、巨大な写真が延々とならぶのような長尺ページにもなり得るということか!

デモサイトのような小洒落たレイアウトにもなるし、縦になが〜い押しの強いレイアウトも作れるんだね。

ちなみにBASEでは1つの商品に対して最大20枚も写真をアップロードできるんだよ。

商品ページ:全商品共通表示

商品ページには、基本的には「その商品の情報だけ」しかないものなんだけど、「全商品で共通するコンテンツ」を追加で掲載できます。

見出し、本文、枠の有無だけの設定ですが、HTMLも利用可能なので様々な活用方法があります。


Aboutページとフッターウィジェット

Aboutページとフッターウィジェットの関係

全ページの下の方に「フッターウィジェットエリア」が作成できます。この情報は、まず「Aboutページを充実させるために入力した内容」をもとに、簡易的に抜粋してフッターウィジェットに表示されます。

なるほど!シンプルな紹介文だけだったAboutページに、様々な拡張させられるようになっているんだね。そして、その情報を簡単にまとめた「フッターウィジェット」があって、どのページにいてもスクロールすればすぐに目に入るようになっているんだ。

じゃあまずはAboutページをカスタマイズしてみよう。

Aboutページのカスタマイズ

Aboutページの設定は以下の通りです。項目数は多いですが、細かい情報を分類しているだけなのですぐに設定可能です。

現在は更にアップデートされてクレジットカード種別ごとに表示選択ができるようになっています。詳細は下記「決済方法の表示について」にて。

上の画像の通りの設定が反映されたのが、デモサイトのAboutページとなります。https://universe.base.ec/about

BASE上で設定との違い(住所・決済をなぜもう一度入力するの?)

テーマ設定で入力するのは、BASEでの登録情報(特定商取引法ページに表示されるもの)とは別扱いで、単にサイト上に案内として表示するためだけのものです。例えば、事務所とは別に店舗が存在する場合などは、ここに店舗案内ができます。

ショップ紹介の表示について

Aboutページ拡張として、「住所、TEL、FAX、営業時間、定休日、E-Mail」がありますが、フッターウィジェットには簡易情報として「住所、TEL、営業時間、定休日」だけが抜粋されます。もちろん、もともと表示させる必要ないものは空欄にしておけばその項目自体が非表示になります。

配送方法について

配送方法はお店によって様々です。すべての送料条件を分かりやすく説明した文章原稿を用意して「【送料案内】説明本文」にペーストしてください。

決済方法の表示について

決済方法についても、BASEかんたん決済の申請内容と連動するわけではなく、サイト上に案内として表示するためにのものです。BASEかんたん決済で申請後、実際に利用可能な決済方法を「ON」にしてください。クレジット決済についてはAboutページとフッターウィジェット双方に銘柄ロゴが表示されます。

各決済に対応する対応銘柄ロゴはテーマに組み込まれてますが、将来的にもし変更があった場合はテーマアップデートにてロゴ画像に対応していきますのでご安心ください。

クレジット決済についてのみ、利用者さまですぐ変更対応して頂けるように銘柄ごとにロゴ表示が「ON/OFF」ができるようになっています。 BASEの設定で銘柄ごとに利用可否を決められる訳ではありませんので、クレジット決済が「ON」であればすべての銘柄を「ON」にしておいてください。(2019年6月時点:VISA、Master、AMEX、JCB)

例えば、将来的に1つの銘柄が除外されればそれを「OFF」に、もし新たな銘柄が利用可能になった場合はテーマアップデートにて新銘柄を追加します。

なるほど!本来は商品をカートに入れて、購入手続きに進まないと決済方法が分からないけど、これなら最初に分かりやすく表示できるね!

BASEではすぐにいろんな決済が導入できるのがいいよね。そうでなければ、クレジットもコンビニもそれぞれに決済代行会社と契約して書類申請、審査があって、とっても大変なんだよね。

GoogleMap埋め込み機能

Aboutページには、実店舗がある際などにアクセス案内としてGoogleMapを表示できます。

GoogleMapで正確な場所を指定するには、文字としての「住所」ではズレがあることがあります。そのため、実際にGoogleMap上で正確な場所を指定した状態で、埋め込みコードを取得します。

  1. GoogleMapを開く → google.co.jp/maps
  2. 指定したい場所、拡大状態を表示する
  3. 左の場所詳細から「共有」をクリック
  4. 「地図を埋込む」をクリック
  5. 「サイズ大」を選択
  6. 「HTMLをコピー」をクリック
  7. BASEのデザイン編集画面に戻り、「GoogleMap埋め込みコード」にペースト
  8. デザイン設定を「保存」

Aboutページを表示して、地図が正確かどうか確認してください。

実店舗がある場合は、アクセスマップが表示できるととてもいいよね!店舗ではなくても事務所の所在地が案内されてるだけで、とても信頼感が出るよ!

フッターウィジェットの設定

Aboutページの拡張情報が自動的にフッターウィジェットに出ているから、ここではそれを微調整するんだね。

まず「【ウィジェット】ウィジェットエリアON/OFF」で、フッターウィジェットを利用するかどうかを決められます。まるごと非表示にすることも可能です。

次に、(1)ウィジェットごとに表示するかどうか、また(2)送料については簡易的な案内を入力します。

「送料がいくらか」とか「どうやって支払えるか」がパッと分かるって、買おうか迷っている人にとってとても大事なんだよね。

ブロックごとに表示非表示が設定できるけど、左右は固定だから場合によっては左右でバランスが取れなくなるかもしれない。 そんなときのために、左右にそれぞれ「画像バナー」や「テキストバナー」を貼れるようになっているよ。それを工夫して活用しよう!

最下部フッターのショップ紹介表示

サイトの最下部フッターの左には、ショップロゴが表示され、その下にショップ紹介文が表示されます。

もし紹介文が長文で、バランスが良くない場合は「【フッター】ロゴ下の紹介文表示 ON/OFF」をOFFにすることもできます。


サイト全体に共通するカスタマイズ (高度な設定)

高機能スマホナビ

スマホ画面でのナビゲーションは左から画面全体をスライドさせて表示する「高機能スマホナビ」がデフォルトになっています。シンプルにカテゴリー項目が並んでいるだけの「シンプルナビ」も選択できます。

「高機能スマホナビ」は背景色を黒か白から選択できます。

独自のOGP画像を追加

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

アップロードした画像は商品ページ以外のOGP候補として追加されます。商品ページでは引き続き商品画像が利用されます。

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

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


独自スタイルシート

デザイン編集画面の項目として、独自スタイルシートを入力できます。入力したCSSは継承の最終指定として上書きされます。

ここに入力するメリットは、「デザイン編集の設定値」として別保管されるため、テーマがアップデートされてもそのまま適用されることです。組み込みスタイルシートの中には「!important」を指定しているものもあります。ディベロッパーツールなどを利用して検証してください。

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

BASE Design Info

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

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

BASE DESIGN MARKET