レスポンシブWebデザインの作り方は？メリット・デメリットも解説

 

パソコン・スマートフォン・タブレットなど、ホームページを見るためのデバイスが多様化した昨今。その影響でデバイスによる画面の大きさの違いを吸収し、自動的に最適化できる「レスポンシブWebデザイン」の需要が大きく高まっています。

 

そのようななかで「レスポンシブデザインの定義とは？」「作り方を教えてほしい」と悩まれているご担当者さまもいらっしゃるでしょう。

 

レスポンシブデザインは「SEOに良い影響を与える」「直帰率が下がる」など、さまざまなメリットを得られます。
ただしそのためには、正しい手順・コツをふまえて行うことが重要です。

 

この記事では、レスポンシブWebデザインの作り方5ステップをご紹介します。建設・飲食・美容など、さまざまな業種のホームページ制作実績を持つTRASPが、メリット・デメリットについても詳しくまとめました。

 

 

レスポンシブWebデザインとは？

 

まずは「レスポンシブWebデザインとは何か？」について、詳しく見ていきましょう。

 

レスポンシブWebデザインとは、スマートフォン・タブレット・パソコンなど、異なる画面サイズに応じ、レイアウトを最適化する機能を指します。

 

従来はスマートフォン用・タブレット用・パソコン用といったように、デバイスごとに複数のHTMLファイルを用意する必要がありました。

 

しかしレスポンシブデザインは、ひとつのHTMLファイルをメディアクエリ（＝画面環境に応じてWebページのスタイルを切り替える機能）で制御OK。それぞれの画面サイズに合うようにレイアウトやデザインを自在に調整できます。

 

そのため、デスクトップパソコンの大型画面からスマートフォンの小さな画面まで、同じWebサイトが各デバイスの画面サイズに適したレイアウトに自動で切り替えられます。

 

レスポンシブWebデザインのメリット3つ

 

レスポンシブWebデザインには、ホームページを運営する企業をはじめ、商品・サービスを購入する消費者、検索エンジンなど、どの立場から見てもメリットがあります。

 

この項目では、代表的なメリット3つをそれぞれご紹介します。

 

1.サイトを管理しやすくなる

レスポンシブWebデザインを導入すると、サイトを管理しやすくなります。なぜなら前述したように、どのデバイスでも1つのファイルで対応できるためです。

 

これまではホームページ上の情報を更新・修正する際には、各デバイスに用意された複数のHTMLを1つずつ調整する必要がありました。しかしレスポンシブデザインなら、更新作業が1回で済みます。

 

2.SEOに良い影響を与える

レスポンシブWebデザインにすることで、SEOにも良い影響を与えます。

 

Googleのアルゴリズムのなかに「モバイルフレンドリー」「モバイルファーストインデックス」という評価基準があり、レスポンシブWebデザインはこれらの基準に対応した手法になるためです。

また、パソコン用・スマートフォン用で別々のURLが存在する場合、ページに対する評価が分散してしまうことも。しかしURLを同じにすれば、ページに対する評価も統一される可能性が高まります。

 

ホームページ制作でSEO対策が必須な理由を詳しくまとめています。

 

3.直帰率が下がる

レスポンシブWebデザインを採用すると、直帰率が下がりやすくなります。

たとえば、パソコン用のホームページをスマートフォンで閲覧すると、サイズが大きく読みにくくなってしまうため、どうしても直帰率が高くなってしまうでしょう。

 

対してレスポンシブデザインであれば、どのデバイスでホームページに訪問したとしても、自動的にレイアウトが変更されます。そのため「見にくい」「読みにくい」という印象を持たれることが少なくなり、結果的にユーザーの離脱を防ぎやすくなるのです。

 

TRASPでは豊富なマーケティング実績をもとに、ユーザー目線で興味をもつホームページ制作を行っています。

 

TRASPのホームページ制作

 

レスポンシブWebデザインのデメリット3つ

 

レスポンシブWebデザインにはメリットだけではなく、デメリットもあります。つづいて、具体的なデメリット3つを詳しくまとめました。

 

1.読み込みが遅くなる

