キービジュアル

まだ未対応?!EC担当者に伝えたい、今すぐスマホ対応したくなる話


こんにちは、nex8事業部の水井です。

今回は『あなたのサイトをスマホ対応したくなる話』について書きたいと思います。

今では、当たり前のように多くの人が持っているスマートフォン。
スマホの持つ大きな魅力の一つとして、パソコンを持ち歩かなくてもインターネットで検索し、Webサイトの閲覧、さらにはそのまま商品購入やレストランの予約などができるという点がありますよね。

普段何気なく閲覧しているWebサイトですが、スマホから見た時にもPCサイトがそのままギュッと小さくなってまったく同じように表示されるサイトと、スマホ専用のレイアウトで表示されるサイトの2通りがあることにお気づきでしょうか。

後者のようなサイトは「スマホ対応サイト」(=スマートフォン用に最適化されたWebサイト)などと呼ばれますが、今回はこの「スマホ対応」の必要性、メリット、対応方法概要をご紹介していきます。

スマホ対応が必要な3つの理由

なぜスマホ対応が重要なのか、大きく3つの理由をお話していきます。

PCとスマホの環境の違い

まずは、PCとスマホの環境の違いが挙げられます。

皆さんも感じたことがあるかもしれませんが、PC用のWebサイトをスマホで閲覧しようとすると不便なケースが多々あります。
それは、以下のようにPCとスマホでは、共通点も多くある一方で異なる点も多いためです。

■共通点
・インターネットに繋いで、Webサイトを閲覧できること
・アプリケーションを使用できること
etc..

■異なる点
・画面の大きさ(PC:1366×768など/スマホ:375×667など)
・操作方法(PC:マウス操作/スマホ:指操作)
・使用する時間帯や場所(PC:家や会社など/スマホ:家や通勤時間など)
etc..

PCサイトをスマホで閲覧させる場合、離脱率が大きな問題となりますが、その要因としては、「見にくさ」「操作のしにくさ」が挙げられます。

上記のように、PCもスマホもWebサイトを閲覧できるのは同じですが、画面の大きさが異なっていますね。
そのため、表示できる文字の量、画像の量が格段に違い、PCと同じ分量をスマホでも表示しようとすると、文字も画像もかなり小さく見にくくなってしまいます。

せっかく素敵なWebサイトでも、文字が小さい、画像が小さいという理由だけで、離脱してしまうユーザーは多いです。

また、「操作のしにくさ」は、離脱率だけでなくコンバージョン率にも影響してきます。
PCの場合はマウスがあるので画面のどこでもクリック、スクロールが容易です。
小さなボタンもマウスポインタなら簡単にクリックできますよね。

一方、スマホの場合は、指による操作のみのため、スクロール幅やクリックできるボタンの大きさには限度があります。
そうすると、せっかく気に入った商品もスマホでは詳細ページに遷移できずに検討をやめてしまったり、カートに入れるまでに時間がかかってユーザーのイライラにつながったりすることで、見込み顧客をみすみす逃してしまうこともあり得ます。

見やすく、操作もしやすいWebサイトにすることで、離脱率を改善して、滞在時間、閲覧ページ数、さらには購入率の向上へとつなげることが出来るのです!

このようなPCとは異なる点に対応し、スマホでも快適にWebサイトを閲覧できるようにすることが「スマホ対応する」ということであり、閲覧してくれるユーザーの使い勝手を考えた思いやりであるとも言えますね!

スマホの普及

それでもまだPCからのユーザーが多そうだから、とりあえずスマホユーザーは後回しでいいかな・・なんて思っていませんか?
いまやスマホはほとんどの人が持っている時代です。
世帯保有率は急激に伸びていますし、個人での利用状況を見ても圧倒的にPCよりもスマホが多く使われている事がわかります。

世帯所有率,

(スマートフォンの世帯所有率)

時間変化,

(PCとモバイルの1日の平均利用時間)

(出典:総務省「平成28年版情報通信白書」)

また日本国内のEC市場規模は、13.8兆円まで拡大し、年々右肩上がりを続けている中で、スマホでネットショッピングするユーザーも多いのは言わずもがなでしょう。
そんな時代において、スマホユーザーに合っていないWebサイトではそれだけで選択肢から外れることもあり得ます。
これは大きな機会損失となり、かなりもったいないですよね。

検索エンジン対策

スマホ対応していないことのリスクは、ユーザーがサイトに来た時の離脱率だけでなく、その前の集客にも響いて来ます。

