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

ようこそ！  |  Mobile Friendly Websites  |  Google Developers

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

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

レスポンシブデザイン

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

デバイスによる振り分け

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

レスポンシブデザインのメリット

• 1つのHTML（ワンソース）の為、メンテナンスが容易
• Googleが推奨

レスポンシブデザインのデメリット

• CSSのコーディングが複雑になる（メディアクエリーの記述が必要）
• IE対策が必須（Flashプレイヤー対策なども）

デバイスによる振り分けのメリット

• ページの制作が容易
• PCサイト、スマホサイト共に自由なページ設計が可能

デバイスによる振り分けのデメリット

• サイトのメンテナンスが煩雑
• 正規化処理が必須

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

www.kirin.co.jp

www.mizuno.jp

toyota.jp

デバイスによる振り分けを採用しているサイト

www.ana.co.jp

www.vogue.co.jp

「.htaccessファイル」を使った自動振り分け

hazywisteria.main.jphazywisteria.main.jp

CINEMA AWESOME!|for PC

COOL CAT|PCサイト

My Favorite Picture

吉祥寺で味わうおいしいカレー屋さん | PCサイト

JavaScriptによる自動振り分け

hyggelig.tokyo

スマートフォン専用サイトにハンバーガーメニューを追加する

ハンバーガーメニュー

この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。１～２年前から良く見かけるようになりましたが、三本の線がハンバーガーに見える事からこう呼ばれるようになりました。Googleなどのメジャーサイトでも採用されている事で「３本の横線＝メニュー」という認識が浸透して来ています。特にディスプレイ領域が限られているスマートフォンサイトに多く使われています。
ですが、一方で、スマホを持ったばかりのユーザーやネットを普段余り使用しないユーザーなどには、それがメニューのボタンと認識できずに離脱してしまう可能性もあるので注意が必要です。

/*ハンバーガーメニュー*/
.menu {
  display: block;
  float: right;
  margin-right: 10px;
}
.menu ul {
  display: none;
}
.menu p#menuToggle{
  background: url(../img/icon_hum.png) no-repeat center center;
  width: 44px;
  height: 44px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.menu.open ul {
  display: block;
  left: 2%;
  position: absolute;
  top: 48px;
  width: 96%;
  margin: 0 auto;
  z-index: 9999;
}
.menu.open ul li a {
  display: block;
  background: #48a5bf;
  border-top: 1px solid #FFF;
  color: #fff;
}
.menu.open ul li:first-child a {
  border-top: none;
}

追加するjQuery

$(function(){

  $('#menuToggle').click(function(){ //#menuToggleをクリックすると
    $(this).parent().toggleClass('open'); //親要素に.openを付ける。
		  });
});