特徴

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

弊社、株式会社SHARESL(シェアスル)がデザインしたECサイトテーマ「FITNESS」がBASEデザインマーケットにて販売開始となりました。 ジムやフィットネスをテーマにデザインを起こしたクールで無機質な印象のBASEデザインテーマです。 ¥6,250で購入できてお求めやすくなっています。 無駄な装飾がほとんどないシンプルなデザインなので、どなたでも使いやすいテーマです。
以前発売をしたデザインテーマ「camera」「Vegetable」「MQ(エムキュー)」「PREMIUM TOKYO(プレミアムトーキョー)」と合わせてこれで5つ目のデザインテーマとなりました。 それぞれ違った魅力のあるテーマなので合わせてご覧ください。

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

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

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

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

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

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

デモサイト

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

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

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

使い方

ロゴ画像・背景

ロゴ画像を変更できます

画像を使用する

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

背景を変更できます

画像を使用する

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

背景色を指定できます。

ロゴのレイアウトを変更できます

ヘッダー:レイアウト

「デフォルト」「ロゴを上にする」が選べます。
ロゴを上にした場合は、ロゴの下にナビゲーションが置かれるレイアウトになります。
ロゴのサイズが極端に横長の場合や、テキストロゴの文言が長くなっていびつになってしまう場合に使ってみると良いと思います。

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

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

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

※ロゴに画像を使用する場合は「ロゴ:テキストロゴをカスタマイズする」はオフにしてください

PC ロゴ画像サイズ(ヘッダー/フッター)

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

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

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

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

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

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

※※ロゴにテキストを使用する場合は「ロゴ:画像サイズを調整する」はオフにしてください

フォントを選ぶ

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

ヘッダーロゴ:文字サイズ(PC/スマホ)

ヘッダーロゴのサイズを5段階で変更できます。 PC・スマホで別々に設定できます。

フッターロゴ:文字サイズ(PC/スマホ)

フッターロゴのサイズを5段階で変更できます。 PC・スマホで別々に設定できます。

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

ロゴを表示する

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

テーマカラー

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

テキストカラー

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

ポイントカラー

主にテキストリンクの色を設定できます。設定しない場合は値を空にするとデフォルトの#ff431eになります。 ブログやショップ説明などの平文ではリンク色として、ヘッダー・フッターやBLOG一覧・商品一覧などではリンクのマウスホバー色として設定されます。 お問い合わせの必須タグもこちらの色が設定されます。

その他各パーツを細かく色変更できます

スマホ:メニュー背景色

スマホで表示した際に左上ハンバーガーボタンをタップすると出てくるメニューの背景色を変更できます。

スマホ:メニュー文字色

スマホで表示した際に左上ハンバーガーボタンをタップすると出てくるメニューの文字色を変更できます。

TOP:ブログ固定記事 背景色

Blog Appを使用する際に、「この記事を固定にする」にチェックを入れると各記事リストの先頭に固定記事が表示され、TOPページのメイン画像下にテキストリンクで記事が固定表示されます。メイン画像がない場合は最上部になります。その際の表示エリアの背景色を変更できます。

TOP:ブログ固定記事 文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

セール価格:文字色

セールAppで商品を割引した際に、セール価格の文字色を変更できます。

割引タグ:背景色

セールAppで商品を割引した際に、商品一覧で「10%OFF」などの割引タグがつきますが、その背景色を変更できます。 また、割引金額の文字色もこちらの色が設定されます。

割引タグ:文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

SOLD OUTタグ:背景色

商品の販売終了時や売り切れの際は、商品一覧で「SOLD OUT」のタグがつきますが、その背景色を変更できます。

SOLD OUTタグ:文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

予約商品タグ:背景色

予約販売Appを使用時に、商品一覧で「予約商品」のタグがつきますが、その背景色を変更できます。

予約商品タグ:文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

COMING SOONタグ:背景色

販売期間設定Appを使用時に、商品一覧で販売前の商品については「COMING SOON」のタグがつきますが、その背景色を変更できます。

COMING SOONタグ:文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

VIEW MORE:ボタン背景色

商品一覧を追加で読み込む際のボタンの背景色を設定できます。

VIEW MORE:ボタン文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

BLOG:背景色

Blog Appを使用する際に「BLOG」エリアが表示されますが、その背景色を変更できます。

BLOG:文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

下層ページ:見出し背景色

TOPページ以外のページで使われている帯状の見出しの背景色を変更できます。

下層ページ:見出し文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

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

お問い合わせページのボタンの背景色を変更できます。

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

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

商品詳細:カートに入れるボタン 背景色

商品詳細ページのカートに入れるボタンの背景色を変更できます。

商品詳細:カートに入れるボタン 文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

商品詳細:関連商品 背景色

関連商品エリアの背景色を変更できます。

商品詳細:関連商品 文字色

上記、背景色を変更した際に視認性を保つために文字色も変更できます。

フォント

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

フォントを変更する

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

フォントを選ぶ

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

TOPページ

メイン画像を設定できます

TOP:メインビジュアルを表示

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

PC画像

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

スマホ画像

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

画像の説明

画像の説明を入力します。直接画面には表示されませんが、画像検索や画像がなんらかの理由で表示されない時、音声ブラウザなどでこの説明が利用されます。

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

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

❶~❸ 画像

商品画像を設定します。
推奨サイズは横750 × 縦720(px)です

❶~❸ 商品名

商品名を入力します。

❶~❸ 商品価格

商品価格を入力します。

❶~❸ セール価格

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

❶~❸ リンク先URL

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

❶~❸ ボタンテキスト

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

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

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

サイト概要を表示できます

TOPページに画像・タイトル・文章の簡単なサイト概要コンテンツを掲載できます

画像

概要と一緒に掲載できる画像です。
推奨サイズは横660× 縦450(px)です。

タイトル

概要文の見出しになります。

概要

サイトの概要をここに書きます。

フリービジュアルを掲載できます

TOP:フリービジュアルを表示

TOPページ商品一覧の直ぐ真上に画像を置くことができます。オンにすると表示します。オフにすると非表示になります。デフォルトは非表示です。

画像

掲載する画像をアップロードできます。 推奨サイズは横1440× 縦630(px)以上~です。 あまり縦横の比率が違いすぎると自動でトリミングされてしまいますのでなるべく推奨サイズに合わせた方が綺麗に収まります。

BLOGリストをTOPページに表示できます

Blog Appの記事を「BLOG」としてTOPページに表示できます。

BLOGリストを表示

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

最大記事数

表示する記事数の最大値を3~6で設定できます。

ABOUTページ

メイン画像

メイン画像を表示

オンにするとメイン画像を表示、オフにすると非表示にします。デフォルトは表示します。

メイン画像

画面をアップロードできます。 推奨サイズは横2880×縦1140(px)です。

画像タイトル

画像に重なっている見出しの文言を変更できます。
デフォルトは「About」となっています。

フォントを選ぶ

画像タイトルに使うフォントを欧文フォント11種類、和文フォント7種類の中から選べます。 デフォルトは「Kaushan Script」です。

コンセプトエリア

BASE管理画面で設定している「ショップの説明」が表示されるエリアです。

❶~❹ 画像

PCではショップ説明の右側、スマホではショップ説明の上に4枚までイメージ画像を設置できます。
ショップの外観など掲載したい画像がある場合にお使いください
画像の推奨サイズは横600×縦400(px)です。 空にすると非表示になります。

コンセプトタイトル

文章に見出しをつけることができます。デフォルトは「Concept」となっています。

フリースペースエリア

ショップの説明の下にフリースペースを設けています。
自由にテキストを追加できます。

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>の形式で入力すると新規ウィンドウで開くリンクになります。

その他の機能

フッターのSNSアイコンを白にできます

背景色を変更した場合に視認性が悪くなる場合がありますので、その際にお使いください。

YouTube動画を埋め込むことができます

お問い合わせ以外の全ページの下部に動画を置くことができます。

YouTube埋め込み動画を表示

オンにするとYouTube動画エリアを表示、オフにすると非表示にします。デフォルトは非表示です。

埋め込みコードを入力

YouTubeで「共有」=>「埋め込む」でiframeの埋め込みコードをコピーしてきてここにそのまま貼り付けると表示されます。

CTAエリアを設置できます

タイトル・メッセージ・リンク・背景画像でできるCTA(Call To Action)エリアを設置できます。

CTAエリアを表示

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

タイトル

下に置くリンクを押してもらえるようなキャッチコピーやロゴなどのタイトル文字を入れることができます。

タイトル:フォントを選ぶ

タイトルのフォントを欧文フォント11種類、和文フォント7種類の中から選べます。

メッセージ

下に置くリンクを押してもらえるようなメッセージを入力します。

リンクURL

導線としておきたいリンクのURLを設定できます。

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

リンクを新規ウィンドウで開くようにする場合にオンにします。デフォルトはオフです。

ボタンテキスト

ボタンの文言を変更できます。
デフォルトは「CONTACT US」となっています。

ボタン背景色

ボタンの背景色を変更できます。

ボタン文字色

ボタンの文字色を変更できます。

背景画像

背景画像を設定できます。
推奨サイズは横2880×縦1080(px)です。文字を目立たせるために自動的に黒フィルターがかかるような設定になっています。

商品詳細ページでフリースペースが使えます

商品詳細:詳細テキスト フリースペース

商品情報の下にフリースペースを設けています。
自由にテキストを追加できます。
送料や注意事項など一括で商品ページすべてに掲載しておきたい情報などがあればお使いください。

商品詳細ページで関連商品の表示・非表示を変更できます

商品詳細:関連商品を表示

オンにすると表示、オフにすると非表示にします。
デフォルトは表示します。

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

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

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

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

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

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

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

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

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

その他

対応するAppsについて

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

よくある質問

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

ロゴ
縦最大150px
横最大300px
推奨サイズ127×36(参考)
※ヘッダーレイアウトがデフォルトの時
デザイン上、小さめのロゴの方がピッタリはまります。縦長のロゴはヘッダーのサイズを超えると自動的に縮小されてロゴが見えにくくなってしまいます。 できるだけ推奨サイズに近いアスペクト比(縦横の比率)のものを設定することをオススメします。

TOPメイン画像 PC
通常:横1440×縦750(px) Retinaディスプレイ対応:横2880 × 縦1500(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

TOPメイン画像 スマホ
横750 × 縦600(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

ピックアップ画像
横750 × 縦720(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

フリービジュアル
横1440× 縦630(px)以上
Retinaディスプレイ対応:横2880 × 縦1260(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

CTAエリア背景
横2880×縦1080(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

ABOUTメイン画像
通常:横1440×縦570(px)
Retinaディスプレイ対応:縦2880×縦1140(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

ABOUTコンテンツ画像
横600×縦400(px)
※BASEでアップロード サイズに1MBの制限がありますので、サイズが大きくなりすぎる場合は画像圧縮などのツールで対応してください。

入力しても反映されないのですが・・・
それぞれブロックごとに「表示する」項目を設け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サイトを運用したい企業様は気軽にご相談ください。

お問い合わせ先はこちら