Googleでは2013年、「スマートフォンユーザーへの更なる検索体験の向上と、スマートフォン環境での閲覧の支障を減らす」といった目的のもと、スマートフォンで閲覧できないコンテンツが含まれているなど、誤った対応を行っているサイトのモバイル検索順位(スマートフォンでの検索結果順位)を下げる方針を発表しました。
つまりスマホ対応できていないサイトは、スマホユーザーから見つけられにくくなっている可能性があると言うことです。

スマホ人口が増え、スマホからのサイト閲覧が伸びる中で、ユーザーの利便性を向上し検索時の優位性も高められるスマホ対応は、もはややらない理由のない、一石二鳥の施策ということがわかっていただけたかと思います。

スマホ対応で得られるメリット

離脱率・購入率の改善

スマホ対応でまず期待できるのは離脱率の改善です。
下記は、今年の11月にスマホ対応したあるサイトのGoogleアナリティクスのデータです。

前年比画像

スマホ対応前の前年度と比べて、スマホユーザーの直帰率が低くなり、閲覧ページ数(セッションあたりページ数)や滞在時間(平均セッション時間)が伸びていることがわかります。

このサイトはECサイトではないので購入率(コンバージョン率)の推移例は出ていませんが、サイト内をしっかり見てもらえる機会が増えれば自ずと購入率の向上にもつながっていくでしょう。

見やすく、操作もしやすいWebサイトにすることで、離脱率を改善して、滞在時間、閲覧ページ数、さらには購入率の向上へとつなげることが出来るのです!

購入機会・経路の拡大

次に期待できるのが、購入機会と経路の拡大です。
下図は、弊社サービスnex8の時間帯ごとの配信量を表したグラフです。
nex8はスマートフォンのメディアサイトやアプリに対して広告を配信するので、ユーザーがよく使っている時間帯に配信が増加します。
つまりスマホをよく使用している時間帯が分かるグラフということです。

時間帯別

グラフを見てみると通勤時間やランチの時間などが、スマホをよく使うタイミングであることがわかります。
また外出時だけでなく、自宅にいる時間(PM7時~AM8時)、特に就寝前の時間(PM10時~AM2時)にもスマホが良く使われている事もわかりますね。

この時間帯は、ユーザーがWebサイト閲覧のためにまとまった時間が確保できるので、商品訴求や購入に繋げることの出来るゴールデンタイムともいえるのではないでしょうか。
この時間帯のユーザーを逃さないためにも、スマホ化はかなりオススメと言えます。

加えて、最近ではスマホでの商品購入のハードルがぐっと下がってきています。
スマホでの決済方法は多岐にわたっていて、クレジットカード払いはもちろん、代金引換や、銀行振り込み、キャリア課金での支払いなどなど、ユーザーの要望に合わせた決済が可能となっているのも1つの要因です。

そのため、「スマホで購入する」という行為自体がかなり身近なものとなっており、20~30歳ではすでにPCと同様の割合で商品購入をしています。
将来的には、スマホの普及率と同様に大幅に広がっていくことは容易に予想できるので、EC施策においてスマホ対応は急務の対策とも言えるのではないでしょうか。

スマホ対応は難しくない

「スマホ対応」「スマホ最適化」と言うけど、一体何から手を付けたらいいのか。
ここでは押さえておきたいポイントと、ゼロからすべて自分で対応しなくて済む、便利なツールについてご紹介します。

押さえておきたい、スマホ対応の具体例

ユーザーにとって利便性の高いスマホ対応サイトを作るためには具体的にどんなことに気をつければ良いのか、基本的なものを挙げてみます。

・表示速度を改善する(ページ容量を軽くする)
・flashなど、スマホで再生不可能なコンテンツをなくす(HTML5にするなど)
・スマホ画面で読みやすい文字サイズにする
・スマホの一画面で見せるのに適切な情報量やレイアウトにする(レスポンシブデザインにするなど)
・クリッカブルなテキストや画像をわかりやすくする(マウスオーバーしないとわからないようなものはスマホではNG)
・指でも簡単にタップできるよう、クリッカブルな要素同士の間隔に注意する

スマホに慣れた若い人が多いのか、女性やお年寄りなどあまり詳しくない人が多いのかなど、サイトの利用者層にもよるので、文字サイズにしてもレイアウトにしてもこれが最適、という正解はないのですが、ターゲットや業種があなたのサイトと似ていそうなサイトなど、いろいろなサイトを見て研究してみると参考になるでしょう。

