レスポンシブデザインがわかる!メリットや作り方、SEOの影響は?
- カテゴリ

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

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

レスポンシブデザインのメリットをご紹介します。
複数の端末に最適なデザイン表示が可能
レスポンシブデザインのメリットは、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ページで採用されるデザインになるので、メリットデメリットを理解した上で検討してください。
Webデザインの課題はクーシーが解決します
-
SEO
コンサルティング日々進化するGoogleのアルゴリズムに対して、検索順位を着実に上げるWebサイト構築と改善施策を実行します。
-
Webサイトデザイン
EC、コーポレート、eラーニング、SNS、基幹システムなどあらゆるジャンルのWebサイトを手がけています。
クーシーのWeb制作実績
-
難解サービスを再構築。
アイディア コーポレートサイトアイディア株式会社は、海事産業界向けプラットフォームの開発・運用を行うスタートアップ企業。収集した膨大な航海データを活かして航海支援スマホアプリ「Aisea(アイシア)」を小型船舶向けに提供。本プロジェクトでは、コーポレートサイトおよび「Aisea」サービスサイトのリニューアルを手がけました。
記事を読む
-
国内最大手「辻・本郷 税理士法人」
コーポレートサイトリニューアル辻・本郷 税理士法人は、北は北海道から南は沖縄まで国内60拠点以上を展開する国内最大手の税理士法人です。法人/個人、医療・公益法人・地方公共団体といった様々な顧客に向けて会計・税務顧問業務をはじめ、事業承継、組織再編、M&Aアドバイザリーなど幅広いサービスを提供しています。本件では、同法人のコーポレートサイトをリニューアルしました。
記事を読む
-
リビングから「注文住宅」相談。
NTTデータ・スマートソーシング
「HOME4U 家づくりのとびら」「HOME4U 家づくりのとびら」は株式会社NTTデータ・スマートソーシングが新事業として展開する、注文住宅のオンライン相談サービスです。PC/スマートフォンから注文住宅の疑問や不明点を専門アドバイザーに相談し、理想の住まいづくりを叶えることができます。
記事を読む
Webデザインに役立つ記事はこちら
-
スマホサイトの長さを最適化するUIの考え方
現在、BtoCのWebサイトは、PCよりスマホで閲覧されることが多く、弊社でもほとんどのサイトをレスポンシブで制作しています。レスポンシブで制作すると、スマホサイトはPCサイトより縦に長くな...
記事を読む
-
デザイン思考とは?Web制作会社が考える概念とプロセス
デザインとは、美しさ、格好良さ、居心地の良さなどを実現するための計画的な行動であり、一番近い言葉だと「設計」だと考えています。ただし、機能的なものや、数値的なものではなく、人の情緒的な感情をモノとして...
記事を読む
-
デザインの良し悪しとは?「良いデザイン」「悪いデザイン」を判断する方法
デザイン会社にデザインを依頼し、上がってきたものの良し悪しを判断する際、あなたは何を基準に...
記事を読む