【初心者向け】スマホ対応の方法や考え方についてレスポンシブかユーザーエージェントか徹底的に解説します

スマホ対応の方法や考え方について解説します。スマホ対応の必要性については今更語るほどのものではありませんが、

僕がWebデザイナーになりたてのときに、スマホ対応って色んなやり方があるけど結局どういう方法がいいの？

ということを考えていてよく分からなかったので、これからWebデザイナーになる方の道標の１つになればと思ってこの記事を書きます。では行ってみましょう(´ε｀ )

スマホ対応の必要性

念の為スマホ対応がなぜ必要なのかを振り返っておきますと、現在はPCよりもモバイルアクセスが圧倒的に多いことからですね。

だいたい６〜７割はモバイルからのアクセスになります。

特にブログなどのメディア系のサイトなどは多い傾向にあり、モバイル対応がいち早く必要になった種のWebではないでしょうか。ホームページもここ２〜３年ぐらいでモバイルからの閲覧がPCからの閲覧を完全に上回ったような感覚です。

なので当然スマホ対応は必要になってくるのですが、そもそもスマホ対応の方法については大きく２種類があります。これについて解説をしていきますね。

レスポンシブでスマホ対応

まずはレスポンシブ対応です。
レスポンシブ対応の特徴は次の通りです。

• 画面幅に応じてレイアウトをCSSで切り替える
• HTMLがPC、スマホ版ともに共通なので管理が楽

画面幅で切り替えるというところがポイントです。これだけだとわかりにくいので、レスポンシブ対応の仕組みを少し説明します。

まず画面幅でどうやってレイアウトを切り替えるかというと、CSSのメディアクエリというものを使うことで実現できます。
例えば下記のようにCSSを書くと、画面幅が768px以下の時にのみ、中のCSSを適用させることができます。

上記はmax-widthで指定していますが、min-widthで指定することもできます。
例えば下記のようにCSSを書くと、画面幅が1200px以上の時にのみ、中のCSSを適用させることができます。

技術的にはこのように簡単な話です。

実際にどのようにして使うかというと、PCで横並びになっている３つの四角いボックスがあっとして、それをスマホでは縦に並べたい時などに、メディアクエリを使ってCSSを特定の画面幅以上、以下で切り替えます。

スマホも画面幅が色んなものがありますし、さらに横向きにするとまた画面幅変わったり、タブレットも含めると様々なのですが、

だいたい以下のような感じでやることが多いです。

1000px〜：PC
768〜999px：タブレット
576〜767px：スマホ横
〜575：スマホ

僕の場合はタブレットの999pxの部分は結構案件によって色々変えますが、768や576でブレイクポイントをとることがほとんどです。ブレイクポイントというのはメディアクエリでの切り替えポイントのことです。

レスポンシブ対応のメリットデメリットをまとめると以下のようになります。

【メリット】

• HTMLが共通なのでソースコードの管理が楽
• 開発工数が後述するユーザーエージェントと比べて少なくてすむ
• 画面幅によってデザインを変えるので本質的（後述）
• Google推奨のスマホ対応方法

【デメリット】

• PCとスマホでデザインやUIをガラリと変えることが難しい

ユーザーエージェントでスマホ対応

次にユーザーエージェントで切り分ける方法について解説をします。ユーザーエージェントってちょっと難しそうな言葉ですが概念自体はすごく簡単です。

ユーザーエージェントは、端末の情報だと思っていただければ問題ありません。

つまりユーザーがスマホでアクセスした場合に、ユーザーエージェントを取得することで、スマホからのアクセスであることがわかるということです。

ユーザーエージェントを利用して、PCかスマホかタブレットかを判断して、読み込むソースコードを切り分けます。

少し細かい話ですが、ユーザーエージェントを使った場合、読み込むソースコードの切り分け方には２種類あります。

• ユーザーエージェントによってURLを切り分けて読み込むページ自体を切り分ける
• URLは同じだが、ユーザーエージェントによって読み込むソースコードを変える

前者はURL自体を変えるのでわかりやすいですね。例えばPC版がxxx.com/abcならスマホ版はxxx.com/sp/abcのようにURL自体を切り分けます。

一方で後者の方は、PCもスマホも同じxxx.com/abcですが、中で読み込んでいるファイルをシステム的に切り分けます。

ユーザーエージェントのメリットデメリットをまとめると以下のようになります。

【メリット】

• PCやスマホによって完全にデザインやUIを変えることができる

【デメリット】

• PCやスマホでHTMLが異なるのでソースコードの管理が煩雑
• 開発工数がレスポンシブ対応と比較してかかる（デザイン工数も高くなる）

オススメはレスポンシブ

それぞれ特徴があり、どちらもマスターしなくてはならないの？と不安になる方もいると思いますが、大丈夫です。
基本的にはレスポンシブ対応ができれば問題ありません。

レスポンシブ対応はGoogleも推奨していますし、何よりも画面幅によってデザインを変えることは本質的です。
というのも、スマホやタブレットのサイズって今や色んなサイズがありますよね。

小さな画面のスマホもあれば“なんちゃらプラス”みたいにバカでかい画面サイズのものもあります。それらをひっくるめてスマホとして取り扱って同じデザインにするよりは画面幅に応じて適宜変えていった方が本質的です。

なので僕はレスポンシブ対応をオススメしますし、実際に僕がやる案件は基本レスポンシブ対応です。

ではユーザーエージェントでスマホ対応はしないのか？

ではユーザーエージェントは使われていないかと言うとそんなことはもちろんなくて、これは僕の肌感覚ですが、比較的サービスサイトにそれが多い傾向にあると思います。

もちろんコーポレートサイトでもユーザーエージェントで作っているものも見かけますが、サービスサイト（特にメジャーなもの）はレスポンシブよりもユーザーエージェントが多いような気がします。

これは理由が明確で、次のような理由からユーザーエージェントが好まれると考えられます。

• 単なる情報閲覧用ではなく操作メインのサイトだから
• そのためUIを完璧に切り分けたい

サービスサイトとは例えばリクナビみたいな会員が便利に使える機能的なサイトだったりしますが、これらは操作性が非常に重要になるので、PCやスマホで最適化している必要があります。

そのときにレスポンシブでやろうと思うと同じソースコードでPCとスマホ版をどちらにも最適化されたUIデザインを作るのは結構苦しかったりします。

そのため、ユーザーエージェントでやることが多くなります。

レスポンシブとユーザーエージェント共存はNG

レスポンシブとユーザーエージェントの共存は基本的にNGです。

レスポンシブで作っているのに、途中で「ここだけはHTML共通だとデザインしづらいからユーザーエージェントにしよう」というのはできません。

そもそもレスポンシブで切り分けた範囲とユーザーエージェントで切り分けた範囲は完全に一致しないからです。レスポンシブはあくまでも画面幅基準で、ユーザーエージェントは端末基準ですから、ユーザーエージェントがスマホだと認識していてもレスポンシブがPC（の画面幅）だと認識していることもあります。

その場合、レスポンシブによってPC版のデザインが表示されているのにユーザーエージェントの部分だけスマホ版になってしまうことがあります。

ただ、用途によっては完全にNGとは言いません。

例えばレスポンシブで作ったサイトで、どうしてもここだけスマホの場合にのみ表示したいボタンがあるといった時、ユーザーエージェントで表示させることはできますよね。

まとめ

基本的にコーポレートサイトやランディングページを作るならレスポンシブ対応で問題ありません。

かなり予算をかけたサービスサイトを作る機会があれば別ですが、そういうケースが少ないようであれば迷わずレスポンシブを学びましょう。