COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

【初心者向け】レスポンシブデザインがわかる!メリットや作り方を解説

  • Web制作ハウツー
  • UIUX・サイト設計
  • WebデザインTips
【初心者向け】レスポンシブデザインがわかる!メリットや作り方を解説

レスポンシブは、スマートフォンなどのモバイル端末に最適化したWebページを作れるデザインです。レスポンシブはSEOだけでなく、Webページの管理も楽になるなどのメリットが期待できます。レスポンシブの概要や実際の制作手順をわかりやすくご紹介します。

レスポンシブとは

レスポンシブとは、ユーザーが使用するPCやスマートフォン、タブレットなどの画面サイズに合わせて、自動で最適化させるデザインを指します。たとえば、ユーザーがPCからアクセスする場合はPCの画面サイズに最適化され、スマートフォンからのアクセスならスマートフォンの画面サイズに最適化されたデザインが表示されます。レスポンシブは、ユーザーが使用するどんな端末からも見やすいような、Webページのデザインです。

レスポンシブが注目される理由

レスポンシブはGoogleにも推奨されているWebデザインです。レスポンシブが注目される背景には、スマートフォンユーザーの増加を受け、ユーザーがさまざまな端末からWebページへアクセスするようになったことがあげられます。2018年にはGoogleがMFI(モバイルファーストインデックス)を導入し、Webページのモバイル端末への最適化が必要になりました。
Webページのモバイル端末最適化を進める中でも、PCからのアクセスは無視できません。Webページは、どの端末からアクセスされても見やすいデザインを提供することが求められるのです。Webページが見やすいとユーザーの満足度も上がるため、SEOにもいい影響が期待できるでしょう。レスポンシブでSEO効果が期待できるかは、次章でご紹介します。

参考

レスポンシブウェブデザイン|Google検索セントラル

レスポンシブのメリット

レスポンシブデザインのメリットをご紹介します。

複数の端末に最適なデザイン表示が可能

レスポンシブのメリットは、1つのデザインで、PCやスマートフォン、タブレットなど複数の端末に最適化できることです。レスポンシブ対応していないWebページは、PC向け、スマートフォン向け…など端末によって複数のデザインを作る必要があります。レスポンシブなら、画面のサイズに合わせて最適なデザインを表示させるので、どの端末からアクセスしても見やすくなります。

Webページ更新の手間を削減

レスポンシブは、Webページの更新を行う際も手間が少なく済みます。レスポンシブ対応していないと、端末ごとに最適化したWebページデザインを複数管理することもあります。たとえば、PC向けとスマートフォン向けの2つのWebページを管理している場合、どちらのWebページも同じタイミングで更新する必要があるでしょう。レスポンシブデザインは、1つのWebページで複数端末に最適化されるため、Webページの更新も1つで済みます。

同一URLで管理するためSEOに有利

レスポンシブのWebページは、SEOにも有利と言えるでしょう。レスポンシブなら、1つのWebページでPCやスマートフォンなど複数の端末に最適化できます。レスポンシブは1つのWebページにつきURLも1つです。
レスポンシブ対応していないと、同じ内容のWebページでもPC向け、スマートフォン向けなど複数のWebページを管理する必要があり、URLもそれぞれ異なります。URLが異なるとSEO評価が分散される可能性も。

たとえば、スマートフォン向けのWebページで50の被リンクを獲得し、PC向けのWebページで40の被リンクを獲得した場合、Webページの内容は同じでもSEO評価はURLごとに分散してしまいます。レスポンシブのWebページならURLが1つなので、合計した90の被リンク分のSEO評価を得られることになるのです。レスポンシブは、同一のURLで管理できるため、SEO評価の分散を防げる点もメリットです。

コストが削減できる

