Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

レスポンシブWEBデザイン製作に役立つ厳選まとめ

responsive-design

レスポンシブ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サイトをスマートフォンに対応させるときの注意書き

webdesign recipes

基本的な用語の解説はもちろん、CSS3のMedia Queries(メディアクエリ)を使ったレスポンシブWEBデザインを構築する具体的な作業手順がわかります。

スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

coliss

レスポンシブWEBデザインの骨組みの製作方法を、デモページを利用して、しっかりと学ぶことができます。

目次へ戻る

便利ツールと小技集

The Responsinator

The Responsinator

10以上のデバイスによる指定WEBサイトの表示を確認することができます。レスポンシブWEBデザイン製作のデバッグに活用しましょう。

便利ツールと小技集(私がお世話になったもの等)

目次へ戻る

無料テンプレートと参考サイト

すぐに使いたい!レスポンシブWebデザイン対応のHTMLテンプレート10選

FireShot Screen Capture #095 - 'レスポンシブWebデザイン対応の無料HTMLテンプレート10選 I TechAcademyマガジン' - techacademy_jp_magazine_1487

無料ダウンロード可能なレスポンシブWEBデザインに対応したHTMLテンプレート素材がまとめられています。お好みでカスタマイズして利用してみましょう。

また、下記の参考サイトでは、国内の美しいレスポンシブWEBデザインのサイトが多数チェックできますので、サイト製作の参考になりますよ。

参考サイト

目次へ戻る