BUSINESS TIPSビジネスに役立つ情報がきっと見つかる

  • モバイル・スマートフォン
  • iPhone対応サイト構築

Webサイトのレスポンシブ対応を行うべき理由と依頼時の注意点

Webサービスの利用や検索など、スマホで閲覧するユーザーが増加しています。
その中で求められているのが、スマホとPC等どの媒体でも快適に使えるサイトデザインです。ここでは、今さら聞けないレスポンシブ対応のメリットと対応方法をご紹介します。

目次

Webサイトのレスポンシブ対応でお困りではありませんか?
一括見積依頼案件のご相談発注先探しならリカイゼンへ!

無料で相談する

リカイゼンは、仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ
総合ビジネスマッチングプラットフォームです。
より詳細はこちら

レスポンシブ対応とは?

レスポンシブ対応とは、画面に合わせWebサイトのデザインが最適化されることです。PCだけではなくスマホなどのデバイスに合わせ、画面の表示形式やデザインが変更となります。

レスポンシブ対応が必要な理由①「ユーザビリティ」の問題

レスポンシブ対応になっているサイトではユーザーにとってどんなメリットがあるのでしょうか。
大きなポイントとして、1つのURLになったことにより、ページのシェア・リンクがしやすくなりました。例えば、PCサイトが友人からシェアされたとき。レスポンシブ未対応だと、スマートフォンで閲覧しようとすると、リダイレクトされる時間がかかりユーザーの離脱につながります。しかし、レスボンシブ対応だと、同一のURLでスマートフォン用に最適化されるのでページからの離脱を防ぐことが出来るのです。

レスポンシブ対応が必要な理由②「SEO」対策で重要に!

レスポンシブ対応が必要な理由として、最近重要度が高まったのが「SEO対策」です。PC向けサイトは、モバイル端末では見づらくて使いにくいことがあります。現在、インターネットの利用ユーザーの多くがスマホからであることからも、レスポンシブ対応はほぼ必須となっています。レスポンシブ対応が言葉として登場し、一般に広まり始めたのは2011年の年末頃からです。Googleも「モバイルフレンドリーアップデート」として2015年4月から検索結果の表示順位の要因の一つとして取り入れることを発表し、2018年7月にはモバイル端末での表示速度をアルゴリズムに追加することを発表しました。