PCブラウザでスマホの表示確認ができるエミュレータも便利ですが、ぜひ、実際にスマホでさまざまなサイトを使ってみて、この導線はわかりやすいな、ボタンが右手でも左手でも押しやすいな、といったユーザー目線を磨いてみてください。

難易度&利用環境別・スマホ対応2パターン

スマホ対応の基本がわかったところで、実際にどのように実装していくかに移ります。
内製または外注でオリジナルに作り込むパターンを想像される方が多いと思いますが、実はWordpressやカートシステム等を利用しているサイトの場合、それらの提供するツールで手軽に対応できることもあるのです。
それぞれ簡単にご紹介していきましょう。

① 内製/外注で作り込む
一般的に大きく2つのやり方がありますが、1つ目として、PCサイトのHTMLとは別に、スマホサイト用のHTMLを用意するパターンがあります。
この場合、サイト更新時はPC/スマホそれぞれのページを更新する必要があるため、運用管理が少し複雑になります。
また、それぞれのURLも別になります。

もう1つは、レスポンシブデザイン(レスポンシブサイト)にするパターンがあります。
レスポンシブデザインとは、PCやスマホ、タブレットといったデバイスの横幅を判断基準に、それぞれに適応するようサイトのレイアウトを調整してくれるデザイン、またその技術のことです。

最適化Top

(レスポンシブデザインサイトの例。左:PCサイト、右:スマホサイト)

HTMLは1枚で、CSS(※)によってデザインだけを分けるため、1度作ってしまえば、サイト更新時も1つのHTMLを更新するだけで他のデバイスの内容も反映されます。

※カスケーディング・スタイルシートの略。デザインについての指定が書かれたファイル。

マルチデバイス対応ができますし、共通のURLで管理ができることに加え、Googleでもデザインパターンとしてこの手法を推奨しています。
ですが、専門知識が必要になるため、自社に技術のある人がいなければ制作会社等に依頼する必要があります。

② ツールで手軽に対応する

■Wordpress利用サイトの場合
最近ではWordpressにおいて、レスポンシブデザイン対応のテーマもあります。
このテーマを利用して、簡単にレスポンシブサイトを制作しても良いかもしれません。

また、Wordpressでは下記のようなプラグインを使用してスマホ対応することも可能です。

・WPtouch
・WordPress Mobile Pack
・MobilePress

これらは、インストールと簡単な設定だけで自動的にスマホ対応サイトを生成してくれるため、手間がかからずに実施できます。

それだけでなくデザインの変更やSNSとの連携など、様々なカスタマイズもできます。
プラグインについて、より詳しくご紹介した記事はコチラ

■ショッピングカート利用サイトの場合
例えば、nex8も連携しているショッピングカートサービスの『FutureShop2』、『ショップサーブ』では、スマホ対応機能を備えています。
スマホサイトのデザインは、テンプレートの中から選択も可能ですし、オリジナルデザインで作成することも可能です。
支払方法もPCサイトと同様のままで、作成することが可能なので、とても便利ですよね。

このように、スマホ対応する方法は様々ですが、費用はもちろん、デザインや機能の自由度、Webサイトの構造、管理方法などから、最適な方法を選んでいて頂ければと思います。

まとめ

いかがでしたでしょうか。
今回はWebサイトのスマホ対応についてお話しました。
ご紹介した以外にも、たくさんのメリットはありますし、アパレル大手の企業ではスマートフォン経由での売上が6割以上という事例もあり、検討してみる価値は十分にあるのではないでしょうか。
まだWebサイトがスマホ対応していない場合には、是非、一度ご検討してみてください!


nex8のリターゲティングをもっと詳しく

このブログは株式会社ファンコミュニケーションズでリターゲティングサービスを提供しているnex8事業部のメンバーが中心に運営しているメディアです。
中小EC向けに役立つ情報を分かりやすくお届けしています。
nex8に関して少しでも興味を持っていただけましたら、こちらよりお気軽にお問い合わせください。

The following two tabs change content below.

水井 悠莉

nex8事業部で営業を担当。富山から上京し、ジュエリー業界を経て、現在Web業界で邁進中。好きなものは旅行と海獣。苦手なものはアウトプット。ブログでは出来るだけわかりやすく発信していきたいと思います!

こちらの記事も読まれています