近年、インターネットへのアクセスはスマートフォン経由が大多数を占めています。したがって、ホームページ運営において、スマホ対応は必要不可欠な施策といえるでしょう。そこで本記事では、ホームページをスマホ対応させるメリットや具体的な方法について解説します。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。

スマホ対応とは?

スマホ対応とは、ユーザーがホームページを閲覧する際にスマートフォン表示に最適化されている状態を指します。ここで大切なポイントは、ホームページをスマートフォンで閲覧できることではなく、スマートフォンでの閲覧に最適化されている点です。基本的にホームページの閲覧はPCでもスマートフォンでも見ること自体は可能です。

しかし、PCとスマートフォンでは縦と横の比率が異なるため、それぞれのデバイスでユーザーの見え方は大きく異なります。そのため、ホームページを作成する場合は、どのデバイスで閲覧しても最適化されるように設計せねばなりません。とくにスマートフォンが爆発的に普及している昨今において、ホームページのスマホ対応は必須の施策といえるでしょう。

スマホ対応していないことのリスク

スマホ対応されていないホームページは非常に見えづらく、ユーザーに非常に大きなストレスになります。AppleのMacとiPhoneを例に考えてみましょう。たとえば「MacBook Pro」の解像度は2,560×1,600でアスペクト比は16:10、「iPhone 12」は解像度が2,532×1,170でアスペクト比は19.5:9となります。

アスペクト比そのものに大きな違いはありませんが、PCであるMacは横長で、スマートフォンのiPhoneは縦長で使用されるのが一般的です。そのため、仮にホームページのwidth(横幅)を980pxで作成した場合、横長のMacBook Proでの閲覧に適してはいても、縦長のiPhone 12では非常に見づらい仕様になります。

ホームページの設計と運営において、視認性や操作性といったユーザビリティは非常に重要な要素です。ユーザーはホームページにアクセスした際、無意識下で一瞬の内に閲覧を続行するか否かを判断します。スマートフォン未対応のホームページは文字や画像、ボタンやリンクが小さく表示され、視認性や操作性に劣るため、ユーザーの離脱率が高い傾向にあります。

また、離脱率の悪化はユーザーや見込み客を逃すだけでなく、検索順位の低下にもつながる点も大きなデメリットです。検索エンジンはユーザーにとって有益なホームページを上位に表示するため、直帰率の高さは改善が必要なページと判断され、検索順位に影響します。そのため、スマホ対応はユーザビリティの向上とSEOという両方の観点において不可欠な施策といえるでしょう。

スマホ対応の方法

ホームページをスマートフォンに最適化する方法は主に2つあります。それが「レスポンシブデザイン」と「PC用とスマートフォン用のページ設計」です。ここからはスマホ対応の具体的な方法について解説します。

レスポンシブデザイン

レスポンシブデザインとは、ホームページを閲覧しているユーザーの画面サイズに応じて表示を最適化する表示方式を指します。「responsive」は直訳すると「反応する」や「敏感な」という意味をもち、PCやスマートフォン、あるいはタブレットなど、デバイスの画面サイズに反応して自動的に切り替わるデザイン方式です。

レスポンシブデザインはHTMLについてはほぼ共通で、CSSファイルにMedia Queryを記述し、要素の幅を指定するmax-widthやmin-widthといったプロパティで表示を制御します。

PC用、スマホ用などそれぞれのホームページを設ける

スマホ対応の方法として挙げられるもう1つの方法が、スマートフォン専用ページを作成することです。HTMLとCSSの両方を別々に作成し、.htaccessやPHPなどでリダイレクトすることでPC版とスマートフォン版に振り分けます。

PC用とスマートフォン用のそれぞれに最適化されたレイアウトが構成できるというメリットがありますが、2つのホームページを作成することと同義なため、作業量が2倍になるという点が大きなデメリットです。そのため、レスポンシブデザインがスマホ対応の主流となっています。

レスポンシブデザインにすることのメリット

