【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブ・SSL・固定ヘッダー・・LUSH英国サイトはネタの宝庫です。

レスポンシブ・SSL・固定ヘッダー・・LUSH英国サイトはネタの宝庫です。

レスポンシブデザインや全ページSSL・SNSタイムラインの表示など、ECサイトのトレンドをほとんど押さえたLUSHの英国向けサイトをご紹介します。今後サイトリニューアルを検討されている方はぜひ一度ご覧ください。

サイト名 LUSH
URL https://www.lush.co.uk/
QRコード qr-lushuk

5つのポイント

  1. 完全レスポンシブ
  2. 固定ヘッダーと豊富なナビゲーション
  3. 非同期で親切なフォームページ
  4. 会員登録を促す完了ページ
  5. 全ページSSL

5つのポイント

1:完全レスポンシブ

lushトップページ
時より見かける「TOPだけレスポンシブ」ではなく、商品ページ・カートページまで完全にレスポンシブ化されたサイトとなっています。

画像の見せ方も、柔軟なカラムの使い分けなどで見事です。今後レスポンシブなECサイトの構築を予定されている方は是非参考にしていただきたいです。

2:固定ヘッダーと豊富なナビゲーション

lush01
ヘッダーメニューは固定(fixed)されており、いつでもヘッダーのナビゲーションを利用することができます。

そしてナビゲーションの中身は「SNS投稿」「ドロップダウンメニュー」「検索フォーム」「カートの中身」と非常に豊富です。

lush固定ヘッダー

カートの中身やSNS投稿なども非同期で閲覧できるようになっており、ページ遷移のストレス無く買い物ができます。

ローディング処理など、JavaScript特有のもっさり感がたまにキズですが・・・
lushメニュー

フッターにはシンプルなメールフォームが設置されており、ページ遷移無しでメルマガ購読につなげることを実現しています。

3:非同期で親切なフォームページ

lushメルマガ登録
フォームページでは、メールアドレスのチェックなど様々な入力補助機能が非同期で実装されています。

lush非同期フォーム
今回の様に海外からの発注にも対応できるように、「国内」「国外」で住所フォームを出し分ける処理もされていました。

lush
途中で迷った場合や面倒になった場合に備えてか、固定ヘッダーには「電話ボタン」が設置されています。

・・・電話番号の文字色が背景と同化してしまっているのはかなり謎です。

固定ヘッダーを使用する場合、このようにページに合わせてナビゲーションを変更するとよりユーザーに親切なサイトが作れます。
lush08
注文確認ページでは各情報が折りたたみ式になっており、確認したい情報のみ見れるような仕様です。

4:会員登録を促す完了ページ

lush09
商品購入には会員登録が必須というサイトもまま見かけますが、ここでは登録せずとも購入することができました。

登録を促すステップは購入完了ページに用意されており、「会員登録するとこんなメリットがありますよ」という内容が表示されるようになっています。

5:全ページSSL

スクリーンショット_082514_062012_PM
今回わざとアドレスバーを残した状態で画像を用意しました。

アドレスバーに注目して見ると、全てのページがSSL接続。になっていることがわかります。

GoogleがSSLに対応したように、今後大量の個人情報を取り扱うECサイトはSSL化が進んでいくのかもしれません。

参考:HTTPSをランキングシグナルに使用します

このランキングの変更は、グローバルでクエリの 1% 未満にしか影響しませんが、これから長い期間をかけて強化していきます。全体的に見ると、このシグナルは良質なコンテンツであるといった、その他のシグナルほどウェイトは大きくありません。HTTPS は、優れたユーザー エクスペリエンスを生み出す多くの要素のうちの 1 つです。

余談:対応状況は国別・・・?

deff
今回紹介したのは英国向けのサイトでしたが、日本のものは非レスポンシブでした。

国・言語別にサイトを用意している場合、デバイス対応状況やローカライズの対応なども重要になりそうです。

岡本

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+