こんにちは、ECプロデュース部の岡本です。
官公庁のWEBサイトも次々とレスポンシブWebデザインを採用し、今まで以上にマルチデバイス対応の重要性が上がっているのだなとひしひしと感じております。
しかしこちらのスライドのように、「レスポンシブWebデザインにすれば何でも上手く行く」という考え方はとても危険です。
そこで今回はレスポンシブWebデザイン化する際に、「失敗しやすい2つのポイント」を紹介します。
１，画像内に文字を入れる
楽天のショップなどを見ていると「文字が入った画像」を非常に多く見かけます。
ちょっとした専用ソフトがあれば誰でも簡単にデザイン性の高い文字を追加できるので、この「文字入り画像」は非常に便利です。
しかしレスポンシブWebデザインにする場合、この「文字」が「思わぬ問題」を生み出します。
それは「スマートフォンで文字が潰れてしまう」という問題です。
画像サイズにあわせて文字も縮小されるため、小さい画面から見た時に何が書かれているのかが全く読み取れないということがよくあります。
そのためレスポンシブWEBデザイン化する際には、「大きな文字のみ画像に入れること」や「文字をhtml/css化してスマートフォンでは別のデザインに変更させる」といった手法をとることをおすすめします。
２，ブレークポイントを細かく設定しすぎる
デバイスの横幅毎にスタイルシートを設定できるメディアクエリ（@media）は非常に便利です。
やろうと思えば1px毎に細かくレイアウトが変化する、まるでFLASHでも使っているかのようなデザインを実装することも（理論上）可能です。
ただし、あまりにも細かく設定すると「オープン後」非常に困ったことが発生します。
コンテンツの追加やちょっとしたレイアウトの変更を実施しようとした時、設定した全てのメディアクエリで問題なく表示されているかを確認しなければならなくなります。
そのためサイト更新の手間を減らす為に導入したはずのレスポンシブWebデザインが、却って作業量を増やしてしまう事態に陥るのです。
ではメディアクエリはどれくらいの数に抑えるべきなのでしょうか？
以前紹介したモバイルファースト型フレームワークの「Responsive Grid System」では、メディアクエリの数はたったの１つでした。
参考:今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク
しかしIE8などのレトロブラウザ対応やサイドバーの表示切り替えを行うなど、サイトのボリュームが大きいサイトでは流石に２デザインで対応させるのには難しいという実情もあります。
ですので基本はTwitterBootstrapが採用しているような「スマホ・タブレット・PC」の３分割スタイルが自由度の高いレイアウトと管理の手間削減を両立させるのではないかと思います。
まとめ
いかがでしたでしょうか。
それぞれのデバイスに完全特化させたWebサイトを作成されたい場合は、レスポンシブWebデザインよりも専用サイトの方が有効です。
ですが更新頻度・サイト情報量が非常に多くなるECサイトやポータルサイトでは「どのデバイスにも対応できる」レスポンシブWebデザインが有効です。
