ホームページをスマホ対応にする方法は？6つの方法を解説！｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

スマートフォンが普及した現代では、ホームページのスマホ対応は必須です。

SISTRIX 社の調査によると、日本ではスマホやタブレットを使ってホームページを見ているユーザーの割合はおよそ75％。つまり、スマホ対応できていないホームページは、7割以上の人に見てもらえない、もしくはすぐに離脱されてしまうことが考えられます。

参考：The proportion of mobile searches is more than you think – What you need to know

しかしスマホ対応の重要性はわかっていても「どのように対応すればよいかわからない」とお悩みの企業担当者の方も多いでしょう。

そこで本記事では、自社のホームページをスマホ対応にする6つの方法を解説します。ホームページのスマホ対応を外注するときに知っておきたいことについても触れていますので、ホームページのスマホ対応を検討しているWeb担当の方は、ぜひ参考にしてください。

ホームページのスマホ対応とは？

ホームページのスマホ対応とは、スマートフォンでホームページを閲覧した際にページが見やすくなるよう最適化させることです。具体的には下記が対応のポイントとして挙げられます。

• ページの拡大・縮小の必要がない

• コンテンツが画面サイズに合っており、横スクロールが不要

• 指で押しやすいバナーボタンが設置されている

たとえばスマートフォンで見られるけれど、文字が小さくて読みにくいWebサイトを見たことはありませんか？　また文字を読むため拡大すると、コンテンツが画面からはみだしてしまって見にくいという経験はないでしょうか。

このようなWebサイトは、スマホ対応できていない状態です。スマホ対応できていないホームページは読みにくく、ユーザーの離脱率を高めてしまいます。

ホームページにスマホ対応が必要な理由

ホームページにスマホ対応が必要な理由は、ユーザーに「見やすい」「操作しやすい」と感じてもらうためです。

Googleの調査によると「スマホ対応のWebサイトから商品やサービスを購入する可能性が高い」と回答したユーザーは全体の67％で、スマホ対応のWebサイトを閲覧した多くのユーザーが見込み顧客となる可能性があることが示されています。

一方「探しているものがすぐに見つからなければ別のWebサイトに移動する」と回答したユーザーは61％。つまり、スマートフォンで表示されるWebサイトの利便性が悪いと、見込み顧客を逃してしまうリスクがあることが読み取れるのです。

参考：Google Analytics Solutions: Mobile-friendly sites turn visitors into customers

さらにスマホ対応によりホームページの利便性が向上すれば、サイトのユーザビリティも向上します。サイトのユーザビリティはSEO評価を大きく左右するため「ホームページをスマホ対応させたら検索順位が上がった」ということも十分に起こりえるでしょう。

逆に言うと、ホームページをスマホ対応しないことはSEOにおいて悪影響を及ぼします。検索順位が上がれば自社のサービスや商品の認知が広がり、企業の利益アップにつながるため、ホームページのスマホ対応はユーザーだけでなく企業側にもメリットがあるといえるのです。

自社のホームページがスマホ対応になっているか確認する方法

Googleでは、ホームページがスマホ対応になっているかどうかを簡単に調べられる無料ツール「モバイルフレンドリーテスト」を公開中です。

▲出典：モバイルフレンドリーテスト

モバイルフレンドリーテストとは、調べたいWebサイトのURLを入力するだけで、そのWebサイトがスマホ対応しているかどうかを判断してくれるテストツールのこと。

もしスマートフォンに対応していない場合は、「リンク同士が近すぎる」「フォントが小さすぎる」など問題点が一覧で表示されます。現在の問題点を把握できるため、今後の対応策を検討できるでしょう。

参考：モバイル フレンドリー テスト - Google Search Console

既存のホームページをスマホ対応にする方法4つ

ここからは既存のホームページをスマホ対応に変換する方法についてお伝えします。

スマホ対応にする方法として、以下の4つを紹介します。

• 変換ツールを活用する

• WordPressの機能を活用する

• CSSを調整する

• 外注する

1. 変換ツールを活用する

既存のホームページをスマホ対応にするには、変換ツールを活用する方法があります。変換ツールとは、既存のホームページを簡単にスマホ対応に変換するものです。

変換ツールは、プログラミングの知識がなくても利用できます。また、変換ツールを活用して自社でスマホ対応させることができれば、コストを抑えることもできるでしょう。

ここでは下記3つの変換ツールを紹介します。どのように変換ツールを使いたいかなどを検討し、自社に合うものを選んでください。

• flamingo

• スマートフォン・コンバータ

