他社に負けない〜ホームページの「スマホ対応」方法を徹底解説

ホームページのスマホ対応はもう完了しましたか？モバイル端末でホームページを閲覧する人が増加中の今、多くの企業がwebサイトの「スマホ対応(モバイルフレンドリー化)」をすすめています。既存のPCサイトのデザインをリニューアルする前に、自社にふさわしいスマホ対応方法を知り、競合他社に負けないスマホ化のポイントを押さえましょう！

実際にwebサイトをスマホ対応させるにはどうするの？

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

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

自動変換ツールを利用

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

ワードプレスの場合、変換プラグインがある

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

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

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

スマホ専用サイトをゼロから制作

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

【早見表】各スマホ対応方法のメリット・デメリット

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

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

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

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

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

スマホ対応をしないと起こる問題

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

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

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

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

PageSpeedInsights

検索順位が下がる

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

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

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

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

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

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

Googleアナリティクス

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

このコンテンツを読んだ方のお役に立てそうなテーマ

月あたり300円でネットショップ店長になれる!?