【解説】テーマ別!ショップデザイン切り替えガイド

更新日 : 2021/03/03
投稿日 : 2021/02/02

商品に興味を持ってもらうためには、まず、ブランドや商品の魅力をお客様にお伝えすることが大切です。
調査によると、販売力のあるショップ様は、ショップのデザインにも力を入れていることがわかっています。ネットショップにとって、「デザイン」は成功に欠かせない要素の1つです。

BASE」の最新バージョンのショップデザイン機能では、自由に組み合わせるだけでショップをデザインできる「デザインパーツ」など、たくさんのカスタマイズが無料でご利用いただけます。
今回は、新しいショップデザインへの切り替えについて、テーマ別にくわしくご案内いたします。

オフィシャルテーマ(無料のテーマ)をご利用中の場合

オフィシャルテーマ(無料のテーマ)をご利用中の場合、従来のショップデザイン機能では、カスタマイズできるデザインが背景などの数箇所のみに限定されていましたが、新しいショップデザイン機能に切り替えることによって、自由に組み合わせるだけでショップをデザインできる「デザインパーツ」など、たくさんのカスタマイズが利用できるようになるため、表現の幅が一気に広がります。

【デザインパーツを活用したデザイン例】

左:メイン画像で、ブランドイメージを印象つけるトップページ
右:お知らせパーツで、重要な情報を目に届きやすく

STEP1. 「新しいデザイン機能を使ってみる」をクリック

メニューから「デザイン」を開いてください。
最新のショップデザイン機能への切り替え案内が表示されますので、「新しいデザイン機能を使ってみる」をクリックしてください。

STEP2. 新しいショップデザイン機能が表示される

「新しいデザイン機能を使ってみる」をクリックすると、最新のショップデザイン機能が表示されます。この段階では、まだ最新のショップデザイン機能への切り替えは完了していません。

従来のオフィシャルテーマは、スマートフォンデザインに対応していないため、新しいショップデザイン機能に切り替えると、ご利用中のテーマのデザインをベースにした新しいテーマが自動で選ばれます。ロゴや背景は、利用中のものがそのまま引き継がれます。
新しいテーマは、すべてスマートフォン対応テーマのため、デザインをカスタマイズすると、スマートフォンサイト・PCサイトの両方に変更が反映されます。

STEP3. 「保存する」で切り替えを完了する

「プレビュー」でデザインを確認したら、「保存する」をクリックしてください。
初回のみ「新しいショップデザイン機能に切り替えてよろしいですか?」と確認メッセージが表示されます。「保存する」を選ぶと、最新のショップデザイン機能への切り替えは完了し、新しいショップデザインもショップページに反映されます。

新しいショップデザイン機能では、スライドショーや商品のピックアップ表示など、アイディア次第で多様な表現が可能となります。カスタマイズできる内容は、こちらのページからご確認いただけます。

【ショップデザイン機能の使い方】について教えてください
【デザインパーツの使い方】について教えてください

デザイナーズテーマ(有料のテーマ)をご利用中の場合

デザイナーズテーマ(有料のテーマ)をご利用中の場合は、新しいショップデザイン機能に切り替えた後も、現在のテーマをそのままご利用いただくことができます。
ロゴや背景はもちろん、テーマの設定もそのまま引き継がれます。
また、スマートフォンにデザインのプレビューが追加されますので、スマートフォンでのデザインの確認もおこないやすくなります。

STEP1. 「新しいデザイン機能を使ってみる」をクリック

メニューから「デザイン」を開いてください。
最新のショップデザイン機能への切り替え案内が表示されますので、「新しいデザイン機能を使ってみる」をクリックしてください。

STEP2. 新しいショップデザイン機能が表示される

「新しいデザイン機能を使ってみる」をクリックすると、最新のショップデザイン機能が表示されます。この段階では、まだ最新のショップデザイン機能への切り替えは完了していません。
デザインは、現在利用中の内容が引き継がれている状態となります。

STEP3. 「保存する」で切り替えを完了する

「プレビュー」でデザインを確認したら、「保存」をクリックしてください。
初回のみ「新しいショップデザイン機能に切り替えてよろしいですか?」と確認メッセージが表示されます。「保存する」を選ぶと、最新のショップデザイン機能への切り替えは完了し、編集をした場合、編集内容もショップページに反映されます。

デザインパーツをお試しいただく場合

デザインパーツを利用したい場合は、オフィシャルテーマをお選びいただく必要があります。
「テーマ」から、利用したいオフィシャルテーマを選択し、「このテーマを選ぶ」をクリックしてください。「テーマを変更してよろしいですか?」で「変更する」を選ぶと、テーマが変更されます(「保存する」を押すまでは、実際のショップページには反映されません)。

もともと利用していたデザイナーズテーマに戻したい場合は、「テーマ」から再度元のテーマを選び直してください。このとき、「テーマ設定」は、最後に設定していた内容に戻ります。
※「ロゴ」「背景」は共通設定のため、変更した場合は、再度設定していただく必要がございます。

カスタムテーマ(『HTML編集 App』で編集したテーマ)をご利用中の場合

カスタムテーマ(『HTML編集 App』で編集したテーマ)をご利用中の場合は、新しいショップデザイン機能に切り替えた後も、現在のテーマをそのままご利用いただくことができます。
また、現在編集中のテーマは、新しい「HTML編集 App」を利用して、引き続き編集することができます。

