今更聞けないレスポンシブデザインと、エンゲージメントを高めるパララックスデザインとは？

ウェブデザインは常に進歩しており、ユーザーに合わせたウェブデザインが次々と生み出されています。ユーザーのスマートフォン所持率の変化によりニーズが高まったレスポンシブデザイン、インパクトを残しコンテンツを魅力的に見せるパララックスデザイン、どのような目的の方であればこの２つのウェブデザインがマッチするかをお伝えします。

1. パララックスデザインとは

パララックスデザインとはパララックス（直訳すると視差）効果を用いて、「ページをスクロールすることでコンテンツを動いているように見せる」ウェブデザインのことです。仕組みとしては複数のレイヤー（層）を用意し、それぞれを異なるスピードで動かすことにより視差を生み出し、奥行や立体感を生んだり、コンテンツが動いているかのように見せます。

例えば、大塚倉庫株式会社のウェブサイトでは、スクロールすることでフォークリフトや雲が横に動いて見えたりします。パララックスデザインはユーザーからはとても魅力的なコンテンツに見えますが、メリット・デメリットがあります。活用するには両方を理解する必要があります。

パララックスデザインのメリット

• 動きをつけ、サイト訪問者を飽きさせない：スクロールする度に動いていく様なパララックスデザインは奥行きも出て魅力的になり、サイト訪問者が飽きることなくページを最後まで閲覧してもらえる可能性が高くなります。結果として、SEOに影響力を与えるページ滞在率へのプラスの効果がもたらせます。
• 主張したい文言・メッセージをより伝え易くなる：街中でチカチカ光る電光掲示板や企業PRが書かれたうちわ・旗をついつい見てしまった覚えはないですか？それは、人には動くものを見てしまう本能があるからです。
  自動車や自転車などにぶつかると怪我をするという認識があるため、無意識のうちに目で追っているはずです。「動くもの=自分に迫る危険がないか確認をする」ために目で追ってしまいます。
  それをWebデザインに応用することで、スクロールし横から出てくるテキストには注目度がアップします。より伝えたいメッセージや遷移して欲しいURLを配置することで、ウェブサイトで伝えたいことをよりよく伝えることが出来ます。
• LPO対策の一つとしても有効（かも）：例えばリスティング広告のサイトがパララックスデザインを使っていて、見ごたえのあるサイトだった場合、コンバージョン率の向上にも繋がる可能性があります（もちろん、きちんと情報の整理や、ペルソナを意識したSEOやライティングが必要になります。）

パララックスデザインのデメリット

• ページ読み込み速度に影響：あなたはウェブサイトを閲覧するのに、クリックしてから何秒待てますか？街中や自宅にWi-Fiの設備が整い通信環境が良くなった現代ではウェブサイトのページ読み込み速度はユーザーの離脱率に起因します。
  縦に長いパララックスデザインサイトは、1ページに多くの情報・動きをつけるため読み込むのに時間がかかります。またSEOの観点からもデメリットがあります。直帰率とSEOの2つの観点から、読み込み速度をアップさせる為の対策が必要です。
• 情報量が増え、見にくくなる：動きが豊富でリッチなサイトに見えるパララックスデザインですが動きやリッチ感にばかり気を取られてしまうと、ユーザーが不快になる危険があります。ユーザーは「求める情報を見やすく」閲覧したいと考えています。構成したサイトに無駄な情報の盛り込みすぎていないか？伝えたいことが何か分からなくなっていないか？を見直す必要があります。
•  制作コストが高騰する：”動き”と言っても、何千何万とある動きをどう表現するのか、サイト制作する側（デザイン/コーディング）とお客様とのイメージの共有が大切になります。その動きのイメージを共有していく作業にも工数がかかりますし、PCサイトとスマートフォンサイトでも挙動が異なってしまう可能性もあります。その為、デザイン・コーディングだけでなく、検証していく作業にも工数が大幅に上がります。
  
  

2. パララックスデザインが適する活用方法とその事例

上記のメリット・デメリットを踏まえた上で「ストーリー立てた内容」や「飛ばさず順番に見て欲しい内容」をユーザーに伝えたい場合、パララックスデザインはとても向いています。

例えば、生協ひろしまのウェブサイトでは「生協ってなんじゃろ？」という生協の仕組み・歴史について説明するページを設けています。ユーザーに理解してもらいやすいようにコンテンツを会話形式にしています。

通常のウェブサイトでは途中で別ページに遷移してしまったり、スクロールで飛ばされてしまう可能性がありますがパララックスデザインを用いることで順番にかつ魅力的にコンテンツを表現することができます。

このように「ストーリー立てた内容」や「飛ばさず順番に見て欲しい内容」を表現したい場合はパララックスデザインを検討してみてください。

3. レスポンシブデザインとは

現在はスマートフォンでのウェブサイト閲覧が当たり前の時代になっていますが、スマートフォンが普及し始めたばかりの頃は、小さい画面で表示されるPC用のウェブサイトがとても見づらく閲覧性が低い時期がありました。

解決策としてPC、スマートフォンのデバイスごとにHTMLファイルやCSSファイルで最適化したウェブページを作成・管理していましたが、複数のファイルを管理する手間がかかっていました。

