特徴

BASEデザインマーケットにて販売中

弊社、株式会社SHARESL(シェアスル)がデザインしたECサイトテーマ「PREMIUM TOKYO」がBASEデザインマーケットにて販売開始となりました。
ワインをテーマにデモデザインを起こしたラグジュアリーな印象のテーマですが¥7,500で購入できてお求めやすくなっています。 ワインなどの高級嗜好品や、例えば一点物の手作り雑貨・アクセサリーなどを販売するのにもぴったりだと思います。

弊社の開発者ブログにておすすめポイントやカスタマイズの注意点を書かせていただきましたので良ければこちらもご覧ください。↓
BASEデザインテーマ第4弾「PREMIUM TOKYO」販売開始!|notes by SHARESL

以前発売をしたデザインテーマ「camera」「Vegetable」「MQ(エムキュー)」と合わせてこれで4つ目のデザインテーマとなりました。それぞれ違った魅力のあるテーマなので合わせてご覧ください。

複数デバイスに対応するレスポンシブデザイン

レスポンシブデザインでスマホ・タブレット・PCまで、あらゆるデバイスで綺麗に表示され、使いやすいテーマとなっています。

※下記はサンプル画像のため実際の色味やアイコンなどに多少違いがあります。
実際の見た目は、BASEへ会員登録した後にBASEデザインマーケットの購入ページからプレビュー機能を使ってご確認ください。

【主なPCでのレイアウト】
PCレイアウト例
【主なスマホでのレイアウト】
スマホレイアウト例

広範囲でデザインのカスタマイズが可能

BASEの管理画面上で様々なカスタマイズが可能です。
さらに自由なカスタマイズを希望の場合、弊社ではBASEのAPI利用の許認可を取得しているため、より自由にデザインされたECサイトの構築が可能です。気軽にご相談ください。

デモサイト

デザインの雰囲気をご確認いただけるデモサイトをご用意しました。

※あくまで見た目・デザイン確認用のデモサイトです。足りないページやコンテンツがあったり、タイトルボタンを押せなかったり、意図したページに遷移できなかったり、購入画面に進めなかったりしますがミスではなく意図的なものです。 必要なページのデザインのみが確認できる状態にしています。 あらかじめご了承ください。

実際のテーマ表示に関してはBASEデザインマーケットで購入画面から「プレビュー」機能が使えます。そちらは実際にデザイン編集画面を触ることができます。好きな画像を入れたりテキストを入力したりできますのでさらに詳細に確認したい場合はそちらをお使いください。

使い方

ロゴ画像・背景

ロゴ画像を変更できます

画像を使用する

オンにすることでロゴを任意の画像に変更できます。オフにすると「テキストロゴ」となり、任意のテキストを入力できます。

背景を変更できます

画像を使用する

オンにすると背景に画像を配置できます。背景を繰り返すかどうかも選択できます。

背景色を指定できます。(メニューの色は別で指定できます)

ロゴ画像のサイズを調整できます

ロゴ:画像サイズを調整する

チェックを入れるとその下の「PC ロゴ画像サイズ」「スマホ ロゴ画像サイズ」を変更できます。チェックを外すとデフォルトのサイズになります。

PC ロゴ画像サイズ

PC表示時のロゴの横幅のサイズを10~100%の間で10%刻みので指定できます。100%にしてもナビゲーションなどに被らないように上限はあらかじめ設定されていますので、主に縮小にお使いください。ヘッダー・フッターどちらのロゴも同じサイズになります。

スマホ ロゴ画像サイズ

スマホ表示時のロゴの横幅のサイズを10~100%の間で10%刻みで指定できます。100%にしてもナビゲーションなどに被らないように上限はあらかじめ設定されていますので、主に縮小にお使いください。ヘッダー・フッターどちらのロゴも同じサイズになります。

テキストロゴをカスタマイズできます

ロゴ:テキストロゴをカスタマイズする

チェックを入れるとその下の「フォントを選ぶ」「ヘッダーロゴ:文字サイズ」「フッターロゴ:文字サイズ」を変更できます。チェックを外すとデフォルトのゴシック体になります。

フォントを選ぶ

欧文フォント10種類、和文フォント7種類の中から選べます。

ヘッダーロゴ:文字サイズ

ヘッダーロゴのサイズを5段階で変更できます。

フッターロゴ:文字サイズ

フッターロゴのサイズを5段階で変更できます。

フッターロゴを表示・非表示にできます

ロゴを表示する

オンにすると表示、オフにすると非表示にします。デフォルトは表示するようになっています。

