ホームページをスマホ対応にさせる方法は？作り方や4つのメリットを解説

ホームページのスマホ対応はモバイルフレンドリーな状態

ホームページをスマホに対応させていることをモバイルフレンドリーな状態といいます。ホームページを閲覧するデバイスはスマホであることが多いため、モバイルフレンドリーにすることが大切です。

モバイルフレンドリーに関して詳しく見ていきましょう。

モバイルフレンドリーとは「持ち運び端末に対応」を意味する

モバイルフレンドリーは、スマホやタブレットなどの持ち運び端末に対応していることを意味します。モバイルフレンドリーなホームページは、デバイスごとに表示が最適化される仕組みです。

モバイルフレンドリーにすると、以下の使いやすさが得られます。

パソコン対応のホームページをスマホから閲覧すると、文字が小さいことや表示がくずれていることがあります。

スマホからでも見やすいホームページにするため、モバイルフレンドリーにすることが大切です。

モバイルフレンドリーテストでスマホ対応可否を確認できる

ホームページがモバイルフレンドリーとなっているかは、Googleが提供しているモバイルフレンドリーテストを使用して確認が可能です。

確認したいホームページのURLを入力すると20〜30秒で結果が表示されます。結果の表示後に改善ポイントの詳細も表示されますが、改善には専門知識が必要です。専門のチームや社内エンジニアなど社内の担当部署に確認しましょう。

ホームページをスマホ対応にさせる2つの方法

ホームページをスマホ対応にさせる方法は以下の2つです。

制作コストや管理コスト、ツールの難易度に違いがあります。メリットやデメリットを参考にマッチする方法を選択しましょう。

1. 既存のホームページをレスポンシブにする

1つ目は、既存のホームページをレスポンシブにする方法です。レスポンシブとはユーザーも使用しているデバイスに応じて、表示サイズを自動で変えてくれるデザインです。

レスポンシブデザインでは、あらゆるデバイスに最適化したページサイズを表示してくれます。Googleが推奨しているデザインでもあるため、ぜひ取り入れたい方法です。

レスポンシブデザインのメリットとデメリットを以下にまとめました。

各デバイスから閲覧して問題がないようデザインが制限されることがあるものの、よほど凝ったデザインでなければ大きな心配はありません。

2. ホームページを2つ作る

2つ目の方法は、ホームページをパソコン用とモバイルデバイス用に2つ作ることです。アクセスがあったデバイスによって対応するページを表示します。

パソコン用とモバイルデバイス用ではURLが異なるため、スマホからアクセスされたときにモバイルデバイス用にリダイレクトするよう設定しましょう。

ホームページを2つ作る方法でスマホ対応させるメリットとデメリット

サブディレクト型、サブドメイン型の特徴

URLが2つ存在することになるため、サブディレクト型もしくはサブドメイン型に分けて作る必要があります。

どちらも1つのドメイン内で複数のサイトを運営したい場合に使用されます。パソコン用とスマホ用、2つのURLを独立したWebサイトとして認識させるかどうかで使用する方法が異なります。ホームページ初心者の方にとっては複雑さが増すため、デメリットとなるでしょう。

スマホ対応ホームページの3つの作り方

具体的なスマホ対応ページを作る方法は主に3つあります。

1. HTML/CSSを使いレスポンシブデザインで作成する

1つ目の方法は、HTML/CSSを使ってレスポンシブデザインを作成する方法です。ホームページをはじめから作る際や大幅なリニューアルする際は、レスポンシブデザインで作成することをおすすめします。

レスポンシブデザインを作成するには、コーディングやブラウザの情報を取得するための「meta viewportt」をはじめとする専門知識が必要です。

複数のタグやコード、画像サイズの設定なども必要となり、初心者が1から覚えて対応するには無理があります。自社にプログラマーや専門知識がある人材がいない場合は外注しましょう。

2. WordPressのスマホ対応テーマ・プラグインを適用する

2つ目の方法は、WordPressのスマホ対応テーマ・プラグインを適用する方法です。WordPressではスマホ普及に伴い、ほとんどのテーマがレスポンシブデザインに対応しています。

WordPressではプラグインをインストールする方法も利用できますが、スマホ対応機能がうまく働かないことやページ設定が複雑になり、表示までに時間がかかるなどのデメリットが存在します。うまく動作しない場合の設定変更が複雑な点もあまりおすすめできません。

3. 自動変換ツールを利用する