レスポンシブは、Webページの制作コスト削減にもつながります。レスポンシブ対応していないWebページは、PC向け、スマートフォン向けとそれぞれ作成する必要があります。PC向けとスマートフォン向けの2つのWebページを作成する場合は、2つのファイルを作成する必要があるのです。レスポンシブは1つのWebページで管理するため、1つのファイル作成で済みます。自社でWebページのデザインをする場合は、工数削減につながります。Webページのデザインを外部に委託する場合は、制作費の削減も可能です。

レスポンシブのデメリット

レスポンシブのデメリットをご紹介します。

レスポンシブ用のCSS記述が必要

レスポンシブは、PC専用やスマートフォン専用Webページの作り方と少し異なります。WebページのデザインはCSSという言語で指定されます。たとえば、Webページの文字サイズや背景の色などの見た目部分は、CSSの記述により設定されているのです。

レスポンシブは、1つのファイルで、さまざまな端末からのアクセスに最適化されるように作成します。レスポンシブ対応していないスマートフォン専用のWebページを作る際は、スマートフォンの画面サイズに最適化したデザインを作ればいいため、文字サイズやデザインの幅なども調整しやすいです。
レスポンシブでは、複数の端末に最適化されるよう、文字サイズやデザインの幅などを指定する必要があります。デザインのサイズ指定を行う単位も、pxではなく%やemなどを使った方がいい場合もあるでしょう。レスポンシブ用の記述に慣れていないと、作業工数がかかってしまう点はデメリットと言えます。

デザインの自由度が下がる

レスポンシブは、デザインの自由度が低い点がデメリットです。レスポンシブ対応していないWebページであれば、PC向けとスマートフォン向けのデザインを大きく変えることができます。たとえば、PC向けのWebページを作る場合、PC用のレイアウトにすることも可能です。しかし、レスポンシブは1つのデザインで、端末によって幅などが変わることくらいしかできません。レスポンシブは、端末によって見た目を大きく変えることはできないのです。

端末サイズによってデザインが崩れることも

レスポンシブのWebページでも、アクセスする端末によってデザインが崩れて見えることがあります。レスポンシブは、PCやスマートフォンなどの端末サイズを想定してデザインを構成します。
レスポンシブではブレイクポイントが重要です。ブレイクポイントとは、Webページにアクセスする端末の画面サイズによってデザインを切り替えるポイントのことです。レスポンシブでは、ブレイクポイントで指定するサイズに該当しない端末からアクセスがあった場合、デザインが崩れてしまうのです。

レスポンシブの作り方

レスポンシブの作り方をご紹介します。

対応させる端末サイズを決める

レスポンシブでは、PCやスマートフォン、タブレットなど、Webページへのアクセスが想定される端末の画面サイズを事前に設定しておきます。レスポンシブを作成する際は、PC・スマートフォンの画面サイズを考慮する必要があるため、2パターンの画面サイズを指定することが多いです。たとえば、下記のような指定をすることで、ユーザーがアクセスした端末に応じて最適なデザインを表示できます。

  • スマートフォン:480px以下
  • タブレット:1,024px以下
  • PC:1,025px以上

下記に一般的なPCやスマートフォン、タブレットの画面サイズを記載したので、参考にしてみてください。

  • スマートフォン:320px〜540px
  • タブレット:600px〜1,024px
  • PC:1,280px

viewportタグの追加

レスポンシブ作成の1つ目の作業は、WebページのHTMLファイルにviewportタグを追加することです。viewportタグを追加することで、ユーザーがWebページにアクセスした際に端末情報を取得できるようになります。viewportタグで取得したユーザーの端末情報によって、レスポンシブでPC・スマートフォン・タブレットのどのデザインが最適かを判断するのです。viewportタグは、下記のソースコードなどで追加できます。

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

CSSファイルでの指定

CSSはWebページのデザイン(見た目部分)を調整するための言語です。レスポンシブでは、CSSのメディアクエリを使用します。メディアクエリは、Webページへアクセスしたユーザーの端末によって、デザインのスタイルを切り替えられる機能を持っています。CSSをスタイルシートに記入する際は、下記のようなソースコードを使います。

@media screen and (min-width:480px) {}

