2016年1月1日

貴方は今、この画面をどのデバイスで見ていますか？

半分以上の方がiPhoneやスマートフォンのはずです。残りの3割がPC、1割程度がタブレットだと言われています。

一口にiPhoneやスマートフォンといっても、画面の大きさはバラバラです。それだけの多様なデバイスでエラーなく表示されないように、webサイトも進化を続けてきました。今回の【レスポンシブ】も、それに絡む話です。

レスポンシブとは

responsive(レスポンシブ)とは、英語で『反応が良いこと』『感じやすいこと』という意味です。

これをwebの世界では、『見やすく最適な表示』という意味で用いています。『見やすいwebデザイン』であればレスポンシブwebデザイン、『見やすい画面にする対応そのもの』はレスポンシブ対応、といった具体です。

レスポンシブwebデザインのこと

webの世界で一般的に『レスポンシブ』と言えば、『レスポンシブwebデザイン』のことを指します。

前述したように、世界にはPC以外にもスマホやタブレットなど様々なツールがあり、それぞれの画面の大きさはバラバラです。どんな画面の大きさであっても柔軟に対応して、正しく表示させる必要があります。

そして、見やすく調整されたwebデザインのことを『レスポンシブwebデザイン』と呼ぶのです。

ユーザーが使うデバイスに関係なく表示する

一昔前までは、PC用とスマホ(携帯電話)用に別々のサイトとデータを用意するのが一般的な事でした。今でも、PCとスマホの画面でURLが違うサイトを見かけることがあります。

これは、PCとスマホ用で、別々のwebサイトを用意しているということです。URLの数が増えるほど、違うデータを用意するという手間が発生します。

レスポンシブ対応をしているwebサイトであれば、1つのURLとデータがあれば事足ります。画面の大きさを切り替えてみても、レイアウトを崩すことが無いからです。

見やすさを追求することでユーザーの利便性を上げ、Googleからの評価を上げるのが大きな目的です。

レスポンシブとは｜メリット

レスポンシブを利用することで、使用するURL、HTMLなどのデータが1つで完結します。そのため、公開後のメンテナンスの工数も減ることが期待できます。

1つのデザインがあればいいことから、「スマホ用に新しいデザインを用意する」という手間もかかりません。

更に、Googleがレスポンシブデザインを推奨しているため、適切に導入することで検索順位をアップさせる効果もあります。

レスポンシブとは｜デメリット

ただし、絶対に必要な仕事なのかというと、決してそうではありません。PCとスマホでは、利用シーンが異なることがあるからです。

また、公開後の工数は減る分、公開前は念入りな仕事が必要になります。公開前の仕事を前倒ししているイメージなので、どうしても初期の作業が多くなります。

さらに、今の規格とは異なるデバイスが新たに登場した時が問題です。既存のレスポンシブ対応では新しい規格に対応できないため、サイト全体の規格を見直して再度のレスポンシブ対応を行う必要があります。

まとめ｜レスポンシブとは

今回は、『レスポンシブ』という言葉の語源とwebでの使い方、メリットとデメリットを紹介しました。

Googleが導入を推奨していることからも、今後は更なる広がりを見せると予想されるのが「レスポンシブ」です。今のうちから基礎を勉強しておけば、webサイト制作の仕事を請け負う時に必ず役に立ちます。

また、レスポンシブは新しいデバイスの登場によって標準規格が変更される『ナマモノ』の技術です。常に最新の情報を入手して、クライアントの要望に応えるようにしていきましょう。