3つ目の方法は、自動変換ツールを利用することです。自動変換ツールは専門知識がなくても簡単な操作でスマホ向けにサイトを最適化できます。

料金がかかることやテンプレートの中からレイアウトを決めるため、デザインの自由度や機能に制限があります。

以下で代表的な自動変換ツールを紹介するため、参考にしてください。

flamingo

flamingoは、100万PV/月を超えるような大規模サイト向けの自動変換ツールです。特徴としてデザインの自由度の高さやファイルの変更管理が可能な点、共同作業が可能な点が挙げられます。

プランはスタンダードプランとエンタープライズプランの2つが用意されており、どちらも30日間の無料試用期間があります。対象や料金は下記にまとめました。

Mobify

Mobifyは、50〜120万超のPV数がある中〜大規模向けサイトの自動変換ツールです。特徴として画像表示速度が早いことやデザインの自由度が高い点が挙げられます。

アカウント発行費用が必要な点やコーディングスキルが必要とされるなどのデメリットも存在します。Mobify独自のコーディング方法もある点は、ユーザーによって評価が分かれるでしょう。

対象やプラン別の料金システムは以下のとおりです。

shutto

shuttoは、50万PV/月程度の中〜小規模サイト向けの自動変換ツールです。ドラッグ＆ドロップでレイアウトのデザイン作成が可能な点や、各プランにPV制限がない点が特徴です。

デザインの自由度が低く、プロ版より上位のプランでは初期費用と年間利用料がかかります。

プラン別の料金は以下のとおりです。

ホームページをスマホ対応にする4つのメリット

ホームページをスマホ対応にすることで、以下の4つのメリットが得られます。

1. スマホ最適化でコンバージョンを増やせる

1つ目のメリットは、問い合わせや商品購入などのコンバージョンを増やせることです。

スマホに対応することで表示崩れを防ぎ、表示内容がスマホに最適化されるため、スマホユーザーに快適な環境を提供できます。快適な環境はユーザーの離脱を防ぎ、コンバージョン率を向上させることにつながるでしょう。

2. 検索順位で上位が狙える

2つ目のメリットは、検索順位で上位表示が狙えることです。Googleは2018年より、モバイルファーストインデックス（MFI）の適用をはじめました。

以前まではパソコンサイトがメインの評価対象とされ、スマホに対応していることが評価要素の1つとして含まれていました。2023年からスマホサイトがメインの評価対象となり、スマホサイトのコンテンツやアクセス数などで検索順位を決定するような方針転換がなされています。

スマホ用ホームページが評価の主軸に変更されたため、上位表示される条件としてスマホ対応していることが重要となりました。

3. スマホユーザーの離脱を防げる

3つ目は、スマホユーザーの離脱を防げることです。スマホ対応とすることで文字サイズや画像の表示速度、リンクの間隔などがスマホ画面用に最適化されます。スマホユーザーにストレスなくホームページを閲覧してもらえることで、離脱を防ぐ効果が期待できるでしょう。

スマホ対応していないホームページをスマホ表示した場合は、以下の現象が起こります。

閲覧する際のストレスはユーザーの離脱につながり、Googleからの評価を下げる要因にもなります。スマホ対応にすることで、スマホユーザーへ与えるストレスは極力減らしましょう。

4. ビジネスにおける情報提供が容易になる

4つ目のメリットは、ビジネスにおける情報提供が容易になることです。ビジネスシーンにおいてBtoCだけではなく、BtoBでもスマホやタブレットなどのモバイルデバイスで閲覧される機会が増えています。

仕事での打ち合わせ先や移動中の合間などに、スマホやタブレット端末で他社のホームページを確認することも多いでしょう。個人ユーザーと企業の双方の顧客が、モバイルデバイスから閲覧することが増えています。モバイルフレンドリーにすることで、ビジネスパーソンへの情報提供も容易になるでしょう。

【無料】ホームページのスマホ対応に役立つデベロッパーツール

ホームページをスマホ対応にする際は、デベロッパーツールが役立ちます。デベロッパーツールは、Google chromeから無料で利用可能です。

デベロッパーツールを使用することで、スマホからアクセスしなくてもパソコンで表示を確認できます。ソースコードとともに、スマホでのアクセス画面も確認できるため、レスポンシブデザインの確認作業が非常に簡単になりました。

デベロッパーツールを開き、スマホサイズで確認する方法は以下のとおりです。

ホームページのスマホ対応の注意点3つ

ホームページをスマホ対応に変更した後の注意点は、以下の3つです。

