2022.07.29近年スマートフォンやタブレットの普及により、ホームページのスマホ対応が重要視されています。上記のようなお悩みが生じるかと思います。今回は、ホームページのスマホ対応を検討している企業担当者様へ向けて「スマホ対応の基礎知識」「スマホ対応方法」「スマホ対応時の注意点」などを紹介します。まとめそもそもホームページのスマホ対応は何をするの?はじめにホームページのスマホ対応について紹介します。ホームページのスマホ対応と言っても方法は、1つではありません。代表的なスマホ対応は「レスポンシブデザイン」「アダプティブデザイン」に分類できます。それぞれの違いについて理解しましょう。レスポンシブデザインレスポンシブデザインとは「PC」「スマートフォン」「タブレット」の各デバイスからホームページレイアウトを見やすくするためのデザインです。レスポンシブデザインを導入することによって、デバイスに合ったレイアウト表示に自動で切り替えが可能となります。ホームページは、HTMLとCSSで構築されており「HTMLはタイトル、見出しなどの要素」「CSSが見た目を調整する要素」となっています。レスポンシブデザインは「PC」「スマートフォン」「タブレット」3つのデバイスのCSSを用意することで、デバイスに合ったレイアウト表示切り替えを自動で行う仕組みとなっています。アダプティブデザインアダプティブデザインとは、ユーザーの使用環境に合わせてレイアウトを最適化するスマホ対応です。ユーザーがホームページを閲覧している環境に最適なレイアウトを表示してくれるということです。「レスポンシブデザイン」では「PC」「スマートフォン」「タブレット」と3つのレイアウトという選択肢しかないため、スマートフォンの機種によっては表示が崩れる可能性もあります。アダプティブデザインであれば、各スマートフォンに合ったレイアウトを表示するので「レスポンシブデザイン」に比べて表示崩れが起きにくいといったメリットがあります。アダプティブデザインは、メリットの多いスマホ対応となりますが「HTML/CSS」と合わせてプログラム言語の「Javascript」での構築が必要です。続いて、ホームページをスマホ対応にしなければいけない理由について紹介します。下記理由を理解したうえで、スマホ対応を検討しましょう。SEOへの影響モバイルユーザーの離脱を防ぐためスマホの独自操作にホームページを対応させるため【理由1】SEOへの影響ホームページをスマホ対応にしなければいけない1つ目の理由は、SEOへの影響です。検索エンジンの評価は、コンテンツ内容が「ユーザーにとって有益な情報が記載されているか」などの要素を元に実施されます。以前までは、この評価をPC向けに作成されたページに対して実施していましたが、2018年3月以降からはスマートフォン向けに作成されたページに対して評価されるようになりました。検索エンジンの評価軸がスマートフォンに変わったことにより、ホームページのスマホ対応が求められるということです。【理由2】モバイルユーザーの離脱を防ぐためホームページをスマホ対応にしなければいけない2つ目の理由は、モバイルユーザーの離脱を防ぐためです。総務省の発表によると、現在スマートフォンを所持している割合は約8割といわれています。2019年における世帯の情報通信機器の保有状況をみると、「モバイル端末全体」(96.1%)の内数である「スマートフォン」は83.4%となり初めて8割を超えた。「パソコン」は69.1%、「固定電話」は69.0%となっている(図表5-2-1-1)。引用:総務省|基本データと政策動向その中には、PCを所持していない方もいるため、ホームページをスマホ対応していないということは、これらのユーザーを取りこぼすことになるため、スマホ対応が必要となります。【理由3】スマホの独自操作にホームページを対応させるためホームページをスマホ対応にしなければいけない3つ目の理由は、スマホの独自操作にホームページ対応させるためです。スマートフォンには「タップ」「スライド」など独自の機能があります。「タップ」に関しては、PCでマウスをクリックするのと同じ意味ですが、PC用ホームページをスマートフォンで閲覧するとテキストリンクが小さくなるので、タップがしづらくなります。スマホでもタップしやすいように、テキストリンクを大きくするなどのスマホ対応が必要となります。ユーザーにストレスを与えないためにも、スマホの独自操作に対応させる必要があるということです。自社ホームページのスマホ対応を確認する場合は、Googleが提供する「モバイルフレンドリーテスト」を活用します。「モバイルフレンドリーテスト」では、自社ホームページのURLを入力するだけで、スマホ対応かの判断が可能です。スマホ対応でない場合は、下記エラーが表示されます。テキスト小さすぎて読めませんビューポート設定がされていませんコンテンツの幅が画面を超えていますクリック要素が近すぎますFlashなどのサポートが終了しているプラグインが使用されていますホームページをスマホ対応にする方法は4つ続いて、ホームページをスマホ対応する4つの方法を紹介します。「モバイルフレンドリーテスト」にてエラーが表示された方は、下記4つ方法から自社に合った方法を選定し、ホームページのスマホ対応を実施しましょう。ホームページを一から作成する変換ツールを利用するWordPressのプラグインを利用するビューポート設定とCSSの調整する【方法1】ホームページを一から作成するホームページをスマホ対応にする1つ目は、ホームページを一から作成する方法です。ホームページ作成ソフトを利用して「レスポンシブ対応済み」のホームページを作成します。一般的なホームページ作成ソフトであれば、レスポンシブ対応済みのデザインテンプレートを選択するだけなので、知識がなくても簡単に作成が可能です。ある程度ボリュームのあるホームページをお持ちの方は、労力がかかる作業となるでしょう。関連記事スマホにも対応しているホームページ作成ソフトについては、以下のコラム記事をご覧ください。【方法2】変換ツールを利用するホームページをスマホ対応にする2つ目は、変換ツールを利用する方法です。変換ツールを利用すれば、既存のホームページを残したままスマホ対応することができます。ホームページ作成する必要もなく、導入も非常に簡単です。ツール導入後は、PC用ホームページを更新すればスマホ用ホームページにも反映されるので運用が楽といったメリットがあります。数万円かかるといったデメリットもあります。【方法3】WordPressのプラグインを利用するホームページをスマホ対応にする3つ目は、WordPressのプラグインを利用する方法です。WordPressで作成したホームページを運用している方や、これからWordPressでホームページ作成を検討している方には、プラグインを使った方法がおすすめです。WordPressには、インストールするだけで機能が拡張できるプラグインが用意されています。スマホ対応に特化したプラグインも用意されているので、インストールして有効化するだけで簡単にスマホ対応することが可能です。将来的にホームページの引越しする際は、プラグインが利用できなくなるので、注意が必要となります。【方法4】ビューポート設定とCSSの調整するホームページをスマホ対応にする4つ目は、ビューポート設定とCSSの調整する方法です。ビューポート設定とは、PC用ホームページをスマートフォンで閲覧した際に、全体が縮小されるのを防ぐ設定です。ビューポート設定を行う場合は、ホームページのHTMLファイルにコードを記述する必要があります。ホームページの表示幅に合わせて、CSSを調整しなくてはいけないので「HTML/CSS」の知識が必須の方法となります。個人での対応が難しい場合は、制作会社に依頼することも可能ですが、多額な費用がかかるのがデメリットです。関連記事HTMLでホームページ作成をする方法・流れについては、以下のコラム記事をご覧ください。続いて、ホームページをスマホ対応する費用を見ていきましょう。先ほど紹介したスマホ対応ごとの費用を紹介します。自社の予算に合わせて最適な方法を検討してみて下さい。ホームページ作成ソフトのスマホ対応費用ホームページ作成ソフトのスマホ対応費用は、ソフト代のみで対応が可能です。スマホ対応が可能なホームページ作成ソフトと費用に関しては、下記のとおりです。変換ツールのスマホ対応費用は、ベンダーによって異なります。代表的なスマホ変換ツールの費用は、下記のとおりです。・ライトプラン:50,000円(税込)・スタンダードプラン:150,000円(税込)WordPressプラグインのスマホ対応費用WordPressプラグインのスマホ対応費用は無料です。WordPressの代表的なスマホ対応プラグインは、下記のとおりとなっています。制作会社に依頼した場合のスマホ対応費用は、下記のとおりです。上記の費用相場は、中規模の制作会社に依頼した場合のスマホ対応費用となります。スマホ対応(レスポンシブ対応)を依頼したときの費用相場について詳しくは、以下のコラム記事をご覧ください。・レスポンシブ対応の費用相場とは【ホームページ目的別に相場を公開】ホームページリニューアルにかかる費用相場について詳しくは、以下のコラム記事をご覧ください。最後にホームページをスマホ対応する際の注意点について紹介します。下記5つのポイントを理解したうえ、ホームページのスマホ対応を実施するようにしましょう。スマートフォン向けのレイアウトを採用するボタン幅などを調整するホームページの表示速度に注意するポップアップウィンドウが利用できない画面遷移が少ないホームページにする【注意点1】スマートフォン向けのレイアウトを採用するホームページをスマホ対応させるときの注意点1つ目は、スマートフォン向けのレイアウトを採用する点です。ホームページ作成ソフトでテンプレートを選定するときは「PC用」「スマートフォン用」それぞれのデザインが考えられているものを選択してください。確認するポイントとしては「テキストの大きさ」と「コンバージョンにつながるボタンの大きさ」の2点です。スマホから閲覧したときに「テキストが小さくて説明が分からない」「お問い合せフォームボタンがタップできない」とならないようにするためです。スマホユーザーのコンバージョンまでの導線を確認したうえで、スマホ対応テンプレートを選定するようにしましょう。【注意点2】ボタン幅などを調整するホームページをスマホ対応させるときの注意点2つ目は、ボタン幅などの調整です。スマホ対応では、タップのしやすさを一番に考える必要があります。「ボタンとボタンの幅を広めに取る」「ボタンを大きくする」などの対応をすることで、ユーザビリティが向上します。ユーザーが誤操作をしないように注意したうえで、スマホ対応を実施しましょう。【注意点3】ホームページの表示速度に注意するホームページをスマホ対応させるときの注意点3つ目は、ホームページの表示速度に注意する点です。スマホ対応は、ホームページのレイアウトを調整するだけではありません。ホームページが表示される速度を早くすることもスマホ対応の1つです。表示時間が長いと離脱にもつながるので「画像コンテンツの最適化」「キャッシュの利用」などの対策も必要となります。Insights」というツールを利用すれば、URLを入力するだけで表示速度のチェックが可能です。【注意点4】ポップアップウィンドウが利用できないホームページをスマホ対応させるときの注意点4つ目は、ポップアップウィンドウが利用できない点です。ポップアップウィンドウとは、リンクをクリックしたときにリンク先の画面が別ウィンドウで開くことをいいます。PC用のホームページでは、補足情報追加の際にポップアップウィンドウを表示させる手法があります。「スマートフォン」「タブレット」には、ポップアップウィンドウを表示させると機能がないため利用することができません。PC用ホームページでポップアップウィンドウを採用している方は、利用できないことを加味したうえでスマホ対応をしましょう。【注意点5】画面遷移が少ないホームページにするホームページをスマホ対応させるときの注意点5つ目は、画面遷移が少ないホームページにする点です。画面遷移とはホームページ間のページ移動を指します。スマホでのページ移動は、PCのページ移動よりもユーザーにストレスがかかりやすいと言われています。そのため、ページ移動が多いホームページを作成してしまうとユーザーの離脱につながってしまうので、スマホ対応のホームページを作成する場合には、画面遷移が少ないホームページを作成するようにしましょう。まとめスマホ対応のホームページを作成する方法について紹介しました。代表的なスマホ対応の種類は下記2つです。「PC」「スマートフォン」「タブレット」3つのレイアウトに自動に切り替え可能なレスポンシブデザインユーザーの使用環境に合わせてレイアウトを最適化するアダプティブデザインホームページをスマホ対応にしなければいけない理由は3つあります。検索エンジンの評価軸がスマートフォン向けに作成されたページのためモバイルユーザーの離脱を防ぐため「タップ」「スワイプ」などスマホの独自操作にホームページ対応させるためホームページをスマホ対応にする方法は4つあります。ホームページ作成ソフト等で一からホームページを作成する変換ツールを導入して既存ホームページをスマホ対応にするWordPressのスマホ対応のプラグインを導入するビューポート設定とCSSの調整をするホームページをスマホ対応する費用は下記のとおりです。コーポレートサイト(10ページ)で40万円程度また、当サイト「ビズサイ」ではホームページ制作サービス(サブスクリプション)を提供しています。ビズサイでは、ホームページの目的に合わせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます。ビズサイで制作したホームページはスマホ対応(レスポンシブ対応)がしているので、ご安心くださいませ(詳しいサービスはこちら)。美容業まずは無料でご相談ください。