ショップサーブでレスポンシブデザインのサイトを作る方法

ショップサーブ レスポンシブ

ショップサーブでレスポンシブデザインのサイトを作りたい。

htmlとかそんなに詳しくないので、簡単に実装できる方法を教えて欲しい。

あと、おすすめのテンプレートがあれば知りたい。

こんなことを考えている方へ。

この記事のポイントは以下です。

・ショップサーブでレスポンシブデザインのサイトを作る方法
・ショップサーブのおすすめテンプレート4選

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

最近、ショップサーブを使った仕事もしています。

ショップサーブでレスポンシブデザインのサイトを作る方法

ショップサーブでレスポンシブデザインのサイトを作る方法は以下です。

レスポンシブ対応のテンプレートを選択する
お客さんが「スマホ用URL」にアクセスした際、レスポンシブのPCサイトを表示する転送設定を行う(Eストアーモバイルを利用している場合)

順番に解説します。

レスポンシブ対応のテンプレートを選択する

そもそも、

レスポンシブ対応じゃないテンプレートってあるの?

と思われるかもしれませんが、あります。

というか、レスポンシブ対応ではないテンプレートの方が多いです。

ShopifyやBASEに比べると、ショップサーブのテンプレートは一昔前、という印象が強いです。

サイトをレスポンシブ対応にしたければ、以下の「レスポンシブ対応テーマ」を選ぶ必要があります。レスポンシブ対応のテンプレートは全部で4種類です。

ショップサーブ レスポンシブ

レスポンシブ対応のテンプレートの選択方法は以下です。

管理画面にログイン > デザイン設定 > テーマの選択 を選びます。

ショップサーブ レスポンシブ

テーマ設定画面が表示されるので「カスタムテンプレート」を選択します。

ショップサーブ レスポンシブ

レスポンシブ対応のテンプレートは以下の4つです。好きなデザインを選択します。各テンプレートの詳しい解説は後述しています。

ショップサーブ レスポンシブ

選択後は画面の指示に従ってテンプレートを適用させていきます。

ショップサーブ レスポンシブ

実際の操作画面は以下です。「このデザインを選択する」を押下して、デザインを反映させます。

ショップサーブ レスポンシブ

ちなみに、私が実際の案件で使ったのは「レスポンシブ(上級者) – ホワイト」という以下のテーマでした。

ショップサーブ レスポンシブ

このテンプレートはファーストビューいっぱいに画像スライダーが入っていることが特徴です。通常左にあるサイドバーが存在しないため、スッキリとしたデザインになります。

レスポンシブのPCサイトへの転送設定

Eストアーモバイル」を利用している場合、スマホページURLにアクセスした際に、PCページ(レスポンシブページ)にリダイレクトを行う設定をします。

「Eストアーモバイル」ではお店ページだけでなく、スマートフォン専用のショッピングカート画面、スマートフォン専用の管理画面まで用意し、徹底してスマートフォンに対応しています。
パソコン用、スマートフォン用、それぞれ個別に管理画面まで用意しているから、スマートフォン向けだけの個別設定も行なえます。

参考:ショップサーブヘルプ – スマートフォンサイトのEストアーモバイル >

リダイレクト設定の方法については、公式ヘルプの「よくある質問」で詳しく解説されています。

レスポンシブデザイン対応テーマを利用しています。 お客さんが「スマホ用URL」にアクセスした際は、レスポンシブのPCサイトを表示できますか?

はい。可能です。

お客さんが「スマホ用URL」にアクセスした際、レスポンシブのPCサイトを表示する転送設定を行ってください。


⇒ 管理画面の右上の「 スマートフォンサイト設定 」をクリック
⇒ 各種設定 > 開店・閉店設定 > 転送設定
⇒左側から2番目の転送設定を選択する

<転送設定>

端末:スマートフォン 「カート画面のみスマートフォンサイトを表示」

端末:パソコン 「すべてPCサイトを表示」

※これまでの転送設定にある上から2番目の選択肢「カートのみスマートフォン用サイトを表示する」の場合、「スマホ用URL」にアクセスした際、スマートフォンサイトが表示されます。

⇒「302リダイレクト」または「301リダイレクト」を選択します。

⇒「設定を保存する」をクリックします。

⇒通常の管理画面でお店ページ更新します。

ショップサーブの以下の公式ヘルプに詳しい説明があります。

ショップサーブのレスポンシブ対応テンプレート4選

ショップサーブのレスポンシブ対応テンプレートを4つ紹介します。他にもたくさんあって、厳選して4つ、というわけではなく全部で4つです。

  • レスポンシブ-ホワイト
  • レスポンシブ(上級者)-ホワイト
  • レスポンシブ(上級者)-ブラウン
  • レスポンシブ(上級者)-ブルー

順番に解説します。

レスポンシブ-ホワイト

ショップサーブ レスポンシブ

トップページにもサイドバーが出ているデザインです。

