この4か月で、Culture Shock Club のオンラインストアの大部分を作り直しました。追加、削除、リファクタリングを合わせて、変更した行数は500,000行以上。その結果、サイトはより速く、買い物の流れはよりわかりやすく、アカウント機能はより便利になりました。
要点
- ストアフロント再建の4か月：追加・削除・リファクタ合わせて500,000行超の変更。
- できた部分から公開し、その後も磨き続けた。一発のリローンチではない。
- 主要ページはモバイル・デスクトップのLighthouseで95 or higher。
- 注力：初画面の速さ、ホームの見通し、クイック追加と検索、商品ページ、検索できる注文履歴。
大きなリニューアルのために全部を取っておくことはしませんでした。準備ができたところから順に公開し、その後も改善を続けています。
最初の画面をもっと速く
以前のトップページは、最初の画面を表示する前に商品カルーセルを読み込んでいました。そのため、商品画像、バリエーション、価格、在庫情報、カルーセルのコードをすぐに読み込む必要がありました。
新しいトップページは、まずメインビジュアルを読み込みます。商品一覧、おすすめ、アナリティクス、同意管理ツールは、後から、または必要なときだけ読み込まれます。
フォント、CSS、スクリプトの初期処理も減らしました。キャッシュが効きやすくなり、カートを操作しても関係のないページデータを再読み込みしなくなりました。
主要ページは、モバイルとデスクトップの両方で、Lighthouse テストのスコアが95以上になりました。操作できるまでの時間も短くなり、画面遷移中も安定し、スマートフォンの処理負担も軽くなっています。
構成がわかりやすくなったトップページ
以前のトップページは、ひとつの商品フィードに大きく頼っていました。新しいレイアウトでは、セクションごとに役割をはっきりさせています。
新作はコンパクトなギャラリーで、点数の多いコレクションは密度の高いグリッドで見せられます。上部に表示した商品は下のセクションには出ないので、スクロールしても同じ商品が何度も並びません。
トップページでは、新作の紹介、少し前の商品のピックアップ、カタログ内のさまざまなページへの案内を、同じアイテムを繰り返さずに行えるようになりました。
ページを移動せずにクイック追加と検索
商品のオプションを選ぶだけで、ページを離れる必要はないはずです。
クイック追加は、モバイルでは画面下から開くシート、デスクトップでは幅の広いパネルで表示されるようになりました。どちらも商品画像、バリエーション、サイズ情報を表示できるスペースがあります。
予測検索では、入力中に結果が表示され、最近の検索履歴もすぐに使えます。詳しい結果カードは必要なときだけ読み込むので、検索を始める前の処理が少なくなりました。
商品を比べて、オプションを選び、カートに入れるまで、見ていた場所を見失わずに進められます。
購入の判断に集中できる商品ページ
商品ページは、購入に必要な情報を中心に整理し直しました。商品メディア、選択中のバリエーション、価格、購入ボタンを最初に表示。サイズ、配送、お手入れ、返品の情報もすぐ近くにあります。
メディアギャラリーは、画像、動画、外部動画、3Dメディアに対応しました。カラーを切り替えると、対応する画像にギャラリーが直接移動することもあります。
関連商品は「More to Explore」という別のセクションに表示されます。メインの商品情報の邪魔をせず、いつでもチェックできます。
すぐに反応するカート
以前のカートは、変更を処理している間に遅くなったり、表示が食い違ったりすることがありました。更新の仕組みを作り直し、すぐに反応が返るようにしました。
数量の変更、削除、割引コード、価格の更新は、サーバーが最終結果を確認している間にも反映されます。その後、カートが表示中の数量と合計を確定した内容に合わせます。
キャンペーンの進み具合もわかりやすくなりました。送料無料やまとめ買い特典まであといくらかを表示し、条件を満たすとお知らせします。
カートページとスライド式のカートは、動きの多くが共通になりました。どちらから購入手続きに進んでも、同じ感覚で使えます。
より便利になったアカウント機能
購入後もストアを便利に使えるようになりました。
アカウントでは、商品サムネイル、合計金額、日付、発送状況つきの注文履歴を検索できます。各注文ページでは、発送、返金、返品の詳細を確認できます。
対象の注文では、返品したい商品、数量、返品理由を選んで、アカウントから申請できます。
国と言語の切り替えも作り直しました。国名、国コード、通貨、言語で検索でき、結果は地域ごとにまとまって表示されます。マーケットを切り替えても今のページにとどまり、言語と価格だけが切り替わります。
Energy Edition と呼ぶ理由
今回のリリースは、どの部分もスピードを重視しています。トップページは最初の表示までの処理を減らし、閲覧中のページ移動も少なくなりました。カートはすぐに反応し、アカウントでは購入後にできることが増えています。
このアップデートを代表する機能はひとつではありません。よく使われる部分を作り直した積み重ねが、今回の結果です。
改善はこれからも続きます。遅い、わかりにくい、使いづらいと感じたら、ぜひ教えてください。
