レスポンシブデザインの参考になるサイトなどまとめ

レスポンシブデザインに関する情報はすでに数多く公開されています。
それはデザインそのものの参考となるサイトや、簡単に実装することができるテンプレやプラグインなど様々です。

レスポンシブデザインそのものに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デザイン制作で参考になるスマートフォン・レスポンシブデザインのクリップ・リンク集です。
キーワード検索、カテゴリ、タグ、メインカラー、サブカラーから、レスポンシブデザインが絞れます。サイト登録数は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検索を上回ったスマホ検索からの集客を見逃さないためにも、しっかりと対応しておきましょう。

関連記事SEO対策とは？上位表示するためのSEO対策の方法について