HOMEモバイルSEO > レスポンシブWebデザインとは~サイトの作り方・テンプレートとメリット・デメリットまとめ

レスポンシブWebデザインとは~サイトの作り方・テンプレートとメリット・デメリットまとめ

2016/10/19モバイルSEO[最終更新日]:2017/03/06
このエントリーをはてなブックマークに追加

レスポンシブWebデザイン(レスポンシブウェブデザイン)にし、モバイルフレンドリーにしながら、サイトを最適化することが大切です。

今回は、レスポンシブwebデザインの作り方、レスポンシブwebデザインのテンプレート、レスポンシブwebデザインのメリット・デメリット中心に解説したいと思います。

レスポンシブwebデザインとは~作り方・テンプレートとメリット・デメリットまとめ

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

レスポンシブwebデザインとは

レスポンシブwebデザインとは、PCやモバイル・タブレットなど、あらゆるデバイスに応じたwebデザインでサイト表示する手法のことです。

レスポンシブwebデザインは、Google公式のモバイルガイドに掲載されてる推奨のSEO対策です。

レスポンシブwebデザインギャラリー参考サイトまとめ

レスポンシブwebデザインを6個厳選し、、以下ギャラリー参考サイトと独自評価・特徴をまとめました。

1. Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
2. レスポンシブwebデザイン|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
3. レスポンシブwebデザイン|デザインや構造の参考になるWebサイトのリンク集|Tau Magazine
4. レスポンシブWEBデザイン対応のWEBデザイン参考サイト一覧 | WEBデザインギャラリー
5. レスポンシブデザインサイト WEBデザインのまとめ・リンク集 – イケサイ
6. Web Design Clip [S] | スマートフォン・レスポンシブWebデザインクリップ

1. Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

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

2. レスポンシブwebデザイン|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
レスポンシブwebデザイン|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

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

3. レスポンシブwebデザイン|デザインや構造の参考になるWebサイトのリンク集|Tau Magazine
レスポンシブwebデザイン|デザインや構造の参考になるWebサイトのリンク集|Tau Magazine

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

4. レスポンシブWEBデザイン対応のWEBデザイン参考サイト一覧 | WEBデザインギャラリー
レスポンシブWEBデザイン対応のWEBデザイン参考サイト一覧 | WEBデザインギャラリー

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

5. レスポンシブデザインサイト WEBデザインのまとめ・リンク集 – イケサイ
レスポンシブデザインサイト WEBデザインのまとめ・リンク集 - イケサイ

レスポンシブデザインサイト WEBデザインのまとめ・リンク集 – イケサイ
評価 ★★☆☆☆
レスポンシブデザインのイケてるサイトまとめです。
専門サイトではなく、左カラム下部、ピックアップメニューの1つとしてレスポンシブwebデザインがまとめられてます。サイト登録数は42です。

6. Web Design Clip [S] | スマートフォン・レスポンシブWebデザインクリップ
Web Design Clip [S] | スマートフォン・レスポンシブWebデザインクリップ

Web Design Clip [S] | スマートフォン・レスポンシブWebデザインクリップ
評価 ★★★★★
Webデザイン制作で参考になるスマートフォン・レスポンシブWebデザインのクリップ・リンク集です。
キーワード検索、カテゴリ、タグ、メインカラー、サブカラーから、レスポンシブWebデザインが絞れます。サイト登録数は444です。
見やすく、操作性がスムーズで、とても使いやすい印象を受けました。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

レスポンシブwebデザインの作り方

レスポンシブwebデザインの作り方は、以下のような手順になります。
※参考:初心者も分かる!レスポンシブ・デザインの作り方

①meta viewport タグを入れる
HTMLソースのheadタグ内に、meta要素のname属性値の一つである「viewport(ビューポート)」を入れます。

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
</head>

②レスポンシブwebデザイン用のCSSを記述する(メディアクエリを使用する)
「通常(PC向け)のCSS」「レスポンシブwebデザイン(スマホ向け)のCSS」「レスポンシブwebデザイン(タブレット向け)のCSS」の3つを記述する。

通常(PC向け)のCSS
#menu-bg {
background-color: #00FFFF; /*青色*/
}
レスポンシブwebデザイン(スマホ向け)のCSS
@media screen and (max-width: 479px) { /*ウィンドウ幅が0~479pxの場合にCSSを適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/
}
レスポンシブwebデザイン(タブレット向け)のCSS
@media screen and (max-width: 767px) { /*ウィンドウ幅が0~767pxの場合にCSSを適用*/
#menu-bg {
background-color: #FF0000; /*赤色*/
}
}

