スマホや携帯ユーザーの見やすさ・使いやすさを向上させる「モバイルフレンドリー対策」の重要性が高まりつつあります。
モバイルからのネットショッピングも一般化しつつあり、モバイルフレンドリーを意識したECサイト作りは非常に重要です。
しかし、一般的なWebサイトやオウンドメディアなどに比べ、ECサイトのモバイルフレンドリー対策は少し方法が異なります。特にレスポンシブデザインへの対応には大きな違いがあるため、注意しておきましょう。
今回は、モバイルフレンドリーの仕組みや特徴のほか、ECサイト向けのモバイルフレンドリー対策の方法をお伝えしていきます。
なぜモバイルフレンドリーが必要？8割のECサイトは対応済み
ECサイトを運営する場合、今ではモバイルフレンドリーへの対応が重要な施策の一つとなっています。モバイルフレンドリーとは、モバイル（主にスマホ）向けにサイト設計や表示を使いやすくする取り組みです。
ECサイト運営者への調査データによると、今から4年前の2015年11月時でもモバイルフレンドリーに対応するサイトが79%に達していました*1（ただし細かい施策までは手が回らないECサイトが多い）。
モバイルフレンドリーは2015年4月にGoogleの検索アルゴリズムに採用され、年を追うごとにその重要性が高まっています。スマホがより高度になり、今では誰もがモバイル端末を使ったWeb検索を行っているからです。
また、モバイルフレンドリーに対応したあるECサイトでは、対応前に比べてCVRが1.6倍に上昇したケースも公表されています*2。
Webサイトやオウンドメディアばかりではなく、ECサイトにもモバイルフレンドリーが欠かせない理由が分かります。
*1：impress BUSINESS MEDIA
*2：DIGITAL COMMERCE 360
ECサイトのモバイルフレンドリー対策を確認する方法
ECサイトのモバイルフレンドリー対策を確認するには以下のツールが利用できます。
- Googleモバイルフレンドリーテスト
- Google Search Console
いずれも無料で簡単に利用可能で、モバイルフレンドリー対策に必要な施策を分かりやすく教えてくれます。
Googleモバイルフレンドリーテスト
Googleは「モバイルフレンドリーテスト」という名称で、対策の内容を確認できるツールを公開しています。Search Consoleのツールの一つですが、Search Consoleの管理画面にアクセスしてチェックを行うより簡単で、簡易的な結果を知ることができます。
モバイルフレンドリーテストにアクセスし、URLの項目にECサイトのURLを入れるだけです。「URLをテスト」をクリックすると開始されます。
【モバイルフレンドリーテスト】
https://search.google.com/test/mobile-friendly?hl=JA
Google Search Console
Google Search Consoleの管理画面からモバイルフレンドリーテストを行うこともできます。
管理画面の左側メニューから「モバイルユーザビリティ」を選びます。すると、有効なページとエラーのあるページの内容が分かります。
モバイルフレンドリーを意識した6つのUI構築方法
モバイルフレンドリーに対応したECサイトを構築する場合、次の6つのポイントでUIを設計しましょう。
- CTAボタンやリンクを大きくする
- タップできる要素の間隔を広くとる
- フォントサイズを17px前後にする
- モバイル端末に対応しないコンテンツは含まない
- ページの表示速度を高める
- インタースティシャル広告をなくす
1.CTAボタンやリンクを大きくする
CTAボタン（購入を誘導するボタン）やリンクなどは、モバイルユーザーでもタップしやすく大きめにしておきます。Googleでは、小さくても48px以上のサイズでタップ要素を作成することを推奨しています。
2.タップできる要素の間隔を広くとる
タップ要素同士の間隔にも注意しましょう。たとえば、リンク同士があまりにも近接していると、PCでは楽にクリックできてもスマホではタップが困難です。タップの誤りでユーザビリティを低下させないよう、32px以上の間隔が適正といえます。
3.フォントサイズを17px前後にする
ただでさえ端末が小さいモバイルは、フォントサイズが小さいと内容が読み取りにくくなります。スマホのピンチによる拡大の手間や目の不自由なモバイルユーザーのことも考え、PCよりも気持ち的に大きめに設定しておくことが大切です。17px前後のフォントサイズが適切でしょう。
4.モバイル端末に対応しないコンテンツは含まない
モバイル用ECサイトは、PC用とで利用するコンテンツの種類を変更することが重要です。PCでは問題なく利用できても、スマホでは再生できないコンテンツが存在します。たとえば、Flashやプレイヤーが必要なコンテンツなどが該当します。
5.ページの表示速度を高める
ページの読み込み速度が遅いからといって、そのまま素直に待ってくれるユーザーは多くありません。Googleは年々、検索アルゴリズムでのページ読み込み速度の重要性を高めています。2018年7月にはスピードアップデートが行われ、特にモバイルユーザー向けの表示速度の重要度が増しました。
6.インタースティシャル広告をなくす
インタースティシャルとは、ページに覆いかぶさるように表示される広告のことです。Webページを見ていたら、いきなり画面に大きく広告が現れた経験がある方も多いかと思います。
インタースティシャルはコンテンツのほとんどの部分を隠しユーザーに不便を与えるものなので、今ではユーザーフレンドリーを阻害する要因として捉えられています。
D2CのECサイトにレスポンシブデザインは必要？
Webサイトやオウンドメディアに比べると、ECサイトにはレスポンシブデザインは対応しにくいことが分かります。
レスポンシブデザインとは、画面のサイズに合わせてサイトの表示を変える方法です。たとえば、ブログだとPCとスマホ、タブレットによって文章の改行やレイアウトの微修正を自動で行ってくれるため、わざわざデバイスごとにページを作る必要がありません。
一般的にレスポンシブに対応することはモバイルフレンドリーにも効果が高いと言われています。しかし、ECサイトの場合、次のような理由からレスポンシブデザインに対応しづらくなっているのです。
- 商品ページのページスクロールが長くなってしまいCTA前に離脱するユーザーが多い
- 商品数によってページ数が多くなってしまい階層が深くなることで離反を招く
また、プラットフォーム上の問題も考えられます。ECサイトを作成する際に利用するASPや開発会社などが、そもそもレスポンシブデザインに対応していないケースも少なくありません。
レスポンシブデザインに対応するプラットフォームでも仕様が複雑で、これまで以上に制作工数がかかってしまうこともあります。
そのため、ECサイトを運営する場合、Web・モバイル・タブレットとそれぞれ別のページを制作することが重要です。
【まとめ】モバイルフレンドリーばかりに力を入れすぎないこと
モバイルフレンドリーの重要性は年々高まっており、SEOによって検索上位を獲得する場合に加え、単純に顧客満足度やUX（ユーザー体験）の向上にも欠かせない取り組みといえるでしょう。
しかし、モバイルフレンドリー対策を完璧に行おうとすれば予算と人手がかかりすぎます。
また、UXの向上やページ読み込み速度の改善は際限がありません。そのため、モバイルフレンドリー対策ばかりにコストをかけすぎず、D2Cに必要なコンテンツやプロモーションに注力できる体制作りが必要です。