「ここでいい」を「ここがいい」へ。発注先探しなら比較ビズで

レスポンシブデザインとは?メリットや作り方を徹底解説

最終更新日:2022年04月11日
SUGI WORK
監修者
代表 杉山茂幸
レスポンシブデザインとは?メリットや作り方を徹底解説

さまざまなサイトがある中でも、今ではさまざまな表示に対応するため、多くの場合は「レスポンシブデザイン」というものを取り入れているサイトは少なくありません。このレスポンシブデザインについては、導入することが向いているサイトもあれば、実はそうではないサイトもあります。それでは、上手にレスポンシブデザインを使うためにはどうしたら良いのでしょうか。レスポンシブデザインの基本的な知識から、導入する方法まで紹介しましょう。

そもそもレスポンシブデザインとは?

そもそもレスポンシブデザインとは何かというと、特定のサイトをさまざまなデバイスで表示させるための特殊な技術であり、ウェブサイトのマルチデバイスに対応するために行われます。 実はかなり最近できた技術でもありますが、導入しているサイトは多くあります。

マルチデバイスとは?

マルチデバイスとは、さまざまな端末での表示に対応することやその技術を指します。 サイトやアプリ、ウェブサービスなどが対象となります。基本的に、今は一つのウェブサイトでも、パソコンからのアクセスもスマートフォンからのアクセスも、タブレットからのアクセスもあります。

パソコンは今では大画面化が進んでいますが、画面の大きさは一つではありません。 スマートフォンは手のひらに隠れるほどのサイズから手から少しはみ出るくらいの大きさのものもあり、タブレットも大きさはさまざまです。

このようなさまざまな端末からアクセスがあるのが、今のウェブサイトの常識となり、それらに対応する必要があるのです。

マルチデバイスで想定されない、意外な端末

また、あまり想定されることはありませんが、最近ではゲーム機からのアクセスもあります。 画面があまり大きくない携帯端末からのアクセスとなっていることが多いでしょう。サイトの種類によっては、キオスク端末からのアクセスもあり得るかもしれません。

キオスク端末とは、固定されたあまり大きくはない情報端末で、最近ではタッチパネルで操作する形式が多くなっています。たとえば地域の観光案内や情報検索のためのタッチパネルで操作する端末なら、サイトへのアクセスも考えられるでしょう。

業務の無人化が進んでいることから導入されており、簡単な事務処理や情報検索などで用いられています。こういったことまで想定すると、今の時代はレスポンシブデザインに対応する必要があるのは、もはや基本的なことと考えても良いでしょう。

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

とはいえ、レスポンシブデザインにはメリットもデメリットもあります。 サイトによっては対応しないほうが良い場合もあるため、自分が作るサイトはどうしたいかを考えましょう。

レスポンシブデザインのメリットは表示とSEO

レスポンシブデザインのメリットは、ざっくりと分けると表示に関する部分とSEOに関する部分です。

どんな端末でもサイトが見やすい

まず、どんな端末でもサイトが見やすい、表示が崩れにくいというのがメリットです。 レスポンシブデザインの場合は、どんなサイトでも表示が崩れないように工夫を施すことになるため、どんな端末でもサイトが見やすくなっており、表示も崩れにくくなっています。

サイトのHTMLを一つで済ませられる

次に、サイトのHTMLを一つで済ませられる、というのもメリットです。 というのも、これまでのサイトであれば、パソコン用とスマートフォン用、タブレット用などに、表示させるHTMLそのものを切り替えるため、複数のHTMLが必要になりました。

そのため、たとえばサイトの修正があったらすべてのHTMLをチェックして修正をかけたり、一つのサイトでも別の内容にするその差分を考えたり適応させる不便さがありました。

ですが、HTMLを一つにすると、こういったHTMLの管理の手間などは減るのです。 また、表示の管理も手間がかかることはなく、サイトの表示チェックもパソコン一つで済ませられる場合もあります。

SEOにも強い

