更新日: 2022 / 07 / 27

EC-CUBE4でスマホ対応のショップを作る方法

カテゴリー: eccube

ネットショップでもスマートフォンからのアクセスが増えているのでスマホ対応は必須となっています。

EC-CUBE4ではスマホ用のレイアウトを作成できたり、使いやすいレスポンシブテンプレートもあるためスマホ対応はそれほど難しくありません。

  1. EC-CUBE4をスマホ対応とは?

    1. スマホ対応は必要?
    2. スマホ対応してるかどうかチェックする方法
  2. EC-CUBE4をスマホ対応させる方法

    1. モバイル用レイアウトを作る
    2. PCでレスポンシブデザインに対応させる
    3. レスポンシブデザインのテンプレートを使う
  3. まとめ

EC-CUBE4をスマホ対応とは?

スマホ対応はショップをスマートフォンで見たときに正しく表示させるために必要です。

PCの大画面ではサイドメニューや横並びのコンテンツなどがありますが、スマホで表示する場合は縦並びやスライドで表示する場合が多いです。

EC-CUBE4をスマホ対応とは?

スマホ対応は必要?

Webサイトはネットショップに限らずスマホからのアクセスが当たり前で、全アクセスの8割以上がスマートフォンからというサイトもめずらしくない状況です。

このような状況の中でスマートフォンに対応しないとショップへのアクセス数が増えにくくなるため、スマホ対応は必須です。

スマホ対応してるかどうかチェックする方法

自分のショップがスマートフォンの表示に対応しているかどうかをチェックする一番簡単な方法は、実際にスマホで表示してみることです。

EC-CUBE4をスマホ対応とは? スマホ対応してるかどうかチェックする方法

他にも「ページスピードインサイト」というツールでショップのURLを入力することで自分のショップがどれくらいスマホで快適に見れるかをチェックすることができます。

EC-CUBE4をスマホ対応とは? スマホ対応してるかどうかチェックする方法2

EC-CUBE4をスマホ対応させる方法

EC-CUBE4でスマホ対応のショップを作るには以下の3つの方法があります。

  • モバイル用レイアウトを作る
  • PCでレスポンシブデザインに対応させる
  • レスポンシブデザインのテンプレートを使う

モバイル用レイアウトを作る

EC-CUBE4ではレイアウトの作成時にPC用とモバイル用のレイアウトを作ることができます。

EC-CUBE4をスマホ対応させる方法 モバイル用レイアウトを作る

モバイル用レイアウトを作ることでスマートフォン向けのレイアウトでショップを構築することができます。

PCでレスポンシブデザインに対応させる

モバイル用レイアウトを作る方法の場合、PCとスマホの2種類のレイアウトを作る必要があるので手間がかかる場合があります。

PCのレイアウトはレスポンシブデザインにすることでスマートフォンに対応したレイアウトを作ることができます。

レスポンシブデザインのテンプレートを使う

EC-CUBE4向けテンプレートはすでにレスポンシブ対応しているものがほとんどなので、コードの修正が難しい場合はテンプレートを使うと便利です。

EC-CUBE4向けテンプレートのBootcube2もレスポンシブ対応していて、同梱されたブロックを組み合わせるだけで新着商品やおすすめ商品、バナーなどの基本的なコンテンツを作成することができます。

EC-CUBE4をスマホ対応させる方法 レスポンシブデザインのテンプレートを使う

まとめ

EC-CUBE4ではモバイル対応のショップを作るのはそれほど難しくありませんが、コードを編集して対応する場合レスポンシブデザインの知識が必要になります。

スマホに対応したショップを構築する場合は基本的にはテンプレートをベースにカスタマイズするのがおすすめです。