Webサイトをスマホ対応すべき理由とは？方法・費用相場も解説
従来はパソコンからWebサイトを閲覧するケースが一般的でした。しかし、スマートフォンが普及するにつれて、スマートフォン通じてインターネットが利用できるようになりました。
現在はスマートフォンを使ってインターネットを利用するユーザー数の方が多く、WebサイトやWebサービスの多くはスマホへの最適化が必須となっています。例えば、WebサイトではスマホやPC、タブレットなど端末のサイズに合わせて表示幅が変わる「レスポンシブWebデザイン」が主流です。
今回はそんなWebサイトをスマホ対応にするべき理由と、制作方法・制作費用の相場をご紹介します。
「Webサイトのスマホ対応」とは何か？
そもそも「Webサイトのスマホ対応」とは具体的にどのようなことなのでしょうか。いくつか要素が挙げられますが、大きなものにユーザー体験（UX）に関わることがあります。
例えば、閲覧しやすいように画像や文字サイズ、フォントを最適化したり、バナーやリンクをタップしやすいような形や配置にしたりすることが主流です。
従来Webサイトは、アクセス需要が一番高いパソコンから見ることを前提に作られてきました。しかし、スマートフォンの登場によって画面幅が狭まり、レスポンシブ非対応の場合は画面から見切れてしまったり、一部機能が使えなかったりするなどのトラブルが生じるようになりました。
こうした背景があり、現在ではスマートフォンとパソコンでの差異が生まれないよう、レスポンシブなWeb制作が主流になっています。
自社のサイトがスマホ対応しているか確認する方法
先ほどご紹介したように、現在はレスポンシブWebデザインが主流になっているため、制作会社に依頼した場合はレスポンシブで制作してくれるケースが一般的です。制作したホームページがスマホに対応しているかどうかを確認するためには、Googleが公開している「モバイルフレンドリーテスト」を使ってみましょう。
このモバイルフレンドリーテストは、対象のWebサイトがスマホに対応しているかどうかなど、モバイルデバイスでの使いやすさをチェックするサービスです。テストをした結果、「モバイルフレンドリーではありません」と赤色の表示が出た場合には、スマホ対応への親和性が低いため注意が必要です。表示された結果に従って問題点を修正してみましょう。
ちなみにGoogleのWebマスター向け公式ブログでは、スマホ対応のラベルが適応される一例として、下記のようなトピックを挙げています。
・携帯端末では一般的でないソフトウェアを使用していないこと
・ズームしなくても判読できるテキストを使用していること
・ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
・目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
これらの基準やテストツールの結果以外に、ユーザー視点で使いやすいかどうかという原点に立ち戻り、改めてサイトを見直してみることが、一番の近道かもしれません。
ホームページ制作の外注をお考えの方へ
【お問い合わせ】ホームページ制作のご相談はこちらからWebサイトがスマホ対応していない場合のリスク
スマホ対応しているサイトと比較して、非対応のWebサイトは主に2つのリスクが生じます。
スマホユーザーの離脱を招いてしまう
ご紹介しているように、今やWebサイトの多くはスマホで見ることが一般的です。
2015年と2019年に行われた調査を比較すると、2015年時点ではパソコンからの閲覧者数の方スマートフォンからの閲覧者数よりも多くいました。しかし、2019年には全年代でスマートフォンからの閲覧者数が上回る結果となりました。
商品を購入したり、調べものをしたりする場合でも、パソコンより手軽なスマホ利用の方が多くなっているのです。
こうした状況の中、スマホに最適化されていないWebサイトは使いにくく、ユーザーを離脱させる可能性が高くなってしまいます。Yahoo!の調査によると、スマホ対応と未対応のWebサイトの閲覧状況を比較すると、未対応ページは滞在時間が短くなる結果も出ています。
滞在時間が短いということは、Webサイトのコンテンツが本来の効果を発揮できていないということです。集客や商品購入などサイトによって目的はさまざまですが、どのようなサイトであれ、滞在時間が低く離脱が多いようでは、サイト本来の目的は果たせないでしょう。
検索エンジンの評価が下がる恐れがある
スマートフォンへの非対応によって、検索エンジンからの評価が下がってしまう可能性もあります。
ビジネス的にWebサイトを活用する場合、自然検索経由での集客は重要な要素の一つです。そのため、多くの企業ではいわゆる「SEO（Search Engine Optimization）」と呼ばれる施策を行い、自社サイトが上位に表示されるように務めています。検索エンジンにはYahoo!やBingなどいくつか種類がありますが、中でもトップのシェアを誇るGoogleの検索エンジンへの対策はほぼ必須です。
GoogleがWebサイトを評価する基準は約200種類以上にも及ぶとされており、評価を決める要素の全容は公開されていません。しかし、「モバイルフレンドリーをランキング要素として使用すること」については、Google公式が発表しています。
つまり、モバイルフレンドリーではないWebサイトは評価が低くなってしまう、あるいはモバイルフレンドリーなサイトが高く評価される可能性があるということです。
SEOの観点ではさまざまな要素が影響するため一概には言い切れませんが、Googleが公式に発表していることもあり、対策しておいた方が安心でしょう。
自社Webサイトをスマホ対応させる方法とは？
次に、Webサイトをスマホ対応させる3つの方法をご紹介します。
レスポンシブデザインでWebサイトを新規作成
一つ目は冒頭でご紹介したように、レスポンシブなWebサイトを新規作成する方法です。
改めておさらいしておくと、レスポンシブデザインとは、パソコンやタブレット、スマートフォンなど、複数の異なる画面サイズできちんと表示されるよう、デザインを柔軟に調整する概念です。
例えば、パソコンからの閲覧では上部に表示されるグローバルナビゲーションを、スマホ表示ではハンバーガーメニューとアコーディオンを活用したものに切り替えるなど、デバイスにマッチしたUIに仕上げられます。レスポンシブ対応のWeb制作では一つのHTMLファイルで複数デバイスに対応したページが作れるため、メンテナンスがしやすく、作業工数もかかりません。また、制作の過程で表示するコンテンツを再整理することになるため、よりクリアな情報整理ができることも魅力です。
一方デメリットは、設計が難しく慎重に考える必要がある点です。デバイスごとに細かな調整をする必要があり、場合によってはページの読み込み速度が遅くなってしまう可能性もあります。
スマホ対応のWeb制作においては、このレスポンシブ対応がおすすめですが、実績や知見の深い会社を選ぶよう注意しましょう。
スマホサイトのみ別で作る
これから新しくWebサイトを作る場合はレスポンシブデザインで作成するのがおすすめですが、パソコンからの閲覧を前提にした既存のWebサイトをレスポンシブデザインに切り替えるのは困難です。
そのような場合にレスポンシブに作り変えるのではなくて、スマホサイトを新規に作る方法が挙げられます。
運営するWebサイトが増えるため、ある程度の手間はかかりますが、スマホサイトを作ることでレスポンシブに作り変えるよりも簡単にスマホで利用しやすいサイトを提供できます。
ちなみに、検索エンジンから重複コンテンツとみなされないよう、alternateタグやcanonicalタグを設置するアノテーションの措置をとれば、検索上の問題も回避できます。
自動変換ツールの活用
HTMLやCSSといったプログラミング言語を用いて自分でスマホサイトを構築するのが難しい場合や連動が必要な場合には、既にあるパソコン用のWebサイトを自動的にスマートフォン用のサイトに変換してくれる、自動変換ツールを活用する方法もあります。
例えば、ある自動変換サービスでは、パソコン用Webサイトを簡単にマルチスクリーン対応に変換することができます。スマートフォン用のサイトで重要視される表示速度も比較的速いもので、デザイン性の幅も広いです。一からスマートフォン用サイトを作成したり作り変えたりする方法と比較すれば、料金を安く抑えられるメリットもあります。スマートフォン用サイトを手軽に実装してみたい方にはおすすめです。しかし、自分で一から作る方法と比べると、レイアウトなどのデザインに自由が利かないなどのデメリットもあります。
レスポンシブ（スマホ対応）のWebサイト制作費用は？
ここからはレスポンシブなWebサイトを制作する際の一般的な費用についてご紹介します。レスポンシブ対応にかかる費用のうち、主なものはプログラマーの人件費であり、加えて対応するページの数に応じて料金が加算されていきます。
また、Webサイトを新規制作する場合には、企画やディレクションといったデザイン費も上乗せされます。まずはサイトの規模感別に、かかる費用を見ていきましょう。
・ミニマムサイト
10ページ以内の静的サイトのデザインやコーディングをする場合は、ミニマムサイトのカテゴリーになります。
一般的な費用相場は20万円～で、ランニングコストは5,000円～です。
しかし、サーバーアクセスなどによるデータの入出力が必要になる場合は、この金額以上に費用がかかる可能性も考えられます。
・小規模サイト
20～30ページ程度のサイトで、サーバーアクセス等の処理が一部ある場合が、小規模サイトに区分されます。オープンソースのCMSを導入し、ニュースやブログなどの更新作業が必要な場合もあります。
一般的な費用相場は80万円～で、ランニングコストは1万円～です。
・中規模サイト
ECサイトを含めた100ページ以内程度のサイトが中規模サイトです。EC機能だけでなく、サーバーアクセスによるデータの入出力やマイページ機能のあるサイトなども中規模サイトに含まれます。
一般的な費用相場は200万円～で、ランニングコストは2万円～です。
・大規模サイト
中規模サイト以上のページ数や規模で、CMSで管理するようなサーバーアクセスありのサイトが大規模サイトに当たります。ページ数も多いですが、データベースと連携するデータの入出力がより高度になったり、データ量が多かったりします。
一般的な費用相場は500万円～で、ランニングコストは10万円～です。
ここまで、かかる費用相場を規模感別に見てきました。実際は現状のサイト状況や構築する内容に応じて金額が異なるため、正確な費用を知りたい場合には制作会社に見積を依頼するのがおすすめです。予定していた金額と実際の金額に開きがあると、プロジェクトの遂行にも支障が出てきてしまうので、なるべく早めに正確な費用を押さえておきましょう。
Webサイトのスマホ対応はプロに依頼！
ここまで、Webサイトのスマホ対応をテーマに、需要の背景や制作のポイントを紹介してきました。スマホユーザーの離脱を招いてしまったり、検索エンジンの評価を下げてしまったりと、スマホ対応をしないことで生じるデメリットは少なくありません。より効果を最大化するために、スマホ対応は欠かせない要素と言えるでしょう。
スマホ対応を実現する方法には、レスポンシブデザインを導入する、スマホサイトのみ別で作るなどがありましたが、その際に大切なのは知見の深い専門家に任せることです。
特にレスポンシブサイトを新たに作る場合や、既存のWebサイトを改修する場合には、大がかりな変更が発生することもあり、作業内容が複雑です。事前に制作実績などを確認して、後悔のないWebサイトを作りましょう。
現在制作会社をお探しの方は、ぜひPentagonにご相談ください。
PentagonはWeb制作からアプリ開発まで多種多様な事業を行っています。お客様のニーズを汲み取り、上流工程から関与。ご要望とのズレやミスコミュニケーションのロスなく、UIUXとデザイン性を両立したソリューションを提供しています。また、Web制作以外にもグラフィックデザインやロゴデザイン、ブランディング、プロモーションなどもワンストップで承っています。
こちらの記事では、Pentagonについて詳しくご紹介しているのでチェックしてみてください。