社内勉強会資料 スマートフォン対応サイトの作成法をザクッと紹介

1. スマホ対応概要
2015/03/05(木)
しくみ製作所 ouchi

2. 目次
1. スマホ対応の基本
2. メリット
3. スマホ対応の方法
4. webwebで使っている方法

3. 1.スマホ対応の基本
最も基本的な考え方は2つ
1. PCファースト
➔ デスクトップPCのデザインから作成
➔ webwebはこっち
2. モバイルファースト
➔ スマートフォンのデザインから作成

4. 1.1スマホ対応の基本~モバイルファースト~
● モバイル⇒タブレット⇒デスクトップの順にcssを作成
● PCファストより難しい
○ 様々な制約がある(画面サイズ、通信環境、
ユーザーの環境など)
● ECサイトなどはモバイルファーストの場合が多い
コンテンツ利用者の多くがスマホユーザーで
ある場合に用いる

5. 以降の話はPCファーストを仮定します

6. 2.スマホ対応のメリット
● ユーザビリティの向上
○ 横スクロールが無くなる
○ ピンチしなくても見えるフォントサイズ
● 直帰率の低下
★ SEO的に効果はない
○ はずだったんですが...

7. 2.1スマホ対応のメリット~SEO目線~
スマホ対応しているとSEO的に上位になります
google
● 4月21日からモバイル検索において実施
○ PC検索には効果がない模様(?)
● 基準はモバイルフレンドリーテスト
○ webwebは合格済み
“This change will affect mobile searches in all languages
worldwide and will have a significant impact in our search results”

8. 余談 ~モバイルフレンドリーテストの基準~
● 横幅が画面サイズに合っている
● flashを使用していない
● 文字が小さすぎない(ページ全体が8px以下だとダメ)
● タップ領域が小さすぎない
● viewportの設定はなしでもいい
➔ 色々基準はありますが、結構ゆるいみたいです
◆ http://exit-segawa.blogspot.jp/2014/11/google.html
◆ http://hyper-text.org/archives/2015/03/google_mobile_friendly_test.
shtml

9. 3. スマホ対応の方法
方法は様々。Google Developers Manualで挙げ
られているものを取り上げる
1. レスポンシブデザイン
2. 動的な配信
3. URLを分ける

10. 3.1 レスポンシブデザイン
● 画面サイズに応じて適用するCSSを変更する方法
○ 同一のURL,HTMLコードを用いる
○ googleが推進している方法
❖ メリット
➢ 管理・学習コストを抑えられる
❖ デメリット
➢ HTMLがデスクトップと同じなのでリソースが重く、スマホ
での表示速度が遅くなる
➢ デバイスを問わないデザイン構成が必要

11. 3.2 動的な配信
● ユーザーエージェント(ユーザーが使用しているハードウェ
ア)を取得し、配信するHTMLコードを決定する
○ UAの取得はjavascript(?),railsでも可
■ ライブラリ：modernizr
❖ メリット
➢ デバイスに応じてリソースを軽くできる
➢ 自由度が高い
❖ デメリット
➢ UA取得に失敗することがある
➢ 製造・維持コストがかかる

12. 3.3 URLを分ける
● デバイスに応じて、そもそものURLを分けてしまう方法
○ Developers Manualに書いてある方法だが、メリットは
少ない
❖ メリット
➢ 動的な配信と同様
❖ デメリット
➢ コストが2倍になる(計測やHTMLの保守など)

13. 3.4 まとめ
コスト 自由度 速度
レスポンシブ
低 中 遅くなる時も...
動的配信
中 高 速い(？)
URL区別
高 高 速い(？)

14. 4. webwebの例
● webwebはレスポンシブデザインでスマホ対応
● 使用しているテンプレート集
○ Bootstrapのグリッドシステム
■ 画面を縦に12分割し、デザイン設計
■ 画面幅に応じて自動で幅を修正してくれる
○ Owl Carousel
■ スライドのデザインテンプレート
■ 画面幅に応じて、要素数を決定してくれる

15. 4. webwebの例~メディアクエリ~
画面の横幅が549px以下の時に
フォントサイズを小さくしている
@media only screen and (max-width: 549px)