高速化(SPA・検索)

サイト離脱を防ぐスムーズなユーザー体験を実現

ACCELERATION
  • TOPページ
  • 当社の取り組み:高速化(SPA・検索)

ECサイトでは他のWebサイトに比べて、表示速度・検索のしやすさは非常に重要とされています。
当社では、SPA・検索エンジンの導入など、ユーザーの高い操作性要求を叶えるためのオプションをご用意しています。

サイトの速度は売上に影響

ページ表示が1.0秒遅くなると売り上げが10%DOWN

※米Aberdeen Group調査(2018/2019)/Amazon調査(2007)

SPAで実現する高速で自由度の高いWEBサイト

社内で全行程が完結する当社だから、幅広いUI/UXの実現と高速な画面遷移が可能なSPAの構築を請け負います。

ECサイトにおけるSPAの導入メリット

高速な画面遷移によるユーザー体験の向上

SPAは画面の表示内容を切り替えるのに、画面全体の更新を必要としません。そのため、画面遷移する場合にも、ヘッダーやメニューなどの共通要素などはそのまま表示し、画面の表示内容の変更が必要な要素のみサーバーと通信を行うため、画面の表示切替に伴う通信が最小限にとどまり、ユーザーを待たせることなく画面の変更が可能になります。

また、画面の表示中に、他のページのコンテンツをユーザーの端末にダウンロードさせることもできるため、画面遷移によらず、通信のタイミングを任意に制御することができます。

Amazonなどにも利用される技術で、ユーザー毎に異なる内容を表示する際にも、処理/通信の負荷が小さく、中~大規模なECサイトでは今後広く普及していくことが予想されます。

※当社のSPA化オプションにはReactフレームワークを利用しています。

アプリのような自由度の高いデザイン・挙動を実現可能

ユーザー端末にダウンロードしたデータと、サーバーから通信で取得するデータを高度に組み合わせることで、ネイティブアプリと遜色のないユーザビリティを実現することができます。

例えば、ページ遷移時にヘッダーやフッターといった共通要素を再読み込みしないように固定表示したり、カートの商品数量などのデータを画面遷移と関係なく更新したり、画面を更新せずに自由に表示内容を変えられます。

また、SPAではページごとではなくページ内のパーツごとにファイルを管理しているため、複数のページで使われている共通パーツを同一のファイルで管理できます。

コンテンツが多いサイトでもUI・UXの変更が柔軟かつ迅速に対応可能となるため、アプリで必須となるストア審査やアップデートは必要なく、Webサイトでありながらアプリのような快適なユーザー体験を実現可能です。

SPAのECサイト

  • Amazonドットコム
    Amazonドットコム
  • ニトリ
    ニトリ
  • ユニクロ
    ユニクロ
  • 楽天西友ネットスーパー
    楽天西友ネットスーパー

SPA(シングルページアプリケーション)とは?

SPAとは、ページ遷移のたびにページ全体を書き換えず、単一のページで必要なコンテンツだけを切り替えるWEBアプリケーションのアーキテクチャの1つです。

従来のWebサイトではページが切り替わるたびにローディングが必要なのに対し、SPAではサイト回遊時のデータの読み込みが最小限になるため、ページ遷移で待ち時間のない高速なUXを実現できます。

※対応方針、箇所によっては、一部CMS機能が利用できなくなる場合があります。

※SPA化対応はオプションです。

検索性の向上と検索速度の向上

ラインナップの多いサイトで重要視される検索エンジン。
当社ではサイトや御予算に応じて多様なオプションをご用意しています。

オプション

概要

メリット

デメリット

全文検索

通常のDBの設定変更で実現が可能な高速検索。2文字以上の検索は、通常のRDB検索に比べて非常に速い。

導入工数が比較的小さい
ランニングコストが小さい

1文字の検索や記号の検索に弱い

検索専用エンジン

全文検索に特化した専用のエンジンを利用することで、大量データに対して高速に検索処理を実行する。

Elasticsearchなどの外部ソリューションを用いる。

非常に高速な検索が実現可能
サジェスト/表記揺れ対応/重みづけ機能が標準装備

用途やデータに合わせて都度チューニングコストが必要

外部検索サービス

外部の検索サービスの利用。
速度の向上だけでなく、商品の表示順のパーソナライズ化/最適化など多様な機能を持っている。

あいまい検索や辞書機能など多様な機能を標準装備自社管理コストが不要

ランニングコストとしてサービス利用料を要する

検索サービス例 - UniSearch

検索から購入に至るまでの購買行動データをAIが学習し、検索結果を自動最適化してくれるユニバーサルナレッジ株式会社の検索サービス。ECに特化した機能も備えており、見つかる検索・買いたい検索を実現します。

ユニサーチの特徴

  • 売上アップアルゴリズム

    売上アップ
    アルゴリズム

  • AIによる検索結果最適化

    AIによる
    検索結果最適化

  • パーソナライズ・サーチ

    パーソナライズ・サーチ

  • ECサイト検索特化機能

    ECサイト検索特化機能

  • ECサイト検索特化機能

    ECサイト検索特化機能

  • 50万語以上の表記ゆれ辞書

    50万語以上の表記ゆれ辞書

  • 売上アップアルゴリズム

    売上アップ
    アルゴリズム

  • AIによる検索結果最適化

    AIによる
    検索結果最適化

  • パーソナライズ・サーチ

    パーソナライズ・サーチ

検索毎に検索ワードと商品の関連度を自動的に解析し、表示順を最適化

  • ECサイト検索特化機能

    ECサイト検索特化機能

  • ECサイト検索特化機能

    ECサイト検索特化機能

  • 50万語以上の表記ゆれ辞書

    50万語以上の表記ゆれ辞書

導入先:https://unisearch.jp/case/

※導入には、別途サービスの利用契約が必要になります。

その他高速化の取り組み

上記以外にも、サイトの特性に合わせて高速化を意識したご提案をさせていただきます。
なお、複数のオプションを組み合わせることで、より効果的に高速化が実現できます。

  • カバー領域と単価感の表

    コンテンツ静的化

    TOPページなど、更新頻度の低く全体に共通で表示するコンテンツは、定期的に生成した静的ファイルを表示することで、高速化を実現できます。比較的低コストで確実な効果を期待できます。

  • カバー領域と単価感の表

    検索性を考慮したDB設計

    検索性を考慮したDB設計とすることで、複数のデータを組み合わせた検索でも、高い検索パフォーマンスを得ることができます。

  • カバー領域と単価感の表

    SQLチューニング

    昨今のフレームワークベースのシステムにおいては、開発の効率性を高めるため、実際に必要とされるデータを超えてデータが抽出される場合があります。こうしたフレームワークの範囲において、SQLの調査、最適化を行うことで、速度改善を実現します。

  • カバー領域と単価感の表

    CDNを利用したコンテンツの高速配信

    CDN(Contents Delivery Network)サーバーを利用することで、画像ファイルなどを高速に配信することができます。

  • カバー領域と単価感の表

    画像の遅延読み込み

    画像などの容量の大きいデータを遅延して読み込ませることで、画面を高速で表示させることができます。

  • カバー領域と単価感の表

    画像の自動リサイズ

    表示する画像をシステムで自動的にリサイズすることで、画像の読み込みにかかる時間を最小限に抑えられます。

ご相談・資料請求・お見積り依頼

ECサイトの構築、リニューアル、お悩みならなんでもご相談ください!

お電話でのお問い合わせ

03-6260-8250

受付時間 平日9:00~19:00

ページトップボタン