実際にECサイトをスマートフォン対応させるにはどうするの？

PC向けに作ったサイトは、スマートフォンやタブレットなどのモバイル端末から「見にくい・使いにくい」という欠点があります。PC、スマートフォン、タブレットはデバイス幅がそれぞれ異なり、モバイル端末では画面を指でタップしたり表示が回転したりと操作性も変わるため、PCサイト1つでモバイルユーザに対応するのは限界があるのです。しかし、今あるPCサイトを活かしてスマートフォン対応すれば、モバイル端末からもサクサク見やすいECサイトにバージョンアップすることができます。

代表的なスマートフォン対応方法として、「自動変換ツール」、「レスポンシブデザイン」、「スマートフォンサイト」の3つをご紹介します。

自動変換ツールを利用

自動変換ツールとは、今あるPCサイトを自動でスマートフォン対応させるツールです。導入するだけで、各種デバイスの横幅に合わせて最適化されたサイトを表示することができます。

メリット
1.既存のPCサイトの大改修や新たなスマートフォンサイトの構築が不要で、導入が簡単
2.Googleが推奨するモバイルフレンドリー化に対応できる
3.PCサイトだけ更新すればスマートフォンも自動更新されるので運用がラク

デメリット
1.維持費用が高め(月額費用は数万から数十万円ほど。初期費用が十万円以上かかる場合もある)
2.既存のPCサイトを変換するため、根本的な課題(サイト構成など)は改善できない
3.デザインの自由度が低めで、スマートフォンに特化したページを作ることが難しい

参考:一例として、以下のような変換ソフトウェアがあります。(アルファベット順)下記以外にも各自の予算や嗜好に従って、最適なサービスを選びましょう。

■SmartphoneConverter(スマートフォン・コンバータ)
PCサイトに変換タグを貼るだけでスマートフォン対応が可能。そのため、対応したいページのみを変換することができる。

＜ワードプレスの場合、変換プラグインがある＞
オープンソースのブログソフト、WordPressでサイトを作成しているなら、無料プラグインを利用してスマートフォン対応する方法があります。レスポンシブではないグリッドレイアウトのテンプレート使用時などに、以下のようなスマートフォン対応プラグインをインストールすると良いでしょう。 ただし、WordPressプラグインは、プラグイン同士の相性などによって不具合が発生したり、将来的にほかの方法でサイトリニューアル・引越しをする際は使えなくなったりするので、その点を理解したうえで導入する必要があります。

WordPressのスマートフォン対応プラグインの例
■WPtouch MobilePlugin
無料版はごくシンプルなスマートフォン対応に限定される。有料版のWPtouch Proもある。

■WordPress Mobile Pack
サイトを自動でスマートフォン対応できて、カラーやフォントの変更もある程度可能な無料プラグイン。

レスポンシブデザインで進化

レスポンシブデザインとは、PCサイトとスマートフォンサイトが同じソースと同じURLで、デバイス幅に応じて表示やデザインを変える方法です。試しに、PCでいくつかのサイトを閲覧して、画面(横幅)を狭くしてみてください。その際、画像や文字列の幅も一緒に変わるサイトは、多くの場合レスポンシブデザインを採用していると考えられます。ちなみに、本サイトもレスポンシブデザインです。

メリット
1.Googleが推奨するモバイルフレンドリー化、マルチスクリーン化に対応できる
2.URLが1つなのでどのデバイスからもアクセスやシェアがしやすい
3.PC、タブレット、スマートフォンのサイトが一本化されるので更新や運用がしやすい

デメリット
1.今あるPCサイトをそのまま使うことはできないため、サイト改修の費用と時間が必要
2.サイト構成やデザインをよく考えないとユーザビリティや購買率が悪くなる恐れがある
3.デバイスごとに表示速度を最適化できない

スマートフォンサイトをゼロから制作

PCサイトとスマートフォンサイトを別々に作る方法です。既にPCサイトがある場合は、その内容をコピーすればスマートフォンサイトが作れると思ってしまいがちですが、実際はそんなに簡単ではありません。単純にコピーしただけでは、URLが異なる同内容のページが2つできてしまい、ユーザにとってわかりにくいだけでなく、検索エンジンからも重複コンテンツと判断されるリスクがあります。また、2種類のサイトを更新・同期する手間は、日々サイトを運営するうえで負担となります。

メリット
1.PCサイト、スマートフォンサイトそれぞれに特化したデザインにできる

デメリット
1.モバイルフレンドリー化するには、両サイト間の適切な紐付けや転送設定などが必要
2.タブレットのような中間的なデバイス幅では最適な表示にならない場合がある
3.2種類のサイトを更新して同期する手間がかかる

【早見表】各スマートフォン対応方法のメリット・デメリット

