レスポンシブWEBデザイン
レスポンシブWebデザインとは
レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、 あらゆるデバイスに最適化したサイトを、単一のHTMLで実現する制作手法です。 ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、 デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したサイトを制作できます。
物流のタカスエ様公式サイト・美崎栄一郎様公式サイト 近日公開!
レスポンシブWebデザインのメリット
- 一貫性のあるデザイン レスポンシブWEBデザインは、全ての端末で、デザインが統一されているので、ブランディングで与えたいイメージを崩すことはない。
- 開発費の軽減 PC用、スマホ用、携帯用のように専用サイトを作らなくてすみ、今後開発された端末の幅が違っていても、レスポンシブWEBデザインは、新たに専用サイトを作る必要がなくなり、開発費軽減
- メンテナンス・更新作業が軽減 レスポンシブWEBデザイン、それぞれの専用サイトを更新する負担がなくなり、ひとつのレイアウトを変更するだけで、全デバイスの表示に対応!更新作業時間短縮
- 快適なユーザビリティ どのデバイスで閲覧したときも、ユーザーが迷わないユーザービリティーを実現し、 たとえばパソコンからよくチェックしているサイトでも、iPhone5などのモバイル端末で見たときに、レスポンシブWEBデザインにより、デザインが統一させることで、ユーザーはいつも通りにページを閲覧することができます。ユーザーが予期している、操作感を実現!
レスポンシブWebデザインのデメリット
- 作成が難しい。
デザイン構築が難しく、開発に時間を要します。 - Internet Explorer 8で動かない 。
古いブラウザーでは レスポンシブWEBデザインに対応できません。
※セキュリティ対策のためにも 常に最新のブラウザを入れることをお勧めします。
Google社員推奨のレスポンシブWEBデザイン
ウェブ担当者に対して、グーグルのジョン・ミューラー氏は次のように公式ヘルプフォーラムでアドバイスしている。以下、引用。
可能なら、CSS3のMedia Queriesのような特別なスタイルシートを使い(レスポンスデザインを使って)、同じURLでスマートフォンに専用のコンテンツを見せるといい。こうすることの利点は、特別なURLを必要とせずクロールやインデックスについて考えなくていいし、スマートフォンユーザーをどのようにしてリダイレクトするかを考慮する必要もないことだ。
SEOコンサルタントの立場で、SEOを最優先するなら同じURLを使うことができるレスポンシブwebデザインが一番ベストです。しかしMedia Queriesは、うまく設計しないとスマートフォン等で表示が遅くなる場合がある。モバイル優先の情報設計をして pcに表示させるといい場合もあるので、最初の設計力がレスポンシブwebデザインで鍵となります。
ブランディングは イメージを伝えるもの
イメージを伝えたくてブランディング・サイトデザインをしたのにも関わらず、スマホで見ると小さく見えたり、簡易表示になったり、まして無料ブログをせっかくカスタマイズしたのに、スマホでは基本のデザインのまま…。
あなたの伝えたいイメージを正確に伝えるためにも レスポンシブWEBデザインは必須です。