レスポンシブWebデザインのススメ

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. レスポンシブWebデザインのススメ

レスポンシブWebデザインのススメ

レスポンシブWebデザインのススメ

こんにちは、アウラの三輪です。

皆様は、Webサイトを何でご覧になっていますか?
パソコン中心の方、スマートフォンの方が圧倒的に多い方、タブレットの方、いろいろだと思います。

Webサイトは様々なデバイス(パソコンやスマートフォンなどの情報端末)から見られており、その画面サイズはバラバラです。

パソコンでは快適に使えたサイトにスマートフォンでアクセスすると、ものすごーく小さく表示されて、拡大(ピンチアウト)しないと文字は読めないしクリックはし辛いし…なんて経験はありませんでしょうか。

これでは、せっかくサイトを訪れてくれたユーザーが、その場で回れ右をしてしまう可能性大。勿体ない。どうにかせねばなりません。

レスポンシブデザインとは

どんな画面サイズのデバイスからアクセスしても、快適に利用できるWebサイトを構築するための手法、それがレスポンシブデザインです。
上は、アウラのサイトを画面サイズの違うデバイスで表示したイメージ。それぞれの場合で、レイアウトが変わっているのがお分かりいただけるかと思います。

検索エンジンGoogleでの、レスポンシブデザインの定義は、下記のとおり。

「レスポンシブ ウェブ デザイン」(RWD)とは、ユーザーがパソコン、タブレット、スマートフォンのいずれでアクセスする場合でも、ページでは同じ URL とコードを使用し、画面サイズに応じて表示の調整のみを行うこと(違いに対応すること =「レスポンシブ」)を指します。

レスポンシブに対応したサイトは、CSS(Webページの見た目を整える言語)によって、デバイスに合わせてレイアウトを切り替えます。
CSSファイルにレイアウトの切り替え方を記述しておくことで、閲覧側の環境によって、1つのページの見せ方を変えられるわけです。
「responsive(反応する、応答する)」という言葉どおりの動きですね。

管理が容易になります

初期のモバイルサイトは、モバイル専用ページをパソコン用とは別に用意していました。同じ組織のサイトなのにURLが異なる上、情報更新作業もページの数だけ必要です。管理が煩雑になるだけでなく、ユーザーに見せたい場合はURLをそれぞれ送らなければなりませんでした。
レスポンシブに対応することで、そのあたりの問題が一気に解決します。同じページの見せ方を変えるだけなので、ユーザーはどの端末から見ても、同じ情報にアクセス可能になるのです。

SEOにも有効

また、レスポンシブデザインは、SEO(検索エンジン最適化)にも有効です。

Googleは、スマートフォン用に表示が最適化されたWebサイトが検索結果の上位に表示されやすくなる「モバイルフレンドリー」を導入し、そのページがスマートフォン表示に対応しているかを、モバイル検索における順位決定の要因としています。

更にGoogleは、ページの評価基準をパソコンサイトからスマートフォンサイトに変更しました。キーワード検索による表示ページの選定、検索順位の位置づけの判断、それらがモバイルサイトを基準に行われます。スマートフォンでの表示に最適化されていないサイトは、順位が後退していきます。

この「モバイルファーストインデックス」と呼ばれる施策にも、レスポンシブデザインにすることで対応できます。

デメリットもあります

表示させるファイル(ページ)が1つなので、スマートフォンでは不要なデータ(パソコン向けの記述)も読み込まれます。
また、パソコンに比べて性能やネットワーク速度が下回るスマートフォンでは、表示に時間がかかってしまう場合があります。

制作についても、レスポンシブに対応していないサイトよりもコーディングが複雑になるため、製作工数の増加は避けられません。

まとめ

気を付けなければならない点もありますが、数々のメリットがあるレスポンシブWebデザイン。
ご自身のサイトを訪れるユーザーのことをよく考えて、導入をご検討くださいね。

前後の記事

TwitterをAPIで操作しよう、となるまで

先日、とある案件のミーティングにて、 ディレクター「仁木さん、Twitterで特定のキーワードが含まれたツイートのタイムラインをホームページに埋め込みたいんだけれど、出来るかな?」 仁木「なるほど。(…

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。