レスポンシブデザインとは？作り方や採用すべきホームページを紹介　

レスポンシブデザインとは、ホームページを自動で各デバイス（スマホやパソコンなど）に合う適切な画面サイズで表示する方法です。

これまでは「PC用」と「モバイル用」で別々にホームページを構築するのが一般的でしたが、手間やコストがかかることからレスポンシブデザインを採用するホームページが増えてきました。

レスポンシブデザインは専門的知識がない方でも運用しやすいのがメリットです。レスポンシブデザインを取り入れたい方のために、特徴や作り方を詳しく解説します。

レスポンシブデザインを活用することでホームページ運営にどんな効果をもたらすのか、具体的なメリットについて紹介します。

レスポンシブデザインを採用することで、デバイスを選ぶことなく、誰でも快適にホームページを閲覧できます。逐一「スマホ用ホームページ」に移動する手間がなく、スムーズにホームページの内容に集中できます。現代はスマホユーザーが多くを占めているので、サイト閲覧者を増やすという意味でも役立ちます。

ホームページに訪れるユーザーは、視覚的なわかりやすさや直観的な操作性を求める傾向にあります。レスポンシブデザインを採用すれば表示画面サイズを自動で調整が可能。多くのユーザーのニーズに応えられるホームページになります。

レスポンシブデザインはSEO対策の観点や、モバイル検索順位を上げるという点でも優位に働きます。中でもGoogleはレスポンシブデザインを推奨しており、ホームページを判断するために「いかにスマホユーザーに最適なホームページであるか」を重要視しているといいます。ただし、レスポンシブデザインを採用したからといって、検索順位の面で優遇されるわけではありません。

レスポンシブデザインがSEOやモバイル検索順位で役立つ理由は、「1つのURLでコンテンツを共有することができる」ことや、「ページのクロール効率が上がる」ことが挙げられます。ホームページがさまざまなデバイス間で共有しやすくなると、より多くのユーザー訪問が期待できます。

また、ページのクロール効率が上がることでURLのリダイレクトが必要なくなり、ホームページ内のコンテンツがインデックスに登録されることから、SEOで有利に働きます。SEOや検索順位に直接的な効果はありませんが、質の高いコンテンツを目指す上では欠かせないものです。

レスポンシブデザインはURLやHTML・CSSがワンソースになるので、ホームページの運用管理がしやすくなるのもメリットです。レスポンシブデザインを使わないホームページでは、PC用とモバイル用の2つの情報更新作業が必要ですが、レスポンシブデザインを活用すれば1つのホームページ管理で済みます。

作業工程が減り、ホームページ更新にかかる労力も軽減。また、1つのURLアドレスだけを管理することになるので、運用コストも抑えられます。レスポンシブデザインを活用することで、ユーザー目線のホームページを構築できるほか、効率的なSEO対策・運用管理の簡易化が可能です。

レスポンシブデザインがどんなものなのかイメージしにくい方は、「スマホでも美しく使いやすい！Jimdoがレスポンシブを選んだ理由」をご覧ください。

パソコン画面で見た時のホームページと、スマホ画面で確認したものではメニューボタンの位置や各コンテンツの配置が異なります。同じホームページでもデバイスに合わせてコンテンツやメニューボタン・サイドバーが最適な配置になるので、ユーザーにとって見やすく操作しやすいホームページになります。

ホームページのレイアウトについては、レスポンシブデザインのテンプレートを提供している各サービスの詳細をチェックしてみてください。

ここからはレスポンシブデザインのホームページを作る方法について、ポイントごとに紹介します。

まずはHTMLのheadタグ内にあるmetaタグからビューポート（viewport）の設定を行います。ビューポートとは表示領域のことで、スマホ向けに表示設定します。訪問者のデバイスの横幅を取得し、倍率を1.0倍と設定する場合は、以下のコードをheadタグ内に張り付けてください。

▼ビューポートのコード

さらにホームページのズームを許可する場合は、<>内に「，（カンマ）」で以下のコードを挿入します。

▼ズームを許可する場合

▼ズームを許可しない場合

次に「メディアクエリ」を使って表示装飾の部分となるCSSの設定を行います。

CSSは各デバイス用のコードを挿入する必要があるので、以下のソースコードを入れます。デバイス設定サイズは一般的によく使われているサイズ設定になっていますが、必要に応じてサイズを変更してください。

