読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

Googleが推奨するスマートフォンに最適化されたサイト構築の方法

ようこそ!  |  Mobile Friendly Websites  |  Google Developers
f:id:yachin29:20150611000915p:plain


Googleが推奨しているスマートフォン対応の方法は以下の2つです。

  • レスポンシブデザイン
  • PCサイトと別にスマホサイトを作り、デバイスによって振り分ける

レスポンシブデザイン

レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。


バイスによる振り分け

PCサイトとスマホサイトのデータを別々に作成し、ユーザーがスマートフォンからサイトを閲覧した場合はスマホサイトのURLへ、PCからサイトを閲覧した場合はPCサイトのURLへ自動で振り分ける方法です。
この授業では「.htaccessファイル」を使った自動振り分けをやりますが、JavaScriptPHPでも同様の振り分けが出来ます。


レスポンシブデザインのメリット
  • 1つのHTML(ワンソース)の為、メンテナンスが容易
  • Googleが推奨
レスポンシブデザインのデメリット
  • CSSのコーディングが複雑になる(メディアクエリーの記述が必要)
  • IE対策が必須(Flashプレイヤー対策なども)
バイスによる振り分けのメリット
  • ページの制作が容易
  • PCサイト、スマホサイト共に自由なページ設計が可能
バイスによる振り分けのデメリット
  • サイトのメンテナンスが煩雑
  • 正規化処理が必須

レスポンシブデザインを採用しているサイト

www.kirin.co.jp


www.mizuno.jp


toyota.jp