上記のよう、必要なレスポンシブwebデザインのCSSだけ記述し、実際にスマホやタブレットで確認しながら、デザインを整えていきましょう。

また、スマホ向け「@media screen and (max-width: 479px)」やタブレット向け「@media screen and (max-width: 767px)」など、デバイスごとにメディアクエリ幅(max-width)を指定し、それぞれCSSを記述する必要があります。

③良く活用するCSSテクニックを使う
CSSテクニックを活用し、①②で紹介した基本的な記述と合わせて、レスポンシブwebデザインに対応しましょう。

●コンテンツを非表示にする
@media screen and (max-width: 479px) { /*ウィンドウ幅が0~479pxの場合にCSSを適用*/
#menu-bg {
display:none; /*非表示*/
}
}

レスポンシブwebデザイン用にうまく対応できないコンテンツで、さほど重要でないコンテンツであれば、「display:none」で非表示にする方法があります。

●floatを解除する
@media screen and (max-width: 479px) { /*ウィンドウ幅が0~479pxの場合にCSSを適用*/
#contents #l_contents {
width: inherit;
float: none;
}

#contents #r_contents {
width: inherit;
float: none;
}
}

上記のよう、カラムを分けてるコンテンツは「float:none;」をレスポンシブwebデザイン用のCSSで記述し、float解除します。
また、「overflow: hidden;」でfloat解除することも可能です。

●画像やコンテンツの横幅がはみ出ないようにする
img {
max-width: 100% ;
height: auto;
}

#menu {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}

上記のよう、「max-width」「width:100%」を活用し、画像やコンテンツがはみ出ないようレスポンシブwebデザインにすることが可能です。

①~③の流れに沿って必要な記述を追加し、スマホやタブレットで確認しながら、レスポンシブwebデザインを完成させましょう。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

レスポンシブwebデザインのテンプレート(html5)おすすめ

レスポンシブwebデザインのテンプレートは、以下のようなサイトで提供されてます。

レスポンシブ無料ホームページテンプレート(全件:555点)|Template Party
WEB制作業者様も無料で使えるレスポンシブホームページテンプレートを無料配布中。商用利用無料

無料レスポンシブウェブデザインHTMLテンプレート
無料レスポンシブウェブデザインHTMLテンプレート – 商用利用可能なWordPressテーマ・ホームページテンプレート | スマートフォン(iPhone、Android)・タブレット端末(iPadなど)対応のレスポンシブウェブデザインWordPressテーマ・HTMLテンプレートが無料でダウンロードできます。

レスポンシブ ホームページテンプレート ホームページ – テンプレート モンスター
PC・タッチパッド・スマートフォンなどの画面の大きさに合わせて、最適な表示を出力するレスポンシブWebデザインテンプレート有料サイトです。

無料でレスポンシブのHTML5ホームページテンプレート
商用利用可能なレスポンシブWebデザイン対応(スマートフォン対応)のHTML5デザインテンプレートの無料配布サイトです。

レスポンシブ Web デザインの無料テンプレート – カフィネット
HTML5とCSS3で制作した、レスポンシブ Web デザインの無料テンプレートです。商用サイトでもご利用頂けますし、カスタマイズしてご利用頂くこともできます。

レスポンシブwebデザインのメリット・デメリット

レスポンシブwebデザインのメリット・デメリットは、以下のようなものがあります。
※参考:レスポンシブ ウェブ デザイン – ウェブマスター向けモバイルガイド「レスポンシブ デザインにする理由」

メリット

・SEO効果が期待できる
PC、スマホ、タブレットなどのあらゆるデバイスから同じURLでアクセスでき(URL正規化され)、サイト(被リンク)評価が統一されるため、レスポンシブwebデザインによるSEO効果が期待できる。

共有されるURLが一つなので、リンク効果が高まりやすい。

・サイト修正がしやすい
一般的に「レスポンシブwebデザイン」では、レスポンシブwebデザイン用のCSS記述のみで済み、「動的な配信」や「別個のURL」のよう複数ファイル修正するような手間が省けるため、サイト修正がしやすい。

1ページだけの修正で済み、Webサイト運用・管理の手間が省ける。

・リソースが節約できる
「動的な配信」「別々のURL」より、クロールするために必要なリソースを節約できる。

・リダイレクトの手間が省ける
・最適なページにリダイレクトする必要がないため、「動的な配信」「別々のURL」で運用するより、読み込み時間を短縮できる。

デメリット