最後に、SEOに強いのもメリットです。 というのも、これまでのサイト作成であればデバイスごとに複数のHTMLを作るため、時にサイトのURLが違う場合や場合によってはSEOに良くない場合もあるのです。

実は、SEOを考えるなら、HTMLは一つのほうが良いのです。 レスポンシブデザインなら、HTMLを一つにしながら、さまざまな端末に対応した表示が可能です。

レスポンシブデザインのデメリットは、サイトデザインの自由度が減る点

レスポンシブデザインにはメリットもある一方で、デメリットもあります。 デメリットはサイトデザインに関する部分で、特に自由度が下がる場合もあります。

サイトデザインの自由度は下がる

まず、サイトデザインの自由度は下がる傾向があります。 これはHTMLをひとつにし、CSSを複数持つことや複雑に書き表すため、基本的にサイトの構成を大きく変更させることはできません。

たとえば、パソコンなど大画面では動画などを大きく表示させるけれど、スマートフォンの小さな画面ではアプリのように高機能に動作するような場合です。 あからさまにページ内の構成や動きを変える場合は、レスポンシブデザインにとっては難しいことも出てくるでしょう。

レスポンシブデザインの作り方と流れ

それでは、レスポンシブデザインの作り方の流れについて紹介しましょう。 ここでは4つの段階でレスポンシブデザインを作ることを考えていきます。

サイトの方針・構築方法を考える

まず、レスポンシブデザインで作れる程度かどうか、サイトの方針を決定します。 というのも、サイトによってはHTMLとCSSでできるレスポンシブデザインが向いているサイトとそうではないサイトがあるのです。

また、ページによって内容が違う場合や時にさまざまなものを導入するにしても、その内容が大きく変わる場合も考えられるでしょう。 これらのことを考えたうえ、レスポンシブデザインを作るかどうかを決めます。

基本的に、情報を掲載するだけのサイトやページであれば、レスポンシブデザインに対応することは難しくありません。

どうしても対応できないサイトとは?

ですが、どうしても対応できないサイトというのもあります。 これはあくまでも例ですが、WebサービスやWebアプリのように高度に動くサイトの場合は、場合によっては最初からレスポンシブデザインではないほうが良い場合もあるかもしれません。

魅せ方をとても工夫する、サイトの動きに猛烈にこだわりがあるような場合も向かない場合があります。 というのも、サイトの動作やビジュアルで魅力を持たせたい場合は、時にレスポンシブデザインが邪魔になってしまう場合もあります。

どうしても対応できないページとは?

また、基本的にレスポンシブデザインでいくと決めたサイトでも、一部のページは対応できない場合も出てくるでしょう。 ランディングページやキャンペーンページなど、パソコン版とスマートフォン版ではまったく構成を変えるような場合です。

この場合は、それぞれのHTMLとCSSを準備したほうが良いかもしれません。 こういったページについては、事前にどういうページが当てはまりそうか考え、そのうえでページ構成や内容を考えておきましょう。

また、こういったページはサイト内のほかのページと共通する部分がない場合が多いため、独自のHTMLとCSSを準備し、場合によってはそのページだけでレスポンシブ対応を考えたほうが良い場合もあるかもしれません。

レスポンシブデザインのサイトデザインを作成する

次に、レスポンシブデザインのサイトデザインを作成します。 レスポンシブデザインのサイトデザインの特徴はいくつかありますが、主なものを紹介しましょう。

デザインは基本的に共通させる

まず、デザインは基本的に共通です。たとえば、色やフォント、メインビジュアルなどはあまり大きく変わることはありません。

これはレスポンシブデザインによってサイトのビジュアルが大きく変わることは想定されていないことや画像や雰囲気などはどの端末で表示しても一緒なのが基本となっています。

例外はランディングページなどの一部の特殊なページです。 この場合は特別なページとして別で作成するのが一般的です。

構成も共通

