特徴

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

弊社、株式会社SHARESL(シェアスル)がデザインしたECサイトテーマ「MQ(エムキュー)」がBASEデザインマーケットにて販売開始となりました。コスメをテーマにデモデザインを起こした高級なイメージのあるテーマですが¥5,000で購入できてお求めやすくなっています。化粧品だけでなく、どのような商品も高級感のあるように表現ができ、例えば一点物の手作り雑貨やアクセサリーなどを販売するのにもぴったりだと思います。以前発売をしたデザインテーマ「camera」「Vegetable」と合わせてこれで3つ目のデザインテーマとなりました。それぞれ違った魅力のあるテーマなので合わせてご覧ください。

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

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

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

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

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

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

使い方

ロゴ画像・背景

ロゴ画像・背景のカスタマイズ

ロゴ画像を変更できます

画像を使用する

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

背景を変更できます

画像を使用する

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

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

ロゴのカスタマイズ

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

ヘッダー/フッター各ロゴ画像サイズ:スマホ

スマホでロゴ表示サイズを調整できます。最大サイズを100%として10%~100%の間で大きさを調整できます。

ヘッダー/フッター各ロゴ画像サイズ:PC

PCでロゴ表示サイズを調整できます。最大サイズを100%として10%~100%の間で大きさを調整できます。

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

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

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

字体

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

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

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

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

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

テーマカラー

テーマカラーのカスタマイズ

メインカラー

全体の背景色を設定できます。設定しない場合は値を空にするとデフォルトの#ffffffになります。

テキストカラー

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

リンクカラー

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

ボタンカラー:背景

ボタンに使われている背景色を設定できます。設定しない場合は値を空にするとデフォルトの#77b195になります。

ボタンカラー:文字

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

メニュー

メニューのカスタマイズ

SNSアイコンを白にする

オンにするとSNSアイコンの色を白に変更できます。オフにすると黒になります。背景色を変えて視認性が悪くなった際にお使いください。

メニューをカスタマイズする

オンにすると、この項目以下のメニューのカスタマイズが可能になります。オフにするとデフォルトになります。具体的にはオンにしていると、HOMEやABOUTなどのメニューの文言、PCの文字色・背景色、スマホの文字色・背景色をそれぞれ変更できるようになります。

スマホ:背景色

スマホで見た時のハンバーガーボタンを押して出てくるメニューの背景色を変更できます。設定しない場合は値を空にするとデフォルトの#ffffffになります。

スマホ:文字色

スマホで見た時のハンバーガーボタンを押して出てくるメニューの文字色を設定できます。設定しない場合はテーマカラーの「テキストカラー」の項目で設定した色になります。

PC:背景色

PCで見た時のサイドメニューの背景色を変更できます。設定しない場合は値を空にするとデフォルトの#ffffffになります。

PC:文字色

PCで見た時のサイドメニューの文字色を変更できます。設定しない場合はテーマカラーの「テキストカラー」の項目で設定した色になります。

各メニュー文言の変更

HOMEやABOUTといったデフォルトのページ名を任意のものに変更できます。

※カテゴリー名に関しては「カテゴリ-App」で設定した名前が反映されますのでそちらを変更してください。

スライド

スライドの設定

TOPページのメインビジュアルになるスライド画像の設定ができます。スライドは表示非表示の変更がボタン一つででき、スマホ・PC別々の画像で最大4枚設置可能です。

スライドを表示

オンにするとスライドを表示します。オフにすると非表示になります。

スライド①〜④:PC画像

PC用のスライド画像を設定できます。推奨サイズは横1520px×縦1080pxです。

※レスポンシブデザインのためディスプレイサイズによって画像がトリミングされる場合があります。

スライド①〜④:SP画像

スマホ用のスライド画像を設定できます。空にするとPC用の画像が適用されます。
PCに合わせた画像を使い回すと、画面の比率が違うので見えづらくなる場合があります。そのためスマホに最適化した画像を使うことをおすすめします。推奨サイズは推奨サイズは横750px×縦720px~です。

スライド①〜④:代替テキスト

画像のalt属性を入れることができます。音声ブラウザなど画像が表示されない場合にその画像の代替として表示・読み上げられます。

スライド①〜④:リンク

スライドにリンクを付けられます。URLを入力してください。

スライド①〜④:リンクを新規ウィンドウで開く

リンクがある場合に、そのリンクを新規ウィンドウで開くかどうかを設定できます。

商品タグ

商品タグをカスタマイズできます

TOPページ:商品一覧を表示

オンにするとTOPの商品一覧を表示します。オフにすると非表示になります。

SALEタグ:文字色

SALEタグの文字色を変更できます。周りのボーダーも一緒に変わります。設定しなければデフォルトは#e47171です。

SOLD OUTタグ:文字色

SOLD OUTタグの文字色を変更できます。周りのボーダーも一緒に変わります。設定しなければデフォルトは#555です。

COMING SOONタグ:文字色

COMING SOONタグの文字色を変更できます。周りのボーダーも一緒に変わります。設定しなければデフォルトは#77b195です。

予約商品タグ:文字色

予約商品タグの文字色を変更できます。周りのボーダーも一緒に変わります。設定しなければデフォルトは#777bb1です。

価格:文字色

価格の文字色を変更できます。設定しなければデフォルトは#e47171です。

割引タグ:文字色

割引タグの文字色を変更できます。設定しなければデフォルトは#e47171です。

NEWS

NEWSのカスタマイズ

NEWSの表示・非表示を設定できます

NEWSを表示

オンにするとNEWSを表示できます。オフにすると非表示になります。

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