レスポンシブデザインには主に3つのメリットがあります。1つ目のメリットは、Googleがレスポンシブデザインを推奨している点です。PC用とスマートフォン用のページを2つ作成する場合、Googleはそれぞれを1つのホームページとしてアルゴリズムを構成する必要があります。

レスポンシブデザインであれば、Googleがホームページをクロールするためのリソースを節約することができます。つまりクローラビリティが向上することで、相対的に検索エンジンからの評価も高まる点がレスポンシブデザインの大きなメリットです。

2つ目のメリットはホームページ制作と運営におけるコストの最適化です。PC用とスマートフォン用のホームページをそれぞれ構築する場合、HTMLとCSSの両方を2つ作成せねばなりません。さらにアクセスしたユーザーのデバイスに応じてリダイレクトする仕組みを用意するなど、手間やコストを必要とします。

3つ目のメリットはユーザーのストレスを軽減できることです。デバイスを判定して振り分けるリダイレクトにはタイムラグがあるため、そのわずかな時間差がユーザーにとってストレスになり、離脱率の悪化につながるという点は大きな欠点です。

レスポンシブデザインは1つのHTMLとCSSでホームページを作成できるため、制作と運用におけるコストを最適化できると同時に、タイムラグを最小限に抑えられるため、ユーザビリティの向上にも寄与するという点がメリットといえるでしょう。

レスポンシブデザイン化する具体的な方法

ここからはホームページをレスポンシブデザイン化する方法について解説していきます。

すでにホームページを持っている場合

すでにホームページを作成し、運営している場合はHTMLとCSSを書き換えなくてはなりません。たとえばHTMLでviewport値を指定したり、CSSのMedia Queryを使ったりといったコーディングが必要です。コーディングの知識がなければウェブデザイナーやホームページ制作会社に依頼する必要があるでしょう。

HTMLとCSSをレスポンシブデザインに変換してくれるツールを利用するのもおすすめの実装方法です。しかし、変換ツールは基本的にテンプレートに沿って変換するため、デザインやレイアウトの自由度が低く、不具合が発生する可能性もあります。

WordPressで自作している場合

WordPressでホームページを作成している場合は、プラグインを利用することで比較的簡単にレスポンシブデザインを実装可能です。スマートフォンに最適化されたデザインを表示してくれる「WPtouch」や「MobilePress」、ユーザーエージェントに合わせてテーマを切り替えてくれる「Any Mobile Theme Switcher」などが代表的なプラグインとして挙げられます。

また、現在では無料のWordPressテーマでもほとんどがレスポンシブデザインに対応しているため、テンプレートの変更も有効な実装手段です。

これからホームページを作る場合

これからウェブデザイナーやホームページ制作会社に依頼する場合は、かならずレスポンシブデザインに対応する旨を伝えることが大切です。レスポンシブデザインに対応する費用は制作者によって変動するため、一概にはいえません。参考として一例を挙げると、1ページ毎に1〜3万円、あるいはコーディング費用に1.5〜2倍といった制作費用が一般的とされています。

まとめ

情報通信技術の発達によってデバイスの小型化が進み、スマートフォンが爆発的に普及しました。そして、スマートフォンからのアクセスが指数関数的に増大し、今やインターネット上のトラフィックの多くはモバイルデバイスが占めています。このような時代において、ホームページのスマホ対応は必須の施策といえるでしょう。本記事を参考にしてホームページのスマホ対応に取り組んでみてください。

プロが作って、自分で簡単更新!
運用費用ゼロのホームページ作成サービス

初期費用55,000円、月額5,500円で高品質なホームページを作成可能!

お客様に最適な構成やデザインをプロが作成し運用までサポートするので、安心して任せることができます。
ホームページの更新は直感的に操作可能な管理画面からお手軽に更新可能です。

  • お客様に何を伝えたらよいかわからない
  • どんなデザインにしたらよいかわからない
  • 作った後の更新・運用方法がわからない

上記のようなホームページ作成のよくある悩みをsiteflowでカンタンに解決!
まずは無料相談をご利用ください。