テーマカラー

サイトの配色を一括で設定できます。
ポイントは文字の視認性を保つことです。 背景色を変えた場合は文字も見やすい色に変えておきましょう。

サイドメニュー・見出し:背景色

サイドメニュー(スマホの場合は≡ボタンをタップすると出てくるメニュー)の背景色と、「NEW ITEMS」「NEWS」などの見出しの背景色を変更できます。設定しない場合は値を空にするとデフォルトの#efefebになります。

サイドメニュー・見出し:文字色

サイドメニュー(スマホの場合は≡ボタンをタップすると出てくるメニュー)の文字色と、「NEW ITEMS」「NEWS」などの見出しの文字色を変更できます。設定しない場合は値を空にするとデフォルトの#000000になります。

テキストカラー

全体のテキストカラーを一括で設定できます。デフォルトで黒系の色味になっていますが、背景色を変えて視認性が悪くなった時に調整用としてお使いください。

リンクカラー

テキストリンクの色を設定できます。設定しない場合は値を空にするとデフォルトの#980505になります。

ポイントカラー:ボタン背景などの装飾部分背景

ボタンや装飾のために使われている枠線・タグなどの背景色を一括で設定できます。設定しない場合は値を空にするとデフォルトの色味になります。

ポイントテキストカラー

ボタンなどポイントカラーが背景に使われている部分の文字色を設定できます。設定しない場合は値を空にするとデフォルトの#ffffffになります。ポイントカラーを変更して視認性が悪くなった場合にこちらで調整してください。

セールカラー

SALE商品の価格文字色や割引タグの背景色を一括で設定できます。設定しない場合は値を空にするとデフォルトの#980505になります。

セールタグテキストカラー

割引タグの文字色を一括で設定できます。設定しない場合は値を空にするとデフォルトの#ffffffになります。セールカラーを変更して視認性が悪くなった場合にこちらで調整してください。

フォント

文字の字体を一括で変更できます。
明朝体を選ぶと高級感が、丸ゴシックを選ぶと温かみが出ます。 サイトの雰囲気に合わせて変えみてください。

フォントを変更する

オンにすると全体のテキスト部分のフォントを変更できます。オフの場合はデフォルトで「Noto Serif JP」という明朝体のフォントになります

フォントを選ぶ

フォントを選べます。このテーマは日本語のみの対応になっているので、7種類の和文フォントから選べます。

クーポンコード表示機能

クーポンAppで発行したクーポンコードを掲載できる機能です。
クーポンコードだけでなく、キャッチコピーを入れてキャンペーンの告知バナーとしても使えます。 全ページヘッダー直下に配置できるのでキャンペーンバナーとしてお使いください。

クーポンバナーを表示する

クーポンAppでクーポンコードを発行した際にそのコードを掲載するエリアです。オンにするとヘッダー直下にクーポンコードを表示するバナーを表示できます。デフォルトはオフ(非表示)になっています。

クーポンバナーに画像を使う

オンにするとバナーにご自身で用意した画像をお使いいただけます。デフォルトはオフです。

クーポン画像(PC)

PC表示時にクーポンバナーに使う画像を設定できます。推奨サイズは横1440×縦75(px)です。

クーポン画像(スマホ)

スマホ表示時にクーポンバナーに使う画像を設定できます。推奨サイズは横750×縦90(px)です。

背景色

透過PNG画像やバナー画像の両端からはみ出した部分の背景色を設定できます。

※推奨サイズは少し小さめのバナーになるので、フォントのサイズ感などはデザイン能力がないと調整が難しくなります。初心者の方は画像よりも下記のテキスト形式がオススメです。テキストの方がクーポンコードのコピー等も便利です。

クーポンバナー(テキスト形式)のカスタマイズ

キャッチコピー

クーポン内容を簡単に掲載できます。「50% OFF COUPON CODE !」など20文字前後が推奨です。

クーポンコード

クーポンAppを使うと発行されるクーポンコードをここに掲載します。入力が空の場合は表示しません。

文字色

キャッチコピー・コードの文字色を変更できます。

背景色

バナーの背景色を設定できます。

キャッチコピーのフォントを選ぶ

欧文フォント10種類、和文フォント7種類の中から選べます。

PC キャッチコピー文字サイズ

PC表示時のキャッチコピーの文字サイズを5段階で設定できます。

スマホ キャッチコピー文字サイズ

スマホ表示時のキャッチコピーの文字サイズを5段階で設定できます。

バナー表示機能