• モバイルコンバート

flamingo

▲出典：flamingo

デジタルサービスをサポートする「アイスリーデザイン」が提供している「flamingo」は、規模の大きなホームページのスマホ対応に適した変換ツールです。

特徴として、デザインの自由度が高いことや管理機能が豊富なことがあげられます。その一方で、利用にはホームページ制作に関する専門知識が求められますので、自社に対応できるスタッフがいない場合にはおすすめできません。

ホームページの規模が大きいケースや、ホームページの運用を自社で活発に行いたいと考えている企業には役立つでしょう。

flamingoの詳細はこちら

スマートフォン・コンバータ

▲出典：スマートフォン・コンバータ

企業のWebマーケティングをサポートする「ショーケース・ティービー」が提供している「スマートフォン・コンバータ」は、ホームページの表示をリアルタイムで確認しながらスマホ対応に変換できるツールです。

導入方法は、既存のホームページに専用の変換タグをはるだけ。このオリジナル技術のおかげで、ホームページを簡単にスマホ対応に変換できます。

コストを抑えつつ、ホームページをスマホ対応させたいと考えている企業におすすめです。

スマートフォン・コンバータの詳細はこちら

モバイルコンバート

▲出典：モバイルコンバート

コンテンツプロバイダ「エムティーアイ」が提供している「モバイルコンバート」は、BtoB向けの変換ツールです。

カスタマイズもできるので、自社に最適なスマートフォン向けホームページに変換できます。ホームページのプログラムなど基幹部分には触れずに変換するため、余計な手間も必要ありません。

時間やコストを抑えた運用をしたいケースや、実績が豊富な変換ツールを使いたいと考えている企業におすすめです。

モバイルコンバートの詳細はこちら

2. WordPressの機能をモバイルコンバート活用する

WordPressのみで既存のホームページを作成している場合、スマホ対応にするプラグインをインストールすれば簡単にスマホ対応させることができます。

プラグインとは、WordPressに標準装備されていない追加機能のこと。WordPressを自由にカスタマイズできるようにと、さまざまなプラグインが用意されています。

▲出典：WordPress

その中には、「WPtouch（WPタッチ）」のような、ホームページをスマホ対応にさせるためのものがあります。WPtouchは、初心者でも使える簡単な操作や、iOSとAndroidのどちらにも対応できる機能性が特徴です。

WordPressで作成したホームページをスマホ対応にする場合は、WPtouchなどのプラグインを活用してみてはいかがでしょうか。

WPtouch（WPタッチ）の詳細はこちら

3. CSSを調整する

CSSとは、Webページの見た目（文字の色・大きさ・背景など）を設定する言語です。

CSSの知識がある場合、メディアクエリを活用してホームページをスマホ対応に変換できます。メディアクエリとはWebデザインのコードのひとつで、レスポンシブデザインを作成する際に必要なものです。

メディアクエリを活用すれば、さまざまなデバイスに応じたデザインをひとつのCSSに記せたり、複雑な表を見やすい状態でレイアウトできたりします。ハイレベルなスマホ対応ホームページを作成できるでしょう。

4. 外注する

現在ホームページの管理を外注しているのなら、その外注先のホームページ制作会社にスマホ対応を依頼する方法があります。

またホームページの管理を自社で行っている場合は、新たな制作会社と契約しスマホ対応を行ってもらうのもひとつの方法です。

外注するときのポイントについてはのちほど紹介します。

新規でホームページをスマホ対応にする方法２つ

新規でスマホ対応のホームページを作るには以下の2つ方法があります。それぞれの特徴やメリット・デメリットを理解し、自社に最適な方法を選択しましょう。

• スマホ専用のホームページを作成する

• レスポンシブデザインのホームページを作成する

スマホ専用のページを作成する

新規でホームページをスマホ対応にする方法として、スマートフォン専用ページを作成することが挙げられます。

PC・スマートフォンとサイトを分けるため、それぞれに最適なデザインを細かく追求できる点がメリットです。

ただしホームページを2つ制作することになるため「更新・管理に時間がかかる」「対応していないサイズのデバイスでは最適化されない」などがデメリットといえます。

制作自体は簡単なものの結果的に工数がかかるため、おすすめできる方法とはいえません。

レスポンシブデザインのホームページを作成する

ひとつのホームページを、スマートフォンやタブレット、パソコンなどさまざまなデバイスから見られるような手法を、レスポンシブデザインといいます。

