BLOG

2015年7月15日/ css, html, スマホサイト

【動画あり】スマホ対応を考えるならレスポンシブWebデザインを知っておこう

こんにちは、ここ最近はずっとWeb制作の仕事をしている宮本です。

一言でWeb制作と言っても、デザインする時もあれば、ひたすらHTMLコーディングする時もある、がっちりプログラミングする時もあります。

 

おかげさまで仕事の依頼を多くいただけるようになってきたのですが、現在人出が足りておらず、当社ではエンジニアを募集しております。

詳しくは下記ページをご覧いただき、興味を持っていただけましたらお気軽にお問い合せください^^

→採用情報ページ

 

さて、過去にも記事を書きましたが、2015年4月21日にGoogleがスマホからの検索順位の判断基準にモバイル優先という要素を加えることを発表しましたよね。

▼詳しくはこちら
Web担当は至急確認を!スマホ最適化がGoogle検索上位の必須に

 

この発表を受け、急いでWebサイトのスマホ対応を進めた企業様もあれば、今から対応していくという企業様も少なくないと思います。

実際当社で最近ご依頼いただいているWeb制作案件も、スマホ対応をメインの目的とした、Webサイトリニューアルといった案件がほとんどです。

そのスマホ対応をする上で切り離せないキーワードに「レスポンシブデザイン」というものがあります。

レスポンシブデザインは、スマホ対応を行う手法の1つなのですが、まだまだ知らない方も多いので、今回はそのレスポンシブデザインについて私なりに分かりやすく説明したいと思います!

 

動画で分かるレスポンシブデザイン

私宮本がまじめに(ユニークに?)レスポンシブデザインを説明してみましたので是非ご覧ください。

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

上記にも記載しましたが、レスポンシブデザインとはWebサイトのスマホ対応を行うための手法の1つです。

大きく分けると、スマホ対応を行う手法は以下の2つがあります。

 

  • スマホ専用のサイトを制作する
  • レスポンシブデザインで制作する

 

では、それぞれを説明していきます。

スマホ専用のサイトを制作する

こちらはその名の通り、PC向けのWebサイトとは別にスマホ専用のWebサイトを制作(物理的に)し、スマホからアクセスがあると、そのスマホ専用のWebサイトに飛ばすというものです。

 

例えば今あるPC版のサイトのURLが「http://ooooo.jp」の場合、その下に「sp」というフォルダを作成し、そこにスマホ専用に作ったサイトを入れ、スマホからアクセスがあった場合、「http://ooooo.jp/sp/」に飛ばすということです。

 

スマホ専用サイトを作った場合

 

あなたが普段スマホでWebサイトを見ていて、そのURLを確認してみると、最後に「/sp/」といったものが付いていればスマホ専用サイトを制作していると考えてよいでしょう。

※技術的に「/sp/」をつけないようにする(見た目上)ことも可能です。
※「/sp/」はよく使われるもので、実際は「/smartphone/」など、なんでも構いません。

 

レスポンシブデザインで制作する

レスポンシブデザインは、スマホ専用サイトをPC向けサイトと別に制作するのではなく、1つのサイトを制作し、そのサイトにアクセスしているブラウザ(画面)のサイズによって見せ方(レイアウトなど)を変えるという手法です。

 

Webサイトを制作する時に、PC向けサイトのデザインも、レスポンシブデザインによってスマホでアクセスされた場合を意識した設計を行います。

スマホ専用向けサイトを制作する場合と異なり、URLはどちらも同じになります。

 

レスポンシブデザインで制作した場合

 

【レスポンシブデザインで制作されたサイトの実例】

今見ていただいている当社サイトもレスポンシブデザインで実装しています。

本記事をパソコンで見ていただいている方は、試しにブラウザの幅を狭くしてみてください。

 

▼パソコンで見ると

パソコンで見た画面

▼幅を狭めてタブレット画面サイズになると

タブレットで見た画面

▼スマホ画面サイズになると

スマホで見た画面

 

どちらの手法がよいのか?

では、Webサイトのスマホ対応をする上でどちらの手法がよいかについてですが、2つの手法、それぞれにメリット・デメリットがありますので、制作するサイトの目的、運営はどうするかといったことを考えて決めます。

 

スマホ専用サイトを制作する場合のメリット

PC向けサイトとスマホ向けサイトをそれぞれ別で作るため、お互いに干渉せず、好きなようにデザイン(レイアウト)ができます。

また、それぞれに必要な分のコンテンツ(画像やテキスト)を入れればよいので、HTMLの不必要なコードを書く必要がない、つまりページの読み込み自体が早くなります。

 

スマホ専用サイトを制作する場合のデメリット

何か更新が必要となった際に、PC向けサイトとスマホ向けサイトそれぞれのソース(HTMLファイル)更新作業を行う必要が出ます。

その際、画像などもそれぞれのサイズに合わせて作る必要があるなど、作業量も増えてしまいます。

また、本記事上部でも記載した通り、URLの末尾に「/sp」が付くなど、PC向けサイトとはURLが異なり、転送設定などが必要となります。

 

レスポンシブデザインで制作する場合のメリット

1番は運用管理の効率化です。

更新が必要となった際は、一つのソース(HTMLファイル)を更新すればよく、また画像などもPC向け用のもののサイズを作ればよいので、更新作業が楽になります。

 

続いて、URLもPC向けサイト、スマホ向けサイトが同じになるため、Facebook等のSNSでシェアする際も何も意識することなくリンクを貼ることができます。

 

また、検索エンジンのGoogleもレスポンシブデザインでサイト制作することを推奨しています。

その理由については、下記サイトの記事にまとめられていましたので、そちらをご覧ください。
※一部本記事で既に記載した内容と重なる部分もあります。

▼参考記事
Googleがレスポンシブデザインを推奨する7つの理由 | notnil creation weblog

 

レスポンシブデザインで制作する場合のデメリット

スマホで見たときに読み込みが遅くなる可能性があります。

例えば、PCでは多くの情報を見せたい、スマホではポイントを絞って見せたいという場合がありますが、使っているソース(HTMLファイル)は一緒なので、スマホでの見た目上は非表示にすることができても、裏ではPC用に掲載した部分も読み込まれているのです。

 

デザイン(レイアウト)に関しても、1つのソースなので、基本的にはPCだったら2列だったものをスマホでは1列に変える等のシンプルな変化のみとなるので、2つのレイアウトを大幅に変えるということができません。

最後に

最後に私の考えですが、今PC向けのサイトは持っているがスマホサイトはなく、本当に最低限の情報だけでいいからスマホサイトをコストを下げて作りたい!と行った場合のみ、スマホ専用サイトを制作するのがよいと思います。

 

そうではなく、スマホサイトを作るのに合わせ、今のPC向けサイトもリニューアルしたい!、もしくは今PC向けサイトも持っておらず、新規で制作したい!という場合はレスポンシブデザインで制作するのがよいと考えます。

 

レスポンシブデザインで制作した場合のデメリットにも記載した、読み込みが遅くなる可能性があるというのも、ここ最近は通信速度も速くなっており、Wi-Fiも至るところに設置されているので、大きなデメリットではなくなってきています。

 

企業のWeb担当者様の日々の業務のことも考え、運営管理が楽になるレスポンシブデザインを取り入れることをお勧めいたします!

Resent Posts

Category