ECサイトをスマートフォンで利用するユーザーの数は年々増えています。ひと昔前まではECサイトを利用するときはパソコンが一般的でしたが、近年ではスマートフォンユーザーの方が多数となっているのが現状です。そのため、ECサイトにおいてはスマートフォンユーザーに最適化する「スマホ対応」が求められています。この記事では、ECサイトをスマホ対応すべき理由、具体的な実装方法や注意点について解説します。

ECサイトをスマホ対応すべき理由

ECサイトのスマホ対応が重要であると認識していても、なぜスマホ対応すべきかを説明できる方は少ないのではないでしょうか。

以下では、ECサイトをスマホ対応すべき理由について紹介します。

PCサイトはスマートフォンで見づらい

パソコンとスマートフォンでは、画面の縦横比やサイズが大きく異なります。そのため、パソコンでの閲覧を想定してデザインされたECサイトは、スマートフォンユーザーにとって非常に見づらいものになってしまいます。可読性の低いコンテンツはユーザーが離脱しやすく、コンバージョンにつなげるのは難しいといえるでしょう。

また、パソコンとスマートフォンは操作の点でも大きな違いがあります。パソコンでは、主な操作はスクロールとクリックですが、スマートフォンではスワイプとタップです。パソコンの場合、ボタンどうしが近くてもクリックに不便さは感じにくいものの、スマートフォンでは誤ってタップしやすくなってしまいます。そのため、レイアウトの点でも十分注意すべきです。

スマートフォンユーザーが増加している

近年、スマートフォンを利用するユーザーが増加しており、toC向けのWebサイトにおいてはほとんどがスマートフォンユーザーとなっています。かつては携帯電話の通信回線は、パソコンに比べて速度が遅く、画面のサイズや解像度の点でもパソコンには大きく劣っていました。そのため、インターネットを利用する際はパソコンを使用するユーザーが多かったものの、近年では携帯性に優れたスマートフォンの方がよく用いられています。

ECサイトも例外ではなく、ユニークユーザーのうち、8割以上がモバイル環境からのアクセスとなっているECサイトも多いはずです。そのため、スマートフォンユーザーにとって使いやすいUIを実現することは、非常に重要です。

SEOにも影響を与える

Googleは、スマートフォンに最適化する「モバイルフレンドリー」を提唱しており、2019年からはモバイル向けサイトを優先してインデックスするMFI（Mobile First Index）を開始しました。つまり、スマホ対応していないWebサイトはインデックスされにくく、SEO評価を獲得しづらい状況となります。

ECサイトの場合、自然検索よりもソーシャルや広告などの流入がメインとなるケースが多いものの、SEOに悪影響を及ぼす要因を放置すべきではありません。機会損失を防ぐ意味でもスマホ対応は必須といえるでしょう。

ECサイトをスマホ対応させる方法

前述のとおり、ECサイトのスマホ対応は必須ともいえる状況です。しかし、具体的にどのようにスマホ対応させるのがよいのでしょうか。

以下では、ECサイトをスマホ対応させる方法について紹介します。

レスポンシブデザインで制作する

レスポンシブデザインとは、デバイスの画面サイズに応じて、自動でレイアウトを調整できるように組まれたデザインです。主なデバイスの種類としてパソコン・スマートフォン・タブレットがあり、各社からさまざまな機種が発売されているため、デバイスの多様化が進んでいます。そのため、各デバイスに最適化させられるのは大きな強みです。

また、ECサイトの構築にあたって時間や手間がかからないのも、レスポンシブデザインを導入するメリットの一つです。レスポンシブデザインを活用せず、パソコン版・スマートフォン版のサイトをそれぞれつくる方法もありますが、2種類のサイトを構築する時間や手間がかかります。

スマートフォン専用サイトを制作する

レスポンシブデザインでは、一つのサイトで表示を調整して出し分けますが、スマートフォン専用サイトを別途制作する方法もあります。レスポンシブデザインの場合、各要素のサイズを調節してデバイスごとの最適化を図るため、表示される要素自体を大きく変えることは難しいでしょう。

一方、パソコン版・スマートフォン版でそれぞれサイトを制作すれば、まったく異なるUIで設計することも可能です。デザインやレイアウトの自由度も高く、あらゆるニーズに対応できます。

ただし、あくまでも別ページとなるため、SEO評価が分散しやすく、管理が煩雑になるデメリットもあります。メリットとデメリットを比較しつつ、自社に適した方法を検討することが重要です。

自動変換ツールを活用する

すでに運用を開始しているECサイトがある場合、自動変換ツールを活用してスマホ対応することも可能です。レスポンシブデザインの実装、スマートフォン専用サイトの構築には、デザインやコーディングのリソースが必須となりますが、自動変換ツールであれば人的な負担はほとんどありません。

ただし、自動変換ツールの導入や運用にコストがかかる点には注意が必要です。コストはツールによって異なりますが、数十万円程度の初期費用、数万円の月額費用がかかるケースが一般的です。

ECサイトをスマホアプリ化する方法もある

Webサイトの形式にこだわらないのであれば、ECサイトをスマホアプリ化する方法もあります。なお、Amazonやユニクロなどの大手各社は、Webサイトとアプリを並行して運用しています。ECに注力するのであれば、両方運用するのも一つの手です。

以下では、ECサイトをスマホアプリ化するメリットとデメリットについて紹介します。

スマホアプリを導入するメリット

