レスポンシブwebデザインで制作する時のポイント

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナー […]

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。
とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。
(一部の図はセミナーの資料を元に作成してます。)

始めに:スマートフォンサイト制作の選択肢

スマートフォンサイトを制作するには幾つかの方法があります。

  • アプリ
  • 独自系
    • スクラッチ(0からスマートフォンサイト用に構築)
    • jQuely mobileを使用
  • 流用系
    • 現在のデザインをほぼ流用、調整のみ
    • レスポンシブ・デザイン

どの方法にもメリットデメリットはあり、どれが最適かは
サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。

今回のエントリーではレスポンシブ・デザインのみにふれます。

レスポンシブwebデザインとは

PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、
ディスプレイの幅に合わせてデザインを最適化する方法。
CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。

responsive web design

Web制作者は知っておきたいwebサイトのレイアウト7選 | Design Spice

どのサイズを境にレイアウトを切り替えるか

レスポンシブwebデザインではMediaQueryでウインドウサイズに応じたcssを適応させ
レイアウトを変更するのですが、
何pxのウインドウサイズを境にデザインを切り替えるのかを考えなければなりません。

現在の主なデバイスのディスプレイサイズは以下の通りです。

デバイスサイズ

細かく分別するならテレビ、PC、タブレット、スマートフォン(ランドスケープ表示)、スマートフォン(ポートレート表示)などに分別できます。
大きく分別し、480pxを境にPCとスマートフォンのみ切り替えるというケースもあります。

但しこれといった値は定まってなくMedia Queriesで複数のサイトを調べてみたところ、

1500px、1200px、992px、970px、940px、768px、735px、695px、640px、480px、320px…

のようにサイトにより様々な値を使用してます。

androidについては下記サイトが参考になります。
Android端末のスペックをまとめてみています | H2O Blog.

各レイアウト設計

各レイアウトの設計はワイヤーフレームの段階で終わらしておくといいです。
配置や削除するコンテンツなどを決めておきます。

どのような状況・目的でそのデバイスを使用することが想定されるか?
それに応じたコンテンツを最適なレイアウトで見せることを考えながら設計します。

ワイヤーフレーム

リキッドレイアウト(Flexible grid)

基本的にレスポンシブwebデザインはブラウザサイズによって相対的に幅が可変する
リキッドレイアウトで構築します。
要素の単位を%で指定します。

最初に固定レイアウト(px)で作成してから%に変換する方法がやりやすいです。
その際下記の計算式で算出します。

コンテンツ幅/ 全コンテンツ幅 x 100 = %の値

リキッドレイアウト

MediaQueryの書き方と書く場所

MediaQueryは下記の箇所に書く事ができます。
この中で管理しやすいのは@importを使う書き方です。

link要素のmedia属性

<link rel="stylesheet" media="screen and (min-width:480px) and (max-width: 768px)" href="tablet.css" />

ウインドウサイズが480px〜768pxの場合にtablet.cssを読み込む

@import

@import url("tablet.css") screen and (min-width:480px) and (max-width: 768px)

ウインドウサイズが480px〜768pxの場合にtablet.cssを読み込む

@media

@media screen and (min-width:480px) and (max-width: 768px){
	/* style */
}

ウインドウサイズが480px〜768pxの場合にスタイルを適応する

また、IE8以下はMediaQueryに対応してないのですが、下記のjsで対応できます。
css3-mediaqueries-js

viewport設定

viewportはPCにおけるブラウザのウィンドウサイズに該当する概念です。

例えばiPhoneのviewportのデフォルト値は980pxなので、
設定をしないと980pxのウインドウでアクセスしてると捉えられてしまい
スマートフォン用にcssを用意していても適応されません。
なのでレスポンシブwebデザインでスマートフォンにも対応させるのであればviewportの設定は必須です。

viewprotは以下の様に記述します。

<meta name="viewport" content="[プロパティ]=[値](, [プロパティ]=[値])">

それぞれのプロパティの内容は以下の通りです。

プロパティ 内容 デフォルト値 許容範囲
width Viewportの横幅 980px 200~10,000px
height Viewportの縦幅 横幅とアスペクト比から
計算される値
200~10,000px
initial-scale 倍率の初期値 表示範囲から計算される値 minimum-scale~
maximum-scale
minimum-scale 倍率の最小値 0.25 0~10
maximum-scale 倍率の最大値 1.6 0~10
user-scalable 拡大縮小の可否 yes

プロパティは一つでも複数でも記述できますが、
widthやinitial-scaleを併記した時の動作は少し複雑です。
(時間があればいろいろと検証してみようと思います)
参考:Viewport [iPhone生活]

現在のところデバイスサイズのwidth=device-width(デバイスの幅)の指定が一番無難かなと思います。

<meta name="viewport" content="width=device-width">

viewport

余談ですが下記は私が理解するのに時間がかかった部分です。

  • iPhoneのdevice-widthはポートレート表示もランドスケープ表示も320px
  • androidのdeveice-widthは機種によって異なる?(調査中)
  • iPhoneで縦表示から横にすると拡大されて表示される。
    拡大したくない場合はmaximum-scale=1.0指定

Flexible Images

画像もウインドウサイズに合わせて可変するようにします。

img{
	max-width: 100%;
	height: auto;
	width /***/:auto; /*IE8のみ適用*/
}

IE8ではmax-widthで横幅しか縮小されないバグがあります。
対策としてはimgタグのwidth属性を記述しないか、
IE8にはwidth:autoを指定します。

DEMO

また、IE 7以下では縮小された画像が粗く見えるます。
この問題はimgSizer.jsというjsで対処できます。