レスポンシブ対応を行うことで、モバイルフレンドリー(スマホ対応)となることはもちろんですが、URLをパソコン用とモバイル用に分ける必要がなくなります。1つのページを1つのURLで管理することが出来ます。URLが1つなので、ユーザーの利用環境に左右されずTwitterやFacebookでも同一のURLとなります。例えば、PCとモバイルでURLが区別されている場合(https://example.com/pcとhttps://example.com/mobile)、意図しないURLがシェアされてしまい、評価も2分されてしまう恐れがあります。もちろんサイト運営側で、OGP(Open Graph protocol)を適切に設定することで対応することも可能です。しかし、同じコンテンツのページをいくつも管理する工数を考えると、やはり単一のURLで管理が可能なレスポンシブ対応がおすすめです。

また、レスポンシブ対応されていないサイトでよくある問題が、PC向けサイトとスマートフォン向けサイトをユーザーの端末に応じてリダイレクトする処理です。多くはユーザーエージェントと呼ばれる識別子をもとにリダイレクト処理を行うのですが、新しい端末やブラウザが登場するたびに対応が必要になるため、対応までの間エラーが発生しやすいこと、またそのエラーがユーザーエクスペリエンス(UX)に悪いこともあり注意したいポイントです。

Webサイトのレスポンシブ対応での注意点

【1】複雑なCSSデザインによるコストがかかる

レスポンシブデザインは、1つのHTMLとCSSを使って、デザインのレイアウトを変えています。この複雑なレイアウト変更を表示させるには一定の技術が求められてきます。

【2】 転送データが重くなる表示が遅くなる場合も

スマートフォンのサイトは画面の大きさ上、PCサイトよりも情報量が少ないことが一般的です。しかし、レスポンシブの場合だと、スマートフォンサイトでもPCサイトと同じ情報量をフルで読み込むため、データ量が重くなってしまうことがあります。

【3】デザイン・レイアウトに制約がかかる

レスポンシブサイトでは、PCサイトでのデザインとスマートフォンサイトのデザインの折衷案が採用されることが多いです。その際、複雑なデザインは表示サイズによっては崩れてしまう場合があります。また、レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるため、始めのデザイン構成力が非常に求められます。

外注する際のポイント

まずは制作会社とやり取りを円滑にすすめるために、下記の情報を予め用意しておくことをおすすめします。

確認用端末(デバイス)を設定する

昨今、ユーザーが利用するデバイスはiPhoneやAndroidなどのスマートフォンや、iPadやHuawei MediaPadなどのタブレットなど非常に多くの機種が存在します。画面の大きさも違えば、解像度も異なります。例えば、Retinaディスプレイは通常のPCに比べ解像度が非常に高いです。
これらすべての機種に対応できることがベストですが、現実的ではありません。実際レスポンシブ対応を行う際は、「iPhone 5s/5c以降で表示を確認する」「タブレットはiPad(第5世代)での表示を確認する」という形で検証する端末を最初に設定した上で構築していきます。

ユーザーのデバイス毎のデータを確認する

対象サイトの閲覧ユーザーが、どのデバイスを使用しているか確認し、対応端末を設定を決めます。既存のPCサイトをレスポンシブ対応にする場合は、Googleアナリティクスなどの分析ツールで確認することができます。
デバイス別のデータが表示され、デスクトップ、モバイル、タブレットどのデバイスでのアクセスが多いのかをひと目で確認することができます。極端な話ですが、例えばタブレットを利用しているユーザーの比率が低い場合、タブレット対応のために時間を費やすより、その時間をコンテンツ制作やデザイン、情報設計に充てるほうが有意義だと判断することができます。

レスポンシブ対応の方法

サイトを新たに作るタイミングでPCとモバイル端末向けで開発することが理想的ですが、既存サイトのデザインを引き継いで、レスポンシブ対応させることも可能です。既存サイトがPC画面を想定して作られている場合、PC画面の見え方とスマホやタブレット画面での見え方では、ユーザーからの印象が異なります。それぞれの画面のサイズに応じて、ブレイクポイント(どの画面サイズ用のデザインを適用させるかの切り替え点)を設け、制作を行います。

レスポンシブ対応Webサイトの外注先とは

いまや、多くのWEB制作会社がレスポンシブ対応での制作は行っています。しかし、単にレスポンシブ化させるだけでなく、各デバイスに応じてユーザーの利用シーンに適したデザイン設計ができる会社は貴重です。
デバイスに応じて画面の大きさ、解像度は異なりますので、どのような情報をどのような順で表示させるか、どのような文字の大きさ、画像の大きさ、ボタンの大きさを用意するかなど、デバイスごとのデザイン設計に強い企業に依頼することがおすすめです。

【迷ったらチェック】モバイルフレンドリーなサイトか確認しよう

レスポンシブ化を考えているが、自社のサイトにどの程度必要かが分からないとどうしても後回しになってしまいます。適切な判断をする材料として、モバイルフレンドリーテストを行うとよいでしょう。モバイルフレンドリーテストとは、Googleが提供するテストツールです。特に「SEO対策」としてレスポンシブ対応を行う際には、モバイルフレンドリーテストを行うことで自社サイトの対応状況を視覚的に確認することが出来ます。

▷モバイル フレンドリー テスト - Google Search Console
https://search.google.com/test/mobile-friendly

対象サイトのURLを入力すると、自動でそのサイトがモバイルフレンドリーか否かを判定してくれます。例えば制作を外注した際に、制作会社との目標共有としてテスト結果をひとつのKPIとしてもよいでしょう。

iPhone対応サイト構築でお困りではありませんか?

仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ総合ビジネスマッチングプラットフォーム。
それがリカイゼンです。

無料で相談する

iPhone対応サイト構築の関連記事

お客さんに届くWEBサイトをお望みなら ポイントは〝モバイルファースト〟

WEBサイトの閲覧はモバイルが8割以上PCサイトのデザインに力を入れても無意味!?どれだけデザインにこだわって、見た目がキレイなWEBサイトが出来たとしても、効果が上がらなければ役割はまったく果たせていませんよね?WEBサイ...

やりすぎないWEBサイトのススメ

デザインで見受けられる、目的と手段のミスマッチ   コンビニに行くのに、スーツに着替える人はあまりいないと思います。肉じゃがを作るのに、A5ランクの牛肉を買ってくる人もあまりいないでしょう。ところが、特に広告に関しては、目的...

Webサイトのレスポンシブ対応を行うべき理由と依頼時の注意点

Webサービスの利用や検索など、スマホで閲覧するユーザーが増加しています。 その中で求められているのが、スマホとPC等どの媒体でも快適に使えるサイトデザインです。ここでは、今さら聞けないレスポンシブ対応のメリットと対応...

【これって誰に何て聞けばいいの?】言葉にならないお客様の「困った」を見つけ出す方法

お客様の「困った」を読み解く方法 専門分野でないことは、何を伝えればいいのか、どのように話せば自分たちのやりたいことが実現してもらえるのか、言葉にすることが難しいと感じたことはないでしょうか。 弊社は千葉・船橋を拠点に、地域...

iOSにもいよいよ対応。WEBサイトを制作する際にAMP対応が見逃せない!!

アメリカのサンフランシスコで開催されているGoogleの開発者向けイベント「Google I/O 2016」でAMP(Accelerated Mobile Pages)の新情報が発表されました。 AMPとは? AMPとは、米...

iPhone対応サイト構築に関連する記事を見る

記事を探す

キーワードで探す

カテゴリーで探す

無料¥0

業者の選定や案件について、お気軽にコンシェルジュにご相談ください。