3つのスマートフォン対応方法のメリット・デメリットを表にまとめました。比較項目は6つですが、大きくは3つのポイント、「導入のしやすさ」「運用・維持のしやすさ」「検索エンジンの評価」に分けることができます。

※インデックスの意味:「クローラー」と言う専用プログラムによって収集されたページのデータを、処理しやすい状態で検索エンジンデータベースに格納されることを指します。

これらのスマートフォン対応のうち、「導入のしやすさ」では1の自動変換ツールに軍配があがりますが、運用面では自由度が少なく、月額固定費などの維持費用が高めになる傾向があります。ツールや料金プランによってサービスレベルが異なるため、導入はいくつかのツールを無料で試してからのほうが良いでしょう。
「運用・維持のしやすさ」では、2のレスポンシブデザインが断トツです。サイト設計や制作は大変ですが、PCサイトとスマートフォンサイトが一本化されるので運用効率が良く、更新頻度やサイト改善のスピードアップにつながるメリットも期待できます。
「検索エンジンの評価」については、サイト構造がシンプルで検索エンジンがインデックスしやすいという点で2のレスポンシブデザインが優勢です。

なお、これらのスマートフォン対応で一番効率が悪いのは、3のスマートフォンサイトを個別に作ることでしょう。ECサイト運用担当者ならば容易に想像できると思いますが、PCサイトとスマートフォンサイト用のコンテンツをそれぞれ更新・同期するのは結構手間のかかる作業で、特に更新頻度の高いサイトにはオススメできません。

どのスマートフォン対応方法を選択するかによって、導入・運用の費用や、ECサイト運用担当者の手間に大きな違いが出てきますので、よく比較検討したうえで決定しましょう。

スマートフォン対応をしないと起こる問題

さて、ここまで見てきて、ひょっとすると「スマートフォンからPCサイトを閲覧することもできるわけだし、もうしばらくPCサイトのまま様子をみようかな」と考えた人もいるかもしれません。しかし、他社がサイトのスマートフォン対応を進めていたら、ユーザはそちらのサイトを「スマートフォンで見やすい・使いやすいサイト」として認知し、やがてあなたのPCサイトを「以前より見にくい」と感じるようになるでしょう。

スマートフォン対応をしない場合は、他にも以下のような問題点があります。

見にくい、リンクが押しにくい、遅い

画面の小さいスマートフォンから、PCサイトを閲覧すると、全体が縮小表示されます。小さな文字や画像は見にくいだけでなく、指先でリンクやボタンをクリックするのも一苦労です。また、PCサイトは比較的レイアウトが複雑で画像サイズも大きいので、スマートフォンでは表示スピードが遅くなり、ユーザの離脱を招く大きな要因となります。現在のサイトの表示スピードをテストしてみたい方は、以下のPageSpeed Insightsでチェックできます。

PageSpeed Insights

検索順位が下がる

Googleはモバイルフレンドリーを推奨しており、スマートフォン対応していないサイトは検索順位が下がることがあります。実際、2018年3月27日にGoogleより、モバイルファーストインデックス（MFI)が、幅広い範囲で展開を開始したと発表がありました。MFIは、Googleが検索順位を決定するために評価を行う対象を、従来のPCサイトからスマートフォン対応されているサイトに切り替えるというものです。レスポンシブをはじめスマートフォン対応を行っていない場合は、引き続きPCサイトが評価対象となるため、現時点でランキングに直接影響はないと言われています。ただし、スマートフォンでアクセスした際、表示に時間がかかる場合は、検索結果に悪影響が出る可能性があるため、注意すべきです。

そもそも自社のサイトがモバイルフレンドリーなのかどうかわからない、調べたことがないという方は、Googleの以下のツールで早速チェックしてみてください。

Googleモバイルフレンドリーテスト

モバイルファーストインデックスを開始します（Google公式）

販売機会のロス・売上低下のリスク

現在PCよりもスマートフォン経由で流入するECサイトの場合、スマートフォン対応していないと、サイトが見にくいだけで、販売機会のロスとなり、売上が低下するリスクがあります。できるだけ早く対応したほうが良いでしょう。また、近年スマートフォンの普及によって、スマートフォンからのECサイト訪問や、ネット通販利用率が増加傾向にあります。自社ECサイトにどのくらいのスマートフォンユーザが訪れているのか、その割合を把握していない方は、Googleアナリティクスなどの解析ツールを使って調べてみることをオススメします。

Googleアナリティクス

まとめ

ECサイトのスマートフォン対応について、大まかな方向性がつかめましたか?スマートフォン利用者が増加しているなか、運用担当者にとって自社ECサイトのモバイルフレンドリー化は迅速な対応が求められるミッションです。ECサイトのスマートフォン対応をしないと検索順位が下がったり、売上が低下したりする要因にもなりますので、自社にあったスマートフォン対応の方法を検討して対応を進めましょう。