ショップサーブでレスポンシブデザインのサイトを作りたい。
htmlとかそんなに詳しくないので、簡単に実装できる方法を教えて欲しい。
あと、おすすめのテンプレートがあれば知りたい。
こんなことを考えている方へ。
この記事のポイントは以下です。
・ショップサーブでレスポンシブデザインのサイトを作る方法
・ショップサーブのおすすめテンプレート4選
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
最近、ショップサーブを使った仕事もしています。
ショップサーブでレスポンシブデザインのサイトを作る方法
ショップサーブでレスポンシブデザインのサイトを作る方法は以下です。
順番に解説します。
レスポンシブ対応のテンプレートを選択する
そもそも、
レスポンシブ対応じゃないテンプレートってあるの？
と思われるかもしれませんが、あります。
というか、レスポンシブ対応ではないテンプレートの方が多いです。
ShopifyやBASEに比べると、ショップサーブのテンプレートは一昔前、という印象が強いです。
サイトをレスポンシブ対応にしたければ、以下の「レスポンシブ対応テーマ」を選ぶ必要があります。レスポンシブ対応のテンプレートは全部で4種類です。
レスポンシブ対応のテンプレートの選択方法は以下です。
管理画面にログイン > デザイン設定 > テーマの選択 を選びます。
テーマ設定画面が表示されるので「カスタムテンプレート」を選択します。
レスポンシブ対応のテンプレートは以下の4つです。好きなデザインを選択します。各テンプレートの詳しい解説は後述しています。
選択後は画面の指示に従ってテンプレートを適用させていきます。
実際の操作画面は以下です。「このデザインを選択する」を押下して、デザインを反映させます。
ちなみに、私が実際の案件で使ったのは「レスポンシブ（上級者） – ホワイト」という以下のテーマでした。
このテンプレートはファーストビューいっぱいに画像スライダーが入っていることが特徴です。通常左にあるサイドバーが存在しないため、スッキリとしたデザインになります。
レスポンシブのPCサイトへの転送設定
「Ｅストアーモバイル」を利用している場合、スマホページURLにアクセスした際に、PCページ（レスポンシブページ）にリダイレクトを行う設定をします。
「Ｅストアーモバイル」ではお店ページだけでなく、スマートフォン専用のショッピングカート画面、スマートフォン専用の管理画面まで用意し、徹底してスマートフォンに対応しています。
参考：ショップサーブヘルプ – スマートフォンサイトのＥストアーモバイル >
パソコン用、スマートフォン用、それぞれ個別に管理画面まで用意しているから、スマートフォン向けだけの個別設定も行なえます。
リダイレクト設定の方法については、公式ヘルプの「よくある質問」で詳しく解説されています。
レスポンシブデザイン対応テーマを利用しています。 お客さんが「スマホ用ＵＲＬ」にアクセスした際は、レスポンシブのＰＣサイトを表示できますか？
はい。可能です。
お客さんが「スマホ用ＵＲＬ」にアクセスした際、レスポンシブのＰＣサイトを表示する転送設定を行ってください。
⇒ 管理画面の右上の「 スマートフォンサイト設定 」をクリック
⇒ 各種設定 ＞ 開店・閉店設定 ＞ 転送設定
⇒左側から２番目の転送設定を選択する＜転送設定＞
端末：スマートフォン 「カート画面のみスマートフォンサイトを表示」
端末：パソコン 「すべてＰＣサイトを表示」
※これまでの転送設定にある上から２番目の選択肢「カートのみスマートフォン用サイトを表示する」の場合、「スマホ用ＵＲＬ」にアクセスした際、スマートフォンサイトが表示されます。
⇒「302リダイレクト」または「301リダイレクト」を選択します。
⇒「設定を保存する」をクリックします。
⇒通常の管理画面でお店ページ更新します。
ショップサーブの以下の公式ヘルプに詳しい説明があります。
ショップサーブのレスポンシブ対応テンプレート4選
ショップサーブのレスポンシブ対応テンプレートを4つ紹介します。他にもたくさんあって、厳選して4つ、というわけではなく全部で4つです。
- レスポンシブ-ホワイト
- レスポンシブ（上級者）－ホワイト
- レスポンシブ（上級者）－ブラウン
- レスポンシブ（上級者）－ブルー
順番に解説します。
レスポンシブ-ホワイト
トップページにもサイドバーが出ているデザインです。
左側の25%くらいがサイドバーなので、コンテンツ幅は狭め。ファーストビューの画像は小さいです。
ECでは定番のレイアウトでモール系サイトに多いデザインですね。あと、カテゴリが多いサイト（商材が多いサイト）もこのデザインが多いです。
カテゴリメニューが一覧で見えているので、ユーザーにとっては探しやすいです。一方、ファーストビューでの表現に制限があるので「写真で世界観を見せたい！」と行った場合には不向きです。
Yahoo!ショッピングやzozoなどはこのデザインに近いですね。
レスポンシブ（上級者）－ホワイト
ファーストビューには、インパクトのある画像スライダーを設定できます。ファーストビュー下にもバナー設置エリアがあり、画像中心でトップページを構築できます。
なお、トップページにはサイドバーがありません。下層ページ（カテゴリ一覧・商品詳細ページ）行くとサイドバーが出現します。
（しかし、コードのカスタマイズでトップページにもサイドバーを出すことができます）
レスポンシブ（上級者）テンプレートを使う場合は、色々と設定が必要になります。管理画面からテーマを適用させて終わり、ではなく画像やhtmlのアップロードが必要です。
これについては公式のヘルプにマニュアルがあります。
また、「レスポンシブ（上級者）－ホワイト」用の設定マニュアルも用意されています。同様にブラウン用、ブルー用もあります。
レスポンシブ（上級者）－ブラウン
「レスポンシブ（上級者）－ブラウン」はホワイトと違い、画像スライダーの機能がありません。かわりにファーストビューの画像下にサイドバーが存在しています。
レスポンシブ（上級者）－ブルー
「レスポンシブ（上級者）－ブルー」のファーストビューにも画像スライダーの機能はありません。ただ、画像が全幅になっているため写真を大きく見せることができます。
ECサイトにおいてはレスポンシブが最適解とは限らない
なお、ECサイトにおいてはレスポンシブが最適解とは限りません。
といった議論があります。
とはいえ、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は変化のスピードが早いので、なるべく最近出版された本がおすすめです。
たとえば以下など。
まとめ
この記事のポイントをまとめます。
なお、ショップサーブのレスポンシブ対応のテンプレートは4つだけです。
- レスポンシブ-ホワイト
- レスポンシブ（上級者）－ホワイト
- レスポンシブ（上級者）－ブラウン
- レスポンシブ（上級者）－ブルー
そのうち、トップのファーストビューに画像スライダーを設定できるのは「レスポンシブ（上級者）－ホワイト」の1つだけです。
今回の記事はここまでです。