▼PC用

▼タブレット端末用

▼スマホ用

レスポンシブデザインの設定は、他にも細かく設定が可能です。大まかな設定を済ませたら、自分の求める画面サイズに変更になっているか確認してください。

確認方法はページのURLをブラウザに入れると表示されます。

便利なレスポンシブデザインチェックツールを利用する方法もあるので、気になる方はアプリやツールをチェックしてみてください。

レスポンシブデザインを採用すべきホームページは大きく分けて2つあります。運営しているホームページが該当する場合は、さっそくレスポンシブデザイン対応にアップデートしてはいかがですか。

スマホユーザーが多い若年層をターゲットにしたホームページは、レスポンシブデザインを活用すべきです。

レスポンシブデザインを採用せずに各デバイス別コンテンツを作成しても構いませんが、費用や手間・SEOの観点から考えれば、レスポンシブデザインを取り入れることをおすすめします。

若年層に限らず、スマホユーザーをメインに想定したホームページであれば、レスポンシブデザインを採用してみてはいかがですか。「ユーザー目線で利用しやすいホームページ」を意識して、レスポンシブデザインが最適である場合は積極的に取り入れてください。

レスポンシブデザインを採用したホームページは、「モバイルフレンドリー」や「モバイルファーストインデックス」に優位に働き、検索エンジン対策にも役立ちます。

モバイルフレンドリーとは「モバイル端末ユーザーにとって見やすく使いやすいホームページ」であるかを判断する1つの指標。モバイルファーストインデックスは、モバイル端末向けホームページの検索順位です。モバイルファーストインデックスはアルゴリズムと関係しており、検索順位は「モバイル端末向けホームページの中で検索キーワードの上位を狙える」ようになります。

検索エンジンからの流入を増やしたい方は、レスポンシブデザイン対応のスマホ向けホームページを作ってみてください。

レスポンシブデザイン対応テンプレートを提供しているサービスを3つ紹介します。はじめてホームページを構築される方は、ぜひ活用してください。

出典：ジンドゥー（Jimdo）

ジンドゥー（Jimdo）は、ビジネスやネットショップ、ポートフォリオや個人ホームページなど、さまざまな用途のホームページ作成サービスです。

テンプレート数はやや少なめですが、カスタマイズが可能なので、自分の求めるデザインを自在に再現できるでしょう。レイアウトについては、登録後でも変更できるので安心です。

ホームページ作成初心者でも使いやすいテンプレートが揃っていて、HTMLやCSSの知識がない方でも気軽にサービスを利用できます。シンプルなテンプレートをお探しの方にもおすすめです。

出典：ブートストラップ（Bootstrap）

ブートストラップ（Bootstrap）では、CSSフレームワークを使ったテンプレートを展開しています。料金は無料でありながら、商用利用も可能な点が注目を集めています。

アニメーションエフェクトを採用したテンプレートなので、ホームページに魅力的な「動き」を付けられます。視覚で伝わる魅力的なホームページを作ることが可能です。

どのテンプレートもスタイリッシュでモダンなデザインなので、洗練されたホームページを作りたい方におすすめです。クリエイターの制作実績を表現するホームページにも活用されています。

出典：ウィックス（Wix）

ウィックス（Wix）は、居酒屋などの飲食店や不動産会社などのビジネスホームページ、ネットショップやランディングページなど、複数のカテゴリからテンプレートを選べます。SNSとのリンクも可能なので、シェア率を重視したい方にもおすすめ。

ネットショップ向けテンプレートには、商品ギャラリーやオンライン決済・受注管理など便利な機能が付いているので、はじめてショップ運営する方にも向いています。

テンプレートダウンロード後にはカスタマイズが可能なので、自分好みのホームページを表現できるかもしれません。

レスポンシブデザイン対応のホームページは、ホームページ運営者とユーザー両方にメリットがあります。

スマホやタブレットなどモバイル端末の普及率が高まった現代だからこそ、どんなデバイスからも快適に見られるホームページを作ることが大切です。

レスポンシブデザインはSEOでも効果が期待できるので、効率的に訪問者を増やせる可能性があります。便利なレスポンシブデザイン対応のテンプレートを活用して、好みのデザインやレイアウトのホームページ作成にチャレンジしてみてください。