特徴

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

弊社、株式会社SHARESL(シェアスル)がデザインしたECサイトテーマが「BASEデザインマーケット」にて 販売開始となりました。カメラをテーマにデモデザインを起こしましたが、どのような商品にも馴染むシンプルな設計となっているのでぜひご利用ください。

まずは無料ショップ開設

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

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

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

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

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

使い方

ロゴ・背景・ナビゲーション

ロゴ・背景・ナビゲーション

ロゴの変更が可能です。

「画像を使用する」のチェックを入れるとロゴを自分で用意した画像に変更できます。

「画像を使用する」のチェックを外すと、テキストロゴとして配置できます。
テキストロゴに関しては、「ロゴ:文字色」「ロゴ:字体」「ロゴ:文字サイズ」の項目からカスタマイズ可能です。「ロゴ:字体」は10種類のWebフォントから選択、文字サイズは大・中・小で指定できます。

背景の変更が可能です。

「画像を使用する」のチェックを入れると背景に画像を配置できます。
さらに、「背景画像を繰り返す」のチェックを入れると画像をリピートして配置します。「背景画像を繰り返す」のチェックを外すと背景画像が固定されます。

メニューの色を変更可能です。

「ナビゲーション」の項目でメニューの文字色を変更できます。

テキストロゴ・書体・見出し

書体

テキストロゴのカスタマイズが可能です。

基本設定の「画像を使用する」のチェックを外した場合にテキストと してロゴを設置できるようになります。その時のスタイルを調整できます。

ロゴ:文字色
ロゴテキストに色を指定できます。

ロゴ:字体
10種類の欧文Webフォントから選ぶことができます。

ロゴ:文字サイズ
小・中・大の3サイズから選択できます。

書体の変更が可能です。

テキスト部分はデフォルトはゴシック体です。

「文字に明朝体を使う」のチェックを入れると明朝体が使用できます。
チェックを入れた後に「明朝体:種類」の項目で「さわらび明朝」「はんなり明朝」「こころ明朝」の3種類から選択できます

見出しの変更が可能です。

「見出し」と書いてある項目から見出しのカスタマイズが可能です。
※文言の変更はできません

見出し:カスタマイズ
こちらにチェックを入れると見出しをカスタマイズできるようになります。
デフォルトの見出しは「見出し:文字色」で色のみ変更可能です。

見出し:字体
ロゴの字体と同じ10種類のWebフォントから指定できます。

見出し:文字サイズ
大・中・小の3パターンで指定できます。

見出し:文字色
文字の色を指定できます。何も指定しなければ#333333が入ります。

メイン画像

メイン画像

メイン画像の変更が可能です。

TOPページのメインビジュアルに使われている画像を変更できます。
スマホとPCで画面のアスペクト比が大きく変わるので、より画面に適した画像を配置できるようにPC用とスマホ用で分けられるようにしました。

TOPページ:メイン画像を表示
チェックを入れるとメイン画像エリアを表示します。
チェックを外すと非表示にします。

TOPページ:メイン画像 PC
レスポンシブデザインでのPCサイズ用の画像を指定します。

TOPページ:メイン画像 スマホ
レスポンシブデザインでスマホサイズ用の画像となります。

TOPページ:メイン画像 代替テキスト
画像の説明(alt属性に入れる文言)を設定できます。

バナー

バナー

TOPページのバナーエリアの変更が可能です。

TOPページのメインビジュアル直下にあるバナーエリアをカスタマイズできます。最大4つまで配置できます

TOPページ:バナーを表示
チェックを入れるとバナーエリアを表示します。
チェックを外すと非表示にします。

バナー[1~4]:画像
バナーに使用する画像をアップロードします。

バナー[1~4]:リンク先URL
バナー画像のリンク先を入力します。
※リンク無し・画像のみのバナーも表示できます

バナー[1~4]:リンクを新しいタブで開く
リンク先をそのままの画面で開くか、新しいタブ・ウィンドウで開くかを指定します。リンク先が外部サイトの場合などによく使われます。

バナー[1~4]:画像の代替テキスト
画像の説明(alt属性に入れる文言)を設定できます。

ピックアップ機能

ピックアップ機能

PICK UPブロックを表示・編集できます。

TOPページ・ABOUTページ・BLOGページにオススメの商品情報をスライドで最大5件まで表示できます。

PICK UPブロックを表示
チェックを入れるとPICK UPブロックを表示します。
チェックを外すと非表示にします。

PICK UPブロック[1~5]:画像
画像をアップロードできます。
※画像が空の場合は他の項目が入力されていてもスライドに追加されません。

PICK UPブロック[1~5]:商品名
商品の名称を入力できます。
※商品名が空の場合は他の項目が入力されていてもスライドに追加されません。

PICK UPブロック[1~5]:価格
商品の価格を追加できます。単位は自動で付きませんので、「¥ 2,980」「2,980円」などの形で入力することをオススメします。

PICK UPブロック[1~5]:割引表示
商品の割引表示を追加できます。「10%OFF」「いまだけ半額」などの形で入力することをオススメします。

PICK UPブロック[1~5]:商品概要
商品の説明を追加できます。文字数制限はありませんが、100文字程度がバランス良く配置できる文字数です。

PICK UPブロック[1~5]:リンク先URL
リンクを追加できます。URL追加すると「VIEW DETAIL」というリンクボタンが表示されます。

お知らせ機能

お知らせ機能

NEWSブロックを表示・編集できます。

TOPページ・CATEGORYページ・ABOUTページにNEWSブロックを追加できます。最大3件のお知らせを追加できます。

NEWSブロックを表示
チェックを入れるとNEWSブロックを表示します。
チェックを外すと非表示にします。

NEWSブロック[1~3]:タイトル
NEWSのタイトルを入力します。空の場合はこのニュースは表示されません。

NEWSブロック[1~3]:詳細
NEWSの詳細を入力します。空の場合は詳細が非表示になります。

NEWSブロック[1~3]:リンク先URL
NEWSの詳細をリンクを入力します。空の場合はリンクなしのテキストで表示されます。

NEWSブロック[1~3]:リンクを新しいタブで開く
リンク先をそのままの画面で開くか、新しいタブ・ウィンドウで開くかを指定します。リンク先が外部サイトの場合などによく使われます。

ABOUTページコンテンツ

ABOUTページ メイン画像・コンセプト

ABOUTページのメイン画像を追加・変更できます。

ABOUTページ:メイン画像を表示
チェックを入れるとABOUTページのメイン画像エリアを表示します。
チェックを外すと非表示にします。

ABOUTページ:メイン画像
画像をアップロードします。空の場合は非表示になります。

ABOUTページ:メイン画像 代替テキスト
画像の説明(alt属性に入れる文言)を設定できます。

ABOUTページのコンセプト情報が編集できます。

ABOUTページ:コンセプトを表示
チェックを入れるとコンセプトエリアを表示します。
チェックを外すと非表示にします。

コンセプト:見出し
見出しになるテキストを入力します。改行は<br>タグが使えます。

コンセプト:説明
説明文を入力します。改行は<br>タグが使えます。

ABOUTページの店舗情報を編集できます。

ABOUTページ 店舗情報

店舗の詳細情報を最大2件まで掲載できます。

ABOUTページ:店舗一覧を表示
チェックを入れると店舗一覧を表示します。
チェックを外すと非表示にします。

店舗[1~2]:画像
店舗画像をアップロードして表示します。空の場合は非表示になります。

店舗[1~2]:名称
店舗の名称を入力します。空の場合はこの店舗の情報は非表示になります。

店舗[1~2]:住所
店舗の住所を掲載できます。空の場合は非表示になります。

店舗[1~2]:電話番号
店舗の電話番号を掲載できます。空の場合は非表示になります。

店舗[1~2]:営業時間
店舗の営業時間を掲載できます。空の場合は非表示になります。

店舗[1~2]:定休日
店舗の定休日を掲載できます。空の場合は非表示になります。

店舗[1~2]:メールアドレス
店舗のメールアドレスを掲載できます。空の場合は非表示になります。

ブログ記事表示機能

ブログ記事表示機能

BLOGブロックを表示できます。

BLOGブロックを表示
BlogAppをインストールしているとこの項目が表示されます。 チェックを入れるとTOPページ・ABOUTページ・商品ページにBLOGブロックを表示します。
日付順で最大16件のブログ記事リストが表示されます。
チェックを外すと非表示にします。

BLOGブロック:記事数
ブログの記事数を4・6・8・10・12・14・16の中から指定できます。

BLOG記事一覧ページ

記事一覧が表示されます。
日付順で最大16件、それ以降はリストの下にあるページネーション機能で次のページに表示されます。

「この記事を固定にする」の表示について

ブログ編集時に「この記事を固定にする」にチェックを入れた場合、各記事リストの先頭に固定記事が表示されます。また、TOPページのメインビジュアルの下部にテキストリンクで記事が固定表示されます。

「この記事を固定にする」の表示について

FAQ機能

FAQ機能

ABOUTページにFAQブロックを追加できます。

FAQコンテンツをABOUTページ下部に最大10件追加できます。

FAQ:質問[1~10]
質問内容を入力します。

FAQ:答え[1~10]
質問の答えを入力します。改行は<br>タグが使えます。

その他の機能

ABOUTブロックの表示・変更

ABOUTブロックを表示

