web creators×DeNA連動企画 Web制作現場で使える最新実用テクニック集

02 スマートフォンECサイトにおけるUI/UX実装の実態

【第3回】スマートフォン向けECサイトのパフォーマンス向上術

前回はビッダーズにおけるUI/UXに関する具体的施策事例を紹介した。今回は、スマートフォン用サイトとしてのパフォーマンスアップを目的とした各種施策について紹介していこう。

検索窓におけるアシスト機能の提供

ビッダーズでは、スマートフォン用サイトとしてパフォーマンスを向上させるためにさまざまなフロントでのチューニングを行なっている。
まず紹介するのが、検索窓のアシスト機能。ショッピングサイトとしてユーザーがもっとも多く利用するのが商品検索。一般的な検索窓を用意してキーワード入力で商品リストを絞り込むことができる。
この検索窓には、jsonファイルとlocalStorageを利用したアシスト機能を実装している【1】。jsonファイルに記述された各種ワードは、検索窓にフォーカスを当てた時点でlocalStorageに保存され、localStorageから検索窓下部にリストを表示。リストアイテムをタップするだけで、商品検索が実行される。これにより、ユーザーは短時間の入力操作で目的とする商品リストを絞り込むことが可能だ。
また、検索窓に入力されたキーワードは履歴として蓄積され、キーワードリストに履歴ワードとして優先的に表示される【2】【3】。
これら検索窓に対するアシスト機能を実装することで、ユーザーがより効率的に商品を探せるという利便性を実現している。

【1】商品リストを絞り込む検索窓では、ユーザーが1文字入力するだけで、その文字で始まる検索キーワードを一覧表示する。

【2】検索窓のアシスト機能では、入力されたキーワードの履歴も記録しており、履歴ワードを優先的に表示することで利便性をさらに増している。

【3】検索窓の左端には、「商品」「お店」「カテゴリ」など検索対象を切り替えるスイッチボタンを搭載。ここにも「履歴」を追加している。

ファイルリクエストを抑えるためのスプライト対応

【4】商品詳細ページには、「送料」や「ポイント」「クレジットカード対応」といったアイコンが多数表示される。これらはすべて一つのファイルにまとめており、CSSによって表示状態を制御している。また、このスプライトファイルには、人気度合いを示す星マークなどの共有画像も記録している。

スマートフォン向けサイトでは、3G回線によるアクセスも多いため、ファイルリクエストを抑えることでパフォーマンスを向上させる施策はPCサイト以上に重要となる。可能な限り、ユーザーにストレスを感じさせないため、サイト内で共有している画像ファイルなどは、極力スプライト対応することが大切だ。
ビッダーズの商品詳細ページには、「送料」や「ポイント」「クレジットカード対応」などを示すアイコン画像が多数表示される。これらは基本的にサイト内で共有している画像であるため、すべてのアイコンをひとつの画像ファイルにまとめ、CSSによって制御している【4】。

ソーシャルコネクトなど、その他のパフォーマンス向上施策

【5】回線状況によっては表示時間がかかる「いいね!」ボタンだが、あえてローテクであるiframeタイプのコードで設置することで、他コードよりも3割程度パフォーマンスが向上する。

【5】回線状況によっては表示時間がかかる「いいね!」ボタンだが、あえてローテクであるiframeタイプのコードで設置することで、他コードよりも3割程度パフォーマンスが向上する。

スマートフォン用サイトのパフォーマンス向上を目的とした場合、ほかにもさまざまな施策が考えられる。
たとえば、最近の傾向に即してビッダーズでも「ツイート」や「いいね!」などのソーシャルコネクトボタンを設置している。特にFacebookの「いいね!」ボタンは回線状況によってはかなり処理が重く、表示にかなり時間を要することがある。「いいね!」ボタン設置コードは複数あるが、もっとも古いiframeコードを利用することで、他コードよりも3割程度パフォーマンスを向上させることが可能だ【5】。あえてローテクを利用することでパフォーマンスアップを実現することもできるのである。
また、スマートフォンサイトではキャッシュを有効活用することでパフォーマンスを向上できるが、ビッダーズではhtml generatorによるHTMLファイルの自動生成を行っているため、サーバサイドでのキャッシュを強化している。ただし、CSSやJavaScriptファイルなどローカルキャッシュされるファイルについては、更新作業を行った際にファイル名に更新日付を加えるようにしている。link要素のurlを書き換えることでローカルキャッシュを利用せず、強制的にリフレッシュすることが可能だ(ファイル名に追加した日付文字列は2週間程度で削除するようにしている)。
ほかにも、node.jsを利用したノンブロッキングI/Oでの並列処理やフリーツールを利用したCSS/JavaScriptファイルのミニファイ化、非劣化タイプの画像圧縮なども行っている。
また、メンテナンス性とはトレードオフとなるが、CSSファイルを1ファイル化するなど、ファイルリクエストを極力減らすような施策も多々行っている。
スマートフォンユーザーは、特に体感速度を重視する傾向にある。ユーザーに極力ストレスを与えないような工夫が非常に重要である。

まとめ

本連載を通じて、ビッダーズにおけるスマートフォン用サイト制作のポイントを紹介してきた。
スマートフォン最適化としては、ほかにもさまざま施策を行っているが、3G回線によってアクセスされることも多いスマートフォンサイトでは、今回紹介したような各種パフォーマンス向上のための施策がより重要だ。今後、開発にあたるスマートフォンサイト制作に少しでも役立てば幸いである。

【著者紹介】

鈴木 哲之(ディレクター)

インターネット上で利用できるポイントサービスを提供するNetMileでディレクターを経験したのち、2006年に株式会社ディー・エヌ・エーに入社。ビッダーズでオークションコンテンツのディレクションを担当する。その後、Mobageでゲームコーナーなどのディレクションを担当し、2008年ビッダーズでショッピングコンテンツのディレクションを担当。2011年、スマートフォン対応に向けたメディアプロジェクトにおいてプロジェクトマネージャに。現在、ショッピング統括部企画編集グループにてグループリーダーを担当している。

株式会社ディー・エヌ・エー

1999年に設立され、同年オークションサイト「ビッダーズ」をスタート。2001年には、同サイトをオークション&ショッピングサイトにリニューアルし、本格的なEコマース事業へと乗り出す。2004年には、携帯電話向けのオークションサイト「モバオク」、ショッピングサイト「ポケットビッダーズ」などを開始。2005年に東京証券取引所マザーズにて上場を果たす。2006年には携帯電話向けゲームをベースとしたSNS「モバゲータウン」(現:Mobage)を開始。ユーザから爆発的な人気を博し、2007年には東京証券取引所市場一部に上場。その後、PC向けサービスやスマートフォン向けサービスなど各種サービスをマルチデバイスで展開する一方、アジアなど海外でもサービスを展開。2012年4月、本社を東京渋谷のヒカリエに移転した。

URL https://dena.jp/
関連記事 「こんなオフィスで働きたい!」