バナーを表示

オンにするとバナーエリアを表示します。オフにすると非表示になります。最大6枚まで表示できます

❶~❻ 画像

バナー画像を設定できます。推奨サイズは横700×縦300(px)です。必ずしも推奨サイズに合わせる必要はありませんが、複数設置する場合は全て同じサイズで作成することをオススメします。

❶~❻ リンク

バナーのリンク先URLを設定できます。空欄にするとリンクは付きません。

❶~❻ 画像の説明(alt)

画像の説明をalt属性に付与します。

❶~❻ リンクを新しいタブで開く

リンクを設定してオンにした場合、そのリンクを新規ウィンドウで開きます。デフォルトはオフです。

TOPページ

メイン画像にスライドを設定できます

4枚まで設定できます。画像が1枚の場合はスライドせずに1枚のメイン画像として表示されます。

TOPページ:スライドを表示

オンにするとTOPページにスライドを表示できます。オフにすると非表示になります。

①~④ PC画像

PC用の画像を設定できます。推奨サイズは横2480×縦1196(px)です。

①~④ スマホ画像

スマホ用の画像を設定できます。設置しない場合はPC用の画像が表示されます。推奨サイズは横750×縦1094(px)です。

①~④ 画像の説明

画像の説明を入力します。リンクがある場合にPC環境でマウスを乗せると画像の下に表示されます。

①~④ リンク

各スライドにリンクを設定できます。空欄の場合はリンクなしとなります。

①~④ リンクを新規ウィンドウで開く

リンクがある場合にリンク先を新規ウィンドウで開きます。

ピックアップエリアを設定できます

任意の商品を1つ、PICK UPとしてメインコンテンツの上部に表示させることができます。

画像

商品画像を設定します。

商品名

商品名を入力します。

商品価格

商品価格を入力します。

セール価格

商品の割引後の価格を設定できます。なければ上の商品価格が表示されます。

リンク先URL

リンクをつける場合にURLを設定できます。なければボタンが非表示になります。

ボタンテキスト

ボタンの文言を変更できます。デフォルトは「SHOP NOW」としています。

リンクを新しいタブで開く

リンクを新規ウィンドウで開く設定にする場合にこちらをオンにします。

最大4件まで簡単なお知らせ(NEWS)を表示できます

NEWSを表示

オンにするとNEWSエリアを表示します。オフにすると非表示になります。デフォルトは非表示です。

❶~❹ 日時

NEWSの更新日時をテキストで入力します。

❶~❹ 詳細

NEWSの詳細をテキストで入力します。

❶~❹ リンク先URL

NEWSにリンクを付けたい場合にこちらにURLを入力します。

❶~❹ リンクを新しいタブで開く

リンクを新規ウィンドウで開く設定にする場合にこちらをオンにします。

商品一覧の表示・非表示を設定できます

商品一覧を表示

オンにすると商品一覧を表示します。オフにすると非表示になります。デフォルトは表示します。

ブログリストを表示できます。

ブログリストを表示

オンにするとブログリストエリアを表示します。オフにすると非表示になります。デフォルトは非表示です。

最大記事数

表示する記事数の上限を6件・12件のどちらかに変更できます。

ABOUTページ

メイン画像

メイン画像を表示

オンにするとメイン画像を表示、オフにすると非表示にします。パンくずナビゲーションは残ります。デフォルトはオンです。

メイン画像

画面上部、タイトル部分の背景に画像を設置できます。文字の視認性を保つために自動的に画像の明度が暗めになります。推奨サイズは縦1440×縦675(px)です。Retinaディスプレイ対応の場合は2倍のサイズをご用意ください。

コンセプト

ショップのコンセプト情報をテキストで表示できます。

コンセプトを表示

オンにすると表示・オフにすると非表示になります。デフォルトは非表示です。

キャッチコピー

コンセプトコンテンツのキャッチコピー(見出し)を設定できます。

コンセプト概要

コンセプトの具体的な内容をテキストで設定できます。

リンク先URL

リンク先を入力するとコンセプト直下にボタンが表示されるので、公式サイトなどへの導線としてお使いいただけます。

リンクテキスト

リンクボタンのテキストを変更できます。デフォルトは「OFFICIAL SITE」となっています。

ショップ情報

ショップの詳細な情報を追加できます。ショップ名や、BASE管理画面「ショップ設定」内の「ショップの説明」に設定している内容もここに表示されますが、その他住所やメールアドレスなど掲載したい場合に追加できます。

住所

住所を掲載できます。

