レスポンシブデザインとは？実装するメリット・デメリット、ECサイトでのコツを解説

作業工数が減るため管理・更新などのメンテナンスがラク

レスポンシブデザインを採用すると、同一のHTMLであらゆるデバイスサイズに対応できます。
一般的にウェブサイトのレイアウトを変更するにはHTMLやCSSを編集する必要があり、PCとモバイルでそれぞれデザインを制作する場合は、別のURLで運用します。しかし、そうするとふたつのウェブサイトが存在するため、管理や更新の際にはそれぞれ対応が必要です。
一方、レスポンシブデザインはURLとHTMLを統一して、管理や更新の手間を削減できます。

PC・スマホなどデバイスが違ってもデザインに一貫性がもてる

レスポンシブデザインは、同一のデザインをもとに、レイアウトを調整するものです。あくまでもデザインは同じものを使用しているため、PCとモバイルでデザインに一貫性が生まれます。
デザインの一貫性はブランディングにおいて非常に重要です。ユーザーに対してブランドのイメージを伝えるとともに、デバイスによってぶれないユーザー体験を提供するうえでも効果を発揮するでしょう。

URLが統一されSEOに有利になる

PCとモバイルでレイアウトを整える方法として、それぞれ別のURLを設けて、適したデザインを組む方法もあります。しかし、この方法だとGoogleのアルゴリズム上、異なるウェブページとして認識されます。同じ情報が掲載されているページのURLを分けると、ページに対する評価も分散してしまうため、好ましくありません。
レスポンシブデザインのウェブサイトは、一つのURLでどんなデバイスにも対応できます。ページに対する評価も統一されるため、SEOにおいてもメリットのある方法です。

制作前に慎重な設計が必要になる

レスポンシブデザインの制作には、一定の技術と知見が求められます。あらゆるデバイスに対して一つのデザインで対応しますが、デバイスの選択肢が増えるとユーザーの操作環境も多様化します。つまり、どんなシーンで、どんなデバイスを利用していても、操作性に長けたデザインを検討することが大切です。レイアウトを自動的に調整できるからこそ、慎重に設計しなければいけません。

スマホでの読み込みが遅くなる

スマートフォンでレスポンシブデザインのウェブサイトを開く際、モバイル版の表示には不要なHTMLも読み込んでしまいます。PCとモバイルでそれぞれウェブサイトを制作する場合は、不要なコードを削除できますが、同一のHTMLを用いるレスポンシブデザインでは削除できません。
不要なHTMLを読み込むと、その分ウェブページの表示速度が遅くなります。表示速度の遅いウェブサイトはSEO評価を下げられやすい可能性があるうえ、離脱率が高くなりやすい点もデメリットです。

デバイスごとの細かいデザイン変更ができない

レスポンシブデザインは、あらゆるデバイスに対応できるコーディングを心がける必要があります。しかし、新たなデバイスが登場すると、標準の規格が変わってしまうケースは少なくありません。たとえば、解像度やアスペクト比が変わるのはよくあるケースです。
デバイスごとにウェブサイトを設けている場合、新たなデバイスに対応するサイトのみを変更すれば問題ありませんが、レスポンシブデザインでは対応すべきデバイスの種類が増えます。

可変することを意識してデザインする

レスポンシブデザインでは、デバイスのサイズに合わせて幅を調整して、レイアウトを最適化します。つまり、文章や画像などの要素はそのまま、画面表示の幅や高さが変更されるわけです。
たとえば、PCでは読みやすくても、スマートフォンで見ると文字が小さくて読みづらかったり、ページが縦に長すぎて読みにくかったりするケースもあります。デバイスによって表示が変わることを念頭に置いて設計すべきです。

画像ファイルは圧縮して小さくする

前述のとおり、レスポンシブデザインは、モバイル版の表示に不要なコードを読み込んでしまい、スマートフォンで表示が遅くなりやすい弱点があります。そこで意識すべきポイントが画像ファイルの容量です。重い画像を配置していると、ウェブサイトの表示速度がさらに遅くなりやすくなってしまいます。画像を圧縮して小さくするだけでも、サイトスピードの改善を図れるでしょう。

