レスポンシブデザインや全ページSSL・SNSタイムラインの表示など、ECサイトのトレンドをほとんど押さえたLUSHの英国向けサイトをご紹介します。今後サイトリニューアルを検討されている方はぜひ一度ご覧ください。
| サイト名 | LUSH |
| URL | https://www.lush.co.uk/ |
| QRコード |  |
５つのポイント
- 完全レスポンシブ
- 固定ヘッダーと豊富なナビゲーション
- 非同期で親切なフォームページ
- 会員登録を促す完了ページ
- 全ページSSL
５つのポイント
１：完全レスポンシブ
時より見かける「TOPだけレスポンシブ」ではなく、商品ページ・カートページまで完全にレスポンシブ化されたサイトとなっています。
画像の見せ方も、柔軟なカラムの使い分けなどで見事です。今後レスポンシブなECサイトの構築を予定されている方は是非参考にしていただきたいです。
２：固定ヘッダーと豊富なナビゲーション
ヘッダーメニューは固定（fixed）されており、いつでもヘッダーのナビゲーションを利用することができます。
そしてナビゲーションの中身は「SNS投稿」「ドロップダウンメニュー」「検索フォーム」「カートの中身」と非常に豊富です。
カートの中身やSNS投稿なども非同期で閲覧できるようになっており、ページ遷移のストレス無く買い物ができます。
ローディング処理など、JavaScript特有のもっさり感がたまにキズですが・・・
フッターにはシンプルなメールフォームが設置されており、ページ遷移無しでメルマガ購読につなげることを実現しています。
３：非同期で親切なフォームページ
フォームページでは、メールアドレスのチェックなど様々な入力補助機能が非同期で実装されています。
今回の様に海外からの発注にも対応できるように、「国内」「国外」で住所フォームを出し分ける処理もされていました。
途中で迷った場合や面倒になった場合に備えてか、固定ヘッダーには「電話ボタン」が設置されています。
・・・電話番号の文字色が背景と同化してしまっているのはかなり謎です。
固定ヘッダーを使用する場合、このようにページに合わせてナビゲーションを変更するとよりユーザーに親切なサイトが作れます。
注文確認ページでは各情報が折りたたみ式になっており、確認したい情報のみ見れるような仕様です。
４：会員登録を促す完了ページ
商品購入には会員登録が必須というサイトもまま見かけますが、ここでは登録せずとも購入することができました。
登録を促すステップは購入完了ページに用意されており、「会員登録するとこんなメリットがありますよ」という内容が表示されるようになっています。
５：全ページSSL
今回わざとアドレスバーを残した状態で画像を用意しました。
アドレスバーに注目して見ると、全てのページがSSL接続。になっていることがわかります。
GoogleがSSLに対応したように、今後大量の個人情報を取り扱うECサイトはSSL化が進んでいくのかもしれません。
このランキングの変更は、グローバルでクエリの 1% 未満にしか影響しませんが、これから長い期間をかけて強化していきます。全体的に見ると、このシグナルは良質なコンテンツであるといった、その他のシグナルほどウェイトは大きくありません。HTTPS は、優れたユーザー エクスペリエンスを生み出す多くの要素のうちの 1 つです。
余談：対応状況は国別・・・？
今回紹介したのは英国向けのサイトでしたが、日本のものは非レスポンシブでした。
国・言語別にサイトを用意している場合、デバイス対応状況やローカライズの対応なども重要になりそうです。
岡本