・フィーチャーフォン(ガラケー)に対応してない
フィーチャーフォンは、レスポンシブwebデザインに対応してないため、「動的な配信」か「別個のURL」を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要がある。
※参考:フィーチャーフォン – ウェブマスター向けモバイルガイド

・コストがかかる
レスポンシブwebデザイン用のCSS等、必要に応じて新たなファイルや記述が必要となり、構築時間や費用がかかる。

・サイトの読み込み速度(表示速度)が遅くなる
PC用のHTMLコードやCSS、画像など大きいファイルを読み込み、環境によってスマホ・タブレット等でサイトの読み込み速度(表示速度)が遅くなる場合がある。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

レスポンシブwebデザインのCSSフレームワークおすすめ

レスポンシブwebデザインのCSSフレームワークを提供してるサイトには、以下のようなものがあります。
※参考:Web制作を効率化しよう!CSSフレームワーク5選 | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 (東京・千代田区)

Bootstrap
ブートストラップは、ウェブ上で応答して、モバイル最初のプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSのフレームワークです。
Twitter社が提供するレスポンシブwebデザイン用のCSSフレームワークで、検索すれば専用解説サイトも豊富に出てきます。

Foundation
世界で最も先進的な応答性のフロントエンドフレームワーク。
有名かつシンプルなレスポンシブwebデザイン用のCSSフレームワークで、検索すれば専用解説サイトも豊富に出てきます。

Pure
すべてのWebプロジェクトで使用できる小型の、応答性のCSSモジュールのセット。
Yahoo!社が提供するシンプルで軽量なレスポンシブwebデザイン用のCSSフレームワークです。

Material UI
Googleのマテリアルデザインを実装リアクトコンポーネントのセット。
Google社が提供するAndroidでも使われているマテリアルデザインのガイドラインを元に作られたレスポンシブwebデザイン用のCSSフレームワークです。

レスポンシブwebデザインのWordpressテーマおすすめ

レスポンシブwebデザインのWordpressテーマには以下のようなものがあります。
※参考:レスポンシブWebデザイン対応のWordPress無料テーマ10選【初心者向け】 | TechAcademyマガジン

BizVektor
htmlやcssの知識が無くても管理画面からの設定だけで簡単に高品質な企業や店舗などのビジネス向けホームページが作れるように開発したスマートフォン対応(レスポンシブwebデザイン対応)のWordPressテーマです。

Catch Box
Wordpress公式サイトが提供する、キャッチボックス形のシンプル、軽量、ボックス、およびブロガーや専門家のための適応可能なレスポンシブwebデザイン用ワードプレスのテーマです。
様々なデバイスで表示するにはHTML5、CSS3やレスポンシブWebデザインに基づいています。

PR News
Wordpress公式サイトが提供する、PRニュースは、ニュースや雑誌、ブログ、ウェブサイトおよび多くのための完璧な強力な応答多目的レスポンシブwebデザイン用ワードプレスのテーマです。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

レスポンシブwebデザインに対応するためのWordpressプラグインおすすめ

レスポンシブwebデザインに対応するために、以下のようなWordpressプラグインがあります。

WPtouch
WPtouchは自動的にあなたのWordPressのウェブサイトへのモバイル訪問者のためのシンプルかつエレガントなモバイルテーマを追加するWordPress用携帯対応(レスポンシブwebデザイン対応)プラグインです。

WordPress Mobile Pack
WordPressのモバイルパック2.0+は完全にゼロから再構築し、応答性とそのブログの「appify」コンテンツを越えて行くためにブロガー、出版社や他のコンテンツ作成者に力を与えるために再利用されています。

レスポンシブwebデザインのおすすめ本・書籍

レスポンシブwebデザインのおすすめ本・書籍として「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL) 」の口コミ評価の高さが目立ちました。

これ以外にも、レスポンシブwebデザインに関連する本・書籍がとても豊富です。

実際に見比べたり、口コミ等参考にし、自分に合った本・書籍を選びながら、レスポンシブwebデザインを学ぶことをおすすめします。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

レスポンシブwebデザインとモバイルファーストインデックスについて

先日(2016年10月17日)Google公式発表された、モバイルファーストインデックスに対応するために、レスポンシブwebデザインに対応することが大切です。

モバイルフレンドリーにし、スマホ中心としたあらゆるデバイスでユーザーが快適に閲覧できるwebサイトを作り上げながら、SEO対策を進めていくことが重要です。

まとめ

レスポンシブwebデザインにし、あらゆるデバイスで対応できるサイトを作りましょう。

モバイル(スマホ)、PC、タブレット中心にユーザーが快適に閲覧できるサイトにし、SEO対策しながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly