【レスポンシブデザイン基礎】レスポンシブデザインにすることで得られる3つの大きなメリット

こんにちは、WEBマーケティング事業部の難波です。

今回の記事では、レスポンシブWEBデザインの基礎的知識について述べて参ります。

はじめに

shutterstock_336919673

GoogleによるMFI(モバイルファーストインデックス)のアナウンスを受け、SEO(検索エンジン最適化)対策の観点からも、「レスポンシブWEBデザイン」が再度脚光を浴びています。

すでに多くのWEBサイトが適用済みで、「聞いたことがある」という方も増えてきている「レスポンシブWEBデザイン」ですが、言葉だけが先行している感も否めないように思います。

端末(デバイス)に合わせたサイト設計、レスポンシブWEBデザインの内容、その導入によるメリット・デメリット等を見ていきましょう。

デバイスに応じたWEBサイト設計

WEBサイトは、パソコン(PC)、スマートフォン(SP)、タブレットに代表される異なるデバイス)で閲覧されます。

一昔前であれば、PCのみに合わせてWEBサイト設計をすれば済みましたが、現在は各デバイスの画面サイズ等を十分に考慮する必要が有ります。

大きくは3つのパターンがあります。

①PCサイトとSPサイトを別に作成する(URL:2つ html:2つ)

shutterstock_366977921

PCサイトのURL:https://◯◯.co.jp/

SPサイトのURL:https://◯◯.co.jp/sp/

という場合が典型例です。

PCからSPサイトを閲覧したり、SPからPCサイトを閲覧した場合、デバイスに沿ったサイトが表示されるように、リダイレクト(転送)設定をかけるのが通常です。

Googleが重複コンテンツと判断されうるというデメリットがあり、SEO対策の観点からも、今ではGoogleが推奨していない制作方法とされております。

②ダイナミックサービング(URL:1つ html:2つ)

shutterstock_509411992

ユーザーが特定のURLにアクセスした場合、ユーザーのデバイスPCならPC向けWEBサイトを表示し、ユーザーのデバイスがSPならSP向けWEBサイトを動的に表示するというものです。

                                      PC :PC向けhtml

          URL:https://◯◯.co.jp/ 

                                      SP:SP向けhtml

表示されるURLが1つですので、ユーザーの混乱を回避できますし、Googleによって重複コンテンツと判断されるリスクも基本的にはありません。

PC向けWEBサイトとSP向けWEBサイトを別個のhtmlで作成しますので、レイアウト等のデザインを変更したり、応用できるというメリットもあります。

ただ、レスポンシブWEBデザインと比べて、1つの修正を2つのhtmlに加えなければならない等の運営コストがかかる(約1.5~2倍)というのがデメリットといえましょう。

③レスポンシブWEBデザイン(URL:1つ html:1つ)

shutterstock_287737622

利用するデバイスを問わず、同じ URL で同じ html コードを配信しますが、画面サイズに応じて、WEBサイトの表示を変更する手法です。

                                      PC                

       URL:https://◯◯.co.jp/          html

                                      SP                

「レスポンシブ(responsive)」とは、「反応が良いさま」といった意味を表す単語ですが、WEB業界ではそこから転じて、「デバイスに合わせて柔軟に対応する」といったニュアンスを帯びております。

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

Googleが最も推奨しているのが、レスポンシブWEBデザインといわれております。

それは下記のようにメリットが非常に大きいからです。

管理が容易である

shutterstock_259020914-1

共通のURL、htmlによって、デバイスを跨いでWEBサイトの管理ができるため、各種不具合対応やコンテンツの追加等が非常に容易で、運営コストも最小限に抑えることができます。

現場では、「PCでは不具合の修正の確認が取れたのですが、SPはまだ直っていないようです」という指摘が飛び交うことも珍しくないですが、こういう事態を回避しやすくなるというわけです。

カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズにされますので、デザイン修正等の観点でも、非常に有効な施策です。

利便性(ユーザビリティ)が向上する

shutterstock_183313541

ユーザーの中には、移動中などにスマートフォンでWEBサイトを発見し、帰宅後パソコンから改めて見直す、といった行動をする人も多く存在します。

デバイス間で大きくデザインやコンテンツが異なっていると、同一のWEBサイトと認識されず、ユーザーが直帰・離脱しやすくなります。

また、「SPサイトでさっき見たページ、PCサイトには載っていないのか」といった体験をユーザーがする機会も減少し、ユーザビリティ向上にも寄与します。

Googleのクロール対策に効果的

shutterstock_424331113

1つのサイトには、数十〜数百単位のページがあるのが通常であり、それぞれにhtmlの記述が含まれています。

上記①や②の手法をとると、レスポンシブWEBデザインに比べて、Googleは2倍の量のデータをすべてクロール(巡回)する必要が生じます。

Googleは機械だけではなく、人手を介してのWEBサイトチェックも行っておりますので、この違いは非常に大きいといえます。

公式には、Googleは検索順位には特に影響はないと発表しています。

しかし、適切な処理をしないために、重複コンテンツ、隠しテキスト等のマイナス評価を受けるリスクは残っておりますし、多くのWEBサイトがSP対応できていない現状を踏まえると、初めからレスポシンブWEBデザインでサイトを構築してしまった方が賢明と思われます。

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

スマホでのページ読み込みに時間がかかる

shutterstock_366750500

PCサイトとSPサイトが同一のhtmlで書かれているということは、「PCサイトの情報量をスマホで表示する」ということです。

近年、スマホのスペックは目覚しい速さで向上しておりますが、それでもPCにはまだ劣る部分があります。そのため、読み込み速度が遅くなり、ユーザーの直帰・離脱を招くというリスクが生じます。

レスポシンブWEBデザインを採用する場合、

・WEBサイトに掲載する情報を精査し、シンプルにする

・画像データを使用する場合、必ず圧縮などの手法で容量を軽減する

等の工夫が必要になります。

人員の確保が大変

shutterstock_420395281

レスポンシブWEBデザインは、高度な技術を要求される場面も多く、工数もかかるため、人員の確保が課題になります。

今後、そうした人員は増えていくと思われますが、他方で、レスポンシブWEBデザイン導入のWEBサイトも増えると予想されるため、状況に大きな変化はないでしょう。

不具合の発生等も見据えた、ハイレベルなコーダー、エンジニアとのチームワークが非常に重要になるのです。

まとめ

この記事では「レスポンシブWEBデザインの基礎的知識」について書かせていただきました。

レスポンシブWEBデザインが絶対に正しい、というわけでは決してなく、ダイナミックサービングに対するニーズが依然として高いことも事実です。

それぞれの内容をしっかり理解した上で、最適な方法を採用してください。

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です