参考:Fluid Imageのデモ

背景

背景画像はcssのbackground-sizeを使用するとウインドウサイズに合わせて可変できます。

#content{
	background-size:cover;/*背景画像で全体を覆う*/
}

または、

#content{
background-size:100% auto;/*背景画像を横幅いっぱいに表示*/
}

DEMO

画像の最適化

画像はPCでもきれいに表示される大きさの解像度の画像なので
スマートフォンには容量が大きく最適ではありません。
スマートフォン用の容量の小さい画像を用意するのが理想です。

そこでスマートフォンには容量の小さい画像を表示させる
responsiveimgs.jsというスクリプトもあります。
ただしそれぞれの画像につき2つの画像を用意しなければならないというデメリットもあります。
Responsive Images

DEMO

まとめ

いろいろと調べてみた結果、レスポンシブwebデザインで細かい部分まで気を使って制作しようとすると思ってたより考えるポイントは多いです。
逆にデザインの制約も少なく、画像も少ないサイトであればそう難しくないと思います。

やはりワイヤーフレームの段階で設計しておくと楽だと言うのを改めて実感。
既存のサイトをレスポンシブwebデザインに対応させようとするのであれば、
それなりに時間がかかることを想定しておいた方が良さそうです。

余談ですがこのブログもスマートフォン対応にレスポンシブwebデザインにしようと考えてたのですが、意外と手間がかかると気付いて見送り中。

Add Comment

本文

  1. [...] iPhoneに関する、はてなブックマーク新着情報です。 レスポンシブwebデザインで制作する時のポイント | Design Spice [...]

  2. [...] 今日のwebデザイン レスポンシブwebデザインで制作する時のポイント | Design Spice 最近話題のレスポンシブwebデザインのお話。チャレンジしてみたいですね。 [...]

  3. なんてためになる!先日css niteで理解できなくてもったいないな・・・と悔やんでいたのでとても助かりました!

  4. hiro

    ありがとうございます。
    私もまだ細部まで理解してないのでまだ不完全な部分もありますが…。
    それでも得た情報は忘れないうちにまとめようと書いておきました。

  5. take

    マルチデバイス対応(タブレット含む)の説明資料を作るソース集めをしていて、ふらっとここに辿り着きました。

    > androidのdeveice-widthは機種によって異なる?(調査中)

    各機で設定されている[density](画面密度)も関係していて、

     Densityって何 – Lazy Goat
     http://sites.google.com/site/goatprog/android/tips/density

    device-widthとして返す値も、マチマチなようです。

     Androidデバイスのディスプレイサイズ、DPI一覧 update – Hacking My Way ~ itogのhack日記
     http://d.hatena.ne.jp/itog/20111001/1317438659

    「***pxで設定すると、○○では適応されるけど△△ではランドスケープにした時NGになる」というのを、素人に近いクライアントに説明するのに苦心するんですよね…。

  6. hiro

    takeさん
    コメント有り難うございます。
    Densityに書かれてるサイト良いですね!
    解像度について調べてたので参考にさせてもらいます。

    で、device-widthの件ですが、マチマチみたいですね…
    こうなってくるとどこのpxを基準にデザインを切り替えてくかも頭を悩ますところですよね。
    制作者ですら理解に時間かかるのに素人のクライアントなら尚更話し分からないでしょうね。
    苦労しますね(>_<)

  7. [...] CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書きとレスポンシブwebデザインで制作する時のポイントを参考にさせていただきました。 [...]

  8. [...] たサイト」の2つの選択肢しか考慮されていないところです。第3の選択肢として、レスポンシブWebデザインのような1つのサイトで複数でバイスに最適化するといった選択肢はまったく考慮 [...]

  9. [...] レスポンシブwebデザインで制作する時のポイント [...]

  10. [...] レスポンシブwebデザインで制作する時のポイント | Design Spice スマートフォンサイトとPCサイトの振り分けを考える上で、 [...]

  11. [...] レスポンシブwebデザインで制作する時のポイント [...]

  12. [...] レスポンシブwebデザインで制作する時のポイント [...]

  13. [...] ※開発に関して詳しいことは下記記事などをご覧ください。 レスポンシブwebデザインで制作する時のポイント Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

  14. [...] レスポンシブwebデザインで制作する時のポイント Design Spiceさん [...]

  15. [...] レスポンシブwebデザインで制作する時のポイント [...]

  16. [...] 下記のサイトを参考にさせて頂きました。 【レスポンシブwebデザインで制作する時のポイント │ Design Spice】 【必読!5分でわかる流行のレスポンシブWebデザインまとめ その2!! | デザ [...]

  17. [...] レスポンシブwebデザインで制作する時のポイント │ Design Spice [...]

  18. [...] http://design-spice.com/2011/09/22/responsive-web-desig/ 共有:TwitterFacebookGoogleいいね:いいね 読み込み中… [...]

  19. moo

    はじめまして。まったくの初心者なのですが質問します。

    デバイス別に画像サイズを変更させるためのソースとして

    img{
    max-width: 100%;
    height: auto;
    width /***/:auto; /*IE8のみ適用*/
    }

    が記載していましたが、

    width /***/:auto;

    の、*印部分はなんなのでしょうか?

  20. hiro

    >mooさん
    コメントありがとうございます。

    width /***/:auto;

    はIE8のみに対応させるためのCSSハックです。
    IE8はhtmlのimgにheightが指定されてると高さが可変しないことがあるので、そのために指定してます。
    IE8はレスポンシブ未対応や、imgにheightの指定しないのであればこの一行はなくても大丈夫です。

  21. […] 出典design-spice.com […]

PAGE TOP