レスポンシブデザインの現実と課題
レスポンシブデザインとは
最初に、レスポンシブデザインについて簡単にお話ししておきましょう。
レスポンシブデザインとは、サイトを閲覧したデバイスによって、ページのレイアウトを自動で調整する技術のことです。デバイスごとにHTMLを分ける必要がないため、導入することでさまざまなメリットが得られます。
メリット
SEOに強い。Googleもサイトの構築手法として「レスポンシブWebデザイン」を推奨している。
1つのHTMLファイルで様々なデバイスに対応するので、更新作業が楽になる。
将来的に現れるであろう様々な端末にも対応しやすくなる。
デメリット
リニューアルをする場合はこれまでの設計との兼ね合いについて考慮する必要がある。状況によっては、サイトを改修するよりも、新規にサイト制作をした方が時間がかからないケースもある。
構造によっては、ソース量が増え、読み込みに時間がかかることがある。
コンテンツの出し分けが苦手。例えば、スマホだけ表示したい内容がある場合は、CSSやJAVAスクリプトなどを利用して工夫することが必要になる。
GoogleとレスポンシブWebデザイン
2015年6月時点でGoo
gle Developersで発表している内容を抜粋します。
URL が 1 つなので
、ユーザーがコンテンツを簡単に共有したりリンクしたりできます。SNSなどのシェアに強くなります。
対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
同じコンテンツのページをいくつも維持管理する手間が省けます。
モバイルサイトのよくあるミスが発生する可能性を抑えることができます。
ユーザーのデバイスに応じて最適なページにリダイレクトする必要がないため、読み込み時間を短縮できます。
Googlebot がサイトをクロー
ルするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントがすべてのバージョンを複数回クロールする必要がありますが、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot がページを一度クロールするだけで済みます。Google によるクロールの効率が上がることで、サイト内のより多くのコンテンツがインデックス登録され、適切なタイミングで更新されるようになります。
レスポンシブデザインの現実と課題
残念ながら標準のレスポンシブWEBデザインはCSS3で対応するため、IE8以下では対応していません。
レスポンシブWebデザインに対応したECショップは普及しつつありますが、ショッピングカート部分がレスポンシブに対応しているサイトはまだまだ限られています。
スマホ・タブレットを合わせて500種類以上ものデバイス数があると言われています。それだけたくさんのデバイスごとに細かい配慮をすることが難しいですから、お客様とどこまでレスポンシブの範囲にするのかを十分話し合う必要があります。特に新しい解像度のデバイスが登場するたびに、標準規格が変更され、サイト全体の仕組みを変更しなければならない可能性があります。
次回は「SEO対策について」です。
Webサイトつくり隊公式サイト
Follow me!
