レスポンシブデザインの参考になるサイトなどまとめ
レスポンシブデザインに関する情報はすでに数多く公開されています。
それはデザインそのものの参考となるサイトや、簡単に実装することができるテンプレやプラグインなど様々です。
レスポンシブデザインそのものにSEO効果は期待できませんが、スマホ対応することで今後、集客してくるユーザーに対してコンテンツをしっかりと閲覧してもらうためにも必要な対策のひとつと言えます。
ということで今回は、レスポンシブデザインについて参考となるおすすめのサイトやテンプレなどをご紹介していきたいと思います。
また、レスポンシブデザインについてのメリットやデメリットについては、ぜひこちらの記事もご覧ください。
参考記事レスポンシブデザインとは?メリット・デメリットについてまとめ

レスポンシブデザイン参考サイト
レスポンシブデザインを導入する際に参考となるサイトをいくつかご紹介したいと思います。
Responsive Web Design JP | 日本国内の秀逸なレスポンシブデザインを集めたギャラリーサイト

評価 ★★★★☆
日本国内の秀逸なレスポンシブデザインを集めたギャラリーサイトです。
カテゴリ、カラー、テクニック、タイプからレスポンシブデザイン絞れます。サイト登録数が1600以上あり、とても豊富です。
レスポンシブデザインの画像がデフォルトで表示され、イメージつきやすいのが特徴的です。
参考:Responsive Web Design JP
レスポンシブデザイン|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

評価 ★★★☆☆
縦に長いレイアウトでハイクオリティwebデザインを集めたリンク集サイトのレスポンシブデザインカテゴリです。
レスポンシブデザインに特化してサイトタイプが絞れません。サイト登録数は672です。
参考:レスポンシブデザイン|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
レスポンシブデザイン|デザインや構造の参考になるWebサイトのリンク集|Tau Magazine

評価 ★★☆☆☆
デザインの参考になりそうなレスポンシブデザインをまとめたページです。
専門サイトではなく、タグの1つとしてレスポンシブデザインがまとめられてます。サイト登録数は300以上です。
レスポンシブデザインまとめページへの動線リンクが少ないため、検索エンジン以外から見つけるのが大変そうです。
参考:レスポンシブデザイン|デザインや構造の参考になるWebサイトのリンク集|Tau Magazine
レスポンシブWEBデザイン対応のWEBデザイン参考サイト一覧 | WEBデザインギャラリー

評価 ★★★☆☆
対象デバイスが「 レスポンシブWEBデザイン 」のWEBデザイン一覧です。
専門サイトではなく、対応デバイスの1つとしてレスポンシブデザインがまとめられてます。サイト登録数は120です。
参考:レスポンシブWEBデザイン対応のWEBデザイン参考サイト一覧 | WEBデザインギャラリー
レスポンシブデザインサイト WEBデザインのまとめ・リンク集 – イケサイ

評価 ★★☆☆☆
レスポンシブデザインのイケてるサイトまとめです。
専門サイトではなく、左カラム下部、ピックアップメニューの1つとしてレスポンシブデザインがまとめられてます。サイト登録数は42です。
参考:レスポンシブデザインサイト WEBデザインのまとめ・リンク集 – イケサイ
Web Design Clip [S] | スマートフォン・レスポンシブデザインクリップ
![Web Design Clip [S] | スマートフォン・レスポンシブデザインクリップ](/wordpress/wp-content/uploads/2016/10/pho06-3.png)
評価 ★★★★★
Webデザイン制作で参考になるスマートフォン・レスポンシブデザインのクリップ・リンク集です。
キーワード検索、カテゴリ、タグ、メインカラー、サブカラーから、レスポンシブデザインが絞れます。サイト登録数は444です。
見やすく、操作性がスムーズで、とても使いやすい印象を受けました。
参考:Web Design Clip [S] | スマートフォン・レスポンシブデザインクリップ
レスポンシブデザインに対応するためのWordpressプラグインおすすめ
簡単にレスポンシブデザインに対応するなら、以下のようなWordpressプラグインが便利です。
WPtouch
WPtouchは自動的にあなたのWordPressのウェブサイトへのモバイル訪問者のためのシンプルかつエレガントなモバイルテーマを追加するWordPress用携帯対応(レスポンシブデザイン対応)プラグインです。
参考:WPtouch
WordPress Mobile Pack
WordPressのモバイルパック2.0+は完全にゼロから再構築し、応答性とそのブログの「appify」コンテンツを越えて行くためにブロガー、出版社や他のコンテンツ作成者に力を与えるために再利用されています。
参考:WordPress Mobile Pack
レスポンシブデザインのcssフレームワークおすすめ
また、レスポンシブデザインに対応したcssフレームワークを提供してるサイトには、以下のようなものがあります。
※参考:Web制作を効率化しよう!cssフレームワーク5選 | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 (東京・千代田区)
Bootstrap
ブートストラップは、ウェブ上で応答して、モバイル最初のプロジェクトを開発するための最も人気のあるHTML、css、およびJSのフレームワークです。
Twitter社が提供するレスポンシブデザイン用のcssフレームワークで、検索すれば専用解説サイトも豊富に出てきます。
参考:Bootstrap
Foundation
世界で最も先進的な応答性のフロントエンドフレームワーク。
有名かつシンプルなレスポンシブデザイン用のcssフレームワークで、検索すれば専用解説サイトも豊富に出てきます。
参考:Foundation
Pure
すべてのWebプロジェクトで使用できる小型の、応答性のcssモジュールのセット。
Yahoo!社が提供するシンプルで軽量なレスポンシブデザイン用のcssフレームワークです。
参考:Pure
Material UI
Googleのマテリアルデザインを実装リアクトコンポーネントのセット。
Google社が提供するAndroidでも使われているマテリアルデザインのガイドラインを元に作られたレスポンシブデザイン用のcssフレームワークです。
参考:Material UI
レスポンシブデザインのWordpressテーマおすすめ
レスポンシブデザイン対応のWordpressテーマには以下のようなものがあります。
※参考:レスポンシブデザイン対応のWordPress無料テーマ10選【初心者向け】 | TechAcademyマガジン
BizVektor
htmlやcssの知識が無くても管理画面からの設定だけで簡単に高品質な企業や店舗などのビジネス向けホームページが作れるように開発したスマートフォン対応(レスポンシブデザイン対応)のWordPressテーマです。
参考:BizVektor
Catch Box
WordPress公式サイトが提供する、キャッチボックス形のシンプル、軽量、ボックス、およびブロガーや専門家のための適応可能なレスポンシブデザイン用ワードプレスのテーマです。
様々なデバイスで表示するにはHTML5、css3やレスポンシブデザインに基づいています。
参考:Catch Box
PR News
WordPress公式サイトが提供する、PRニュースは、ニュースや雑誌、ブログ、ウェブサイトおよび多くのための完璧な強力な応答多目的レスポンシブデザイン用ワードプレスのテーマです。
参考:PR News
まとめ
ということで、今回はレスポンシブデザインについて参考となるサイトや、導入に便利なテンプレやプラグインなどをご紹介させていただきました。
スマホ対応するためにはレスポンシブデザイン以外にも方法はありますが、ひとつのHTMLで管理することが可能となる大きなメリットがあるため、ぜひ導入したい方法と言えます。
その導入についても、今回ご紹介した通り色々な方法があります。ぜひ参考にしてみてください。
また、スマホ対応する際は必ずバックアップを保存して作業するようにしてください。
PC検索を上回ったスマホ検索からの集客を見逃さないためにも、しっかりと対応しておきましょう。