❶~❹ 日時

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

❶~❹ 詳細

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

❶~❹ リンク先URL

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

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

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

BLOG

TOPページのブログリストの表示・非表示を設定できます。

ブログリストを表示

オンにするとTOPページにブログリストを表示できます。オフにすると非表示になります。

最大記事数

表示する記事数の最大値4~10記事の間で変更できます。

ABOUTページ

ABOUTページのカスタマイズ

メイン画像の表示・非表示を設定できます

メイン画像を表示

オンにするとメイン画像を表示できます。オフにすると非表示になります。

メイン画像

画像をアップロードできます。

メイン画像 代替テキスト

画像のalt属性を入れることができます。音声ブラウザなど画像が表示されない場合にその画像の代替として表示・読み上げられます。

ABOUTページのカスタマイズ

キャッチコピーをカスタマイズできます

キャッチコピー(brタグで改行)

キャッチコピーの内容をテキストで入力します。brタグを使うことで任意の位置で改行できます。

キャッチコピーを縦書きにする

オンにするとキャッチコピーを縦書きにできます。オフにすると通常に横書きになります。

ページ概要を追加できます

ABOUTページのカスタマイズ
概要

キャッチコピーの下にテキストを入力できます。brタグを使うことで任意の位置で改行できます。

ABOUTページのカスタマイズ

ショップ情報を表示できます

ショップ情報を表示

オンにすると管理画面「ショップ設定」に登録してある「ショップ名」「ショップの説明」が表示されます。オフにすると非表示になります。

FAQを表示できます

FAQを表示

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

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

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

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

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

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

商品ページ

購入ボタンのカスタマイズができます。

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

適用しているAppや在庫切れなど条件によって様々なボタンが表示されますが、そのボタンの色を任意で設定できます。

購入ボタン:文字色

「カートに入れる」「予約注文する」といったカートに追加するボタンの文字色を変更できます。設定しなければデフォルトは#ffffffです。

購入ボタン:背景色

「カートに入れる」「予約注文する」といったカートに追加するボタンの背景色を変更できます。設定しなければデフォルトは#77b195です。

再入荷ボタン:文字色

商品在庫切れの場合などに表示される「再入荷についてお問い合わせをする」ボタンの文字色を設定できます。設定しなければデフォルトは#555555です。

再入荷ボタン:背景色

商品在庫切れの場合などに表示される「再入荷についてお問い合わせをする」ボタンの背景色を設定できます。設定しなければデフォルトは#f0d3e4です。

お知らせボタン:文字色

販売期間設定Appを使っていると表示される「販売開始のお知らせを希望する」ボタンの文字色を変更できます。設定しなければデフォルトは#555555です。

お知らせボタン:背景色

販売期間設定Appを使っていると表示される「販売開始のお知らせを希望する」ボタンの背景色を変更できます。設定しなければデフォルトは#f0d3e4です。

販売開始前ボタン:文字色

「販売開始までお待ち下さい」の文字色を変更できます。設定しなければデフォルトは#77b195です。

販売開始前ボタン:背景色

「販売開始までお待ち下さい」の背景色を変更できます。設定しなければデフォルトはrgba(255,255,255,.7)です。

お問い合わせボタン:文字色

販売終了時に表示される「この商品についてお問い合わせする」ボタンの文字色を変更できます。設定しなければデフォルトは#555555です。

お問い合わせボタン:背景色

販売終了時に表示される「この商品についてお問い合わせする」ボタンの背景色を変更できます。設定しなければデフォルトは#f0d3e4です。

関連商品のカスタマイズができます。

関連商品を表示

記事詳細ページに関連商品を表示・非表示できます。

見出し

見出しの文言を変更できます。

お問い合わせページ

お問い合わせページのカスタマイズ

ラベルやボタンの色を変更できます

必須ラベル:文字色

必須ラベルの文字色を設定できます。

必須ラベル:背景色

必須ラベルの背景色を設定できます。

ボタン 文字色

「確認する」ボタンの文字色を設定できます。

ボタン 背景色

「確認する」ボタンの背景色を設定できます。

その他の機能

テキストを明朝体にできます

テキスト全体に明朝体を使う

オンにするとその下で選択した明朝体の字体がテキスト全体に適用されます。

明朝体:種類

明朝体の種類を選択します。「テキスト全体に明朝体を使う」をオンにした状態で字体を選ぶとその字体が適用されます。

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

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

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

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

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

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

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

その他

対応するAppsについて

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

よくある質問

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

ロゴ
縦最大600px
横最大364px
縦横最低100px以上
正方形や縦長推奨

デザイン上、縦長や正方形のロゴの方がピッタリはまります。高さ100px・横1000pxのような横長のロゴを置こうとすると自動的に縮小されてロゴが見えにくくなってしまいます。高さは最大600pxまで表示できるので、縦長の解像度があるロゴ画像を推奨します。

TOPスライド画像 PC
横1520px×縦1080px
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

TOPスライド画像 スマホ
横750px×縦720px~

縦は900pxぐらいの縦長になっても良いと思います。

ABOUTページ:メイン画像
横780px × 縦550px
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

入力しても反映されないのですが・・・
それぞれブロックごとに「表示する」項目を設けON・OFFで表示・非表示を切り替えられるようになっています。まずは該当のブロックが「表示する」になっているかご確認ください。また、表示させたいブロックによっては必須の項目がございます。例えば店舗情報ブロックでは店舗名が空の場合は表示されない仕様となっていますので、表示させたいブロックをお使いになる際はなるべく項目を全て埋めてください。

お問い合わせ情報

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

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

お問い合わせ先はこちら