スマホアプリの場合、インストールしてもらえればホーム画面にアプリアイコンが追加されます。スマートフォンを利用するたびに目にとまるため、ユーザーがモールやショップのことを思い出すきっかけにもなるはずです。

また、Webサイトにはない機能としてプッシュ通知があります。プッシュ通知とは、ユーザーに対して、メッセージの受信やキャンペーンの開始などをお知らせできる機能です。プッシュ通知はロック画面やホーム画面に表示されるため、ほぼすべてのユーザーに内容を確認してもらえます。

ただし、ユーザーにとってメリットのないお知らせは、ユーザーにとって邪魔なものにもなりかねません。クーポンやキャンペーンなど、お得に利用できることをアピールする内容を発信するとよいでしょう。

スマホアプリを導入するデメリット

スマホアプリには独自のメリットがある一方、アプリをインストールしてもらわないと強みを発揮できません。アプリのインストールは、Webサイトの訪問に比べてハードルが高いため、なかなか利用してもらえない可能性もあるでしょう。そのため、インストールを促す施策は必須です。

具体的には、アプリで購入した顧客への割引やポイント還元率アップなどです。ユーザーにとってメリットを主張して、まずはアプリをインストールしてもらうための戦略が重要になるでしょう。

また、アプリはWebサイトに比べてアップデートの頻度が多くなりやすい点にも注意すべきです。Webサイトの場合、日常的な更新業務のほかには年単位でメンテナンスがあるくらいですが、アプリは細かなアップデートをひんぱんに繰り返して、徐々にUXを改善するケースが一般的です。

ECサイトのスマホ対応で注意すべきポイント

ECサイトのスマホ対応は、スマートフォンユーザーに利用しやすいECサイトを提供することを目的としていますが、そのためにはどのような点に注意すべきでしょうか。

以下では、ECサイトのスマホ対応において注意すべきポイントについて解説します。

ファーストビューに情報をつめこまない

ユーザーがECサイトを開いたとき、はじめに表示されるファーストビューに情報をつめこみすぎないことが重要です。ファーストビューには、いちおし商品やキャンペーン情報などを入れたくなりますが、情報量が多すぎると離脱につながるおそれがあります。

優先順位が高いものは上部に掲載する

スマートフォンの場合、パソコンに比べて画面サイズが小さく、一度に表示できる情報には限りがあります。そのため、情報の優先順位を決めたうえで、重要な情報はできるだけ上部に配置することが大切です。

なお、ヒートマップなどを活用して、だいたいどれくらいまで読まれているかを把握しておくのもポイントです。全体的な位置と読了率の目安をおさえておくと、どこにどの情報を配置すべきかがイメージしやすくなるでしょう。

カテゴリをわかりやすくまとめる

ECサイトは、一般的なWebサイトに比べてメニューが多くなりやすい特徴があります。そのため、画面サイズの小さいスマートフォンで操作するユーザーにとっては、カテゴリのわかりやすさが回遊のストレスに大きく影響します。

ECサイト内で商品を探しているユーザーがスムーズにたどり着けるようにするには、カテゴリを充実させると同時に、どのカテゴリにどんな商品があるかを理解しやすい構造にすることが重要です。

商品情報や画像は見やすくする

スマートフォンユーザーは、小さな画面の中で商品情報や画像を閲覧しています。そのため、視認性を損なわないよう、商品情報や画像は大きく表示させるべきです。

とくに一覧ページなどでは多くの商品がラインナップされていて、一つひとつの商品が見づらくなりやすい傾向があります。一度に多くの商品を表示させつつ、個々の商品が見えにくくならないラインを検討するとよいでしょう。

細かい動作はできるだけ省く

スマートフォンは指先で操作するため、パソコンに比べて細かな動作はストレスを与えやすいです。そのため、シンプルに操作できるサイトの方がユーザーから好まれやすい傾向があります。

たとえば、検索結果を表示させる際にはページングを利用せず、スクロールで表示されるような仕組みが適しているといえるでしょう。

項目が多い部分はコンパクトにする

前述のとおり、スマートフォンは画面サイズの関係で表示できる要素が少なくなります。そのため、項目が多い部分についてはコンパクトにすることが重要です。

たとえば、Q&AやFAQのような項目は多くの要素が並ぶ可能性があり、スマートフォン上ですべて表示してしまうと、ページが長くなりすぎるおそれがあります。アコーディオン機能などを活用して、コンパクトな見せ方ができるとよいでしょう。

電話の発信ボタンを活用する

スマートフォン独自のメリットとして、Web上から直接電話をかけられる点があります。パソコンの場合、電話番号を調べてダイヤル入力する必要がありますが、スマートフォンであればWeb上の発信ボタンをタップするだけで発信する仕様を実装できます。

親指での操作を意識する

スマートフォンを利用する際には、片手で操作するユーザーが多く、サイトのデザインやレイアウトも親指での操作を意識して検討することが重要です。たとえば右利きの方が多いことを考えると、スマートフォンの操作を右手の親指で行うため、左上のボタンは押しにくくなります。

まとめ

ECサイトのスマホ対応は、スマートフォンユーザーの顧客体験を最適化するうえで必要不可欠です。スマートフォンユーザーが増えている現状を踏まえると、スマートフォンで利用しにくいECサイトは売上をあげるのが難しくなってしまうでしょう。

また、ECサイトのスマホ対応においては、スマートフォンならではの機能を活用することも重要です。ワンタップで電話を発信できる機能、カメラ機能を利用したAR試着などを導入できれば、パソコンにはない顧客体験を提供できるでしょう。