ブログ

レスポンシブウェブデザイン(Responsive Web Design)でWebサイトを制作するときの注意点

フリーランスになってから案件をいくつか請け負っています。最近、レスポンシブウェブデザイン(Responsive Web Design)でWebサイトを制作する機会がありました。バグなどにはまったりしたので記録しておこうと思います。

そもそもレスポンシブウェブデザイン(Responsive Web Design)とは?

レスポンシブウェブデザイン(Responsive Web Design)とは、スクリーンサイズに反応するようにレイアウトが変わるWebデザイン手法です。

ここ1年ほどでスマートフォンがもはやギークのおもちゃを通り越して定着したといっていい状況になりました。しかし、そのスマートフォンは画面サイズがバラバラで、しかも機種(デバイス)が年に40〜50機種ずつ発売される状況になってきます。しかも、スクリーンサイズは全部バラバラです。さらに縦向き・横向きにも対応なければいけません。

機種(デバイス)の数が年40〜50機種ずつ増え、しかもスクリーンサイズがバラバラ、そのような状況で振り分けをやるのはもはや暇かよほどお金のある会社くらいなものでしょう。そこででてきたのがResponsive Web DesignというWebデザイン手法です。

CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを切り替えることで、モバイル用・タブレット用・PC用・スマートテレビ用などのサイトを1ソースで構築することができます。

印刷について

今回の案件では、CSS3のMedia Queriesに非対応のIE6〜8(用件定義ではIE7/8)に対応するためにrespond.jsを使用しました。

しかし、制作時点のバージョンではMedia Queriesでの印刷対応にバグがあり、CSSを1枚にまとめると印刷用のCSSがうまく適用されない状態になりました。仕方がないので印刷用のスタイルシートを別CSSに記載することで解決しました。

IE8のmax-widthバグ

レスポンシブウェブデザイン(Responsive Web Design)でのWeb制作では、画面サイズに応じて画像サイズを変更することが基本となります。
そのとき、CSSには<img>要素に「max-width:100%」を指定します。

しかし、IE8では<img>要素にmax-widthを指定するとうまく表示されないときがあります。
今回の案件ではlightboxなどを使用するときに発生しました。

対策として、lightboxのcssに「max-width:none !important;」を指定しておくことで解決しました。

属性セレクタ

今回の案件ではIE6が非対応だったために属性セレクタを使用しようとしましたが、respond.jsを使用しているIE7/IE8では属性セレクタがうまく適用されないときがありました。

別案件ですが、JavaScriptを使用すると属性セレクタを使用した部分が崩れてしまうものもありました。
属性セレクタはできるだけ使わないで制作するといいと思います。

スライドショー系のプラグインについて

いままでSlidesというスライドショー用のプラグインを使用していました。

今回の案件で使用しようと思いましたが、画面サイズに応じて変更しようとするとかなり難しいです。スタイルを絶対配置にして使用しているとまず使えないと思います。

フェードアウト系以外のエフェクトを使用したかったのですが、画面サイズに応じて変更しようとすると配置がうまくいかないため結局断念しました。
当面はフェードアウトエフェクトで使用するのが無難だと思います。

Blueberryという「Responsive Web Design対応」をうたっているプラグインを見つけたので何かの機会に使用してみようと思います。

JavaScriptもモバイルファーストで

jquery.browser.jsというブラウザ判別のJavaScriptがあります。スタイル適用のためiPhone(iOS)・Andridに対して使用しようとしましたが、うまく適用できないときがありました。

そこで、iOS・Andriodにスタイルを適用してみました。そのあとPCブラウザにjquery.browser.jsで判別をした後にPC小用のスタイルを適用する形にしたらけっこういい感じでスタイルも適用されました。

よく考えたら、スマートフォン用のブラウザの方がPC用のブラウザよりスペックが劣るのでJavaScriptでブラウザ判別するときにはPC用のブラウザを判別してスタイル適用した方がパフォーマンスがいいよね、と思いました。

まとめ

まだまだスマートフォン案件の政策手法は確立されたと言えません。これからも新しい制作手法が出てくることでしょう。

Responsive Web Designで制作してほしいという案件はまだまだ少なく、これからいろいろなトラブルがでてくるかもしれませんが、この記事がResponsive Web Designで制作する人の助けになれば幸いです。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。