売上をアップさせるWeb制作・ホームページ制作が得意です。

Service サービス

レスポンシブWebデザイン

レスポンシブWebデザインで今後に備える
次々と開発される様々なデバイスに合わせたコンテンツを1つのHTMLで作成

Googleが推奨するWeb制作の手法

レスポンシブWebデザインは、Googleがもっとも推奨するWeb制作の方法の1つです。今までのWeb制作の方法は、PCサイト(タブレット用サイト)、スマートフォンサイトが異なる複数のHTMLで作成されていましたが、レスポンシブWebデザインは1つのHTMLで作成します。そのため、PCサイト、スマートフォンサイトの重複コンテンツのリスク、スマートフォンサイトからのリダイレクト設定によるペナルティなど、SEOに関するデメリットが軽減されます。

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

メリット

大きなメリットは、サイト更新・管理の手間が少ないことです。 ページをワンソースで作るため、今までのようにPCはPCは用、スマートフォンはスマートフォン用、タブレットはタブレット用というように端末ごとの画面サイズに合わせて制作する必要がなく、それぞれに適したサイトを自動的に表示させることが可能です。
また、ワンソースでサイト構築することにより、1つのHTMLを更新するだけで複数のコンテンツを一括更新できるため、運用コストも軽減可能です。 さらに、上記にもある通りGoogleが推奨しているため、SEOにも有効と言われています。

デメリット

1つのHTMLで作成するため、HTML・CSSが一般的なサイトよりも複雑になります。デザインもブラウザの横幅ごとにレイアウトが変わるため、それを踏まえてデザインしなければいけません。 また、PCやスマートフォン、タブレットの各デバイスに合わせて画像の切り替えを行っているため、読み込みに時間がかかり、特にスマートフォンサイトでは、表示速度に影響が出る可能性があります。 また、Internet Explorer8以下の場合は、Webサイトのレイアウトが崩れたり、表示されない場合もあります。

アダプティブWebデザインとの違いについて

アダプティブWebデザインとは、レスポンシブWebデザインとよく似ているのですが、PCやスマートフォン、タブレットの表示に合わせたHTML・CSSを「複数」用意するWebデザインを指します。HTMLを1つにまとめるレスポンシブWebデザインに対して、デバイス毎に用意するところが大きな違いです。

レスポンシブWebデザインは、1つのHTMLで作成されているので更新は簡単ですが、各デバイスを考慮して作る必要があるため、デザインレイアウトにある程度の制限がかかります。

一方で、アダプティブWebデザインは、それぞれのHTMLで作成するため、レイアウトの制限を気にせずにデザインすることができ、レスポンシブWebデザインより自由度が高いのです。しかし、ソースが複数あるため、更新する手間はその数だけ増えます。これは更新漏れや作業工数に大きく関わるため、運用側にとっては負担になる可能性もあります。

今後開発されるデバイスにも柔軟に対応

多くの種類のデバイスが開発されており、今後も様々なサイズのデバイスが発売されることが予想されます。レスポンシブWebデザインで作成すると、それらのデバイスに合わせて柔軟にコンテンツを調整することができます。大きくPC、タブレット、スマートフォンで横幅の定義(ブレイクポイント)を作成し、更に縦向き、横向きに合わせて設定します。

新デバイスにも対応しやすい

関連サービス

text_totop