自分でできる？ホームページをスマホに対応させる方法を解説！

総務省が発表した「令和3年通信利用動向調査」によると、スマホの普及により、パソコンよりもスマホでインターネットを利用する人が増えています。また、個人のスマホ保有数も年々増加しており、ホームページのスマホ対応は欠かせないものとなっているといえるでしょう。

その中で今回は、スマホ用ホームページを作成する方法について解説します。

スマホに対応したホームページとは

パソコン用に作られたホームページをスマホで閲覧すると、レイアウトが崩れてしまい見づらくなってしまいます。そこで、スマホでも閲覧しやすいように最適化されたホームページが登場しました。これらのことを、スマホに対応したホームページと呼ぶ場合があります。

スマホに対応していると、画面を拡大しなくても文字が読みやすく、ボタン配置も適切であるため、ユーザーが感じるストレスは軽減されます。スマホで閲覧できるホームページの全てがスマホに対応しているというわけではないので注意してください。

ホームページをスマホに対応させたほうがいい理由

スマホの普及により、ホームページもスマホで見る人が年々増えています。日頃パソコンを使用していても、仕事以外ではスマホでしかホームページを見ないという方も少なくないでしょう。

ホームページがスマホに対応していないと、スマホで閲覧した場合にデザインが損なわれてしまいます。ホームページにおいて、デザイン性の高さや見やすさ、使いやすさなどは重要視される傾向にあるため、ユーザーの閲覧意欲低下、離脱率増加を招く恐れがあるでしょう。離脱率は検索順位の悪化にもつながるため、スマホ非対応なホームページは様々に悪影響をもたらす可能性があるといえます。

Googleはレスポンシブデザインを推奨している

レスポンシブデザインとは、ユーザーが使用しているデバイスに合わせてWebサイトを最適化するデザイン手法です。Googleからも推奨されており、パソコン用とスマホ用を1つのホームページとして管理できて被リンク数の評価が分散しないことから、間接的にSEOにも効果的だと言われています。

Googleのレスポンシブデザインに関する考えはこちらから確認してください。

ホームページのスマホ対応は自分でできる？

ホームページのスマホ対応は自分でもできます。ツール等を用いない場合は、ホームページを作成する場合と同じくHTMLやCSSを記述する知識が必要です。

変換ツールを使えば、既存のホームページからドラッグ&ドロップでスマホ用ホームページを作り出すことが可能です。WordPressを利用している人であれば、レスポンシブに対応したテーマの利用もしくはプラグインの導入によっても対応できるでしょう。

スマホ対応のホームページを用意する方法

ここでは、スマホ対応のホームページを用意する方法を4つ紹介します。

新たにスマホ用のホームページを作る

ゼロベースでスマホ用ホームページを作る方法で、パソコン用とスマホ用のサイト別々で管理することになります。サイトは別々に存在しますが、ユーザーの端末に合わせて自動で切り替わる設定が可能です。これはアクセス者が利用しているブラウザやOSの種類を示す「ユーザエージェント名」から識別する方法で、設定方法はさまざまです。例えば「.htaccessファイル」を使って振り分ける方法があります。

メリットは、スマホ用とパソコン用のホームページがそれぞれ独立しているため、デザインを分けられるということです。デメリットは、パソコン用とスマホ用のホームページが別々に存在し、URLも2つあるため管理・更新に手間がかかるということです。大量のページを保有するサイトであれば、この方法は向いていないでしょう。

新たにレスポンシブデザインのホームページを作る

レスポンシブデザインは、ユーザーの端末に合わせてホームページの表示が切り替わるしくみです。メリットは、ホームページやURLは1つしかないため、新たにスマホ用ホームページを作る方法と比べると管理が楽だということです。

また、ホームページにWordPressを利用している場合はレスポンシブに対応したテーマの利用、もしくはプラグインをインストールすることですぐに対応できます。さらに、先述したようなSEO効果も期待できます。デメリットは、パソコン用とスマホ用それぞれのデザインを大きく変えることができないということです。

レスポンシブデザインについてより詳しく知りたい場合は以下の記事をご確認ください。

変換ツールを使う

スマホ用ホームページを作成する方法の1つとして、変換ツールというものがあります。パソコン用のホームページにある要素をドラッグ&ドロップするだけでスマホ用ホームページを作ることができます。

基本的にはパソコン用ホームページとスマホ用ホームページが連動しており、パソコン用を更新すれば、スマホ用も自動で更新される仕組みです。レスポンシブデザインのような形で管理できるため、手間がかかりません。

参考までに2つの変化ツールを挙げてみます。

shutto（シュット）

スマホ用ホームページに特化した機能充実しており、ページ数が少ないサイトであれば数十分で仕上がります。CSSを使うことでデザインの幅が制限されず、スマホサイト独自の柔軟なデザインが可能。作り込まれたスマホ用ホームページの作成が可能です。料金プランはプロ版とマスター版の2種類があり、マスター版ではタブレットにも対応しています。

料金プラン：プロ版（年間6万6000円） マスター版（年間13万2000円）
初期費用：1万6500円（全プラン共通）
公式サイト：https://shutto.com/

mobeek（モビーク）

パソコン用のホームページからスマホ用ホームページを作成することはもちろん、ゼロベースで作ることも可能です。また、クライアント変換型のサービスなので、サービス提供元のサーバーに個人情報を保存する必要がなく、セキュリティ面で安全です。

ページ内に広告が付くものの無料プランがあり、ホームページが10ページ以内で構成されていれば利用することができます。他にも製作代行オプションがあり、ページ作成を依頼することも可能です。

料金プラン：モビーク-無料版（10ページ（テンプレート）無料） モビーク-スタンダードプラン（月額5000円）
初期費用：1万5000円（スタンダードプランのみ）
公式サイト：https://mobeek.net

ホームページ制作会社に外注する

自分で行うのが難しい場合や何か気になることがある場合は、ホームページ制作会社に依頼するという方法もあります。あらゆる相談にのってもらえるため、少しでも不安要素があり、予算が許す場合は選択肢のひとつになるでしょう。

なお、サングローブ株式会社で制作しているWebサイトも、すべてレスポンシブデザインに対応しています。ご要望の方はこちらからぜひお問い合わせください。

ホームページのスマホ対応は必須

スマホでインターネットを利用する人が増えている現在、ホームページのスマホ対応が必須の時代になったといっても過言ではありません。いまや行わなかった場合のデメリットは少なくなく、真っ先に行うべき作業のひとつです。基本的にはレスポンシブデザインが導入・管理の両面で便利ですが、独立したデザインにこだわる場合はコーディングが必要になることもあるでしょう。

ホームページ作成のスキル面で不安がある場合やデザインにこだわりたいという場合はこちらより当社にご相談ください。より良い解決策をご提案します。