そこで1つのファイルでそれぞれのデバイスに最適化する技術が生まれました。PC用・スマートフォン用・タブレット用など複数の異なる画面サイズに表示仕様を調整し、柔軟に対応させたウェブデザインのことを“レスポンシブデザイン”と言います。

「responsive(レスポンシブ)」を英訳すると、「反応する」という意味です。どんどん増えていく画面サイズに対応させる為に、ウェブサイトのデザインをそれぞれしっかり見やすく対応という考え方・デザイン手法の一つがレスポンシブデザインです。

横浜市立大学のウェブサイトはレスポンシブデザインを用いており、TOPページのTOPICSの箇所で違いを理解することができます。PC閲覧時には2つのコンテンツが横並びに見えますが、スマートフォン閲覧時では縦並びで表示されます。PCの画面とスマートフォンの画面それぞれに反応し表示仕様を最適化した結果、このように見えます。

（パソコンからの閲覧）

（スマホからの閲覧）

ユーザーの閲覧性を向上させるレスポンシブデザインですが、メリット、デメリットがあります。上手く活用するには両方を理解する必要があります。

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

• 視認性の向上：各デバイス向けに表示を最適化するため、ユーザーに情報を見やすく届けることが可能です。
• 画面サイズごとの対応不要：従来は複数端末用のファイルを制作・管理する必要がありましたが、一括管理が可能なため制作・運用面の負担が軽減されます。
• SEO対策への優位性：URLの統一によるドメインオーソリティーに対する影響、またGoogleの検索アルゴリズムがレスポンシブを優先するなどを考慮するとSEOへの優位性を持つことが可能です。

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

• ウェブサイトの制作・構築が複雑になり、費用が増加する可能性：複数のデザイスに対応させるため、設計時にはそれぞれのデバイスでどのように表示されるか？などを考える必要があり複雑になります。また工数がかかる分、一つのデバイス向けに作成したウェブサイトと比較すると費用が増加する可能性があります。
• 規格変更の可能性：複数の端末（画面サイズ）に対応する為、新しいデバイスが登場し標準規格等が変更された場合はウェブサイト全体の仕様を見直す必要があります。
  
  

4. レスポンシブデザインはSEOに影響を及ぼす

ここ1年ほどでレスポンシブデザインが注目を集めている理由は、SEO対策にも有効になったためです。2016年11月にGoogleがモバイル ファースト インデックスに向けたアルゴリズムの改訂をすすめ始めました。

内容は今までは「PC向けのウェブサイトのコンテンツ」を評価しページのランキングを決定していましたが、これからは「スマートフォン向けのウェブサイトのコンテンツ」を評価しページのランキングを決定するというものです。背景としてはスマートフォンで検索するユーザーが増えたことです。

PC向けウェブサイトのコンテンツは充実しているが、スマートフォン向けサイトではコンテンツを精査するウェブサイトが多々ありました。そうするとユーザーとしては上位表示されたウェブサイトを閲覧しても、スマートフォン向けウェブサイトを閲覧するためコンテンツが充実していないことが多発しユーザー満足度が落ちていました。

この問題を解決するためにスマートフォン向けサイトの充実化が必須となりました。

また、別々のURLや動的な配信でも良いとGoogleはしていましたが、最近ではPC向けサイトとスマートフォン向けサイトのコンテンツの差異を理由に、レスポンシブデザインを推奨しています。そのため「ユーザーの閲覧性向上」と「SEO対策」の2つの観点から、現代のウェブサイトではレスポンシブデザインが必須となっています。

5. 自社ウェブサイトをチェック

自社ウェブサイトがGoogleの検索アルゴリズムからどのような評価を受けているかを調べてみましょう。用いるサービスとしては２つあり、「モバイル フレンドリー テスト」と「WEBSITE GRADER」です。

モバイル フレンドリー テストの「テストするURLを入力」の欄に自社ウェブサイトのURLを入力し、「テストを実行」をクリックしてください。

モバイル対応していると判断された場合は「このページはモバイルフレンドリーです」と表示され、未対応と判断された場合は「このページはモバイルフレンドリーではありません」と表示されます。

ハブスポットのWEBSITE GRADERではパフォーマンス、モバイル対応、SEO、セキュリティの評価とアドバイスを得ることができます。下記「ウェブサイト」の欄に、調べたいウェブサイトのURLを入力し「答えを確認」をクリックします。

4つの項目から算出した、総合評価が提示されます。各項目の点数も見ることができるため、「どこが課題か」がひと目で把握することが可能です。

ここからそれぞれの詳細を見ることができます。パフォーマンスではページサイズ、ページリクエスト、ページ速度の３項目から構成されます。それぞれの点数とアドバイスが表示されます。

モバイルではスマートフォン対応になっているかを中心に評価されます。SEOはページタイトル、メタディスクリプション、見出し、サイトマップから構成され評価されます。

まとめ

今後「ユーザーの閲覧性向上」と「SEO対策」の2つの観点からレスポンシブデザインの必要性は増していきます。ウェブマーケティングに注力していく意向がある方は、すぐにモバイル対応を行うことをおすすめします。

また、こちらの無料テンプレートでは、ウェブサイトリニューアルの際に抑えるべきポイントをまとめています。ウェブサイトリニューアルなどをご検討中の方はぜひご利用ください。