ネットショップでもスマートフォンからのアクセスが増えているのでスマホ対応は必須となっています。
EC-CUBE4ではスマホ用のレイアウトを作成できたり、使いやすいレスポンシブテンプレートもあるためスマホ対応はそれほど難しくありません。
EC-CUBE4をスマホ対応とは？
スマホ対応はショップをスマートフォンで見たときに正しく表示させるために必要です。
PCの大画面ではサイドメニューや横並びのコンテンツなどがありますが、スマホで表示する場合は縦並びやスライドで表示する場合が多いです。
スマホ対応は必要？
Webサイトはネットショップに限らずスマホからのアクセスが当たり前で、全アクセスの8割以上がスマートフォンからというサイトもめずらしくない状況です。
このような状況の中でスマートフォンに対応しないとショップへのアクセス数が増えにくくなるため、スマホ対応は必須です。
スマホ対応してるかどうかチェックする方法
自分のショップがスマートフォンの表示に対応しているかどうかをチェックする一番簡単な方法は、実際にスマホで表示してみることです。
他にも「ページスピードインサイト」というツールでショップのURLを入力することで自分のショップがどれくらいスマホで快適に見れるかをチェックすることができます。
EC-CUBE4をスマホ対応させる方法
EC-CUBE4でスマホ対応のショップを作るには以下の3つの方法があります。
- モバイル用レイアウトを作る
- PCでレスポンシブデザインに対応させる
- レスポンシブデザインのテンプレートを使う
モバイル用レイアウトを作る
EC-CUBE4ではレイアウトの作成時にPC用とモバイル用のレイアウトを作ることができます。
モバイル用レイアウトを作ることでスマートフォン向けのレイアウトでショップを構築することができます。
PCでレスポンシブデザインに対応させる
モバイル用レイアウトを作る方法の場合、PCとスマホの2種類のレイアウトを作る必要があるので手間がかかる場合があります。
PCのレイアウトはレスポンシブデザインにすることでスマートフォンに対応したレイアウトを作ることができます。
レスポンシブデザインのテンプレートを使う
EC-CUBE4向けテンプレートはすでにレスポンシブ対応しているものがほとんどなので、コードの修正が難しい場合はテンプレートを使うと便利です。
EC-CUBE4向けテンプレートのBootcube2もレスポンシブ対応していて、同梱されたブロックを組み合わせるだけで新着商品やおすすめ商品、バナーなどの基本的なコンテンツを作成することができます。
まとめ
EC-CUBE4ではモバイル対応のショップを作るのはそれほど難しくありませんが、コードを編集して対応する場合レスポンシブデザインの知識が必要になります。
スマホに対応したショップを構築する場合は基本的にはテンプレートをベースにカスタマイズするのがおすすめです。