ネット検索する際に、スマートフォンで検索するユーザーの比率は年々上昇しています。
2021年の日本では約75％がスマホユーザーです。
当然スマホユーザーに向けたホームページを制作することが望まれています。
検索エンジン最大手のGoogleもモバイルファーストインデックを打ち出し、スマホでの表示を優先して評価するようになりました。
「自社のホームページはまだスマホ対応していない」
「スマホ対応にしたいけど、何をすればいいの？」
「新しくスマホ対応のホームページを制作する費用の目安が知りたい」
「HTMLのホームページもスマホ対応化できる？」
「スマホ対応サイトを制作するには、どこに依頼すればいいの？」
このような疑問に対して解説していきます。
ホームページをスマホ対応させる為に、最適な方法を見つけ出しましょう。
スマホ対応（レスポンシブ）サイトとは
検索エンジン最大手のGoogleは2020年9月からモバイルファーストインデックスへの移行を開始しました。
これはスマートフォンの利用者がパソコンの利用者を上回った為に行われたアップデートです。
この為、2020年から2021年に掛けてホームページはスマホ対応することが標準となりました。
スマホ対応（レスポンシブ対応）とは【スマートフォンやタブレットでWEBサイトを見た際に最適化された表示にする】事を言います。
例えばパソコンで見る画像のサイズをスマートフォンで見ると、画面からはみ出てしまいます。
このような事が起きないように、スマートフォンで見た時にはスマートフォン用のサイズで表示させることがスマホ対応させたWEBサイトになります。
（１）デバイスに合わせた可変表示ができるWEBサイト
ではスマホ対応とは具体的にどのようなWEBサイトなのかをより詳しく解説します。
一言で表現すると「デバイスに合わせて可変表示するサイト」です。
デバイスの画面サイズは縦横比も入れるとかなりの数があり、全てのデバイスでキレイにサイトを表示できるようにさせるにはかなりの労力が必要です。
WEB制作の現場では表示を変更させる分岐点を設定しています。
HTMLでWEBサイトを制作していた時代では、パソコン用とスマホ用のWEBサイトを作成して、デバイスの画面サイズによって表示を切り替えていました。
つまり、１つのWEBサイトを制作するのに、実は２つ（PC用とスマホ用）WEBサイトを制作する手間が掛かっていたのです。
現在ではガラケー、スマートフォン、タブレット、パソコンとデバイスの種類が増えてきたので以前のようにデバイスに合わせてWEBサイトを制作すると最低でも４つのWEBサイトを作る必要があります。
制作側からすると現実的ではなく、修正なども４倍の労力が必要になってしまいます。しかし、その解決策として、ブレイクポイント（表示を切替える分岐点）を設定することで「1つのWEBサイトを可変させる」ことで解決しています。
■ブレイクポイント例
スマートフォン：1pxから480pxまで
タブレット ：481pxから768pxまで
パソコン ：769px以上
このような設定が一般的な設定です。
後はブレイクポイントごとにCSSを書いてあげるだけです。
画像のサイズもCSSで制御できますが、サイズの大きい画像は読込に時間が掛かりますのでブレイクポイント毎に画像を用意するのが一般的です。
（２）スマホ対応サイトとレスポンシブサイトの違い
次にスマホ対応サイトとレスポンシブサイトの違いです。
Googleで検索をしていると「スマホ対応」だったり「レスポンシブサイト」といったワードが出てきます。
「これってどう違うの？」と思っている方もいらっしゃるのではないでしょうか。
結論は「ほぼ同じ」です。
・レスポンシブサイト＝全てのデバイスに対応できるサイト
・スマホ対応サイト ＝スマートフォンの表示に対応できるサイト
実際にはどちらも同じような意味で使われています。
なぜスマホ対応のWEBサイトが重要なのか
では次に「なぜスマホ対応のWEBサイトが重要なのか？」について解説します。
ネットサーフィンをしていると、たまにスマホ対応できていないサイトを見かける事があります。
スマホ対応されていないWEBサイトをスマートフォンで見るときは、文字が小さいためピンチアウトして拡大しなければなりません。
この動作を繰り返しながらサイトを閲覧するのはストレスが溜まりますし、見るのが疲れるサイトと言えます。
では具体的になぜスマホ対応させるべきかを詳しく説明します。
（１）ユーザーの視認性や操作性がアップする
スマホ対応していないWEBサイトの一番懸念になる部分は視認性が悪いことです。
パソコンでサイトを見るときは問題ないのですが、スマートフォンで見るとユーザーにストレスを与えてしまいます。
- 文字が小さすぎて読めない
- リンクをクリックしたいのに、幅が狭くて思っていないところをクリックしてしまう
- 画像も小さすぎて何が書いてあるかわからない、さらに文字を読むために拡大しないといけない
このようにユーザーにストレスを与えてしまうとWEBサイトの離脱率が高くなってしまいます。
2021年にはスマホからの検索ユーザーの割合が75％に達しています。
パソコン表示とスマホ表示のどちらを優先するかは明らかです。
（２）通信量が減ることでサイトの表示が早くなる
画像のサイズが大きくなるのに比例して通信量が増えます。
通信量が増えると画像がデバイスに表示されるまで時間が掛かります。
スマホの画面サイズとパソコンの画面サイズはかなり違います。
パソコンできれいに見れる画像のサイズはスマホユーザーには不必要で、なおかつ表示が遅くなり通信量も増えるといったデメリットしかありません。
スマホ対応していないWEBサイトでは知らず知らずのうちにスマホユーザーに負担を掛けています。
「手間は掛かるけれど、スマホユーザー用にサイズの小さい画像を用意する」ことでサイトや画像を早く表示でき離脱率の低下も防げます。
（３）SEO対策になり検索順位の向上が期待できる
Googleは以前から一貫してユーザーファーストを推奨しています。
検索ユーザーが満足するWEBサイト作りを推奨し、評価する。
結果的に評価の高いWEBサイトを上位表示する。
ユーザーが満足できる「情報」「答え」「操作性」「視認性」を用意すれば検索順位が上がります。
細かく言うと200以上の項目があるのですが、「調べたい事を調べて、すぐにわかるサイト」をGoogleは求めています。
重要なのは2019年まではパソコンの表示を基準としていますが、MFI（モバイルファーストインデックス）化が行われてからはスマートフォンでの表示が基準となりました。
その為、スマホ対応していないサイトでは「操作性」「視認性」「表示スピード」などの部分でとても不利になり、結果的に検索順位を大きく落としています。
逆を言えば、スマホ対応させることで元の順位へ戻すことができる可能性があります。
（４）検索ユーザーの割合はほとんどがスマホから
2021年のデータですが、日本ではスマホから検索エンジンを利用するユーザーが75％となっています。
４人中３人はスマホからWEBサイトを閲覧しています。
ガラケー時代の２０年前には考えられなかったですよね。
これがGoogleがMFIを進める理由です。
利用者が多いスマートフォンを基準にWEBサイトを評価するのが自然になっています。
（５）集客に大きな影響が出る
スマホ対応サイトが重要な、最大の理由が「集客が減る」ことです。
ここまで解説してきたように、時代の流れはスマートフォンがメインになっていて、スマホユーザーにストレスの掛かるWEBサイトは好まれません。
特に表示スピードは重要で以下の様なデータがあります。
【離脱率（サイトが表示される前に離脱）】
・サイト表示まで～3秒：32％の人が離脱
・サイト表示まで～5秒：90％の人が離脱
通信量を減らして、スマホの表示のスピードを上げるだけで集客できるお客様が増える可能性があります。
スマホ対応しているのか確認する方法
自社のホームページがスマホ対応しているのか確認する際は、Googleが提供している「モバイルフレンドリーテスト」を使います。
モバイルフレンドリーテストは、自社のホームページURLを入力するだけで、スマホ対応しているかの判別をしてもらえます。
テストの所要時間は通常1分以内で終わります。
スマホ対応していない場合は、
- 互換性のないプラグインを使用しています
- ビューボットが設定されていません
- ビューボットが「デバイスの幅」に収まるよう設定されていません
- コンテンツの幅が画面の幅を超えています
- テキストが小さすぎて読めません
- クリックできる要素同士が近すぎます
のようなエラーが表示されます。
エラー表示になった場合は、改善ポイントをGoogleが提示してくれるので、修正して再度テストを行いましょう。
HTMLで作成されたサイトもスマホ対応化することはできる？
15年以上前に制作したWEBサイトは、おそらくHTMLで作成されていると思います。
HTMLでサイトを制作している場合は「パソコン表示用のみ」か「パソコン表示用・スマホ表示用」の２パターンで作られていると思います。
HTMLで作成されたWEBサイトの対策を解説します。
（１）古いサイトでもスマホ対応化させる事は可能
HTMLで作成されたサイトでもスマホ対応（レスポンシブ）化することは可能です。
理由としては、デバイスの画面サイズによって表示を変えるのはCSSで制御している為です。
HTMLで制作されたWEBサイトも必ずCSSを使っています。
CSS（カスケーディング・スタイル・シート）とは、見た目の装飾をする為の言語です。
文字サイズ・色・縦横幅の設定・デバイス毎に表示の変更などを指定できます。
このCSSは、現在でも全てのWEBサイトで使用されていますのでHTMLで制作されたサイトでもスマホ対応に変更することができます。
（２）HTMLで作成したWEBサイトをスマホ対応させる為に必要な作業
WEBサイトをスマホ対応に変更するには以下の様な作業が必要になります。
特にCSSの知識は必ず必要になりますので、基本的にはWEB制作会社へ依頼するようにしましょう。
CSSを知らない人が修正すると、WEBサイトが大きく崩れてしまいます。
【必要な作業】
- メディアクエリをCSSに記述してブレークポイントを作る
例）
パソコン：media="screen and (min-width: 1001px)"
タブレット：media="screen and (min-width: 481px) and (max-width: 1000px)"
スマホ：media="screen and (max-width: 480px)"
- デバイス毎に文字サイズをCSSに記述
- 横に長いコンテンツは、縦型になるようにCSSを記述
- デバイス毎に最適なサイズの画像を作成
- デバイス毎に最適な画像を表示できるようにCSSで調整
- 必要なHTMLを記述
このようにHTMLのWEBサイトをスマホ対応するにはかなりの手順が必要です。
（３）WEBサイトによっては新しく制作したほうが楽
ここまでHTMLで制作されたWEBサイトをスマホ対応させる方法を解説してきました。
結論としてはHTMLもレスポンシブ化できるのですが、中〜大規模なサイトだと膨大な作業量が必要となります。
そのようなケースではCMSを使ってWEBサイトを新しく制作したほうが工程が少なくレスポンシブ化できます。
ついでにリニューアルをしてしまえば一石二鳥です。
【CMSとは】
CMS（コンテンツ・マネジメント・システム）とは、プログラミングの知識がない人でもWEBサイト制作を感覚的に制作できるようにしたシステムです。
以前はフォルダの構成やHTMLの記述を手作業で行っていましたが、このような作業を簡略化して初心者でも扱えるようにしています。
CMSで一番有名なのはワードプレスです。
一度は聞いたことがある方も多いのではないでしょうか。
自社のWEBサイトをレスポンシブ化するついでにCMSを使ってリニューアルすれば、テキストの変更など簡易的な修正作業は自分でできるようになります。
既存のWEBサイトをスマホ対応にする方法
スマホ対応されていないWEBサイトをレスポンシブ化する方法について解説します。
おすすめはやはりWEB制作会社に依頼することですが、費用が気になる場合は自分で試す事もできます。
（１）WEB制作会社へ依頼する
WEB制作会社に依頼をおすすめする理由は「確実性」です。
CSSの微調整などは経験が必要になります。
また一歩間違えばデザイン崩れを起こしてしまい、元にもどせなくなってしまう可能性もあります。
あまり知識がない人が作業するには、かなりリスクが高いです。
（２）フリーランスに依頼する
費用を抑えたい場合はWEBサイトを作れるフリーランスに依頼する選択肢もあります。
費用は制作会社より安くすむでしょう。
但しデメリットもあり、フリーランスは初心者レベルの人もいて、信頼できる技術と知識を持ち合わせていないこともあります。このような人に依頼してしまった場合、元の状態に戻すことができなくなるかもしれません。
（３）レスポンシブ化ツールを使う
費用を全くかけたくない！わからなくても自分でやる！といった方にはResponsive Image Breakpoints Generatorを使う事でスマホ対応化しやすくなります。
機能としては「画像の自動リサイズ」「必要なHTMLの書き出し」をカバーしてくれます。
念を押しますが、「どうしても自分で作業したい」と信念がある方のみ自己責任で作業を行って下さい。
新しくスマホ対応サイトを制作する方法
ここからは新しくスマホ対応化されたWEBサイトを作る方法を解説します。
（１）内容の濃いサイトは新しく作り直したほうが早くて安い
最近では無料のCMSも増えてきています。特に世界的にも有名なのは「ワードプレス」」です。
無料で使える上に高機能、プラグインで簡単に機能を追加したり、テーマを変更することでサイトの着せ替えをすることもできます。
人気も高いのでネット上に情報も多く上がっていて、わからないことがあっても調べれば解決できます。
古いサイトをワードプレスで使えるようにするには互換性がない為、必要な個所をワードプレスにはめ込んでいく作業が必要となります。
20ページくらいまでのWEBサイトであれば問題ないと思いますが、それ以上（特に100ページ以上）の内容があるサイトは、ワードプレスで新しく作り直したほうが工程が減ります。
手間が減った分、人件費も抑えられるので新しく作り直したほうが早く安くできる可能性があります。
（２）今は知識がなくても簡単に作れるツールがある
WEBサイト制作の為のツールやサービスは年々増えてきていて、CMS以外にもより直感的に行えるサービスがあります。
それは「ペライチ」「BASE」です。
テレビCMで見たことがある人も多いと思います。
月額費用で利用でき自分で制作できるので、自分でWEBサイトを作りたい方にはおすすめです。
ただしデメリットもあり、デザインやカスタマイズ性は劣ります。
デザインにこだわりたい方はWEB制作会社に依頼しましょう。
（３）CMSで実際に制作されたスマホ対応サイト例
CMSがどういったものかわからない方の為に、スマホ対応化されたサイトをご紹介します。
ワードプレスであれば初期の時点で下記のようにスマホ対応化されています。
見た目の印象は同じですが、スマートフォンで見た場合には横幅が大きく違っていますよね。
画像も同様に横幅に合わせて縮小されています。
文字も横幅に合わせて改行されています。
スマホ対応をする際の注意点
ここまで、スマホ対応にする方法やスマホ対応サイトを制作する方法、スマホ対応しているのかの確認方法などを紹介してきましたが、ここではスマホ対応をする際の注意点について紹介していきます。
スマホ対応する際の注意点として、
- レイアウトをスマートフォン向けのものを採用する
- 画面遷移は少なくする
- ポップアップウィンドウが利用できない
- ホームページの表示速度に注意する
のような注意点があります。
以下で、それぞれ詳しく解説していきます。
（１）レイアウトをスマートフォン向けのものを採用する
1つ目の注意点として、レイアウトをスマートフォン向けのものを採用するようにしましょう。
特にホームページ制作でテンプレートを選ぶ際は、「パソコン用」と「スマートフォン用」でそれぞれデザインが準備されているものを選んでください。
パソコンにしか対応していないものを選択してしまうとスマホ対応ができないのでしっかりと確認しましょう。
また、レイアウトで確認するポイントとしては、
- テキストの大きさ
- コンバージョンボタンの大きさ
の2点です。
パソコンと比べて、スマートフォンの画面は小さいため、「テキストが小さくて読みにくい」「ボタンが小さくてタップしにくい」などの問題が起こらないようなレイアウトを選ぶぶと良いでしょう。
（２）画面遷移は少なくする
2つ目の注意点として、画面遷移は少ないホームページにするようにしましょう。
画面遷移とは、ホームページ間でのパージの移動のことを指します。
パソコンでページの移動をするよりも、スマートフォンでのページの移動はストレスがかかりやすいといわれています。
ページの移動が多いホームページを作成してしまうと、ユーザーにストレスがかかり離脱されやすくなってしまいます。
スマホ対応のホームページ制作をする際は、画面遷移の少ないホームページにすることがおすすめです。
（３）ポップアップウィンドウが利用できない
3つ目の注意点として、ポップアップウィンドウが利用できないという点です。
ポップアップウィンドウとは、サイト内のリンクをクリックした際にリンク先のページが別のウィンドウで開くことをいいます。
パソコン用のホームページの場合、情報を追加する際にポップアップウィンドウで表示させる手法がありますが、スマートフォンやタブレットの場合ポップアップウィンドウを表示させる機能がありません。
パソコン用のホームページでポップアップウィンドウの機能を使用している場合は、スマートフォンやタブレットでは使用できないことを頭に入れてスマホ対応を行いましょう。
（４）ホームページの表示速度に注意する
4つ目の注意点として、ホームページの表示速度に注意しましょう。
スマホ対応は、ホームページのレイアウトを調整するだけではなく、ホームページの表示速度を早くすることもスマホ対応を行う理由の1つです。
ホームページの表示速度が遅いと、ユーザーが離脱することにも繋がります。
そのため、「画像コンテンツのの最適化を行う」「キャッシュに利用をする」などの対策を行いましょう。
スマホ対応サイトを制作する費用や制作期間
ここまでスマホ対応のホームページを制作するには、WEB制作会社に依頼することをおすすめしてきました。
では実際に掛かる費用と制作期間を解説していきます。
（１）既存のWEBサイトをスマホ対応化する費用と制作期間
既存のHTMLのサイトをスマホ対応に変更するには、デザインも見直す必要があります。
既存のサイトの規模にもよりますが
1.ワイヤーフレーム作成
2.デザイン決定
3.コーディング
と新しくサイトを作るときと同じような工程になります。
目安としては10ページのWEBサイトであれば数週間〜1ヶ月程度の制作期間が必要です。
費用は工数と専門性により変動します。
同じ制作会社で依頼した場合は、WEBサイト制作時の６０％程度の費用が目安です。
（２）新しくスマホ対応サイトを制作する費用と制作期間
では新規でWEBサイト制作を行った場合です。
こちらも
1.ワイヤーフレーム作成
2.デザイン決定
3.コーディング
といった流れになります。
ただし、いちから全てを作成するのでより制作期間と費用が掛かります。
今はWEBサイト制作と言えばレスポンシブ化されているのが当たり前です。
費用はサイト規模によりますが10ページ程度のサイトで30万円程度は必要になります。
（３）どちらがお得？分岐点
ではスマホ対応させるために、「修正する」のか「新しく作り直す」のかどちらがコストパフォーマンスに優れているか解説します。
結論は「新しく作り直す」です。
IT業界は日々進化していて、WEBサイトも変化が激しいです。
集客・デザイン・新しい機能の有無などを考えれば、今に合ったWEBサイトへ作り変える事が一番です。
修正する場合でも費用がそこそこ掛かることが予想されますので、トータルすると「古いサイトは新しく作り直す」のがベストだと思います。
（４）月額制のWEB制作会社を選べば初期費用は抑えられる
とはいえコロナ禍でまとまった費用の捻出が厳しいこともあると思います。
そのような場合は月額費用だけでWEBサイトを制作してくれる会社もあります。
なかには初期費用が０円の制作会社もあります。
後悔しないWEB制作会社選び方
後から「こんなサイトになるはずじゃなかった！」と後悔をすることのないように、ここまで読み進めて下さった方へ制作会社選びのコツをお伝えします。
（１）必ず複数のWEB制作会社へ問い合わせをする
WEB制作業界は特に資格がなくてもスキルがあれば成り立ちます。
制作会社により強みや費用がかなり変わってくることがあるので、必ず複数の会社に見積を出してもらって下さい。説明が曖昧な場合も注意しましょう。
（２）スマホ対応サイトを作成する費用を確認する
事前にスマホ対応している状態で納品してくれるのか確認しておきましょう。
手を抜いてレスポンシブ化されていなかったり、別途費用が掛かると後から言われることがあるかもしれません。
（３）制作期間を確認する
まず制作期間も必ず確認しておきましょう。
少人数の制作会社では複数の案件を走らせながら制作していくので、ちょっとしたトラブルで納期が遅れたりします。納期が遅れた場合はどうするのかは事前に確認しておきましょう。
（４）説明・費用・制作期間を比較して選ぶ
複数の制作会社に問い合わせをしたら、最後に自分が納得できる会社を選びましょう。
説明・費用・制作期間を明確に答えてくれて信頼できると思える会社を選んでください。
曖昧な受け答えになる制作会社には頼まないほうが無難です。
最後に
この記事では「スマホ対応のホームページを制作する方法」を解説してきました。
もしまだスマホ対応されていないWEBサイトのままの方は、集客の為にもユーザーの為にも早めにレスポンシブ化する事をおすすめします。
特にHTMLサイトをCMSで作り変えると様々なメリットがあります。
この機会にじっくり検討してみてはいかがでしょうか。
PITTALAB（ピッタラボ）ではおすすめのホームページ制作会社をまとめて比較することができます。
激選してご紹介していますが、ホームページ制作でお困りの際はお気軽にお問い合わせください。
Web制作会社をお探しの方におすすめ
- 東京でおすすめのWeb制作会社をお探しの方はこちら
- 大阪でおすすめのWeb制作会社をお探しの方はこちら
- 格安なWeb制作会社をお探しの方はこちら
- LP制作会社をお探しの方はこちら
- ECサイト制作会社をお探しの方はこちら
- Webデザインに強い制作会社をお探しの方はこちら
- オウンドメディア制作会社をお探しの方はこちら
- 採用サイト制作会社をお探しの方はこちら
- SEOに強いホームページ制作会社をお探しの方はこちら
- WebマーケティングでおすすめなWeb制作会社はこちら
- 中小企業向けのWeb制作会社はこちら
Web制作関連の知識を身につけよう
