PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【RWD】レスポンシブWEBデザインの勉強

現在、スマートフォンタブレット対応のホームページが主流なので、レスポンシブWEBデザインを勉強していきます。

レスポンシブWEBデザインの考え方

一つのソースで、複数のデバイス表示を可能にすること。
今までの携帯サイトみたいに、別々にソースを用意するのではなく、マルチデバイスに最初から対応させることで、一つのページの制作だけですみます。

 

解像度の問題

Webの標準では今現在72dpiですが、次世代デバイスではRetinaディスプレイのように高解像度なディスプレイを採用しています。
Retinaディスプレイ等で72dpiの画像をみるとぼやけてしまうので、解像度を上げるかSVG形式の画像を使う必要があります。

 

レスポンシブWEBデザインの種類

  • 可変レイアウトレスポンシブWEBデザイン
    画面幅が狭くなると、各レイアウトが画面幅に合わせて可変していくデザインです。
  • 固定レイアウトレスポンシブWEBデザイン
    画面幅が狭くなると、その画面幅に合わせた固定レイアウトが切り替わっていくデザインです。
  • 可変レイアウト+固定レイアウトレスポンシブWEBデザイン
    サイドバーなどは固定で、その他のレイアウトが可変していくデザインです。