この記事を書いた人
レスポンシブwebデザインについてメリット・デメリット
WEB制作
レスポンシブ案件が増えている中で、すべてのサイト制作にレスポンシブが良い言うわけではありません。レスポンシブwebデザインはメリットとデメリットを把握して制作していきたいのでメモがてらまとめてみました。レスポンシブについてシリーズ化していきます。1回目はメリット・デメリットについてです。
まずはレスポンシブのメリットとデメリットを考えよう。
メリット
- htmlがワンソースで済むため更新が簡単!
- デザインが表示端末の大きさによって変えられ、ユーザーが読みやすい
- 古いブラウザの事を考えなくてよく、HTML5やCSS3などの最新技術をふんだんに使うことができる!
- 情報が統一され理想的なサイト設計になる!
- URLが一緒になるので、SEOに有利に影響する？
でもこれって制作側の目線であって、ユーザーからしたらレスポンシブだろうが、スマホ専用サイトだろうが、使いやすければどっちでもいいですよ。ユーザーは『このサイトはレスポンシブだ！』とか『スマホサイトとPcサイトのUrlが違う』とか『ユーザーエージェントでスマホサイトとPcサイトを切り替えている！』とか、見ないんですよね。
あと勘違いしている人もいますが、GoogleはレスポンシブWebデザインを推奨しているからといって、レスポンシブWebデザインを採用したサイトをGoogleが優遇して上位表示させることはありません。ただし、スマートフォンの検索結果を調整するためにありがちな構成ミスをランキング指標として使い始めていると言っており、Googleはスマートフォン閲覧に最適化（モバイルフレンドリー）されたWebサイトを優遇するといっていますが、今後変わってくる可能性もありますけど。
簡単にまとめるとURLが一緒ならOKって解釈しています。
だから別にレスポンシブwebデザインじゃなくても大丈夫なんです。
デメリット
- CSSのデザインが複雑で記述テクニックが必要になる
- ある状態では美しいデザインが他では崩れるので、デザイン構成するのが単デバイスより難しい
- モバイルサイトでもフルサイトを読み込むのでデータが重くなる
- レスポンシブ対応のjQueryを使う必要がある。
- すべの要素を読み込むため表示速度が遅くなる。
一番重要なのはレスポンシブ対応のjQueryを使うという点です。
何も調べないでjQueryを使ってしまうと、あとでこれレスポンシブに向いてないじゃんってケースがあります。
ここでスマホサイトの事を考えないで、レスポンシブで使用が難しいjQueryを使ってしまうと後で困るのは自分ならまだしも、フロントエンジニア・バックエンドエンジニアに、比重がいってしまうので注意が必要です。
レスポンシブの際はスマホサイトの事を考えデザインする
モバイルファーストという言葉もありますが、私はレスポンシブ案件でもPCサイトからデザインを進めます。理由はクライアントはまずPCサイトを見たいというケースがほとんどだからです。なのでPCサイト制作時は当たり前ですがスマホサイトの事を考えてデザインします。
またPCサイトの情報量が多いと必然的にスマホサイトが縦長になってしまい、離脱率があがってしまうケースもあので、しっかりとした設計が必要になります。
まとめ
いかがでしたでしょうか？
まとめるとレスポンシブのメリットは、1つのHTMLで更新が楽。
レスポンシブのデメリットは、サイトが重くなり、デザインの際に使うPCサイトのみサイトよりしっかり構成動きを考えて制作しなければ後で大変。
レスポンシブwebデザインは大変理想的なやり方ですがケースバイケースで考えてきましょう。