事例でみる！ECサイトをレスポンシブ化するポイント～ESTHETIC JAPAN～

レスポンシブ化するポイント

Web業界において大きな盛り上がりを見せているレスポンシブwebデザイン。企業ページやブランディングサイト等では多く取り入れられていますが、『ECサイト』に限っていうとまだまだ導入されておられる企業は少数です。

しかし、「自然検索アクセス146%伸長。ECサイトのレスポンシブ化がSEOに強い理由を検証。」でも紹介したように、Googleが推奨するレスポンシブWebサイトを導入された企業様で実際に自然検索数が伸びるなど、ECサイトでも非常に有効な手段としてレスポンシブwebサイトは注目されています。

そこで今回はレスポンシブwebサイトにてECサイトを展開されておられる企業様を事例にECサイトのレスポンシブ化のポイントをみていきたいと思います。

サイト名	ESTHETIC JAPAN
URL	http://www.estheticjapan.com/hint
QRコード

共通のコンテンツを使う

レスポンシブWebサイトではHTMLソースはもちろん【画像】や【テキスト】もデバイス毎に用意するのではなく基本的に1つの素材を使います。

これまでのECサイト構築はそれぞれのデバイス毎にサイトを構築する必要がありましたがレスポンシブWebサイトでは1つのURL１つのソースで構築/運用していく為、運用効率は格段に向上します。

弊社aishipRを導入頂いた企業様では約60％の運用効率向上が図られています。レスポンシブwebサイトを構築する際はコンテンツの配置をPC/スマホ/タブレットで見た時にどのように配置するのかを決めればレスポンシブWebサイトは構築できます。

【例】

デバイスの特性を考える

次にECサイトを構築する上で最も重要な「デバイスの特性」を考察していきます。

前述したようにレスポンシブWebサイトでは基本的にコンテンツをそれぞれ共通で使います。しかしPCとスマートデバイス（スマホ/タブレット）では大きく違う点があります。それは「マウス操作」と「タッチ操作」です。

PCサイトではテキストリンクもマウスのカーソルを合わせてクリックすることにストレスを感じませんがスマートデバイスではテキストリンクは操作性が悪くミスタッチをしてしまう可能性があります。

よってレスポンシブWebサイトを構築する上ではPCサイトを基準に考えるのではなく画面が小さく操作性をより求められるスマートデバイスを基準に考えていくとスムーズに構築することができます。またスマートデバイスで商品を購入するユーザーは画面が遷移することを嫌います。例えば商品を購入する際に都度カート画面へ遷移すると2商品、3商品買いたいと思っているユーザーは非常にストレスを感じてしまいます。