スマホ対応のホームページを作成する方法【既存HPもレスポンシブ対応可能】
近年スマートフォンやタブレットの普及により、ホームページのスマホ対応が重要視されています。
そんな中、自社でホームページ運用しているが、まだスマホ対応していないという方も多いのではないでしょうか？
しかし、ホームページのスマホ対応を検討するうえで、
『スマホ対応って具体的に何をすればいいの？』
『なぜホームページをスマホ対応しなくてはいけないのか』
『ホームページをスマホ対応にする方法が知りたい』
上記のようなお悩みが生じるかと思います。
今回は、ホームページのスマホ対応を検討している企業担当者様へ向けて「スマホ対応の基礎知識」「スマホ対応方法」「スマホ対応時の注意点」などを紹介します。
※今回のコラム記事で掲載している情報は、記事公開時点（2021年4月8日）のものです
そもそもホームページのスマホ対応は何をするの？
はじめにホームページのスマホ対応について紹介します。
ホームページのスマホ対応と言っても方法は、１つではありません。
代表的なスマホ対応は「レスポンシブデザイン」「アダプティブデザイン」に分類できます。
まずは、それぞれの違いについて理解しましょう。
レスポンシブデザイン
レスポンシブデザインとは「PC」「スマートフォン」「タブレット」の各デバイスからホームページレイアウトを見やすくするためのデザインです。
レスポンシブデザインを導入することによって、デバイスに合ったレイアウト表示に自動で切り替えが可能となります。
ホームページは、HTMLとCSSで構築されており「HTMLはタイトル、見出しなどの要素」「CSSが見た目を調整する要素」となっています。
レスポンシブデザインは「PC」「スマートフォン」「タブレット」３つのデバイスのCSSを用意することで、デバイスに合ったレイアウト表示切り替えを自動で行う仕組みとなっています。
アダプティブデザイン
アダプティブデザインとは、ユーザーの使用環境に合わせてレイアウトを最適化するスマホ対応です。
ユーザーがホームページを閲覧している環境に最適なレイアウトを表示してくれるということです。
「レスポンシブデザイン」では「PC」「スマートフォン」「タブレット」と３つのレイアウトという選択肢しかないため、スマートフォンの機種によっては表示が崩れる可能性もあります。
しかし、アダプティブデザインであれば、各スマートフォンに合ったレイアウトを表示するので「レスポンシブデザイン」に比べて表示崩れが起きにくいといったメリットがあります。
アダプティブデザインは、メリットの多いスマホ対応となりますが「HTML/CSS」と合わせてプログラム言語の「Javascript」での構築が必要です。
ホームページをスマホ対応にしなければいけない理由
続いて、ホームページをスマホ対応にしなければいけない理由について紹介します。
下記理由を理解したうえで、スマホ対応を検討しましょう。
- SEOへの影響
- モバイルユーザーの離脱を防ぐため
- スマホの独自操作にホームページを対応させるため
【理由①】SEOへの影響
ホームページをスマホ対応にしなければいけない１つ目の理由は、SEOへの影響です。
検索エンジンの評価は、コンテンツ内容が「ユーザーにとって有益な情報が記載されているか」などの要素を元に実施されます。
以前までは、この評価をPC向けに作成されたページに対して実施していましたが、２０１８年３月以降からはスマートフォン向けに作成されたページに対して評価されるようになりました。
検索エンジンの評価軸がスマートフォンに変わったことにより、ホームページのスマホ対応が求められるということです。
【理由②】モバイルユーザーの離脱を防ぐため
ホームページをスマホ対応にしなければいけない２つ目の理由は、モバイルユーザーの離脱を防ぐためです。
総務省の発表によると、現在スマートフォンを所持している割合は約8割といわれています。
2019年における世帯の情報通信機器の保有状況をみると、「モバイル端末全体」（96.1％）の内数である「スマートフォン」は83.4％となり初めて8割を超えた。「パソコン」は69.1％、「固定電話」は69.0％となっている（図表5-2-1-1）。
その中には、PCを所持していない方もいるため、ホームページをスマホ対応していないということは、これらのユーザーを取りこぼすことになるため、スマホ対応が必要となります。
【理由③】スマホの独自操作にホームページを対応させるため
ホームページをスマホ対応にしなければいけない3つ目の理由は、スマホの独自操作にホームページ対応させるためです。
スマートフォンには「タップ」「スライド」など独自の機能があります。
「タップ」に関しては、PCでマウスをクリックするのと同じ意味ですが、PC用ホームページをスマートフォンで閲覧するとテキストリンクが小さくなるので、タップがしづらくなります。
スマホでもタップしやすいように、テキストリンクを大きくするなどのスマホ対応が必要となります。
ユーザーにストレスを与えないためにも、スマホの独自操作に対応させる必要があるということです。
ホームページがスマホ対応か確認する方法
自社ホームページのスマホ対応を確認する場合は、Googleが提供する「モバイルフレンドリーテスト」を活用します。
「モバイルフレンドリーテスト」では、自社ホームページのURLを入力するだけで、スマホ対応かの判断が可能です。
スマホ対応でない場合は、下記エラーが表示されます。
- テキスト小さすぎて読めません
- ビューポート設定がされていません
- コンテンツの幅が画面を超えています
- クリック要素が近すぎます
- Flashなどのサポートが終了しているプラグインが使用されています
ホームページをスマホ対応にする方法は4つ
続いて、ホームページをスマホ対応する４つの方法を紹介します。
「モバイルフレンドリーテスト」にてエラーが表示された方は、下記４つ方法から自社に合った方法を選定し、ホームページのスマホ対応を実施しましょう。
- ホームページを一から作成する
- 変換ツールを利用する
- WordPressのプラグインを利用する
- ビューポート設定とCSSの調整する
【方法①】ホームページを一から作成する
ホームページをスマホ対応にする１つ目は、ホームページを一から作成する方法です。
ホームページ作成ソフトを利用して「レスポンシブ対応済み」のホームページを作成します。
一般的なホームページ作成ソフトであれば、レスポンシブ対応済みのデザインテンプレートを選択するだけなので、知識がなくても簡単に作成が可能です。
しかし、ある程度ボリュームのあるホームページをお持ちの方は、労力がかかる作業となるでしょう。
【方法②】変換ツールを利用する
ホームページをスマホ対応にする2つ目は、変換ツールを利用する方法です。
変換ツールを利用すれば、既存のホームページを残したままスマホ対応することができます。
わざわざホームページ作成する必要もなく、導入も非常に簡単です。
ツール導入後は、PC用ホームページを更新すればスマホ用ホームページにも反映されるので運用が楽といったメリットがあります。
しかし、変換ツールは維持費用が高く、導入だけでも数十万円、月額費用も数万円かかるといったデメリットもあります。
【方法③】WordPressのプラグインを利用する
ホームページをスマホ対応にする3つ目は、WordPressのプラグインを利用する方法です。
WordPressで作成したホームページを運用している方や、これからWordPressでホームページ作成を検討している方には、プラグインを使った方法がおすすめです。
WordPressには、インストールするだけで機能が拡張できるプラグインが用意されています。
スマホ対応に特化したプラグインも用意されているので、インストールして有効化するだけで簡単にスマホ対応することが可能です。
しかし、将来的にホームページの引越しする際は、プラグインが利用できなくなるので、注意が必要となります。
【方法④】ビューポート設定とCSSの調整する
ホームページをスマホ対応にする4つ目は、ビューポート設定とCSSの調整する方法です。
ビューポート設定とは、PC用ホームページをスマートフォンで閲覧した際に、全体が縮小されるのを防ぐ設定です。
ビューポート設定を行う場合は、ホームページのHTMLファイルにコードを記述する必要があります。
また、ホームページの表示幅に合わせて、CSSを調整しなくてはいけないので「HTML/CSS」の知識が必須の方法となります。
個人での対応が難しい場合は、制作会社に依頼することも可能ですが、多額な費用がかかるのがデメリットです。
ホームページをスマホ対応する費用
続いて、ホームページをスマホ対応する費用を見ていきましょう。
先ほど紹介したスマホ対応ごとの費用を紹介します。
自社の予算に合わせて最適な方法を検討してみて下さい。
ホームページ作成ソフトのスマホ対応費用
ホームページ作成ソフトのスマホ対応費用は、ソフト代のみで対応が可能です。
スマホ対応が可能なホームページ作成ソフトと費用に関しては、下記のとおりです。
▼スマホの場合は横にスクロールしてご覧ください
| ホームページ作成ソフト一覧 | 月額費用 |
|---|---|
| Jimdo（ジンドゥー） | ・PLAY：無料 ・START：９９０円（税込） ・GROW：１,５９０円（税込） |
| Wix（ウィックス） | ・ベーシック：９９０円（税込） ・アドバンス：１,４３０円（税込） ・VIP：２,７５０円（税込） |
| Webnode（ウェブノード） | ・LIMITED：３７８円（税込） ・MINI：６２９円（税込） ・STANDARD：１,２９９円（税込） |
| ペライチ（LP向け） | ・ライトプラン：１,０７８円（税込） ・レギュラープラン：２,１７８円（税込） ・ビジネスプラン：３,２７８円（税込） |
| グーペ（店舗ビジネス向け） | ・エコノミープラン：１,１００円（税込） ・ライトプラン：１,６５０円（税込） ・スタンダードプラン：３,８５０円（税込） |
変換ツールのスマホ対応費用
変換ツールのスマホ対応費用は、ベンダーによって異なります。
代表的なスマホ変換ツールの費用は、下記のとおりです。
▼スマホの場合は横にスクロールしてご覧ください
| スマホ変換ツール一覧 | 月額費用 |
|---|---|
| flamingo（フラミンゴ） | ・無料トライアル：３０日間無料 ・スタンダードプラン：１６５,０００円（税込） ・エンタープライズプラン：要問合せ |
| Mobify（モビファイ） | ・プロプラン：１５４,０００円（税込） ・ビジネスプラン：２４２,０００円（税込） |
| スマートコンバート | ・ライトプラン：５０,０００円（税込） ・スタンダードプラン：１５０,０００円（税込） |
WordPressプラグインのスマホ対応費用
WordPressプラグインのスマホ対応費用は無料です。
WordPressの代表的なスマホ対応プラグインは、下記のとおりとなっています。
▼スマホの場合は横にスクロールしてご覧ください
| スマホ対応プラグイン一覧 | 特徴 |
|---|---|
| WPtouch | 最適化されたテーマを自動表示 |
| MobilePress | シンプルなテーマが多いスマホ対応プラグイン |
| Jetpack | スマホ対応以外の便利機能を搭載しているプラグイン |
| MOBILE SMART | スマホ用テーマの自動切換え可能 |
| WP Mobile Edition | ファイルサイズの最適化も可能 |
制作会社に依頼した場合のスマホ対応費用
制作会社に依頼した場合のスマホ対応費用は、下記のとおりです。
▼スマホの場合は横にスクロールしてご覧ください
| ホームページの種類 | 費用相場 |
|---|---|
| コーポレートサイト（１０ページ程度） | ４０万円程度 |
| コーポレートサイト（３０ページ程度） | ８０万円程度 |
| LP（ランディングページ） | ２５万円程度 |
上記の費用相場は、中規模の制作会社に依頼した場合のスマホ対応費用となります。
スマホ対応費用は高額となるため、ホームページリニューアルも視野に入れて検討することをおすすめします。
関連記事
制作会社にスマホ対応（レスポンシブ対応）を依頼したときの費用相場について詳しくは、以下のコラム記事をご覧ください。
・レスポンシブ対応の費用相場とは【ホームページ目的別に相場を公開】
ホームページリニューアルにかかる費用相場について詳しくは、以下のコラム記事をご覧ください。
・ホームページリニューアルにかかる費用の相場【安く抑えるコツも】
ホームページスマホ対応時の注意点
最後にホームページをスマホ対応する際の注意点について紹介します。
下記5つのポイントを理解したうえ、ホームページのスマホ対応を実施するようにしましょう。
- スマートフォン向けのレイアウトを採用する
- ボタン幅などを調整する
- ホームページの表示速度に注意する
- ポップアップウィンドウが利用できない
- 画面遷移が少ないホームページにする
【注意点①】スマートフォン向けのレイアウトを採用する
ホームページをスマホ対応させるときの注意点１つ目は、スマートフォン向けのレイアウトを採用する点です。
ホームページ作成ソフトでテンプレートを選定するときは「PC用」「スマートフォン用」それぞれのデザインが考えられているものを選択してください。
確認するポイントとしては「テキストの大きさ」と「コンバージョンにつながるボタンの大きさ」の２点です。
スマホから閲覧したときに「テキストが小さくて説明が分からない」「お問い合せフォームボタンがタップできない」とならないようにするためです。
スマホユーザーのコンバージョンまでの導線を確認したうえで、スマホ対応テンプレートを選定するようにしましょう。
【注意点②】ボタン幅などを調整する
ホームページをスマホ対応させるときの注意点２つ目は、ボタン幅などの調整です。
スマホ対応では、タップのしやすさを一番に考える必要があります。
例えば「ボタンとボタンの幅を広めに取る」「ボタンを大きくする」などの対応をすることで、ユーザビリティが向上します。
ユーザーが誤操作をしないように注意したうえで、スマホ対応を実施しましょう。
【注意点③】ホームページの表示速度に注意する
ホームページをスマホ対応させるときの注意点３つ目は、ホームページの表示速度に注意する点です。
スマホ対応は、ホームページのレイアウトを調整するだけではありません。
ホームページが表示される速度を早くすることもスマホ対応の１つです。
表示時間が長いと離脱にもつながるので「画像コンテンツの最適化」「キャッシュの利用」などの対策も必要となります。
自社ホームページの表示速度を確認したい場合は、Googleが提供する「PageSpeed Insights」というツールを利用すれば、URLを入力するだけで表示速度のチェックが可能です。
【注意点④】ポップアップウィンドウが利用できない
ホームページをスマホ対応させるときの注意点４つ目は、ポップアップウィンドウが利用できない点です。
ポップアップウィンドウとは、リンクをクリックしたときにリンク先の画面が別ウィンドウで開くことをいいます。
PC用のホームページでは、補足情報追加の際にポップアップウィンドウを表示させる手法があります。
しかし「スマートフォン」「タブレット」には、ポップアップウィンドウを表示させると機能がないため利用することができません。
PC用ホームページでポップアップウィンドウを採用している方は、利用できないことを加味したうえでスマホ対応をしましょう。
【注意点⑤】画面遷移が少ないホームページにする
ホームページをスマホ対応させるときの注意点５つ目は、画面遷移が少ないホームページにする点です。
画面遷移とはホームページ間のページ移動を指します。
スマホでのページ移動は、PCのページ移動よりもユーザーにストレスがかかりやすいと言われています。
そのため、ページ移動が多いホームページを作成してしまうとユーザーの離脱につながってしまうので、スマホ対応のホームページを作成する場合には、画面遷移が少ないホームページを作成するようにしましょう。
まとめ
スマホ対応のホームページを作成する方法について紹介しました。
代表的なスマホ対応の種類は下記２つです。
- 「PC」「スマートフォン」「タブレット」３つのレイアウトに自動に切り替え可能なレスポンシブデザイン
- ユーザーの使用環境に合わせてレイアウトを最適化するアダプティブデザイン
ホームページをスマホ対応にしなければいけない理由は３つあります。
- 検索エンジンの評価軸がスマートフォン向けに作成されたページのため
- モバイルユーザーの離脱を防ぐため
- 「タップ」「スワイプ」などスマホの独自操作にホームページ対応させるため
ホームページをスマホ対応にする方法は4つあります。
- ホームページ作成ソフト等で一からホームページを作成する
- 変換ツールを導入して既存ホームページをスマホ対応にする
- WordPressのスマホ対応のプラグインを導入する
- ビューポート設定とCSSの調整をする
ホームページをスマホ対応する費用は下記のとおりです。
▼スマホの場合は横にスクロールしてご覧ください
| スマホ対応方法 | 費用感 |
|---|---|
| ホームページ作成ソフト | ソフト代のみ |
| 自動変換ツール | ベンダーにより異なるが月額１０万円以上 |
| WordPressのプラグイン | 無料 |
| 制作会社に依頼した場合 | コーポレートサイト（１０ページ）で４０万円程度 |
また、当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。
ビズサイでは、ホームページの目的に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます。
もちろん、ビズサイで制作したホームページはスマホ対応（レスポンシブ対応）がしているので、ご安心くださいませ（詳しいサービスはこちら）。
ホームページ：作成ノウハウに関する記事
まずは無料でご相談ください。
お問い合わせ・ご相談や資料請求、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。
※年末年始・土日祝は定休日となります
※受付時間 9：00～17：30