STEP1. 「新しいデザイン機能を使ってみる」をクリック

メニューから「デザイン」を開いてください。
最新のショップデザイン機能への切り替え案内が表示されますので、「新しいデザイン機能を使ってみる」をクリックしてください。

STEP2. 新しいショップデザイン機能が表示される

最新のショップデザイン機能が表示されます。この段階では、まだ最新のショップデザイン機能への切り替えは完了していません。
デザインは、現在利用中の内容が引き継がれます。

STEP3. 「保存する」で切り替えを完了する

「プレビュー」でデザインを確認したら、「保存する」をクリックしてください。
初回のみ「新しいショップデザイン機能に切り替えてよろしいですか?」というメッセージが表示されます。
「保存する」を選ぶと、最新のショップデザイン機能への切り替えは完了し、編集をした場合、編集内容もショップページに反映されます。あわせて、「HTML編集 App」も新しいバージョンに切り替えられます。

デザインパーツをお試しいただく場合

デザインパーツを利用したい場合は、オフィシャルテーマをお選びいただく必要があります。
「テーマ」から、利用したいオフィシャルテーマを選択し「このテーマを選ぶ」をクリックしてください。「テーマを変更してよろしいですか?」で「変更する」を選ぶと、テーマが変更されます(「保存する」を押すまでは、実際のショップページには反映されません)。

もともと利用していたカスタムテーマに戻したい場合は、「テーマ」から再度元のカスタムテーマを選び直してください。そのとき、「テーマ設定」は、最後に設定していた内容に戻ります。
※「ロゴ」「背景」は共通設定のため、変更した場合は、再度設定していただく必要がございます。

HTMLを編集する場合

切り替え前にカスタムテーマを利用していた場合、新しいショップデザイン機能に切り替えた時点での編集内容が、「HTML編集 App」に「カスタムテーマ」として登録されています。
「カスタムテーマ」を選択すると、従来のショップデザイン機能から引き継いだカスタムテーマを、続けて編集することができます。

「HTML編集 App」のくわしい操作方法は、こちらのページからご確認ください。

【HTML編集 Appの使い方】について教えてください

よくあるご質問

Q. デザインパーツを使ってみたいのですが、現在利用している有料のテーマの設定が損なわれないか心配です。

A. 一度購入したテーマは「テーマ」から再度選ぶことが可能です。また、「テーマ設定」から指定できるテーマ独自の設定も、最後に設定していた内容に戻ります(「ロゴ」「背景」は共通設定のため、変更した場合は、再度設定をしていただく必要があります)。

Q. カスタムテーマを利用していますが、新しいショップデザイン機能に切り替える必要はありますか?

A. デザイナーズテーマ、カスタムテーマをご利用中の場合でも、スマートフォンでのプレビューや選択できる背景画像の種類など、グレードアップするポイントがありますので、ぜひ最新のショップデザイン機能をご利用ください。
また、ナビゲーションの編集や画像の挿入など、限定的なデザインの編集を目的に「HTML編集 App」をご利用いただいていた場合は、オフィシャルテーマのカスタマイズ機能で、同等のデザインをおこなっていただくことをおすすめします。
「HTML編集 App」でプログラムを編集をすると、新しいAppsがリリースされた場合などのプログラムのメンテナンスも、ご自身でおこなう必要がありましたが、オフィシャルテーマをご利用いただき、デザインパーツなどでカスタマイズをおこなっていただきますと、プログラムのメンテナンスは自動でおこなわれるため、新しい機能をお試しいただきやすくなります。

Q. 従来のショップデザイン機能に戻せないことが不安です。

A. 今まで問題なくご利用されていたものに「戻せない」ことは、ご不安かと存じます。
一方、デザイナーズテーマおよびカスタムテーマをご利用中の場合は、新しいショップデザイン機能に切り替えても、従来のデザインをそのまま利用することができます。
また、オフィシャルテーマをご利用の場合も、新しいスマートフォン対応デザインは、従来のデザインがベースとなっており、そこから自由にデザインを足し引きすることができるため、お好みのデザインへの調整がしやすくなっています。
「保存する」までは、切り替えを完了せずにご利用いただけますので、ぜひ一度お試しください。

今回は、最新のショップデザイン機能への、テーマ別の切り替え方法をご案内させていただきました。
すでに、多くのショップ様が最新のショップデザイン機能を利用して、素敵なショップデザインを実現されています。ぜひ、ブランドや商品の魅力が伝わるショップをデザインして、ショップのご成長にお役立てください。

 

ショップをデザインする

\ ショップの開設実績 No.1 /
みんなが使ってるショップ作成サービス「BASE」

関連記事

運営ノウハウ

ショップ運営で知っておきたい情報を
フェーズにわけてまとめています

商品を売る

商品を魅力的に見せるための説明文の書き方から、仕入れに関する情報、配送ノウハウについてまとめています。

売上を伸ばす

売上を伸ばすために必要不可欠なマーケティング知識や、SNS運用のコツ、BASEアプリの活用方法などについてまとめています。

売上を管理する

決済に関する情報や、売上申請の方法などについてまとめています。