1. 画面サイズをデバイスにあわせる

1つ目の注意点は、画面サイズをデバイスにあわせることです。ターゲットとするユーザー層とよくアクセスされているデバイスの種類によって、デザインを多少変更する必要があります。

スマホの種類によっても画面のサイズやレイアウトが変更されます。最も多くのユーザーが利用する端末の画面サイズにあわせて、デザインを決めることが重要です。

ホームページをスマホ対応にした後でも、ブラウザからのアクセスが多い場合はデザインをブラウザにあわせましょう。スマホでもストレスなく閲覧できる程度の調整は必要ですが、アクセスが多いデバイスを優先したデザインやボタン配置が必要です。

2. 見やすいデザインにする

2つ目は、モバイルデバイスで見たときに見やすいデザインにすることです。スマホ対応後といってもAndroidとiPhoneではフォントが異なります。スマホとタブレット端末でも表示サイズに多少の違いがあります。

モバイルデバイスにもさまざまな画面サイズが存在するため、どのパターンで閲覧しても表示崩れがないかを必ずチェックしましょう。アクセスが多い端末にあわせてデザインすることは重要ですが、すべてのモバイル端末で表示したときに表示崩れが発生しないようにします。

最低限の見やすさと表示崩れがないことでより多くのユーザビリティを集めることが可能です。

3. 画像を圧縮する

3つ目は、画像を圧縮することです。パソコン向けに画像を表示すると、スマホで表示したときに時間がかかります。パソコンとスマホの処理能力の差を念頭に置いて、スマホ対応のホームページを作成する必要があるでしょう。

ウェブサイトの表示が3秒遅くなるだけで、離脱率が3〜4割増加するといわれています。離脱を招くとアクセス数が減少しビジネスチャンスを失いかねません。機会損失を防ぐためにも、画像の圧縮は忘れずに行いましょう。

ホームページをスマホ対応にするために必要な費用

ホームページのスマホ対応にかかる費用はページ数によって決まります。ページ数が多くなることで動員されるプログラマーの数も増えるため、人件費による費用が増加します。社内で完結できる場合と外注する場合で比較してみましょう。

社内で対応する場合：0円〜

社内でホームページをスマホ対応にするレスポンシブ作業が完結する場合、費用は0円から可能です。プログラムやコーディングが自社で可能な環境では費用を大幅に抑えられます。

スマホ対応にするためにツールやプラグインを活用する場合は費用がかかります。ツールやプラグインなどは導入後も繰り返し使用できるため、費用対効果は高いといえるでしょう。

知見のある人材が社内に1人いるだけでも外注する項目を削減できるため、コスト削減が望めます。

外注する場合：1万円/ページ〜

外注する場合はページ数やサイトの種類によって大きく異なります。大まかな相場は以下のとおりです。

レスポンシブデザインの参考サイト

レスポンシブ制作時に役立つデザインの参考サイトを紹介します。

Responsive Web Design JP

参照：Responsive Web Design JP

Responsive Web Design JPは、日本国内のレスポンシブデザインに特化したギャラリーサイトで、23,500件以上のサイトが掲載されています。

スマートフォン、タブレット、パソコンの3つのデバイスでの表示を閲覧可能です。異なるデバイスでの表示を素早く比較できます。

優れたレスポンシブデザインも数多く紹介されているため、レスポンシブデザインを作成する際は参考になるでしょう。

SANKOU！

参照：SANKOU！

SANKOU！は、3,000件以上のウェブサイトが掲載されているギャラリーサイトで、ほぼ毎日新しいサイトが追加されています。

洗練されているウェブサイトや遊び心あるサイト、最新のデザインのトレンドを取り入れたサイトなどさまざまなサイトを閲覧可能です。

デザインのトレンドは日々変化するため、最新のサイトがほぼ毎日追加されている点ではデザインのトレンドを押さえるうえで参考になります。

まとめ

スマホの普及率やGoogleの評価の方法をみても、ホームページをスマホ対応にすることは必須といえるでしょう。モバイルフレンドリーな状態にすることでアクセス数の増加や集客、ブランディングなどさまざまなメリットが得られます。

HTML/CSSを用いたレスポンシブデザインは、デバイスごとの細かな調整や専門技術などが必要です。社内に知見がない場合は制作会社に依頼しましょう。

比較ビズでは2分程度の簡単な入力で複数の会社から見積もりを取れます。ホームページのスマホ対応を制作会社に依頼する場合は、ぜひ比較ビズを利用してみてください。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。