「画面サイズが480px以下の場合は、{}に記述されたデザインを表示する」という意味です。画面サイズによって指定するデザインをCSSに記述しておくことで、Webページへアクセスする端末によって、最適なデザインを表示できるようになります。

各端末の画面サイズを「スマートフォン:480px以下」「タブレット:768px以上1,024px以下」「PC:1,024px以上」とすると、下記のようなソースコードで指定できるでしょう。

@media screen and (min-width:480px) {}
@media screen and (min-width:768px) and (max-width:1024px) {}
@media screen and (min-width:1024px) {}

画面のサイズが小さい順に上から記述する方法は「モバイルファースト」、画面サイズが大きい順に上から記載する方法は「デスクトップファースト」と呼ばれます。

検証

HTMLやCSSをレスポンシブ用の記述にしたら、実際のWebページの見え方を確認しましょう。PCのデベロッパーツールを使えば、PC上からもスマートフォンやタブレットでの見え方を確認できます。Chromeの場合、画面上で右クリックするとコンテキストメニューが表示されるので「検証」をクリックします。

デベロッパーツール

画面上部の「Dimensions:Responsive」をクリックすると端末一覧が表示されるので、スマートフォンやタブレットなどさまざまな画面サイズでデザイン崩れがないか確認しましょう。PCやスマートフォン、タブレットなど、実際に各端末からWebページを見てみることも重要です。

レスポンシブ対応の確認

レスポンシブのWebページを作成したら、検索エンジンからレスポンシブ対応のWebページと認識されているかを確認しましょう。Googleが提供している「モバイルフレンドリーテスト」というツールを使えば、Webページがレスポンシブ対応になっているかを調査できます。モバイルフレンドリーテストのツール内で調査したいWebページのURLを検索します。「問題ありません。 このページはモバイル フレンドリーです。」と表示されれば、レスポンシブ対応できている証拠です。

参考

モバイルフレンドリーテスト

レスポンシブの注意点

レスポンシブの注意点をご紹介します。

複数の端末で確認する

レスポンシブを作成したら、必ずPCやスマートフォンから実際にアクセスしてみることが重要です。PCで拡大や縮小をした際、スマートフォンで画面を横にした際など、さまざまなケースを想定してデザイン崩れがないか確認しましょう。スマートフォンでもメーカーや機種によって画面サイズが複数あります。スマートフォンでも画面が大きめのものと小さめのものを両方確認すると安心です。

画像のサイズや解像度

レスポンシブで画像を入れる場合は、サイズや解像度にも注意が必要です。レスポンシブでは、端末によって使う画像を変えることはできません。そのため、レスポンシブ画像を使う場合、PCやスマートフォン、タブレットなどのさまざまな端末で見ても、見やすいサイズや解像度にする必要があります。たとえば、PC用に画像サイズが大きすぎるものを使えば、スマートフォンで表示した際に見づらくなってしまう場合も。

レスポンシブはCSSの容量が多くなりがちなので、画像はなるべく軽量化します。容量が大きい画像をたくさん使うと、Webページの読み込みが遅くなり、SEO評価も下がってしまうでしょう。軽量化すると画像が粗くなる場合もあるので、解像度と容量のバランスを見て調整してください。

レスポンシブを制作会社へ依頼

レスポンシブのWebページを作る際、自社で行えない場合は、制作会社へ依頼する方法もあります。自社にレスポンシブのWebページ作成経験者がいない場合、作業に慣れないため想定より工数がかかることもあるでしょう。制作会社であれば、さまざまな企業のWebページ制作を行なっているため知識や経験が豊富です。理想のデザインをレスポンシブで叶えられるかを相談しながら決めることもできます。

まとめ

レスポンシブは、Webページのモバイルフレンドリー化に向いているデザイン方法です。Webページをモバイルフレンドリー化することで、SEO評価にもつながります。Webページの管理工数も少なく済むため、Webサイト運営者の業務効率向上が期待できる点もレスポンシブのメリットです。レスポンシブは多くのWebページで採用されるデザインになるので、メリットデメリットを理解した上で検討してください。