次に、構成も共通になる傾向があります。 これはHTMLの内容を変更することはないため、ページ内の構成も大きく変わることはなく、たいていは一緒になります。

たとえば、メインビジュアルがありその下に更新情報、またその下にサイト内の案内というようなページがページがあったとしましょう。 この場合、スマートフォンではメインビジュアルを下に持ってくる、サイト内の案内をあえて上に配置する、というようなことはできにくい傾向があります。

メニューはちょっと変わる

一方、メニューについてはかなり変わります。 たとえば、パソコン用であればグローバルナビゲーションと呼ばれるさまざまなページへ飛ぶための案内が、スマートフォン用ではハンバーガーメニューとなって縮小されて表示されることが多いのです。

文字サイズなどは変更する

また、文字サイズなどは変更することが多いでしょう。 かつては文字サイズは一定の数値を指定することが多かったのですが、レスポンシブデザインの場合は文字サイズなどの可視性・可用性に関しては変更する必要があります。

特にレスポンシブデザインの場合はいろいろな端末があるため、文字サイズは固定させないほうが好ましいでしょう。

レスポンシブデザインでサイトを構築する

そして、サイトを構築していきます。 この段階になると、HTMLとCSSを書いていきます。

HTMLはひとつ

まず、HTMLに関しては基本的に一つで作ります。 というのも、HTMLが一つで済むことがレスポンシブデザインのメリットですから、当然ですがHTML文書は一つで済ませましょう。

CSSはまずはどれかを完成させる

一方、書くCSSは複数あります。 このとき、効率化を考えるなら、まずは一つの表示方法でのCSSを完成させましょう。

基本的にはパソコン版での表示がきちんとされることが基本ですから、パソコン版でHTMLとCSSをしっかり書いてしまいましょう。 このとき、ブラウザで表示をチェックするところまで行っておきましょう。

ただし、対応する必要があるすべてのブラウザではなく、想定しているメインブラウザでの動作チェック、という程度で十分です。

さまざまなデバイスに対応させる

最後に、さまざまなデバイスに対応させるためのCSSを書いていきます。 これはメディアクエリというものを記述して、書いていくのです。

基本的には先ほど書いたHTMLとCSSに追加してCSSファイルを別に作り、そのCSSファイルを追加して、特定の条件下だけ適用させる「メディアクエリ」というものを使います。

また、既存のCSSの中に追加して書くこともでき、この場合も「メディアクエリ」を活用していきます。 こちらについては後述します。

レスポンシブデザインで表示を確認する

最後に表示を確認して完成です。 このときは、サイトの崩れや文字の大きさなどを確認して、修正を加えていきましょう。

表示チェックはどの端末でも行う

まず、基本的に表示チェックはどの端末でも行いましょう。 たとえばパソコン版、スマートフォン版、タブレット版の3つを想定しているなら、最低限この3種類の端末では表示確認を行いたいところです。

よくあるのが、エミュレーターと呼ばれる模擬表示ソフトを使うことですが、実はエミュレーターでは実際の表示とはまったく違う動きになってしまう、ということもあり得るのです。

端末では縦と横での表示も考える

スマートフォン版とタブレット版の場合、注意したいのが縦と横の表示です。 スマートフォンとタブレットの場合、デバイスを縦にしても横にしてもサイトが表示されるので、基本的に縦と横で表示を確認しましょう。

レスポンシブデザインの具体的な作り方

ここでは、レスポンシブデザインの具体的な作り方について、軽く説明していきます。

メディアクエリを使う

まず、基本的にはメディアクエリというものを使って書いていきます。 このメディアクエリとは、それぞれの端末の違いや表示されるブラウザの違いなどを活用し、表示させるCSSを変更させるというものです。

メディアクエリの使い方

メディアクエリを用いたCSSの書き方は2つあります。

別のCSSを適用させる場合

まず、端末ごとに違うCSSファイルを適用させる場合です。 この場合は、HTMLのhead要素の中にCSSファイルへの外部リンクを記述する場合、どのCSSファイルを適用させるかを指定します。