テキスト量や改行など文章回りの見直しが必要

PC、モバイルのどちらでも見やすいよう、テキスト量や改行にも気をつける必要があります。一般的にウェブサイトの設計はPCでおこないますが、設計後はかならずスマートフォンでチェックすることをおすすめします。実際にユーザーが利用しているデバイスで表示を確認すると、改善すべきポイントを見つけやすくなるでしょう。

1．meta viewportタグを設置する

meta viewportタグを設置する目的は、以下の2点です。

1. ユーザーのデバイス情報の取得
2. デバイス情報にもとづく画面サイズの判定

meta viewportタグを設置する場所は、HTMLファイルとWordPressの場合で異なります。HTMLファイルは「すべてのHTMLファイルのヘッダー部分」、WordPressは「header.php」の部分に記述します。記述するコードは、以下のとおりです。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

メディアクエリを設置する目的は、デバイスに応じた表示レイアウトの切り替えです。PCとモバイルでそれぞれ設定する必要があるため、2種類のコードを記述します。記述するコードは、以下のとおりです。

• PC：@media screen and (min-width: 481px)　{ }
• モバイル：@media screen and (max-width: 480px)　{ }

上記のソースコードは、画面サイズが480pxを超える場合はPC用の表示、480px以下の場合はモバイル用の表示を出しわける記述です。いずれも{ }内に通常のCSSを記述します。

サイト構造に気をつけなければ売上が下がる可能性も

レスポンシブデザインでは、PCもスマートフォンも同じ階層構造をもったウェブサイトになります。しかし、ECサイトの場合、ユーザーが商品を購入するまでのフローに注意すべきです。基本的にECサイトは、購入までのタップ数を減らしたほうがコンバージョン率も高くなります。
PC版をメインに考えると、階層構造が深くなりやすいのですが、階層構造が深くなると購入までのタップ数は増加します。モバイル版のユーザーが離脱しない程度の階層構造にとどめることがポイントです。

スマホサイトではボリュームのあるテキストは邪魔になる可能性がある

スマートフォンでは、PCよりも表示面積が限られるため、ボリュームのあるテキストは邪魔になる可能性があります。とくにECサイトの場合、主役となるのは商品です。長いテキストで視認性を下げるのではなく、商品の画像やイラストによって直感的にイメージできるようにすべきでしょう。

PCとの共通デザインでは融通が利きにくい場合がある

PCとモバイルのデザインを共通にすると、デザイン面の自由度は下がります。レスポンシブデザインはレイアウトを最適化できますが、基本的なコンテンツの要素は変えられません。それぞれのユーザーに対する表示を出しわけるうえで、融通がききにくい面もあります。そのため、アナリティクスなどでユーザーの割合をチェックしつつ、ときにはメインターゲットとなるデバイスを優先してデザインを制作することも大切です。

無料ホームページテンプレート

無料ホームページテンプレート.comは、商用利用可能なデザインテンプレートを掲載しているウェブサイトです。HTMLファイルとWordPressの双方に対応しているため、どちらを利用しているユーザーにとっても参考になるでしょう。

HTML5 UP

HTML5 UPは、HTML5準拠のデザインテンプレートを掲載しているウェブサイトです。著作権者情報を記載すれば、改変や商用利用もできるため、ビジネスにおいても役立つでしょう。ライブデモが公開されており、表示を確認できる点もうれしいポイントです。

Start Bootstrap

Start Bootstrapは、Bootstrapの使用を前提としたデザインテンプレートを掲載しているウェブサイトです。Bootstrapは、さまざまなデザインパーツを備えたCSSフレームワークです。あらゆるパーツがそろっているため、サイトデザインに大きく役立つでしょう。

TEMPLATE PARTY

TEMPLATE PARTYは、1,000以上のデザインテンプレートを掲載しているウェブサイトです。HTMLとCSSで構成されたテンプレートのほか、テンプレートとCMSがセットになったプログラムも利用できます。

Free CSS

Free CSSは、約3,000種類のデザインテンプレートを掲載しているウェブサイトです。ユーザー登録をせず、ダウンロードできる点も魅力的ですが、テンプレートによってライセンスの内容が異なる点には注意が必要です。