レスポンシブWebデザインは、ページの読み込みが遅くなる可能性があります。なぜなら、どのデバイスでも1つのHTMLを採用しているためです。

 

スマートフォンからホームページを閲覧する際は、パソコン用のHTMLコード・CSS・画像などの要素を読み込むことになるため、スマートフォンのスペックが低い場合、データ読み込みに時間がかかってしまうでしょう。

 

サイトの表示速度の重要性を解説した記事はこちら。

 

2.デザインに制限がある

レスポンシブWebデザインは、どのデバイスでも同一のHTMLを使用するぶん、大幅なレイアウト変更はできません。さまざまなデバイスに対応させる必要があるため、デザインやフォントの種類も汎用性のあるものに限定されてしまいます。

 

またWebデザインの知識が十分でなければ、スマートフォンやタブレットでレイアウトが崩れてしまうことも。つまりデザインにこだわりすぎてしまうと、サイトを表示できないデバイスが出てくると考えられます。

 

したがって「凝ったデザインにする」「サイズの大きな画像・動画を使用する」ことは避けましょう。できる限り、“シンプルなWebサイト”をつくることを心がけてください。

 

3.開発に時間がかかる

レスポンシブWebデザインは、通常のサイトよりも開発に時間を要します。1つのHTMLファイルにデバイスごとのデザインを制作し、それらに合わせたコードを埋め込んでいくためです。したがって通常のWebサイトを完成させるよりも、手間がかかるといえます。

 

レスポンシブWebデザインの作り方5ステップ

 

ここからは、具体的な作り方5ステップをそれぞれ見てきましょう。

 

1.サイトの要件定義を実施

1つ目のステップでは、サイトの要件定義を実施します。設定したゴールやペルソナ、コンセプトをもとに、下記の内容を決めていきましょう。

たとえばタブレットを考慮しない場合は「スマートフォン・パソコン」間のブレークポイントを設定します。対してそうでない場合は「スマートフォン・タブレット」「タブレット・パソコン」間でのブレークポイントを、それぞれ定めていくイメージです。

 

また具体的な数値は、最新のデバイスサイズを参考にしましょう。サイズに関する詳細は、のちほどご紹介していきます。

 

ホームページ制作の要件定義に関する情報を詳しくまとめています。

 

2.ワイヤーフレームの作成

2つ目のステップは、ワイヤーフレームの作成です。決めた要件定義をもとに、Webページを設計していきましょう。

提供する情報は同じであっても、閲覧環境によって“見え方や印象”は大きく変わります。そのためユーザー目線で「デバイスによって、どのように見せるのがベストか」を考えたうえで、各媒体に適した画面をそれぞれ設計することが大切です。

 

ワイヤーフレームの作成方法を知りたい方は、こちらをご覧ください。

 

3.媒体ごとにデザインを作成

3つ目のステップでは、媒体ごとにデザインを作成します。ワイヤーフレームをもとに、各デバイスで表示させたいものを作りこんでいきます。主に上記のような点を決めていくと良いでしょう。

 

• アイコン・ロゴ・画像などの素材配置
• コンテンツと機能要素の表示／非表示
• 配色、フォント　など

 

「販促・リード獲得・採用…といった、ホームページの目的」「自社のターゲット層」を考慮するのが、重要なポイントです。

 

4.HTML・CSSを作成・実装

4つ目のステップは、HTML・CSSの作成・実装。前のステップで決まったデザインをもとに、作成を行っていきましょう。

meta viewportタグの設定

端末サイズの決定後、サイトのHTMLファイルにmeta viewportタグを挿入してください。

次のmeta viewportを、HTMLのhead要素内へと設置しましょう。

 

 

レスポンシブデザインの作り方を解説！ 初心者向けにテンプレートも紹介｜Webサイト制作・CMS開発｜LeadGrid (goleadgrid.com)

 

当タグを設定すればスマートフォン端末がWebページ全体を縮小し、無理やり領域内に収めるのを防ぎやすくなります。

 

またユーザーが利用するデバイスの横幅サイズを収集できる点もメリットといえます。そのため「パソコン向けかorスマートフォン向けか」判断しやすくなるでしょう。

 

メディアクエリによるCSSの指定