横田みのり

この記事を書いた人

横田みのり

新卒でITベンチャー企業に入社。Web編集者としてディレクター、ライターを経験。SEOコンテンツの作成や分析、リライトのノウハウを活かし、現在は「AnyMaMa」にてフリーライターとして活躍中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2022/02/23

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

UIUX・サイト設計・WebデザインTipsの関連記事はこちら

  • 【徹底解説】チャットボットとは?機能・導入メリット・作り方まで詳しく解説

    チャットボットの基本機能から、導入メリット、開発方法までをWeb制作会社クーシーが詳しく解説。Webサイトでの問い合わせ対応を自動化し、業務の効率化を実現するポイントとは?Web担当者向けに、成功するチャットボットの運用方法も紹介します。

    • UIUX・サイト設計
    • PM/ディレクション
  • 求職者に刺さる! 採用サイト「数字で見る」コンテンツ設計と効果を出すポイント

    企業の魅力を最大化し求職者に訴求できる「数字で見る採用サイト」。豊富な実績と知見のあるWeb制作会社クーシーが採用サイトに入れるべき数値や実装のコツ、成功事例などをご紹介します。

    • 採用サイト
    • WebデザインTips
  • 【Webデザイン最新アイデア】プロも絶賛! 超参考になる「ギャラリー・まとめサイト」32選

    今回は、最新のWebデザインアイデアをチェックできるおすすめのWebギャラリーサイトを、デザインに強みを持つWeb制作会社クーシーが厳選してご紹介します。ぜひ活用して、デザインのヒントを見つけてみてください。

    • WebデザインTips
    • Web最新トレンド
  • 参考になる! おしゃれなコーポレートサイト16選:金融、学校、エンタメなど業種別にご紹介

    業界別に厳選したおしゃれなコーポレートサイト16選をプロが徹底解説! 「おしゃれ」と評価されるデザイン要素と秘訣を業種ごとに分析しています。金融、学校、ITなど各分野の印象的な事例から、制作プロジェクトに活かせるヒントが満載です。

    • コーポレートサイト
    • WebデザインTips
  • 【6月版】知っておきたい2025年Webデザインニュース!海外から最新情報をご紹介!

    2025年6月のWebデザイン最新ニュースをまとめました。Googleのロゴ刷新、Figmaの大型アップデート、Androidの新デザインなど、注目トピックを海外情報からわかりやすく紹介します。

    • WebデザインTips
    • Web最新トレンド
  • 【2025年Webデザイントレンド最新版】Web制作のプロが大注目する10選まとめ

    デザイン戦略に長けたWeb制作会社が推す「2025年のWebデザイン最新トレンド」。余白、3D、ヒーロー画像だけじゃない、斬新な表現技術もご紹介!

    • WebデザインTips
    • Web最新トレンド
  • 【トレンド/目的/戦略別】コーポレートサイトのデザイン事例14選! 成果につなげる秘訣とは?

    最新コーポレートサイトのデザイン事例をトレンド/目的/戦略の3つの視点で14件紹介。3Dや動画、ミニマリズムなどのトレンドから、ブランディングや採用を成功させるサイトまで。デザインのヒントが満載です。

    • コーポレートサイト
    • WebデザインTips
  • 採用サイトデザインのすべて:トレンド、成功事例、制作の基本を丸っと解説!

    Web担当者が知っておくべき採用サイトデザインのポイントを事例と交えながら詳しく解説!成功に必要なデザインの4ポイントも合わせて紹介します。

    • 採用サイト
    • WebデザインTips

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

  • Webデザイン

    UIUXと美しさを両立し、ブランドを「カタチ」に。SEO・AIOも考慮した戦略的ビジュアルで目標達成を支援します。

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • 【初心者向け】レスポンシブデザインがわかる!メリットや作り方を解説
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.