この記事の要点
- レスポンシブデザインは、1つのホームページが、見る画面の幅に合わせて表示を変える作り方。
- パソコン、タブレット、スマホで同じアドレス、同じ内容を見せられるので、管理が楽で、検索の面でも扱いやすい。
- Googleは、スマホ向けの作り方としてレスポンシブウェブデザインを推奨している。
- 自社のホームページは、実際にスマホで開いて、文字の大きさ、ボタンの押しやすさ、横にはみ出していないかを確かめる。
レスポンシブデザインとは
レスポンシブデザイン（レスポンシブウェブデザイン）は、ホームページを見る画面の幅に合わせて、表示のしかたを自動で変える作り方です。「レスポンシブ（responsive）」は、「反応する」という意味です。
たとえば、パソコンの広い画面では、写真と文章を横に並べて表示し、スマホの狭い画面では、写真の下に文章を並べて縦に表示する、といったことができます。メニューも、パソコンでは画面の上に横に並べ、スマホでは「三本線」のボタンを押すと開くように切り替えるのが一般的です。
大切なのは、パソコンでもスマホでも、同じアドレスで、同じ内容を見せていることです。並べ方や大きさが変わるだけで、別のページを用意しているわけではありません。
仕組み
レスポンシブデザインは、ホームページの見た目を決める「CSS」という書き方で、画面の幅に応じて、異なる見た目のルールを当てはめることで実現しています。「画面の幅が○○より狭いときは、写真と文章を縦に並べる」のように、条件ごとにルールを書いておく仕組みです。この条件の書き方を「メディアクエリ」と呼びます。
また、スマホのブラウザに「画面の幅に合わせて表示してください」と伝える設定（viewport の指定）も必要です。この設定がないと、スマホのブラウザは、パソコン用の広いページを小さく縮めて表示してしまい、文字が読めないほど小さくなります。
WordPressのテーマの多くは、最初からレスポンシブデザインで作られています。テーマを使ってホームページを作る場合は、こうした仕組みを自分で書く必要はありません。
スマホ専用サイトとの違い
スマホに対応する方法は、レスポンシブデザインだけではありません。以前は、パソコン用のホームページとは別に、スマホ専用のホームページを作る方法もよく使われていました。
| 方法 | 仕組み | 管理の手間 |
|---|---|---|
| レスポンシブデザイン | 1つのページが、画面の幅に合わせて表示を変える | 1か所を直せば両方に反映される |
| スマホ専用のサイト | パソコン用とスマホ用で、別のアドレスのページを用意する | 2か所を直す必要がある |
| 見る機器によって出し分け | 同じアドレスで、機器によって別の内容を返す | 2種類の内容を管理する必要がある |
スマホ専用のサイトを別に作ると、お知らせを更新するたびに、パソコン用とスマホ用の両方を直す必要があります。片方だけ直し忘れて、内容が食い違ってしまうこともあります。レスポンシブデザインなら、1つのページを直すだけで、すべての画面に反映されます。
Googleが推奨している理由
Googleは、スマホ向けのホームページの作り方として、レスポンシブウェブデザインを推奨しています。同じアドレスで同じ内容を見せるため、Googleにとってもページを読み取りやすく、扱いやすいからです。
また、Googleは、主にスマホ向けの表示の内容をもとに、ページを読み取って評価する「モバイルファーストインデックス」という方法をとっています。スマホで見たときに内容が省かれていたり、読みにくかったりすると、検索での評価にも影響するおそれがあります。
レスポンシブデザインでは、パソコンとスマホで同じ内容を見せるため、この点で心配が少なくなります。ただし、スマホの表示で文章や画像を隠している場合は、パソコン向けとスマホ向けで内容が変わってしまうため、注意が必要です。
レスポンシブデザインのメリット
まとめると、レスポンシブデザインには次のような良い点があります。
- 管理が楽：1つのページを直せば、すべての画面に反映される
- アドレスが1つ：SNSで共有されたり、リンクされたりしたときも、どの機器でも同じページが開く
- 検索の面で扱いやすい：Googleが推奨している作り方で、内容の食い違いが起きにくい
- 新しい機器にも対応しやすい：画面の幅に合わせて変わるため、タブレットや大きなスマホなど、さまざまな画面でも崩れにくい
一方で、パソコンとスマホで、まったく違う見せ方をしたい場合には、設計に工夫が必要です。また、パソコン用の大きな画像をそのままスマホでも読み込むと、表示が遅くなることがあるため、画像の大きさにも気を配りましょう。
スマホで見やすくするための工夫
レスポンシブデザインで作られていても、それだけでスマホで見やすくなるとは限りません。並べ方が変わるだけで、中身がパソコン向けのままだと、スマホでは読みにくく感じることがあります。
たとえば、パソコンでは気にならない長い段落も、スマホでは画面いっぱいに文字が続き、読む気を失わせてしまいます。段落は短めに区切り、見出しを多めに入れると、スマホでも読み進めやすくなります。また、横に長い表は、スマホでは画面からはみ出しやすいため、列の数を減らすか、箇条書きに置き換えることも考えましょう。
画像の中に文字を入れている場合も注意が必要です。パソコンでは読める大きさでも、スマホの画面に合わせて縮小されると、文字が小さすぎて読めなくなることがあります。大切な情報は、画像ではなく文章で書いておく方が安心です。
最初の画面に何が見えるかも大切です。パソコンでは写真と文章が並んで見えていても、スマホでは大きな写真だけで最初の画面が埋まり、何の会社なのかがすぐに伝わらないことがあります。スマホで開いたときに、最初の画面で会社の内容と連絡の方法がわかるかを確かめましょう。
自社のホームページで確かめること
今のホームページがスマホに対応できているかは、実際にスマホで開いて確かめるのが一番確実です。
スマホで確かめること
- 文字を拡大しなくても読める大きさか
- 横にはみ出して、左右にスクロールしなければならない部分がないか
- ボタンやリンクが、指で押しやすい大きさと間隔か
- メニューが開けて、すべてのページに行けるか
- 電話番号をタップすると、電話をかけられるか
- 問い合わせのフォームが、スマホで入力しやすいか
- 写真や表が、画面からはみ出していないか
- 表示が遅すぎないか
パソコンのブラウザでも、画面の幅を狭くすると、スマホに近い表示を確かめられます。ただし、実際のスマホとは見え方が違うこともあるため、最後は自分のスマホで確かめましょう。表示が崩れている場合の確かめ方は表示が崩れたときで説明しています。
見積もりを見るときの注意
ホームページの制作を頼むときは、見積もりに「レスポンシブ対応」が含まれているかを確かめましょう。今はほとんどの制作でスマホ対応が前提になっていますが、別料金になっている場合もあります。見積もりの見方はホームページ制作の見積もりの見方で説明しています。
古いホームページで、スマホで見ると文字が小さく、横にはみ出してしまう場合は、スマホに対応していない可能性があります。部分的な修正で対応できることもありますが、ホームページ全体を作り直した方が早い場合もあります。リニューアルの進め方はホームページリニューアルの進め方を参照してください。
よくある質問
レスポンシブデザインにすると、費用は高くなりますか？
今は、ほとんどのホームページの制作で、スマホ対応が前提になっています。WordPressのテーマの多くも、最初からレスポンシブデザインで作られています。ただし、パソコンとスマホでまったく違う見せ方をしたい場合は、その分の作業が増えることがあります。
パソコンでは見やすいのに、スマホで見ると崩れます。
画像や表の幅が固定されている、長い英数字が折り返されない、といった原因が考えられます。テーマを使っている場合は、テーマの設定や、追加したプラグインが影響していることもあります。どの部分が崩れているのかを確かめ、作った人やテーマの販売元に相談しましょう。
スマホで見たときに、一部の内容を隠してもよいですか？
見やすくするために、折りたたんで表示する方法はよく使われます。ただし、Googleはスマホ向けの表示をもとにページを読み取るため、大切な内容をスマホの表示から完全に省いてしまうのは避けましょう。
タブレットにも対応していますか？
レスポンシブデザインは、画面の幅に合わせて表示を変える仕組みのため、タブレットでも見やすく表示されるように作られていることが多いです。ただし、作り方によっては、中くらいの幅で崩れることもあるため、タブレットでも一度確かめておくと安心です。
参照した資料
制度や料金は変わることがあります。手続きの前に、公式の最新の案内を確認してください。
確認日 2026.11.07