次にメディアクエリを使い、viewportが「パソコン向けかorスマートフォン向けか」を判断する横幅サイズをCSSで指定していきます。

@mediaにてパソコンやスマートフォンなどのメディアタイプを指定し、画面幅を設定しましょう。

 

レスポンシブデザインの正しい作り方【便利なテンプレートサイトも紹介】 | 月額定額制（サブスク）ホームページ制作 | ビズサイ (webdeki.com)

 

上記は一般的な目安となる横幅で設定したメディアクエリの例です。こちらをCSSのスタイルシートに記載すれば、基本的なレスポンシブWebデザインの設定は完了となります。

 

こちらの記事で、HTML・CSSの違いを詳しく解説しています。

 

5.正しく切り替わるか確認

5つ目のステップは、デザインが正しく切り替わるか確認することです。

 

Google Chromeの検証機能・実機をはじめ、「RESPONSIVE WEB DESIGN CHECKER」「Am I Responsive?」などのツールを活用すると良いでしょう。

 

もし正しく切り替わらない場合、プログラム内のどこかにバグがあると考えられます。主に下記の内容を確認し、解消に努めていきましょう。

 

• viewportの記述がされているか
• CSSが読み込まれているか
• メディアクエリの記述が正しいか

レスポンシブWebデザインを成功させるコツ3つ

 

最後に、レスポンシブWebデザインを成功させるコツ3つをご紹介します。自社のWebサイト制作時に、ぜひこちらも参考にしてください。

 

1.タッチデバイスを中心にした画面を設計

まずは、タッチデバイスを中心にした画面設計を行いましょう。なぜなら、パソコン用のサイトではクリックで操作しますが、スマートフォン向けのサイトは「タップ」「スワイプ」操作が主流になるためです。

 

たとえばパソコン用サイトのグローバルナビゲーションの多くは、上部に配置されます。しかし、これをスマートフォン向けに採用するのはNG。

 

片手でスマートフォンを持つ際には親指で操作するため、グローバルナビゲーションが上部にあると、親指が届きにくくなってしまいます。したがってスマートフォンのグローバルナビゲーションは、なるべく下部に設置すると良いでしょう。

 

また親指の操作はスマートフォン画面の「隅」「側面」に到達しにくいため、重要なリンクボタンは画面中央に設置するのもおすすめです。

 

2.ブレークポイントを正しく決める

次に、ブレークポイントを正しく決めましょう。前述したようにブレークポイントとは、メディアクエリを使用する際に使用する要素のこと。“レイアウトをどの横幅サイズで切り替えるか”というポイントを表します。

 

当ポイントの選定を誤らないためにも、まずは一般的な画面サイズを理解しましょう。

 

レスポンシブデザインの正しい作り方【便利なテンプレートサイトも紹介】 | 月額定額制（サブスク）ホームページ制作 | ビズサイ (webdeki.com)

 

さらに「レイアウトの最適化にこだわりたい」という場合は、上記の画面サイズを参考に、ブレークポイントを追加すると良いでしょう。

 

3.テキストの量や改行を見直す

テキストの量や改行を見直すことも欠かせません。パソコン上では「ちょうど良い」と思われる文章量でもスマートフォン上では長文になり、読みにくくなることが多いです。そのため内容を見直し、あまりにも量が多ければ「削除する」「ページを分ける」などの工夫をしましょう。また改行の位置も、スマホの表示を考慮して入れることが大切です。

 

SEOと文字数の関係性について知りたい方は、こちらをご覧ください。

 

まとめ

この記事ではレスポンシブWebデザインの作り方を詳しくご紹介しました。メリット・デメリットも解説しましたが、いかがでしたか？

 

レスポンシブWebデザインは、ホームページ管理の簡略化やSEO対策に効果的です。ただしサイト作成時に、デバイスごとの特性を考慮しなければなりません。加えて設計が複雑になったり、表現にも多少制限がかかったりする点には注意が必要でしょう。

 

また成功させるためには「タッチデバイスを中心にした画面設計」「ブレークポイントを正しく決める」などの専門的なノウハウが欠かせません。そのためレスポンシブWebデザインに関してお困りの方は、一度制作会社へ相談してみると良いでしょう。