ブログ
BLOG
スマホ対応は「レスポンシブデザイン」がおすすめ！
更新日：2023.12.26
公開日：2023.10.10
- ホームページ制作
- レスポンシブデザイン（スマホ対応）が必要な理由を知りたい！
- どうすればレスポンシブデザインにできる？
- 自分（自社）でもレスポンシブデザインにできる？
レスポンシブデザインは、画面サイズやデバイスに応じてホームページのレイアウトや表示を自動的に調整する技術です。
スマートフォンやタブレットが普及したことで、ホームページ制作において欠かせない技術となっており、導入することで以下のメリットが得られます。
●検索エンジンからの評価が高まりSEOで有利
●制作コストを抑えられる
この記事では、レスポンシブデザインの概要やメリット・デメリット、導入方法などを詳しく解説します。
ホームページの制作やリニューアルを検討している方は、ぜひ参考にしてください。
レスポンシブデザインとは
レスポンシブデザインは、ホームページを閲覧しているデバイスやブラウザに合わせレイアウトを自動で最適化するWebデザインです。
ひとつのデザインで様々なデバイスに対応でき、ユーザビリティ向上、制作費や管理コストの削減、ブランディングしやすいなどメリットも多くあります。
レスポンシブデザインの仕組み
レスポンシブデザインの登場以前は、PC・スマホ・タブレットそれぞれに合わせてHTMLファイルを作る必要がありました。
対して、レスポンシブデザインはひとつのHTMLファイルを用意し、メディアクエリ（閲覧環境に合わせてスタイルを切り替える機能）で制御します。
画面サイズに合わせてレイアウトやデザインを自動で調整するため、デスクトップからスマホまで幅広いデバイスに対応できるようになります。
なぜレスポンシブデザインにするのか
レスポンシブデザインの必要性が急速に広まったのには2つの理由があります。
・Googleがモバイル・ファースト・インデックスへ移行
モバイル・ファースト・インデックスは、Googleのクローラーがインデックスと検索順位の決定にモバイル版コンテンツを使用する仕組みです。
以前はPC用クローラーとモバイル用クローラーが存在していましたが、2021年3月からモバイル用クローラーのみになりました。
これにより、ユーザビリティ向上だけでなくSEO面においてもスマホ対応が必要になり、そのための方法としてレスポンシブデザインが広がっていきました。
スマホユーザーファースト
スマホ対応をしていないホームページをスマホで閲覧するとPCサイトが表示されます。
その際、文字が小さくて読みにくい、横幅がディスプレイ内に収まらないといった不都合が起こり、見にくく使いにくいホームページになってしまいます。
その結果、ユーザーにストレスを与え、時代に追いついていないというネガティブイメージを持たれてしまう可能性があります。ホームページからの離脱も助長するため、コンバージョンも期待できないでしょう。
レスポンシブデザインであればデバイスごとに最適化されて表示されるため、ユーザーにとって使いやすくコンバージョンも期待できるホームページが作れるでしょう。
Googleが推奨している
スマホユーザーが増えたことで、Googleはモバイル端末で表示されるホームページが「見やすく操作しやすいか」「ユーザーが求める情報があるか」など、モバイルユーザー視点での評価を重視するようになりました。
スマホ対応の方法はいくつかありますが、中でもレスポンシブデザインはGoogleが推奨しています。そのため、特別な理由がないならレスポンシブデザインを採用するのが無難です。
レスポンシブデザインにするメリット
レスポンシブデザインは得られるメリットが多く、スマホ対応の主流にもなっています。
・SEO効果
・管理・更新がしやすい
・デザインが統一される
・コスト削減
ユーザビリティの向上
閲覧したホームページの操作性が悪く、すぐに閉じてしまったという経験はありませんか？スマホ対応されていないホームページは、ユーザビリティにおいて大きなデメリットが生まれます。
レスポンシブデザインにすればユーザーの閲覧環境に合わせて表示を最適化できるため、操作性がよく見やすいホームページにでき、ユーザビリティが向上します。
結果的に離脱率・直帰率の低下、ページビュー数増やコンバージョン率向上が期待できます。
SEO効果
レスポンシブデザインはSEO評価においても有利です。
PC用サイト、スマホ用サイトをそれぞれ用意する方法だと、アクセス数や被リンクによる評価が分散されるため、SEOの観点から見ると良い方法とはいえません。
レスポンシブデザインであれば、1つのURLでデバイスごとに最適化できるためアクセス数が分散されず、より多くのユーザーが閲覧しているホームページとして検索上位に入れる可能性が高まります。
管理・更新しやすい
レスポンシブデザインは複数のレイアウトが存在しますが、1つのHTMLを更新するだけでPC用・スマホ用の両方を更新できます。反対に、複数のHTMLがある場合はすべてのソースを更新する必要があります。
こういったことからも、レスポンシブデザインは管理・更新コストに優れているといえます。
また、アクセス解析がしやすいというメリットもあります。1つのURLしかないためPC用・スマホ用を一括で分析できることは、マーケティング面において有利に働きます。
更新を制作会社に依頼している場合は、更新費用の節約などコスト削減にもつながります。
デザインが統一される
1つのデザインでPCやスマホ、タブレットなど複数の端末で最適化できることは、レスポンシブデザインが持つ大きなメリットです。
ベースが同じデザインでレイアウトなどを最適化しているため、どのデバイスで見てもデザインに統一感が出て、ブランディングにおいても有利に働きます。
反対にPC用・スマホ用それぞれでページを作るとデザインの幅は広がりますが、あまりに違うデザインにすると、同じユーザーが異なるデバイスでアクセスしたとき違和感を与えてしまいます。
ユーザビリティ・ブランディング面において、どのデバイスでもある程度共通するデザインにしたほうが良いことを考えると、あえてデバイスごとに異なるデザインを作るメリットは少ないです。
このことからも、レスポンシブデザインはスマホ対応において優れた手法といえます。
コスト削減
レスポンシブ対応していないホームページは、PC用・スマホ用それぞれページを作る必要があります。内容は同じであっても工数は2サイト作る分かかるため、制作費も当然2倍かかることになります（実際には割引してくれる制作会社も多いです）。
また、更新する際のコストもPC用・スマホ用それぞれにかかります。数回程度であれば許容できるかもしれませんが、定期的に更新が必要なコンテンツが多いと、将来的に大きな費用がかかります。
レスポンシブデザインであれば、1回の作業で済むため費用も節約できます。自社で更新する場合も人件費節約につながるため、コスト面を考えるのであればレスポンシブデザイン一択になります。
レスポンシブデザインのデメリット
メリットの多いレスポンシブデザインですがデメリットもあります。
ただ、メリットを打ち消すほどのものではないため基本的にはレスポンシブデザインを採用して問題ありません。
・表示速度が遅くなる
・デザインの自由動が低い
・制作期間が長くなる
CSSの記述が必要
レスポンシブデザインを実装するなら、レスポンシブ用CSSを記述する必要があります。
CSSとは、ホームページの文字や背景のサイズを設定するための言語です。
レスポンシブは1つのファイルでデバイスごとに表示を最適化するため、CSSで文字サイズや背景サイズを設定する必要があります。
自社でデザインやレイアウトを変更・更新する場合、慣れていないと作業工数がかかりコストがかさむというデメリットが生じます。
表示速度が遅くなる
レスポンシブデザインは1つのURLで異なるデザインを表示させるため、モバイル版ページを表示する際もPC用のHTMLを読み込んでしまいます。
コンテンツ内容や作り方によっては、すべてのコンテンツが表示されるまで時間がかかり、スマホユーザーの離脱率を高める恐れがあります。
表示速度が遅いとユーザーの離脱率が跳ね上がるため、画像圧縮を徹底するなど対応が必要になります。
関連記事：ホームページを見てイライラする理由1位「読み込みが遅い」
デザインの自由度が低い
レスポンシブデザインは1つのHTMLをCSSで見せ方を変えているため、デバイスごとに大きくデザインを変えることができません。
そのため、デバイスごとにターゲットや訴求方法を変えたいなら、レスポンシブデザイン以外でのスマホ対応を検討する必要があります。
制作期間が長くなる
CSSの記述が複雑なレスポンシブデザインは、その分制作に工数がかかります。デバイスごとに文字サイズやデザイン、幅などを細かく調整する必要があるからです。
コーディングに慣れていないと制作に時間がかかるうえ、スマホやタブレットでの表示確認など手間がかかります。
自社でのレスポンシブデザイン実装に不安な場合は、制作会社への依頼をお勧めします。
レスポンシブデザインの種類
レスポンシブデザインの種類は主に4つです。
| レスポンシブレイアウト | 画面の幅のサイズに合わせてCSSを切り替える |
| リキッドレイアウト | デバイスの画面幅に応じて柔軟にレイアウトを変更 |
| フレキシブルレイアウト | リキッドレイアウトに画面の最小幅と最大幅を指定する |
| グリッドレイアウト | 画面の幅に合わせてボックス型のコンテンツを並べる |
レスポンシブレイアウト
閲覧するデバイスに合わせてCSSを切り替える、もっとも取り入れやすいレイアウトです。
どの端末でもレイアウトが崩れず、文字や画像のサイズを変更することで切り替えます。切り替えのピクセル数はブレイクポイントで指定します。
コンテンツごとにPCでは表示してスマホでは表示しないなど、デバイスごとの管理・修正がしやすいというメリットがあります。
新しいサイズのデバイスが出るたびにブレイクポイントの対応をする必要があり、デバイスごとにレイアウトを変えると読み込みに時間がかかるデメリットがありますが、導入コストや管理・更新のしやすさはピカいちです。
リキッドレイアウト
横幅を100％とし、端末の横幅に合わせてデザイン・レイアウトを縦に伸縮させます。縦スクロール限定のため横スクロールのホームページは対応できません。
スマホでもPCに近いレイアウトで表示されるのが特徴で、コンテンツ数が少ない場合やすべての端末で同じホームページを表示させたい場合に利用されます。
レスポンシブレイアウトに比べ、スマホやタブレットの規格変動に対応しやすい手法です。ただし、コンテンツによってはPCでは横に伸びたように表示されるというデメリットがあります。
フレキシブルレイアウト
リキッドデザイン同様、コンテンツごとにパーセントで設定するのは同じで、加えて画面の最小値と最大値を設定でき、大画面のPCでもデザイン崩れが起きにくいのが特徴です。
サイト周りに余白を付けたい場合や、PCのデザインだけ固定したい場合に利用されます。
外部記述をCSSでしなければいけないため、導入にはCSSの知識とスキルが必要です。
グリッドレイアウト
雑誌などでよく見るレイアウトですが、ホームページでもよく取り入れられます。
コンテンツを格子状に並べるためすっきりと見やすいレイアウトに仕上がり、どんな幅のデバイスでも表示を崩さずきれいに表示させられます。
レスポンシブデザインの参考になるサイト集
Responsive Web Design JP
レスポンシブ対応された日本のホームページを紹介しています。
デザイン性の高いホームページが多く、PC・スマホ・タブレットのサイトを一覧で見れることが特徴です。
WebDesignClip
最新トレンドを押さえたおしゃれなホームページを集めたデザイン集です。
キーワード・カテゴリー（業種）カラー・レイアウトで絞り込めるため、自社イメージ合う参考サイトを見つけやすいでしょう。
sps collection
スマホデザインに特化しており、豊富なジャンルが網羅されています。
デザイン性の高いホームページが多く、レイアウトを考える際は参考にしたいデザイン集です。
レスポンシブデザインを実装する方法
①自社でコード・CSSを実装する
自社でレスポンシブデザインを実装します。手順は以下の通りです。
②meta viewportタグを追加
③CSSファイルの記述
ここから、それぞれの手順を詳しく解説します。
①ブレイクポイントを決める
デザインが切り替わる画面幅をブレイクポイントと呼びます。
ブレイクポイントの数値については様々な意見がありますが、2023年10月現在のお勧めは下の通りです。
●タブレット：1024px以下
●スマートフォン：599px以下
ちなみに、各デバイスのサイズ幅はこんな感じになります。
●タブレット：600～1024px
●スマートフォン：320～540px
レスポンシブデザインを実装するときは、ホームページが閲覧される端末サイズを想定して事前に設定しておきます。
PC・スマホの画面サイズを考慮する必要があるため、2ヶ所で設定することが多いです。
上記サイズを参考にして、最適なブレイクポイントを設定してください。
②meta viewportタグを追加
HTMLファイルで制作されたホームページの場合はHTMLファイルのヘッダー部分に記述。WordPressで制作しているならテンプレートファイル（header.php）に追記します。
③CSSファイルの記述
viewportタグを追加したら各デバイス用のCSSを用意します。横幅ごとに見せ方を変える記述で、メディアクエリと呼ばれます。
横幅は任意で変えられるので、主流のスマホの横幅などを参考に決めるとよいでしょう。
#menu-bg {
background-color: #00FFFF; /*青色*/
}
}
#menu-bg {
background-color: #FF0000; /*赤色*/
}
}
#menu-bg {
background-color: #00FF00; /*緑色*/
}
}
テンプレートを使う
コードやCSSの実装は知識やスキルがないと敷居が高いと思います。そこでお勧めなのがテンプレートを使ってホームページを作る方法です。
無料でもデザイン性が高く、SEOを考慮したテンプレートもたくさんあるので利用してみてはいかがでしょう。
テンプレートが紹介されているサイトをいくつか紹介しておきます。
TempNate
https://tempnate.com/responsive/
企業サイトや学校、通販サイトなどに対応したテンプレートが10シリーズ用意されています。各シリーズでカラーや幅、コンテンツ位置などバリエーションが豊富なのも大きな特徴です。
無料版はフッターに著作テキストが表示されていますが3,980円で削除できます。
ヘッダーなどのパーツや画像素材もダウンロード可能で、テンプレートの設置方法が丁寧に説明されているので初心者の方でも安心です。
無料ホームページテンプレート.com
HTMLサイトとWordPressのテンプレートがあり、どちらもレスポンシブ対応されています。
テンプレートは無料で使えますがページの最深部に著作テキストがあり、削除するには2,980円で購入できるシリアルキーが必要です。
デモサイトやシミュレーターを使えば各デバイスでの表示を確認できます。
TEMPLATE PARTY
商用利用可能なレスポンシブデザインのテンプレートが無料配布されています。
様々な業種に対応したテンプレートが用意されており、その多くがレスポンシブ対応されていることが特徴です。
テンプレートとCMSをセットにした「+CMS」も有償販売されています。
制作会社へ依頼する
技術的に実装が難しい場合、制作会社へ依頼する方法があります。
自社にホームページ制作の経験がある人がいない場合、想定より工数がかかることがあり、人件費や時間的コストがかさむことも珍しくありません。
制作会社であれば様々な企業のホームページがを作っているため知識や実績が豊富です。実績ページなどを見て、イメージ通りの自社ホームページを作ってくれそうだと思ったら相談してみましょう。
レスポンシブデザインのホームページをつくるポイント
スマホデザインから着手する
スマホファーストのホームページを作るなら、デザインはスマホサイトから取り掛かりましょう。スマホで見られることを前提に制作し、ほかのデバイスでも表示を最適化していきます。
この手順であれば、どのデバイスでもユーザーにストレスを与えないデザインに仕上げられます。
スマホの操作性を考慮する
マウスやキーワードのないスマホでは、タッチ操作が主流です。ボタンなどのクリック要素は配置に余裕を持たせるなど、タッチデバイスを中心にレイアウトを設計しましょう。
重要な情報はページ上部に
様々なデバイスに対応するデザインは、重要な情報は目に入りやすいページ上部に配置することが大切です。
スマホで閲覧される場合、画面サイズに制限があるため、あまりスクロールさせない位置に情報を置くことで見落とされるリスクを減らすことができます。
動画・画像を最適化
データ通信料によっては大きなコンテンツが表示されるまでに時間がかかるため、ユーザビリティやSEOに悪影響が出ます。
そのため、画像サイズや解析度を最適化するといった工夫が必要になります。
レスポンシブデザインになっているか確認する方法
自社ホームページがレスポンシブデザインに対応しているか確認できるツールです。
「自社ホームページが対応されているか分からない」
「レスポンシブデザインを実装したが、最適化されているか確認したい」
といった場合は利用してみてください。
Am I Responsive?
URLを入力するとPC・ノートパソコン・タブレット・スマホ別にレイアウトが表示されます。
Responsive Checker
https://responsivedesignchecker.com/
URLを入力するとデバイスの機種ごとにレイアウトが確認できます。
モバイルはiPhoneやAndroidなど計19種類、PCでは解析度ごとに表示を確認できます。
メニューのリンクもつながっているので下層ページの表示も確認可能です。
レスポンシブWebデザインチェックツール
5種類のデバイスでの表示を一目で比較できます。
スクロールやリンククリックも可能なので、各デバイスでの見え方・使い勝手も確認できます。
レスポンシブデザインでスマホ対応しよう
レスポンシブデザインの実装は、ユーザービリティ向上やSEO評価など多くのメリットにつながります。
管理・更新の工数も少ないため、制作会社に更新を依頼する際の費用、自社運営者の業務効率向上なども期待できます。
様々な環境のユーザーにとって見やすく、使い勝手に優れたホームページを構築しましょう。
弊社にはレスポンシブデザインに対応したホームページのプランニング・デザイン・構築まで多数の実績があります。
「早急にスマホ対応したい」
「自社で実装しようとしたが上手くいかない」
など、スマホ対応でお悩みであれば気軽にご相談ください。