電話番号

電話番号を掲載できます。

FAX

FAX番号を掲載できます。

営業時間

営業時間を掲載できます。

定休日

定休日を掲載できます。

メールアドレス

連絡先としてメールアドレスを掲載できます。

Webサイト

公式サイトや関連サイトなどがある場合は1サイトのみここに掲載できます。

FAQを表示できます

FAQコンテンツを最大10個まで追加できます

FAQを表示

オンにするとABOUTページ下にFAQブロックを表示させます。オフにすると非表示になります。

❶〜➓ FAQ:質問[1~10]

質問内容をテキストで入力します。

❶〜➓ FAQ:答え[1~10]

質問内容の答えをテキストで入力します。リンクを入れたい場合はhtmlを使用します。<a href="リンク先URL">リンクにするテキスト</a>の形式で入力するとリンクになります。<a href="リンク先URL" target="_blank" rel="noopener">リンクにするテキスト</a>の形式で入力すると新規ウィンドウで開くリンクになります。

その他の機能

商品一覧・ブログ一覧ページ

メイン画像を表示

オンにするとメイン画像を表示、オフにすると非表示にします。パンくずナビゲーションは残ります。デフォルトはオンです。

メイン画像

画面上部、タイトル部分の背景に画像を設置できます。文字の視認性を保つために自動的に画像の明度が暗めになります。推奨サイズは縦1440×縦675(px)です。Retinaディスプレイ対応の場合は2倍のサイズをご用意ください。

商品詳細ページ

関連商品を表示

オンにすると表示、オフにすると非表示にします。デフォルトは表示するようになっています。

ラベルAppについて

セール商品はデフォルトで商品名の上にSALEとタグが付くデザインなので、ラベルAppはSALE以外を使うことをおすすめします。

ウィジェット

ウィジェットを表示

PC・タブレット表示時の右側画面固定の検索ボックス・SNSシェアボタンのウィジェットの表示をオン・オフで切り替えられます。

独自のスタイルシートを追加できます

独自のスタイルシートを追加する【上級者向け】

こちらにCSSを貼り付けるとstyleタグが追加され、CSSを上書きできます。独自拡張になりますので上級者向けです。意味がわかる方のみご使用ください。

こちらで用意しているCSSファイルの詳細についての質問には、お問い合わせいただいても細かくお答えできかねます。上書きする場合は確かな知識をお持ちの方が自己責任でお願いいたします。

Blog App「この記事を固定する」機能対応

Blog Appを使用して記事を投稿する際、「この記事を固定にする」にチェックを入れると各記事リストの先頭に固定記事が表示され、TOPページのスライドの下にテキストリンクで記事が固定表示されます。スライドがない場合は最上部になります。

スマートフォン用のテーマ切り替え設定

スマートフォン用のデフォルトテーマを使用する

BASE側で用意されているデフォルトのスマートフォン用テーマを使う設定です。
「PREMIUM TOKYO」においてはレスポンシブ対応しておりますので、こちらはチェックを外すことをオススメします。

その他

対応するAppsについて

BlogApp ◯ 対応しています
カテゴリ管理App ◯ 対応しています
商品検索App ◯ 対応しています
レビューApp ◯ 対応しています
セールApp ◯ 対応しています
ショップコインApp ◯ 対応しています
販売期間設定App ◯ 対応しています
予約販売App ◯ 対応しています
英語・外貨対応App × 対応していません
デジタルコンテンツApp ◯ 対応しています
メッセージApp ◯ 対応しています
送料詳細設定App ◯ 対応しています
商品説明カスタムApp ◯ 対応しています
抽選販売App ◯ 対応しています

よくある質問

BASEアプリで意図しない表示になってしまいます。
【非常によくお問い合わせいただくご質問です】

デザインテンプレートはあくまでもWEBサイト専用です。
SafariやGoogleなどのWEBブラウザで表示されるものにしか反映されません。
BASEアプリは「アプリ」ですので専用のデザインが反映される仕様となっている様です。
詳しくは下記URL、BASE公式サイトのショップヘルプページをご確認ください。

→有料テーマのデザインはアプリ(購入用)に反映されますか?
PCでは反映されますが、スマホではデザイン編集が反映されません
【非常によくお問い合わせいただくご質問です】