左側の25%くらいがサイドバーなので、コンテンツ幅は狭め。ファーストビューの画像は小さいです。

ECでは定番のレイアウトでモール系サイトに多いデザインですね。あと、カテゴリが多いサイト(商材が多いサイト)もこのデザインが多いです。

カテゴリメニューが一覧で見えているので、ユーザーにとっては探しやすいです。一方、ファーストビューでの表現に制限があるので「写真で世界観を見せたい!」と行った場合には不向きです。

Yahoo!ショッピングやzozoなどはこのデザインに近いですね。

レスポンシブ(上級者)-ホワイト

ショップサーブ レスポンシブ

ファーストビューには、インパクトのある画像スライダーを設定できます。ファーストビュー下にもバナー設置エリアがあり、画像中心でトップページを構築できます。

ショップサーブ レスポンシブ

なお、トップページにはサイドバーがありません。下層ページ(カテゴリ一覧・商品詳細ページ)行くとサイドバーが出現します。

(しかし、コードのカスタマイズでトップページにもサイドバーを出すことができます)

レスポンシブ(上級者)テンプレートを使う場合は、色々と設定が必要になります。管理画面からテーマを適用させて終わり、ではなく画像やhtmlのアップロードが必要です。

これについては公式のヘルプにマニュアルがあります。

また、「レスポンシブ(上級者)-ホワイト」用の設定マニュアルも用意されています。同様にブラウン用、ブルー用もあります。

レスポンシブ(上級者)-ブラウン

ショップサーブ レスポンシブ

「レスポンシブ(上級者)-ブラウン」はホワイトと違い、画像スライダーの機能がありません。かわりにファーストビューの画像下にサイドバーが存在しています。

レスポンシブ(上級者)-ブルー

ショップサーブ レスポンシブ

「レスポンシブ(上級者)-ブルー」のファーストビューにも画像スライダーの機能はありません。ただ、画像が全幅になっているため写真を大きく見せることができます。

ECサイトにおいてはレスポンシブが最適解とは限らない

なお、ECサイトにおいてはレスポンシブが最適解とは限りません。

スマホの操作性、画面サイズはPCのそれとは異なるのに、PCとスマホ同一の情報量をユーザーに届けることが果たして良いのか?
スマホサイトでは直感的に見せたいため、PC時のボリュームのあるテキストは邪魔になる
PCの購入導線とスマホの購入導線は異なるし、画面サイズも違う。そもそも共通デザインにするのは無理がある

といった議論があります。

とはいえ、cssやjsの調整でレスポンシブのマイナス面はある程度は吸収できますし、なによりコードを別管理しなくていいので楽ですね。

ちなみに、レスポンシブを導入せずPCとスマホで分けている大手ECも意外とあります。

たとえばzozo。

PCサイトのTOPページURLは「https://zozo.jp/」ですが、スマホTOPは「https://zozo.jp/sp/」です。

レスポンシブ対応ではないテンプレートを選んだ場合

レスポンシブ対応ではないテンプレートを選んだ場合は、PCとスマホで別ページ(別のURL)扱いになります。

URLが別なので、Google Analytics等の解析ツールの実績取得も別ページとしてカウントされます。

つまり、仮にTOPページの総PV数を知りたい場合、

  • TOPページ(スマホ版URL)のPV
  • TOPページ(PC版URL)のPV

を足し算して出すことになります。

Q.レスポンシブデザインには対応していますか?

A.レスポンシブデザインに対応したデザインテンプレートをご用意しております。また、レスポンシブデザインに対応したデザインテンプレート以外でもPCページの編集を行うことで自動でスマートフォンページに対応する機能を有しております。

ショップサーブ – ヘルプ – よくある質問 >

参考:ネットショップの勉強におすすめな本

ネットショップ(ECサイト)に関わっていると、日々多くの壁にぶつかります。自分でショップを運用している場合もそうですし、他社のECサイトのコンサルをやっている場合もそうです。

集客、広告施策、導線設計、サイト分析、顧客育成...etc。課題は山積みです。ある程度の経験を積むと解決できることも多いですが、駆け出し期には不安が多いもの。

なので、手元に一冊、”ECのイロハ”がわかる本を置いておくと良いです。ただ、ECは変化のスピードが早いので、なるべく最近出版された本がおすすめです。

たとえば以下など。


まとめ

この記事のポイントをまとめます。

レスポンシブ対応のテンプレートを選択する
お客さんが「スマホ用URL」にアクセスした際、レスポンシブのPCサイトを表示する転送設定を行う(Eストアーモバイルを利用している場合)

なお、ショップサーブのレスポンシブ対応のテンプレートは4つだけです。

  • レスポンシブ-ホワイト
  • レスポンシブ(上級者)-ホワイト
  • レスポンシブ(上級者)-ブラウン
  • レスポンシブ(上級者)-ブルー

そのうち、トップのファーストビューに画像スライダーを設定できるのは「レスポンシブ(上級者)-ホワイト」の1つだけです。

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。