スマホ対応、やってますか？レスポンシブとユーザーエージェントを徹底解説！

1. なぜスマホ対応が必須なのか？今のネット事情を数字でチェック

最近、スマホを持っていない人を探す方が難しくなりましたよね。電車の中を見回すと、ほぼ全員がスマホを見ています。YouTubeを見たり、SNSをスクロールしたり、ニュースをチェックしたり…。その延長で、ウェブサイトへのアクセスも圧倒的にスマホが主役になっています。

実際の数字を見てみましょう。現在、ウェブサイトへのアクセスの7割以上がスマホからです。これはもう「スマホ対応しなくてもいい」なんて言える時代じゃありません。むしろ、「PCだけ対応してればOK」なんて言っていたら、70%以上のお客さんを門前払いしているのと同じです。

しかもこの傾向は、ブログやメディア系サイトではさらに顕著。ほとんどがスマホからアクセスされます。コーポレートサイトでも、アクセスの50%以上はスマホから。つまり、会社の公式サイトを見に来てくれる人の半分は、スマホ画面でチェックしているわけです。

この事実を知らずに「とりあえずPCで見やすければOK」と思ってしまうと、大きな機会損失になります。逆に言えば、スマホ対応をきちんとすれば、それだけでユーザー体験（UX）をグンと向上させられるチャンスでもあるんです。

スマホ対応には大きく分けて2つの方法があります。

それぞれの特徴を詳しく見ていきましょう。

レスポンシブデザインは、画面の幅に応じてCSSでレイアウトを切り替える方法です。例えば、同じページでもPCでは横3列で表示されていた記事一覧が、スマホでは縦1列になる…というような感じです。

特徴は3つあります。

ただし注意点もあります。
すべて同じHTMLなので、スマホでは不要な要素まで読み込むことがあります。その分、読み込み速度が遅くなる可能性もあります。特に画像や動画が多いサイトでは、スマホ用に軽量化する工夫が必要です。

ユーザーエージェント（UA）とは、アクセスしている端末の種類（PCかスマホか、iPhoneかAndroidかなど）を判別するための情報のことです。これを利用すると、アクセス元に合わせて完全に別のページを表示できます。

メリットはかなり明確です。

完全に別デザインが可能
　PCとスマホでまったく違うUIや機能を持たせることができます。スマホではタップ操作を重視したデザイン、PCでは大きな画面に合わせた複雑なレイアウトなど、自由度はかなり高いです。
不要なデータを読み込まない
　スマホ専用ページにはスマホに必要なデータだけを載せられるので、表示が軽くなります。

ただしデメリットもあります。