スマホのテーマがBASEで用意されているデフォルトのものになっている可能性があります。
まずはデザイン編集からデフォルトのモバイルテーマを使用をオフになっているかご確認ください。BASEの仕様上、こちらの設定をオフにしていただかないと購入したデザインはスマホ表示に反映されません。
HTMLやCSSの知識は必要ですか?
特に必要ありません。
最適化されたテーマとなっていますので、デザイン編集画面で画像やカラー・テキスト入力などの各項目を埋めていくだけで作成できます。
知識がある方はHTML編集Appからカスタマイズ可能ですが、その際のCSSの書き方やデザイン調整のサポートは無償ではお受けできませんので予めご了承下さい。
メイン画像に動画の埋め込みはできますか?
恐れ入りますが、こちらのテーマでは動画の埋め込みには対応しておりません。
スマホとPCどちらからでも使えますか?
レスポンシブデザインに対応しておりますので、どちらからでも問題なくご利用いただけます。ただしスマホのデザインを適用するには、デザイン編集から「デフォルトのモバイルテーマを使用」をオフに設定してください。オンにしているとBASE側で用意されているデフォルトのテーマが表示されます。
設定する画像の推奨サイズを教えて下さい。

ロゴ
縦最大75px
横最大730px
推奨サイズ200×17(参考)

デザイン上、横長のロゴの方がピッタリはまります。縦長のロゴはヘッダーのサイズを超えると自動的に縮小されてロゴが見えにくくなってしまいます。 できるだけ推奨サイズに近いアスペクト比(縦横の比率)のものを設定することをオススメします。

TOPスライド画像 PC
通常:横1240×縦598(px) Retinaディスプレイ対応:横2480×縦1196(px)

TOPスライド画像 スマホ
横750×縦1094(px)

ABOUT・BLOG・商品一覧:メイン画像
通常:縦1440×縦675(px)
Retinaディスプレイ対応:縦2880×縦1350(px)

入力しても反映されないのですが・・・
それぞれブロックごとに「表示する」項目を設けON・OFFで表示・非表示を切り替えられるようになっています。まずは該当のブロックが「表示する」になっているかご確認ください。また、表示させたいブロックによっては必須の項目がございます。例えば店舗情報ブロックでは店舗名が空の場合は表示されない仕様となっていますので、表示させたいブロックをお使いになる際はなるべく項目を全て埋めてください。
テーマを少しだけ変更したいのですが、お願いできますか?
BASEの厳しい審査を通しているテーマのため、基本的にはこちらの設計ミスやバグ以外での修正やカスタマイズに関しては有償(先払い、1万円〜)でお受けいたします。そのためカスタマイズを希望する方で、ある程度CSSの予備知識がある方は「独自のスタイルシートを追加する」からスタイルシートを上書きできますのでそちらをまず試してみることをオススメします。

もちろん、ミスに関わらずアップデートした方が良い変更に関しては追加機能として実装し直してBASEに再申請いたします。お問い合わせに料金はかかりません。
お問い合わせいただいた際にもしも有償となった場合でもお見積もりまでは無料です。 また簡単なアドバイスのみであれば無料で解決できる場合もございますので、何かご質問・ご相談がある場合はまずは遠慮なく弊社までお問い合わせください。
テーマ内にあるものと別のフォントを使いたいのですが、他のフォントを増やせますか?
今後、多数のリクエストがあれば増やす可能性はございますが、基本的にはこれ以上増やすことは考えておりません。このテーマのフォントに関しては「Google Fonts」で無料で提供されているWebフォントを使って読み込んでいます。個人的に他のフォントを使いたいという方は「独自のスタイルシートを追加する」を使い、CSSで読み込むことのできる「Google Fonts」のようなサービスをお使いください。

Webフォントとして有償のフォントを使用したカスタマイズをご希望の方は、弊社でフォント使用のライセンス料を肩代わりして支払う、といったことはできかねます。該当のフォントが使えるサービスをご自身で契約していただくことが前提となりますのでご注意ください。

お問い合わせ情報

制作者 株式会社SHARESL
WEBサイト https://sharesl.net/
主な業務 WEB制作/自社サービスの開発・運営
問い合わせ先

弊社ではBASEのAPI利用の許認可を取得しているため、自由にカスタマイズしたECサイトの構築も可能です。
Amazonや楽天、ZOZOTOWNなど、他社が提供するECプラットフォームに出品するだけでなく、自社の独自ドメインでECサイトを運用したい企業様は気軽にご相談ください。

お問い合わせ先はこちら

アップデート履歴

2020/01
商品詳細ページ 商品の種類を増やすと数量選択セレクトが増えてしまうバグに対応
2020/04

商品説明カスタムAppに対応しました。

抽選販売Appに対応しました。