レスポンシブデザインのホームページは一つのファイルでさまざまなデバイスに対応するため、管理が簡単なメリットがあります。またPCサイト・スマホサイトのURLが統一されることにより評価の分散を防ぎ、検索順位が向上する可能性も。

スマホ専用ページよりも制作に時間・コストがかかる点がデメリットですが、Googleがレスポンシブデザインを推奨していることもあり、特別な理由がない限りレスポンシブでスマホ対応させるのが無難でしょう。

レスポンシブデザインのスマホサイトの制作について詳しく知りたい方は、下記の記事もご覧ください。

関連記事：スマホサイト制作ツールおすすめ7選｜サービスの特徴を比較

なお、レスポンシブデザインのサイト制作はCMSの導入がおすすめです。

CMSで構築したサイトの多くがレスポンシブデザインに対応しております。また、制作後の運用面においても直感的に操作できるツールが多いため、Web集客に注力したい企業に最適です。

自社がスマホ対応させたいサイトやサイトの目的に応じて適したCMSも変わってきます。

まずはどんなCMSがあるのか知りたい方はBtoB企業向けCMSカオスマップをご覧ください。

BtoB企業向け CMSカオスマップ|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

機能や特徴別でCMSを比較検討したい場合はBtoB企業向けCMS比較一覧表が便利です。

BtoB企業向けCMS比較一覧表|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

ホームページのスマホ対応を外注するときに知っておきたいこと2つ

ホームページのスマホ対応を自社で行えない場合、外注することもあるでしょう。外注するときに失敗しないためには、どのようなことを知っておくとよいのでしょうか。

1. ホームページ制作会社の選び方

ホームページ制作会社を選ぶときには、 実績などを参考に、スマホ対応の技術力やクオリティについて納得できる会社を選びましょう。

スマホ対応のホームページを制作した実績が豊富な会社や、スマホ対応の事例を公開している会社がおすすめです。

自社の業績に関わる大切なホームページですので、制作会社選びに妥協せず、複数の制作会社を比較しながら検討するようにしましょう。制作会社の比較には相見積もりが便利です。相見積もりの際はRFP（提案依頼書）を用意するとスムーズです。「BtoB企業向けRFPの書き方とは」で詳細な作り方を解説しておりますのでぜひお役立てください。

BtoB企業向け RFPの書き方とは|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

また、ホームページ制作会社が提案をしてくれるか、コミュニケーションをとりやすいかといったことも選ぶときのポイントです。

関連記事：ホームページ制作会社の選び方｜業者選びの後悔を防ぐ4つのポイントと注意点

関連記事：おすすめWeb制作会社20選｜選び方や依頼前の確認事項についても

関連記事：リニューアルに強いWeb制作会社4選｜選び方やトラブルの事例も

2. ホームページのスマホ対応を外注する場合の費用

既存のホームページをレスポンシブデザインでスマホ対応させる場合の相場は、1ページあたり1万～3万円程度。画像調整は1点あたり2,000〜6,000円程度です。

なかには安さを売りにしているホームページ制作会社もあり、魅力的に感じるかもしれません。しかし、不自然に安いケースでは、オプション費用として追加料金を請求されることもあるようです。

ホームページのスマホ対応を外注する際は、複数の制作会社に見積を依頼したり、費用に含まれる作業範囲についてくわしく質問したりすることが大切です。

関連記事：格安ホームページ制作の裏側を解説｜サービスの仕組みと落とし穴

ホームページをスマホ対応させて効果的に運用しよう

スマートフォンユーザーが増えている現代、ホームページを効果的に運用するためには、ホームページをスマホ対応させることが必須です。まずは自社のホームページがスマホ対応しているかどうか確認しましょう。

まだスマホ対応していないなら、早急に対応することが求められます。自社で対応できるのか外注するのか検討しましょう。

ホームページをこれから作る場合や、ホームページのリニューアルを考えている場合は、レスポンシブデザインのスマホ対応ホームページを作成することをおすすめします。レスポンシブデザインのホームページ制作なら、LeadGridにおまかせください。

LeadGridはレスポンシブデザインに対応したクラウド型CMSです。PC／スマホ／タブレットなどデバイスを選ばず、整ったデザインをかんたんに実装できます。マーケティングに強みを持つCMSのため、企業サイトやサービスサイト、ECサイトにも対応可能。顧客管理機能やフォーム作成機能、MAツール連携など、リード獲得のための機能も充実しています。

まずは無料のデモ体験でサービスをお試しください。

無料デモ体験のお申込みはこちら

LeadGridの機能詳細がわかるサービス資料はこちら

サービス紹介資料|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com