C-room | design | 今さら聞けない、レスポンシブデザインって?

今さら聞けない、レスポンシブデザインって?

2019年03月06日

 


新英和中辞典での「responsive」の意味: すぐ応答する、敏感な


 

レスポンシブデザインとは、サイトを表示しているデバイスの画面サイズによって切り替わるWebデザインの一つです。一般にパソコンは横長、スマートフォンは縦長の画面ですね。その画面サイズに合わせてレイアウトが変わるデザインがレスポンシブデザインです。

今もしパソコンで閲覧されているなら、ブラウザの横幅を短くしたり長くしたりしてみてください。横長のときと縦長の時でレイアウトが変わるようなら、そのサイトはレスポンシブデザインでつくられているということです。

それまでは、パソコン用のページ、モバイル(スマートフォン)用のページ、とそれぞれサイズに合わせたHTMLページをつくっていました。しかしタブレットやスマートフォンは日々進化し、デバイスの解像度もどんどん変化し、それぞれに合わせたページを作ることには限界があります。

そこで、アクセスしたブラウザの幅に合わせてレイアウトが自動に最適化するレスポンシブデザインを採用するサイトが多くなりました。


 

レスポンシブデザインが必須となった背景

「うちはBtoBだから、パソコンサイトだけあれば十分!」という方がときどきいらっしゃいます。しかし、本当にそうでしょうか。

博報堂DYメディアパートナーズの「メディア定点調査」によると、インターネットへの接触デバイスは2014年にはスマートフォンがパソコンを上回っています。もちろん、この調査後もスマートフォン所有率は増え続け、皆さんもご存知のように、今や仕事でもスマートフォンでのインターネット利用が当たり前になってきています。BtoB企業であろうともモバイル対応されてないサイトでは、大きな機会損失につながる時代になっているのです。


多くのメリットがあるレスポンシブデザイン

サイトを見る人が見やすいという以外にもたくさんのメリットがあります。まずWebサイトのメンテナンス工程が大幅に軽減されるということ。当たり前ですが、パソコンサイトとモバイルサイトを別々に構築している場合と比べると、レスポンシブデザインは同じHTMLで構築されているため、ページの更新や修正などの管理が容易になります。今後新たな画面サイズのデバイスが登場したときにも対応可能となります。つぎに、更新時の人為的なミスが起こりにくくなります。パソコンサイト、スマートフォンサイトで情報が異なるといったことはレスポンシブデザインでは基本起こりません。

それだけでなく、SEOの観点からもレスポンシブデザインは大きなメリットがあります。スマートフォン用とパソコン用のURLが一つのため、各ページの被リンク(外部サイトからのリンク)が分散してしまって検索順位が下がる、ということがないためです。

 

レスポンシブデザインにデメリットはあるのか?

制作するときのデメリットとして、通常のサイトと比較して、コーディングの構築は複雑になります。また各デバイス、各ブラウザで見た場合などの検証も必要になるため、制作時間が長くなる傾向にあります。

また、制作会社に依頼する際にも注意が必要です。ユーザーが何のデバイスでアクセスしても見やすいように計算されたレイアウトデザインが組めるようになるにはノウハウが必要となります。

今あるパソコンサイトをつくり変える場合、解像度を変更するだけでは、レスポンシブデザインとはいえません。様々なデバイスに同じ内容を表示する必要があるため、レイアウトデザインは意識して設計する必要があります。

思わぬトラブルに巻き込まれないように、またきちんと活躍するサイトにするためにも、経験豊富な制作会社に依頼しましょう。

 

MFI(モバイルファーストインデックス)の影響

2016114日にGoogleが、MFI(モバイルファーストインデックス)を公式発表、そして2018327日より施策を開始しました。これにより、Googleの自然検索のランキングは、パソコンサイトではなく、スマートフォンサイトを評価軸にしてインデックスするという方針に変更しました。

Webサイトが、レスポンシブデザインで構築されていれば、パソコンサイトには有益なコンテンツがあるがスマートフォンサイトにはないなどといったことはあり得ないので影響はありませんが、パソコンサイトとスマートフォンサイトのコンテンツが異なる場合や、そもそもスマートフォンサイトが無い場合はトラフィックに大きな影響を及ぼします。もちろん、現状スマートフォンサイトに十分なコンテンツがあるなら、レスポンシブデザインに移行しなくても問題はありません。

 

これからWebサイトのリニューアルを検討されている方や、まだパソコンサイトしかお持ちでない企業は、今後もモバイル検索優勢の傾向は加速しますので、これを機にレスポンシブデザインに切り替えてはいかがでしょうか。とくに競合企業が未だレスポンシブデザインに対応してない場合は、大きなチャンスとなるかもしれません。

 

ライター:6ちゃんねる

 


デザイン