TOPページにABOUTページへの導線となるブロックを追加できます。

ABOUTブロックを表示
チェックを入れるとTOPページにABOUTブロックを表示します。
チェックを外すと非表示にします。

ABOUTブロック:画像
画像をアップロードできます。空の場合は非表示になります。

ABOUTブロック:タイトル
ABOUTページへの導線コンテンツのタイトルを入力します。改行は<br>タグが使えます。

ABOUTブロック:概要
ABOUTページへの導線コンテンツの概要を入力します。改行は<br>タグが使えます。

ABOUTブロック:背景色
何も指定しなければ#e0e0d4が入ります。

CONTACTブロックの表示・変更

CONTACTブロックの表示・変更

CONTACTページ以外の全てのページにCONTACTページへの導線になるCTAブロックを設置できます。

CONTACTブロックを表示
チェックを入れるとCONTACTブロックを表示します。
チェックを外すと非表示にします。

CONTACTブロック:背景画像
CONTACTブロックの背景になる画像をアップロードできます。 空の場合は背景色が表示されます。

CONTACTブロック:背景画像 代替テキスト
画像の説明(alt属性に入れる文言)を設定できます。

CONTACTブロック:背景色
画像がない場合に出てくる背景色です。何も指定しなければ#e0e0d4が入ります。

CONTACTブロック:メッセージ
「商品に関するお問い合わせなどは気軽にご相談ください」などのメッセージを表示できます。改行は<br>タグが使えます。

CONTACTブロック:文字色
メーセージの文字色です。何も指定しなければ#ffffffが入ります。

CONTACTブロック:ボタンテキスト
ボタンの文言を変更できます。デフォルトは「CONTACT US」と表示されます。

モバイル設定について

モバイル設定について

cameraはレスポンシブコーディングしていますので、スマホ・タブレット・PCでご覧いただけます。デザイン編集からデフォルトのモバイルテーマを使用をオフにしてお使いください。

その他

対応するAppsについて

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

よくある質問

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

ロゴ
横180px以上
実際の表示は自動的に150px程度に収まるようになります。あまり小さいサイズを用意すると荒くなりますのでお気をつけ下さい。

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

メイン画像 スマホ
横750px × 縦990px

バナー画像
横300px
縦はお好みのサイズで構いませんが、複数バナーを設置する際はすべて同じ高さに統一した方が見栄えが良くなります。

ABOUTブロック:画像
横555px以上
縦はお好みのサイズで構いません。
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

PICK UPブロック[1~5]:画像 横350~640px程度
縦はお好みのサイズで構いません。
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

CONTACTブロック:背景画像
横1440px × 縦510px
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

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

店舗画像
横450px以上
縦はお好みのサイズで構いません。
Retinaディスプレイ対応を考えた場合は十分な解像度の素材で倍ぐらいのサイズをご用意ください。

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

お問い合わせ情報

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

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

お問い合わせ先はこちら

アップデート履歴

2019/08
「この記事を固定する」でTOPページメインビジュアルの下部にテキストリンクを表示させている状態でスマホのメニューを開くとメニューに被ってしまうバグを修正しました。
2019/08

「Aboutブロック」の背景色や文字色を細かく設定できるようにオプションを追加しました。

ABOUTブロック:見出し 文字色
「About」という見出し部分の文字色を個別に変更できます。

ABOUTブロック:背景色
背景色が#e0e0d4で固定でしたが、任意のものに変更できます。

ABOUTブロック:タイトル 文字色
コンテンツタイトル部分の文字色を変更できます。

ABOUTブロック:概要 文字色
コンテンツ概要部分の文字色を変更できます。

ABOUTブロック:リンク 文字色
「VIEW MORE」リンクの文字色を変更できます。

2019/08
フッターのSNSリンクにLINEアイコンを表示できるように修正しました。
2019/08
PC グローバルナビゲーション マウスオン時に他のカテゴリメニューを開こうとするとメニュー全体が閉じてしまうバグを修正しました。
2019/08
送信完了画面のCSSを修正しました。
2019/08
商品ページ 「外部サイトへ貼る」ボタン押下で出現するポップアップのCSS崩れを修正しました。
2019/08
商品ページ 「通報する」ボタン押下で出現するポップアップのCSS崩れを修正しました。
2019/08
フッター:SNSアイコンを白にする」オプションを追加しました。
2019/08
「独自のスタイルシートを追加する【上級者向け】」オプションを追加しました。CSSの理解がある上級者の方はこちらに独自のCSSを記述してカスタマイズできます。
※独自CSSでのカスタマイズについては一切責任を負いません。自己責任でお願いいたします。また、CSSの書き方などの個別のアドバイス等もいたしかねます。あらかじめご了承ください。