レスポンシブWEBデザイン製作に役立つ厳選まとめ
レスポンシブWEBデザインとは、PC（デスクトップ・ノート）、タブレット、スマートフォンなど、複数のデバイスに最適化したWebサイトを、単一のHTMLコードで実装するGoogleがWEBサイト製作に推奨している制作手法です。
1つのHTMLファイルを、CSS3（Media Queries）で制御し、ページのレイアウト・デザインを調整することで、マルチデバイスに対応したWebサイトを実装することができます。
今回は、レスポンシブWEBデザイン利用におけるメリット・デメリット。初心者の方でも、レスポンシブWEBデザインを実装できるようになる非常に優れた学習サイト、便利ツール、無料テンプレートを紹介していきます。
メリット・デメリット
Googleが推奨しているからといって、レスポンシブWEBデザインが全てのWEBサイトに適しているわけではありません。どんなメリットとデメリットがあるのかをしっかりと理解して、WEBサイト運営・製作に役立てましょう。
メリット
- 1つののHTMLファイルだから管理が楽
- 1つのファイルだから更新が楽／コストが抑えられる
- URL統一／リダイレクト不要／SEOに有効的
- デバイスの多様化にも対応が容易
- すべてのデバイスで統一性のあるコンテンツ・デザイン
デメリット
- 大容量の画像データが読み込まれる／サイトが重い
- デザインの自由度が低い／デバイス毎に構成を変えにくい
初心者にお薦めの学習サイト
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
基本的な用語の解説はもちろん、CSS3のMedia Queries（メディアクエリ）を使ったレスポンシブWEBデザインを構築する具体的な作業手順がわかります。
スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
レスポンシブWEBデザインの骨組みの製作方法を、デモページを利用して、しっかりと学ぶことができます。
便利ツールと小技集
The Responsinator
10以上のデバイスによる指定WEBサイトの表示を確認することができます。レスポンシブWEBデザイン製作のデバッグに活用しましょう。
便利ツールと小技集（私がお世話になったもの等）
無料テンプレートと参考サイト
すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート10選
無料ダウンロード可能なレスポンシブWEBデザインに対応したHTMLテンプレート素材がまとめられています。お好みでカスタマイズして利用してみましょう。
また、下記の参考サイトでは、国内の美しいレスポンシブWEBデザインのサイトが多数チェックできますので、サイト製作の参考になりますよ。
参考サイト