具体的には、そのlinkタグの中に『media=""""screen and (max-width:500px)""""』などと記述します。 この場合は『画面に表示させるときで画面サイズが500pxまでの場合、このCSSファイルを適用させる」というものです。

同じCSSの中にメディアクエリを書き換える

また、ひとつのCSSの中にメディアクエリを書き換えて適用させる方法もあります この場合は、外部CSSやサイト内のCSSに記述するのです。たとえば『@media screen and (max-width: 500px) 』と書き、その後にブレース({}という、CSSで使うかっこ)を付けて、その中に必要なCSSを記述します。

メディアクエリのコツ

メディアクエリはさまざまな書き方ができますので、コツを覚えておくと良いでしょう。

適切なメディアタイプを選ぶ

一つは、メディアタイプです。 先ほどの例では『media=screen』という部分が当てはまり、これは基本的にディスプレイで表示するときのCSS、ということになります。

印刷の場合は『print』音声読み上げの場合は『speech』が使えますが、どの場合でも適用できる『all』を使うこともあるでしょう。

適切な画面サイズや幅を選ぶ

また、画面の幅によって表示を変えたることや端末の幅によって表示を変えることも、メディアクエリでの指定では可能です。 だいたいの場合は(max-width:500px)などの、画面幅によって指定することが多いでしょう。

画面幅の寸法やブラウザの表示サイズによって変更するのが多いのですが、そのほかの書き方もあるでしょう。

書き損じ・重複がないようにする

最後に、時に書き損じが起こる場合もあります。 また、CSSで同じものを適用するために同じ記述を何度も書いてしまい、CSSが冗長になる場合もあります。

この場合、最初に共通する想定のCSSを書くと、こういったCSSのミスをなくすことができるでしょう。また、共通する部分は一つのCSSにまとめておくと、冗長になることも少ないのです。

終わりに

レスポンシブ・デザインは独特の書き方をするので、一見すると難しく感じるかもしれませんが、慣れればとても効率良くサイト作成ができるのです。 作り方は最初に想定する部分をきちんと決めておけば、後からどうするか決める部分や判断する部分は少なくなってきて、徐々に楽になってきます。

更新も楽でSEOにもプラスになるため、今どきはぜひレスポンシブデザインを導入しておくと良いでしょう。

監修者の一言

レスポンシブデザインは様々な書き方がありますが、基本的な概念はほぼ一緒です。スマートフォンがこれだけ普及しているのですから、WEB制作を行う業者としてもレスポンシブデザイン対応が当たり前になっている場合が多いと思います。

レスポンシブデザインは、デザイン設計部分から検討する必要があり、エンジニアとデザイナーの打ち合わせが重要になってきます。

ブログや企業のコーポレートサイトなどは比較的簡単にレスポンシブ化することができますが、商品訴求に重きを置いたLP(ランディングページ)や特設ページなどの場合、パソコンはパソコン。スマートフォンはスマートフォンといった具合で別々にデザインカンプを作成するケースもあります。

そうなるとパソコンとスマートフォンのそれぞれ全く別のデザインを作る作業が発生するため、費用と工数が嵩みます。レスポンシブデザインは見やすさ・伝わりやすさを大前提とし、予算や費用によってどこまで実装できるかを複数の業者に相談しながら進めた方がスムーズに進むのではないでしょうか。

SUGI WORK
代表 杉山茂幸
監修者

山形県出身。埼玉県越谷市と山形県上山市の2拠点で活動中のフリーランス。開業5年目でSUGI WORK代表。国内・海外法人から行政案件まで経験。WEB制作をはじめ、デザイナー・エンジニア・出張撮影・ドローン空撮・取材・自社メディア運営など幅広い分野で活動中。中小企業の課題解決が得意。

ホームページ制作・デザインを一括見積もりで発注先を楽に探す
比較ビズへ掲載しませんか?

一括見積もりで発注先を探す