ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

レスポンシブサイト制作のベストプラクティスを求めて

ウェブサイトをスマホ対応にする際、いくつかの方法があります。制作サイドとしては、一体どの方法がベストプラクティスなのか検討するべきだと思う訳なのですが、僕の中でそれが曖昧だったので考えてみました。

今回比較するのはよく使われている方法である
CSSのメディアクエリー(Media Queries)を使う方法
②サーバーサイド側でユーザーエージェントを使って分岐する方法
③htaccessを使って分岐する方法

の3つの方法になります。

とりあえず一覧表を作ってみた。

Media Queries ユーザーエージェント(サーバーサイド) htaccess
分岐点の柔軟性
自分の指定したwidthにいくつでもbreak-pointを設定できる

ブラウザ・OS単位で分岐できる。Media Queriesより詳細にはできない

基本はユーザーエージェントを利用するため、ブラウザ・OS単位で分岐できる
範囲 CSS すべてのファイルに適応可能(サーバーサイドで処理した場合) フォルダベース(すべてのファイルに適応)
読み込むファイル CSSの重複が生じがち ファイルの重複を極力さけることができる 同じコンテンツを持ったHTMLをウェブ上に複数認識させてしまうためSEO上よろしくない
感想・結論 静的サイト、小規模サイトならこれでいいかも ファイルの重複をさける、JSの管理も行えるため、ウェブサービスのように中大規模サイトではこのやり方がベターだと思う ユーザーエージェントを使ったやり方と同等のことができるが同様のHTMLファイルを複数管理しないといけないためウェブサービス構築には向いてないかも。そしてSEO上よくないので極力使いたくない方法かも
ひとつひとつみていく。

①Media Queries

Media Queriesは自分の好きなように横幅を設定し分岐することができる。しかもいくつもその分岐点を設定することができるため非常に便利です(もちろんその分管理の手間は増えます)。ただ、分岐の範囲がCSSの中だけの話なので同時にJSのレスポンシブ化などを行ないたいときには向いていません。最後に読み込むファイルが重複してしまう点が一番のデメリットだということ。importを使って読み込むファイルを指定するのですが、スマホ用だろうがタブレット用だろうがPC用だろうが、事前にすべて読み込んだ上で、使うCSSを選ぶ、という処理になりますので、PCで閲覧していてもスマホCSSを読み込む必要が出てきます。大規模なウェブサービスなどを運用していると無駄な処理をしていることになるのであまり無視できることではありません。

②サーバーサイドで行なうユーザーエージェントでの処理

分岐点がブラウザ・OSごとでの指定になり、Media Queriesでの分岐の柔軟性に比べるとやや劣りますが、特徴的なのはサーバーサイドで分岐軸を設定できる点です。サーバーサイドで分基軸を作ればCSSの分岐も可能ですし、JSのレスポンシブ化にも対応できます。やろうと思えばHTMLだってできるので管理がしやすくなります。また分岐ロジックが出力されるソースコード上に出てこないのでセキュリティ上もMedia Queriesと比べたらいいのかも。MediaQueriesと違って、CSSもJSも無駄なファイルを読み込むことがなくなるため、無駄な処理をせずに済む点が良いですね。大規模サイトや複数のJSをスマホ対応したいサイトを作る場合はこの方法がベストかも。

③htaccessを使って分岐する方法

使っているのはユーザーエージェントなので②と同じやんけ!ってなるかもしれません。ただこの方法ではフォルダ単位で読み込むファイルを変更する、という処理になるので同じコンテンツを持ったHTML(スマホ用、PC用のHTMLファイル)、それぞれのデバイスに対応したCSSファイルを作らなければなりません。なので管理コストが高く、かつ同じコンテンツを持ったHTMLを複数ウェブに認識させてしまうのであまりよろしくありません。スマホ用HTMLをnoindexに設定するのも一手間ですし、あまり最適なやり方ではないのかなーと思われ。

結論:

個人的には小規模・静的サイトを作るのであればMediaQueriesを使った分岐のほうが早く済み、弊害が小さく済むのでそのやり方がいいかなと思いました。
一方で大規模サイトを作る際は分岐の処理をサーバーサイドに任せて、CSS・JS・HTMLのバランスのとれた分岐をするべきだなと思いました。

ってことで今、大規模サイトでMedia Queries使っちゃっているのでどっかのタイミングでユーザーエージェントを使った方法に切り替えないとなぁと思った(汗)