2016年1月1日

パソコン、スマホ、タブレットなど、インターネットを通じてweb画面を表示できるデバイスは多岐に渡ります。表示されるレイアウトが崩れないように、さまざまな製品で正しく表示させるための方法が【レスポンシブ対応】です。

修正・再制作の手間を省くためになくてはならない作業ですが、具体的にどのように進めていくのか気になる人も多いでしょう。

今回は、レスポンシブ対応の概要と実際の対応方法について紹介します。

レスポンシブ対応とは

レスポンシブ対応のことを理解するためには、まず【レスポンシブwebデザイン】について解説します。レスポンシブwebデザインとは、PCやスマートフォン、iPhoneなどのツールごとに違う画面のサイズに対応して、見やすく表示をさせるデザインを指します。つまりレスポンシブwebデザインとは【画面表示の適正化】のことを指します。

レスポンシブ対応のメリット・デメリット

web製作においては絶対に必要な知識であることは間違いありません。ただし、やみくもに対応ばかりしても良いことばかりではありません。レスポンシブ対応にも、メリット・デメリットがあります。

ここでは、レスポンシブ対応の良いところ、注意すべきところを解説していきます。

メリット

大きなメリットとしては、やはり【検索順位が上がりやすい】ということでしょう。Googleは、検索結果の上位に表示させる条件の1つとして【ユーザーの利便性が高い】ことを審査しているからです。

現代ではPCでwebを閲覧するよりも、iPhoneやスマートフォンで閲覧することが圧倒的に多いです。どの手段でも綺麗に表示できていることは、ユーザーの利便性が高いことを表しています。

また、レスポンシブ対応では1つのファイルがあればPC・スマートフォン・iPhone・タブレットと、それぞれの画面表示が可能です。複数のサイトを用意する必要もないことから、管理の手間もかからないというメリットもあります。

デメリット

スマートフォンやiPhoneの画面と、PCの画面では、どちらが自由度が高いでしょうか？答えは、もちろんPCです。画面が大きい方がデザインは自由に行えます。ただし、レスポンシブ対応する以上は、スマートフォンやiPhoneを基準にしてwebサイトを作成する必要があります。そのため、どうしてもシンプルなデザインになりがちです。

また、1つのファイルで良いとは言っても、それぞれ、どのような形で表示させるかは綿密に計算してサイトを作らなければいけません。PCのみに絞って作成する時に比べ、どうしても作業の手間がかかるのは仕方ありません。

レスポンシブ対応の確認方法

レスポンシブ対応が成功しているのかどうかは、作成したwebサイトがスマートフォンやiPhoneの画面に上手に対応しているかが重要です。これを【モバイルフレンドリー】と言います。webサイトがモバイルフレンドリーであるかを調べる作業のことを【モバイルフレンドリーテスト】と言います。

モバイルフレンドリーテストの数値結果が悪い場合は、【スマートフォンで表示が見づらい】あるいは【モバイルのユーザーにとって不便】ということです。早急に改善しないと、検索結果に悪影響を与えることが懸念されます。

モバイルフレンドリーの度合いを調べる場合はGoogleなどで【モバイルフレンドリーテスト】で検索すれば専用ツールが検索できます。URLを入力してテストを開始するだけで、簡単にフレンドリー度合いを判断できます。

レスポンシブ対応の基本まとめ

今回は、レスポンシブ対応の基本的な概要を紹介しました。webを閲覧するためのツールがPCからスマートフォンなどへ変化している以上、この技術は必ず必要になるものです。

画面表示が崩れると、それだけでユーザーは別のwebサイトに飛んで行ってしまうでしょう。

レスポンシブ対応を理解し、滞留時間を延ばしてアクセス数増加を目指しましょう。