ホームページのスマホ対応2つの方法
｜カテゴリ：売れるホームページ制作
ホームページに訪れる人が、パソコンやスマホ、タブレットのどのデバイスでよくアクセスしてくるかご存知でしょうか？
もし、スマホでのアクセスが多いとお感じであれば、ホームページがスマホ対応になっているかどうかをご確認ください。
また、ホームページがスマホ対応になっていないのであれば、スマホでホームページに訪問したらとても見づらいはずです。文字が小さく、左右にスクロールしないと文章が読めないし、クリックするボタンも小さい。お問い合わせや資料請求をするのも一苦労です。
コンシューマ向けのサービスを訴求しているホームページであれば、PCでの訪問よりもスマホでの訪問の方が多いはずです。また、完全な企業向けのサービスを訴求しているホームページであったとしても、おそらく１／３程度のアクセスは、スマホではないでしょうか。
スマホ対応とは
スマホ対応とは、スマホでホームページにアクセスしたときに、スマホの画面でも見やすく操作しやすいデザインで表示させることです。
今では、スマホのデザインで構築されたホームページも散見されるほどです。
そのような完全にスマホデザインのみのホームページを除いて、通常であれば、スマホでのアクセスとPCでのアクセスでは、デザインを切り替える必要があります。
スマホ対応の方法には、主に２種類あります。
この２種類について、ご説明いたします。
ユーザーエージェントによる切り替え
ユーザーエージェントとは、ホームページにアクセスしたデバイスがどのようなものなのか、デバイスやブラウザ毎に固有の名称を持っています。
ユーザーエージェントからは、デバイスの種類やメーカー名、ブラウザの種類やバージョンなどの情報を読み取ることができます。
ホームページに訪問してきた人がいたら、そのユーザーエージェントをウェブサーバーは受け取ることができます。ウェブサーバーは、ユーザーエージェントを判別して、「このユーザーエージェントの場合はスマホなので、スマホデザインを返す」という具合に、プログラミングをしてデザインの切り替えができます。
ユーザーエージェントによる切り替えには、デザインを切り替える方法以外に、URLを切り替える方法があります。
URLを切り替える方法は、PC用のホームページとは別のURLでスマホ用のホームページを作っておきます。ユーザーエージェントを確認してスマホでのアクセスだと判断されたら、スマホ用のホームページのURLに転送します。
デザインとURLのどちらの切り替えにしても、ユーザーエージェントによる切り替えは、とても大きなデメリットがあります。それは、新しいデバイスが出現する毎に、ユーザーエージェントでの切り替えプログラムを追加・修正する必要があることです。
そして、Googleはユーザーエージェントによる切り替えを推奨していません。なぜなら、デザインの切り替えにしてもURLの切り替えにしても、PC用のデザインとスマホ用のデザインの2種類を用意しなければいけなく、ホームページは1つなのに、Googleは2種類のデザインをインデックスしなければいけない。つまりホームページの把握にコストがかかるからです。
また、Googleは公式発表で、モバイルファーストインデックス（MFI）を発表しました。これは、モバイルでのアクセスがあったときにモバイル用のURLに転送することは、「モバイルファーストではなく、PCファーストだ」ということです。つまり、URLの転送は、SEO対策としてはさらに不利になりました。
これらのデメリットを解消するために、次にご紹介するレスポンシブWebデザインが出現しました。
レスポンシブWebデザイン（RWD）
レスポンシブWebデザインは、HTML5とCSS3を組み合わせて設定する、ブラウザの横幅に合わせてデザインを切り替える手法です。
以前であれば、ユーザーエージェントによる切り替えが主流でしたが、レスポンシブWebデザインが出現し、各社ブラウザが対応しだしてからは、こちらが主流になりました。
確かに、ユーザーエージェントの違いでデザインが異なりますが、ユーザーエージェントの違いは言い換えれば、ブラウザの横幅の違いです。縦幅は全くと言っていいほど関係ありません。
であれば、ブラウザの横幅によってデザインを変更させるものが出ても良いはずです。その発想のもとで生み出されたのが、レスポンシブWebデザインです。
レスポンシブWebデザインの設定方法は、CSSにif文のような命令を入れ、ブラウザの横幅をピクセルで設定します。「設定されたピクセルよりも大きい、もしくは小さい場合に、スタイルをこのように表示させる」という具合に設定します。
例えば、今ご覧になられているこのホームページであれば、CSSに次のような設定をしています。
@media screen and (max-width: 840px) {
#top-banner ul li {
display: block;
margin: 10px 0;
}
}
max-widthのところに記載されている数値が横幅です。840ピクセルが設定されています。ブラウザの横幅が840ピクセルを下回ったら、displayやmarginが変更されるように設定しています。
今、PCでこのホームページをご覧であれば、ブラウザの横幅を縮めてみてください。すると、横幅に合わせてデザインが変更され、横スクロールが発生しないように、カシカシッとデザインが切り替わっていくと思います。
これが、レスポンシブWebデザインです。
レスポンシブWebデザインは、HTMLとCSSを1つだけ用意しておけば、PCでアクセスしても、スマホでアクセスしても、それぞれに対応したデザインを生成（レンダリング）してくれることです。
それによって、得られるメリットは、
- URLのPRが容易になる
- ホームページの文章の修正が1回で済む
- デバイスによるリダイレクトがなくなるので、表示速度が早まる
- リンクを張るページ数が1か所になり、リンクを張りやすくなる
- Googleのクロール回数が少なくて済み、検索順位の評価が高まる
などがあります。
自社のホームページをレスポンシブWebデザインに変更した方は、ぜひご相談ください。
この記事は、お役に立ちましたか？
ホームページ集客コンサルティングのご案内
ホームページの企画や制作、SEO対策など、ホームページ集客の相談ができるWebコンサルティングのご案内です。タイムチャージ方式で、時間内に聞きたいことを好きなだけ相談できるスポットコンサルティングをご用意しました。
ホームページ制作の前に、ネット集客の企画の立て方やSEO対策のやり方を知りたい。わが社のホームページをどうのように修正したらアクセス数が増やせるのか知りたいなど、何でもご相談ください。
| タイムチャージ | 1時間￥10,000（税別） |
もちろん、ホームページ制作やSEO対策も承っております。お問い合わせ・お申込みは、お問い合わせフォームよりご連絡をください。
売れるホームページ制作のお問い合わせ
まずは、お問い合わせフォームより、ご連絡先をお教えください。貴社のご事情を伺い、売れるホームページ制作のご提案をさせて頂きます。