他社に負けない〜ホームページの「スマホ対応」方法を徹底解説
ホームページのスマホ対応はもう完了しましたか?モバイル端末でホームページを閲覧する人が増加中の今、多くの企業がwebサイトの「スマホ対応(モバイルフレンドリー化)」をすすめています。既存のPCサイトのデザインをリニューアルする前に、自社にふさわしいスマホ対応方法を知り、競合他社に負けないスマホ化のポイントを押さえましょう!
実際にwebサイトをスマホ対応させるにはどうするの?
PC向けに作ったホームページは、スマホやタブレット等のモバイル端末から「見にくい・使いにくい」という欠点があります。PC、スマートフォン、タブレットはデバイス幅がそれぞれ異なり、モバイル端末では画面を指でタップしたり表示が回転したりと操作性も変わるため、PCサイト1つでモバイルユーザーに対応するのは限界があるのです。しかし、今あるPCサイトを活かしてスマホ対応すれば、モバイル端末からもサクサク見やすいホームページにバージョンアップすることができますよ。
代表的なスマホ対応方法として、「自動変換ツール」、「レスポンシブデザイン」、「スマホ専用サイト」の3つを紹介します。
自動変換ツールを利用
自動変換ツールとは、今あるPC向けwebサイトを自動でスマホ対応させるツールです。導入するだけで、各種デバイスの横幅に合わせて最適化されたサイトを表示することができます。
- メリット
- 1.既存のPCサイトの大改修や新たなスマホサイトの構築が不要で、導入が簡単
- 2.Googleが推奨するモバイルフレンドリー化に対応できる
- 3.PCサイトだけ更新すればスマホも自動更新されるので運用がラク
- デメリット
- 1.維持費用が高め(月額費用は数万から数十万円ほど。初期費用が十万円以上かかる場合もある)
- 2.既存のPCサイトを変換するため、根本的な課題(サイト構成など)は改善できない
- 3.デザインの自由度が低めで、スマホに特化したページを作ることが難しい
- Mobify(モビファイ)
PCサイトをスマホ対応・最適化し、デバイスの横幅に応じてデザインされたサイトを表示する。表示を高速化する仕組みもある。 - SmartphoneConverter(スマートフォン・コンバータ)
PCサイトに変換タグを貼るだけでスマホ対応が可能。そのため、対応したいページのみを変換することができる。 - WEBトラン(ウェブトラン)
短時間でスマートデバイスに対応する、スマホサイト自動変換サービス。PCサイトを修正すると他のデバイスにもリアルタイムで反映される。
ワードプレスの場合、変換プラグインがある
オープンソースのブログソフト、WordPressでホームページを作成しているなら、無料プラグインを利用してスマホ対応する方法があります。レスポンシブではないグリッドレイアウトのテンプレート使用時などに、以下のようなスマホ対応プラグインをインストールすると良いでしょう。 ただし、WordPressプラグインは、プラグイン同士の相性などによって不具合が発生したり、将来的に他の方法でサイトリニューアル・引っ越しをする際は使えなくなったりするので、その点を理解したうえで導入する必要があります。
WordPressのスマホ対応プラグインの例
- WPtouch Mobile Plugin
無料版はごくシンプルなスマホ対応に限定される。有料版のWPtouchproもある。
- WordPress Mobile pack
サイトを自動でスマホ対応できて、カラーやフォントの変更もある程度可能な無料プラグイン。
レスポンシブデザインで進化
レスポンシブデザインとは、PCサイトとスマホ対応サイトが同じで、デバイス幅に応じて表示やデザインを変える方法です。試しに、パソコンでいくつかのwebサイトを閲覧して、画面(横幅)を狭くしてみてください。その際、画像や文字列の幅も一緒に変わるサイトは、多くの場合レスポンシブデザインを採用していると考えられます。ちなみに、本サイトもレスポンシブデザインです。
- メリット
- 1.Googleが推奨するモバイルフレンドリー化、マルチスクリーン化に対応できる
- 2.URLが一つなのでどのデバイスからもアクセスやシェアがしやすい
- 3.PC、タブレット、スマホのサイトが一本化されるので更新や運用がしやすい
- デメリット
- 1.今あるPCサイトをそのまま使うことはできないため、サイト改修の費用と時間が必要
- 2.サイト構成やデザインをよく考えないとユーザービリティや購買率が悪くなる恐れがある
- 3.デバイスごとに表示速度を最適化できない
スマホ専用サイトをゼロから制作
PC用のwebサイトとスマホサイトを別々に作る方法です。既にPCサイトがある場合は、その内容をコピーすればスマホサイトが作れると思ってしまいがちですが、実際はそんなに簡単ではありません。単純にコピーしただけでは、URLが異なる同内容のページが2つ出来てしまい、ユーザーにとって分かりにくいだけでなく、検索エンジンからも重複コンテンツと判断されるリスクがあります。また、2種類のサイトを更新・同期する手間は、日々サイトを運営するうえで負担となります。
- メリット
- 1.PCサイト、スマホサイトそれぞれに特化したデザインにできる
- デメリット
- 1.モバイルフレンドリー化するには、両サイト間の適切な紐つけや転送設定などが必要
- 2.タブレットのような中間的なデバイス幅では最適な表示にならない場合がある
- 3.2種類のサイトを更新して同期する手間がかかる
【早見表】各スマホ対応方法のメリット・デメリット
3つのスマホ対応方法のメリット・デメリットを表にまとめました。比較項目は6つですが、大きくは3つのポイント、「導入のしやすさ」「運用・維持のしやすさ」「検索エンジンの評価」に分けることができます。
スマホ対応方法 | 比較項目 | |||||
---|---|---|---|---|---|---|
導入のしやすさ | 運用・維持のしやすさ | 検索エンジンの評価 | ||||
初期設計 | 製作期間 | デザインの自由度 | 更新・同期の手間 | URLの統一 | インデックス※ | |
1.自動変換ツール | ○ 自社設計は不要。初期費用がかかる場合あり |
◎ 導入は簡単で、修正も比較的少なくすむ |
△ ツールに依存するため制約が多い |
○ 更新・同期の手間は少なめだが、毎月の維持費用がかかる |
○ URLは統一される場合とそうでない場合あり(ツールによって違う) |
○ 読込み速度を最適化できる |
2.レスポンシブデザイン | △ PCサイトより制作費が高め |
△ PCサイトより設計が難しく制作時間が長め |
○ 部分的に制約あり |
◎ サイト一本化により更新・同期の手間が最小限 |
◎ URLは完全統一 |
○ インデックスしやすい |
3.スマホ専用サイト | △ PCサイトとは別で同程度の制作費用が必要 |
△ PCサイトと同程度の時間がかかる |
◎ スマホに特化したデザインが可能 |
△ PCサイトとは別個のため更新・同期の手間が大きい |
△ URLが別々。コンテンツ重複リスクがあり、転送設定などが必要 |
△ インデックスしにくく、読み込みが遅くなる場合あり |
※インデックスの意味:「クローラー」と言う専用プログラムによって収集されたwebページのデータを、処理しやすい状態で検索エンジンデータベースに格納されることを指します。
これらのスマホ対応のうち、「導入のしやすさ」では1の自動変換ツールに軍配があがりますが、運用面では自由度が少なく、月額固定費などの維持費用が高めになる傾向があります。ツールや料金プランによってサービスレベルが異なるため、導入はいくつかのツールを無料で試してからのほうが良いでしょう。
「運用・維持のしやすさ」では、2のレスポンシブデザインが断トツです。サイト設計や制作は大変ですが、PCサイトとスマホサイトが一本化されるので運用効率が良く、更新頻度やサイト改善のスピードアップにつながるメリットも期待できます。
「検索エンジンの評価」については、サイト構造がシンプルで検索エンジンがインデックスしやすいという点で2のレスポンシブデザインが優勢です。
なお、これらのスマホ対応で一番効率が悪いのは、3のスマホ専用サイトを個別に作ることでしょう。ホームページ担当者ならば容易に想像できると思いますが、PCサイトとスマホサイト用のコンテンツをそれぞれ更新・同期するのは結構手間のかかる作業で、とくに更新頻度の高いサイトにはお薦めできません。
どのスマホ対応方法を選択するかによって、導入・運用の費用や、ホームページ担当者の手間に大きな違いが出てきますので、よく比較検討したうえで決定しましょう。
スマホ対応をしないと起こる問題
さて、ここまで見てきて、ひょっとすると「スマホからPCサイトを閲覧することもできるわけだし、もうしばらくPCサイトのまま様子をみようかな」と考えた人もいるかもしれませんね。しかし、競合他社がホームページのスマホ対応を進めていたら、ユーザーはそちらのサイトを「スマホで見やすい・使いやすいサイト」として認知し、やがてあなたのPCサイトを「以前より見にくい」と感じるようになるでしょう。
スマホ対応をしない場合は、他にも以下のような問題点があります。
見にくい、リンクが押しにくい、遅い
幅の狭いスマホから、幅の広いPCサイトを閲覧すると、全体が縮小表示されます。小さな文字や画像は見にくいだけでなく、指先でリンクやボタンをクリックするのも一苦労です。また、PCサイトは比較的レイアウトが複雑で画像サイズも大きいので、スマホでは表示スピードが遅くなり、ユーザーの離脱を招く大きな要因となります。現在のサイトの表示スピードをテストしてみたい人は、以下のGoogleデベロッパーズページからチェックできます。
検索順位が下がる
Googleはモバイルフレンドリーを推奨しており、スマホ対応していないホームページは検索順位が下がることがあります。実際、2018年3月27日にGoogleより、モバイルファーストインデックス(MFI)が、幅広い範囲で展開を開始したと発表がありました。MFIは、Googleが検索順位を決定するために評価を行う対象を、従来のPCサイトからモバイルサイトに切り替えるというものです。レスポンシブをはじめモバイル対応を行っていない場合は、引続きPCサイトが評価対象となるため、現時点でランキングに直接影響はないと言われています。ただし、モバイルでアクセスした際、表示に時間がかかる場合は、検索結果に悪影響が出る可能性があるため、注意すべきです。
そもそも自分のサイトがモバイルフレンドリーなのかどうか分からない、調べたことがないという人は、Googleの以下のツールで早速チェックしてみてください。
モバイルファーストインデックスを開始します(Google公式)
販売機会のロス・売上低下のリスク
現在PCよりもスマホ経由で流入するECサイトの場合、スマホ対応していないと、webサイトが見にくいだけで、販売機会のロスとなり、売上が低下するリスクがあります。できるだけ早く対応したほうが良いでしょう。また、近年スマホの普及によって、スマホからのECサイト訪問や、ネットショッピング利用率が増加傾向にあります。自社のECサイトにどのくらいのスマホユーザーが訪れているのか、その割合を把握していない人は、Googleアナリティクスなどの解析ツールを使って調べてみることをおすすめします。
まとめ:
ホームページのスマホ対応について、大まかな方向性がつかめましたか?スマホ利用者が増加しているなか、担当者にとって自社webサイトのモバイルフレンドリー化は迅速な対応が求められるミッションです。ECサイトのスマホ対応をしないと検索順位が下がったり、売上が低下したりする要因にもなりますので、自社にあったスマホ対応の方法を検討して対応を進めましょう。