Download - スマートフォン対応とレスポンシブWebデザイン
![Page 1: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/1.jpg)
みま & たま
1
第0回目
スマートフォン対応とレスポンシブWebデザイン
12年12月17日月曜日
![Page 2: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/2.jpg)
みま (ハンドルネーム)
<活動>都内でWeb制作に携わっていますマークアップを中心に担当
0.5からはじめるIT勉強会 Facebookページhttps://www.facebook.com/it.zerogo
2
自己紹介
12年12月17日月曜日
![Page 3: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/3.jpg)
スマートフォンをお持ちの方はどれくらいいますか?
PCサイトをそのまま表示でいいのでは?スマートフォン用に設計し直す必要性って何?
3
人
ヒト
ひと
スマートフォン
12年12月17日月曜日
![Page 4: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/4.jpg)
4
本日のアジェンダ
スマートフォンの利用者の傾向
スマートフォン対応について(利用者側の視点)
スマートフォンへの対応方法(作成者側の視点)
レスポンシブWebデザインとは
ハンズオン
レスポンシブWebデザインのポイント
HTML5とCSS3
まめちしき
制作とスマートフォンサイト
12年12月17日月曜日
![Page 5: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/5.jpg)
スマートフォン利用者の傾向
512年12月17日月曜日
![Page 6: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/6.jpg)
0万台
1000万台
2000万台
3000万台
4000万台
2008 2009 2010 2011 2012(予)
3110
2417
855
234110
1130
1857
29093210
3489
携帯 スマートフォン
スマートフォン出荷台数(日本)
※MM総研調べ
12年12月17日月曜日
![Page 7: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/7.jpg)
全体
男20代
男30代
男40代
男50代
女20代
女30代
女40代
女50代
0% 25% 50% 75% 100%
86
86.8
78.6
32.1
76.8
54.5
38.5
40
67.5
14
13.2
21.4
64.3
23.2
43.6
57.7
58.2
31
持っている 持っていない 不明
年代別スマートフォン所有割合
※博報堂DYメディア定点調査2012より
12年12月17日月曜日
![Page 8: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/8.jpg)
8
スマートフォンはいつ使う?
Facebook利用者の70%はスマートフォンからアクセス2011/12/7付 MMD研究所発表「Facebookインサイト調査」より
スマートフォン利用者の45%はスマートフォンでの ネットショッピング経験あり2012/08/02付 MMD総研「スマートフォン・PCのネットショッピングに関する利用実態調査」より
スマートフォンユーザーの80%がPCサイトを閲覧2012/3/29付 電通「モバイルユーザー調査」より
移動中(車/電車/バス等)に スマートフォンを利用する人が48.6%2012/3付 サイバー・コミュニケーションズ「スマートデバイスユーザー調査」より
PCの利用時間2010年から2011年で13%減少2012/3付 アスキー総合研究所「Media&Contents Survey」より
12年12月17日月曜日
![Page 9: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/9.jpg)
スマートフォン対応について
912年12月17日月曜日
![Page 10: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/10.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
1012年12月17日月曜日
![Page 11: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/11.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
12年12月17日月曜日
![Page 12: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/12.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
画像が小さすぎて押せない
12年12月17日月曜日
![Page 13: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/13.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
画像が小さすぎて押せない
ピンチイン・ピンチアウト(画像縮小・拡大)を
必要とするサイトはユーザーが離れていく
12年12月17日月曜日
![Page 14: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/14.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
画像が小さすぎて押せない
ピンチイン・ピンチアウト(画像縮小・拡大)を
必要とするサイトはユーザーが離れていく
12年12月17日月曜日
![Page 15: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/15.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
画像が小さすぎて押せない
ピンチイン・ピンチアウト(画像縮小・拡大)を
必要とするサイトはユーザーが離れていく
画像は極力使わずボタンリンクは大きくすればよいのか。
12年12月17日月曜日
![Page 16: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/16.jpg)
PCサイトをそのまま表示させることに対する問題点
スマートフォン対応について
10
不安定なキャリア回線=通信回線の制限
画像が小さすぎて押せない
ピンチイン・ピンチアウト(画像縮小・拡大)を
必要とするサイトはユーザーが離れていく
画像は極力使わずボタンリンクは大きくすればよいのか。
そういうわけではない !!
12年12月17日月曜日
![Page 17: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/17.jpg)
スマートフォン対応について
11
n PC用とスマフォ用ページをユーザーが選択できるように。
スマートフォン購入した理由の60%はPCサイトを閲覧するため
http://research.lifemedia.jp/2011/05/110511_smartphone.html#more ※ライフメディア調べ
スマートフォンページが喜ばれないこともある。
PCで見たときと見え方が違う・・・
見たいコンテンツがスマートフォンでは見れない・・・
作り手の配慮が必ずしも喜ばれるとは限らない。
12年12月17日月曜日
![Page 18: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/18.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
12
12年12月17日月曜日
![Page 19: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/19.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
12
少し過言です。
12年12月17日月曜日
![Page 20: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/20.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
どんなバグがあるか
12
少し過言です。
12年12月17日月曜日
![Page 21: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/21.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
どんなバグがあるか
どのタグが非対応か
12
少し過言です。
12年12月17日月曜日
![Page 22: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/22.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
どんなバグがあるか
どのタグが非対応か
12
少し過言です。
12年12月17日月曜日
![Page 23: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/23.jpg)
スマートフォン用サイト制作において、
頭を抱えないことはない。
スマートフォン対応について
どんなバグがあるか
どのタグが非対応か
12
少し過言です。
スマートフォンの特徴やクセを把握し、大きなトラブルを防ごう
12年12月17日月曜日
![Page 24: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/24.jpg)
スマートフォン対応について
13
解像度がバラバラ
画面が小さい
オンマウスの概念がない
タッチしてもリンクが反応したか分かりづらい
デフォルトのViewport指定あり
12年12月17日月曜日
![Page 25: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/25.jpg)
1. 解像度がバラバラ
まず・・・
*解像度がOS、バージョンによって異なる。
全部に対応しよう!
14
* 解像度=幅と高さのサイズ(px)
12年12月17日月曜日
![Page 26: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/26.jpg)
1. 解像度がバラバラ
まず・・・
*解像度がOS、バージョンによって異なる。
全部に対応しよう!
14
現在:何百種類・・・
今後もどんどん増えていきます。
そんなに対応するなんて無理!
* 解像度=幅と高さのサイズ(px)
12年12月17日月曜日
![Page 27: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/27.jpg)
year 横 縦 inch ppi
apple
iPhone3G/3GS 2008 320 480 3.5 163
apple iPhone4/4S 2010 640 960 3.5 326apple
iPhone5 2012 640 1136 4 326
Samsung
GALAXY S SC-02B 2010 480 800 4 233
Samsung GALAXY NEXUS SC-04D 2012 720 1280 4.65 315Samsung
GALAXY Note SC-05D 2012 800 1280 5.3 284
HTC
HT-03A 2009 320 480 3.2 180
HTC X06HT 2010 480 800 3.7 252HTC
HTC J butterfly HTL21 2012 1080 1920 5 440
Sony Xperia SX SO-05D 2012 540 960 3.7 298
スマートフォンの解像度およびppi(1インチあたりのピクセル密度)
1512年12月17日月曜日
![Page 28: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/28.jpg)
16
作成のこつ高解像度の画像を作成する時には偶数で割り切れる値にする。文字部分はアンチエイリアスなどで目視で微調整していく。
Retinaの解像度について
CSSデバイスとピクセルデバイス
従来 :1csspx = 1dpx
Retina:1csspx = 2dpx
●CSSデバイス 画像の1ピクセルを画像ピクセル
●ピクセルデバイス デバイスのピクセル
1:1だと文字が小さすぎるので1:2に。→画像や文字が2倍サイズになりぼける
12年12月17日月曜日
![Page 29: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/29.jpg)
スマートフォンへの対応方法
1712年12月17日月曜日
![Page 30: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/30.jpg)
アプリケーション型
プログラム変換型
マルチソース型
ワンソース型
18
対応方法の種類
12年12月17日月曜日
![Page 31: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/31.jpg)
19
スマートフォンへの対応方法
アプリケーション型
アプリケーション
CSS PC
スマートフォン
HTML
12年12月17日月曜日
![Page 32: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/32.jpg)
20
スマートフォンへの対応方法
プログラム変換型
CSS
CSS PC
スマートフォンHTML
HTML
プログラムで変換する
12年12月17日月曜日
![Page 33: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/33.jpg)
21
スマートフォンへの対応方法
マルチソース型
CSS
CSS PC
スマートフォンHTML
HTML
12年12月17日月曜日
![Page 34: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/34.jpg)
22
スマートフォンへの対応方法
ワンソース型
CSS
CSS
HTML
PC
スマートフォン
12年12月17日月曜日
![Page 35: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/35.jpg)
スマートフォンに 適化されているので操作性が良い
PCサイトとの関連は無いことが多い
ゲームや、特定機能のアプリケーション等で 利用されることが多い(例:乗り換え案内、天気予報、地図等)
23
アプリケーション型
12年12月17日月曜日
![Page 36: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/36.jpg)
24
アプリケーション型
ネイティブ
Webアプリ
ハイブリッド
12年12月17日月曜日
![Page 37: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/37.jpg)
ネイティブ
各OSごとに開発環境が異なるため開発コストがかかる
スマートフォン固有の機能が利用できる
マーケット(AppStore/Google Play等)からスマートフォンにダウンロードして使用する
25
アプリケーション型
12年12月17日月曜日
![Page 38: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/38.jpg)
Webアプリ
HTML5+CSS+JavaScriptといったWeb技術で作成できるので開発コストが抑えられる
スマートフォン固有の機能の利用には制限がある
Webサイトへ接続して使用するマーケット(AppStore/Google Play等)は利用できない
26
アプリケーション型
12年12月17日月曜日
![Page 39: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/39.jpg)
27
アプリケーション型
ハイブリッドアプリ
外枠のみが各OSごとに異なる
アプリケーション内部はHTML5+CSS+JavaScriptといったWeb技術で作成できるので、ネイティブと比較して開発コストが抑えられる
スマートフォン固有の機能の利用には制限がある
マーケット(AppStore/Google Play等)からスマートフォンにダウンロードして使用する
12年12月17日月曜日
![Page 40: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/40.jpg)
28
プログラム変換型
PCサイトや携帯サイトを変換して、 スマートフォンに 適化する
方法は大きく分けて2種類
ソース上にタグを埋め込み外部のサービスを利用する方法
Webサーバにモジュールを追加する方法
アクセス数に応じた費用が発生することが多い
比較サイトhttp://smartphone-japan.com/2012/04/06/smartphone-convert-services/
12年12月17日月曜日
![Page 41: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/41.jpg)
29
マルチソース型
PCサイトとスマートフォンサイトを別々に構築する
スマートフォンに 適化されているので操作性が良い
PCサイトとは別々に作成・更新する必要があり 運用コストが増える
見た目がPCとスマートフォンで異なる
12年12月17日月曜日
![Page 42: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/42.jpg)
30
マルチソース型
フルスクラッチ
フレームワーク
jQuery Mobile
Sencha Touch
FRAMELESS
フレームワーク選び重要
それぞれの特徴を知ることが大切
12年12月17日月曜日
![Page 43: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/43.jpg)
31
マルチソース型(フレームワーク)
jQuery Mobilehttp://jquerymobile.com/
DW5.5から対応
UIコンポーネントが多い
jQueryMobile独特のUIから脱却しづらい
対応環境が多い1.iOS→i0S3.2〜5.0
2.Android→2.1〜2.3、3.1、4.03.Windows Phone 7〜7.5
4.Blackberry6.0〜75.0以前は一部対応
12年12月17日月曜日
![Page 44: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/44.jpg)
32
マルチソース型(フレームワーク)
Sencha Touchhttp://www.sencha.com/products/touch/
JavaScriptで記述
WebKit系ブラウザに対応
12年12月17日月曜日
![Page 45: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/45.jpg)
33
マルチソース型(フレームワーク)
FRAMELESShttp://framelessgrid.com/
em単位のグリッドで 作れるフレームワーク
12年12月17日月曜日
![Page 46: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/46.jpg)
34
マルチソース型(サンプル)
jQuery MobileサンプルASCII.jp:jQuery Mobileを使った国内スマホサイトhttp://ascii.jp/elem/000/000/674/674677/
jQuery Mobile Galleryhttp://www.jqmgallery.com/
Sencha Touchサンプル
サイト名http://m.inc.com/
Ext - ユーザー紹介http://extjs.co.jp/company/customers.php
12年12月17日月曜日
![Page 47: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/47.jpg)
35
マルチソース型(振り分け方)
UserAgentをみてふりわけを行う
JavaScriptで行う
.htaccessで行う
UserAgentのポイント
iOSを搭載するスマートフォン(および相当の端末)には、「iPod」か「iPhone」が含まれる
Androidのスマートフォンには、「Android」と「Mobile」が含まれる
Windows Phoneは「Windows」と「Phone」が含まれる(「IEMobile」で判定してもよい)
12年12月17日月曜日
![Page 48: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/48.jpg)
36
マルチソース型 (振り分け方)
JavaScriptでの記述方法
head要素内に記述する <script type="text/javascript"> if ( ( navigator.userAgent.indexOf('iPhone') > 0 ) || ( navigator.userAgent.indexOf('iPod') > 0 ) || ( navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 ) || ( navigator.userAgent.indexOf('Windows') > 0 && navigator.userAgent.indexOf('Phone') > 0 ) ) { if(confirm('スマートフォン用のサイトがあります。表示しますか?')) { location.href = 'http://www.example.com/sp/'; } }</script>
12年12月17日月曜日
![Page 49: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/49.jpg)
37
マルチソース型 (振り分け方)
.htaccessでの記述方法
※mod_rewriteモジュールがWebサーバに 導入されている必要がある
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteRule ^$ /sp/ [R,L]</IfModule>
12年12月17日月曜日
![Page 50: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/50.jpg)
38
ワンソース型
HTMLファイルは1つ
デバイスや画面サイズによって適応するCSSを切り替えることでデバイスに 適化した表示を行う
1つのHTMLファイルで管理しているので、作成・更新作業を複数のファイルに対して行う必要がないので、運用コストが抑えられる
レスポンシブWebデザインが主流になりつつある
12年12月17日月曜日
![Page 51: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/51.jpg)
レスポンシブWebデザインとは
3912年12月17日月曜日
![Page 52: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/52.jpg)
40
レスポンシブWebデザインとは
レスポンシブWebデザインとは
一つのHTMLを使用する
スクリーン幅に応じて、CSSを切り替え、レイアウトを可変させるデザイン
12年12月17日月曜日
![Page 53: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/53.jpg)
41
レスポンシブWebデザインのパターン
可変させるパターン例
12年12月17日月曜日
![Page 54: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/54.jpg)
42
ブレイクポイントとは?
ブレイクポイントとはCSSを切り替える境目
標準的なブレークポイントは320px、480px、768px、960px
12年12月17日月曜日
![Page 55: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/55.jpg)
43
ブレイクポイントとデザインの関係
ブラウザ幅を狭めると
ちょっと変わります。
12年12月17日月曜日
![Page 56: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/56.jpg)
44
ブレイクポイントとデザインの関係
ブラウザ幅を狭めると
ちょっと変わります。
ブレイクポイントは
721px
12年12月17日月曜日
![Page 57: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/57.jpg)
45
ブレイクポイントとデザインの関係
どうすればいいか?
(色々な方法あり)
12年12月17日月曜日
![Page 58: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/58.jpg)
46
レスポンシブWebデザインの実装方法
MediaQueries
CSS3のMediaQueriesを使用してブレイクポイントを実装する
MediaQueriesの記述方法
@mediaルール:CSSソース内に記述
link要素のmedia属性:ブラウザ幅に応じてcssファイルを変更
@import:すっきりする
12年12月17日月曜日
![Page 59: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/59.jpg)
47
MediaQueriesの記述方法 -その1-
@mediaルール:CSSソース内に記述
@media screen and(max-width:1024px){/* 1024pxまでのサイズに適応されるスタイルシート */}
メジャーな書き方
httpリクエストを減らすにはコレ
12年12月17日月曜日
![Page 60: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/60.jpg)
48
MediaQueriesの記述方法 -その2-
link要素のmedia属性:ブラウザ幅に応じてcssファイルを変更
<link rel="stylesheet" href="hoge.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
無駄に長くなる
@importより軽い
12年12月17日月曜日
![Page 61: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/61.jpg)
49
MediaQueriesの記述方法 -その3-
@importルール:
@import url('b.css');
メンテナンスしやすい
12年12月17日月曜日
![Page 62: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/62.jpg)
50
MediaQueries未対応ブラウザには
MediaQueriesが使用できないブラウザへの対応
IE8以下はCSS3やHTML5に対応していない
html5.js、 html5shiv.js、 Respond.js等を使用する
IE8以下に適応させるために、以下のように記述して分岐させる
※
<!--[if lt IE 9]> <script src="html5.js"></script> <![endif]-->
12年12月17日月曜日
![Page 63: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/63.jpg)
51
ViewPortとは
スマートフォンのディスプレイサイズは?
iPhone4/4S
iPhone5
960px1136px
640px
640px
12年12月17日月曜日
![Page 64: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/64.jpg)
52
ViewPortとは
PCサイトを表示すると
自動的に縮小されて表示される
PCサイト iPhoneで見た場合
12年12月17日月曜日
![Page 65: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/65.jpg)
53
ViewPortとは
スマートフォンの多くは「ViewPort」が指定されているiPhone4/4S/5では980px
「ViewPort」はコンテンツ表示領域
ViewPortの初期値幅までは自動的に縮小して表示する
「device-width」を指定すると解像度幅になる
「initical-scale」で表示倍率を指定することが可能
例)<meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
12年12月17日月曜日
![Page 66: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/66.jpg)
54
レスポンシブWebデザインの実例 -その1-
Shiny Demos( http://shinydemos.com/ )
12年12月17日月曜日
![Page 67: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/67.jpg)
55
レスポンシブWebデザインの実例 -その2-
Kingshill Cars( http://www.kingshillcars.com/ )
12年12月17日月曜日
![Page 68: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/68.jpg)
Qlife ( http://www.qlife.jp/ )
UserAgentで振り分けを行なっている
色味は同じだが、スマートフォン用は完全に別サイトとなり 適化されている
56
マルチソース型の実例
12年12月17日月曜日
![Page 69: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/69.jpg)
京都造形芸術大学 通信教育部 芸術教養学科 http://www.kyoto-art.ac.jp/t-tenohira/index.php
クリックする場所がわかりやすい
講師をタッチしてhistory backすると 不透明が残っているのは残念…
57
通常サイトでスマートフォンでも見やすくしている実例
12年12月17日月曜日
![Page 70: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/70.jpg)
58
レスポンシブWebデザインの実例 -その他-
Media Queries( http://mediaqueri.es/ )
12年12月17日月曜日
![Page 71: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/71.jpg)
ハンズオン- レスポンシブWebデザインを体験してみよう -
5912年12月17日月曜日
![Page 72: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/72.jpg)
仮案件
要望1.
既存のサイトをスマートフォンに対応させたい
要望2.
更新は今まで通りがよい(更新ページ2倍はちょっ
と・・・)
●レスポンシブWebデザインにてスマートフォン対応を行
う。どのように変更するのか、ハンズオンでやり方・考え
方を学ぶ。
6012年12月17日月曜日
![Page 73: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/73.jpg)
61
ハンズオンの流れ
ステップ1:既存の固定レイアウトを
レスポンシブにする。
→width,height,margin,paddingのpxを変更する
ステップ2:スマートフォンで見れるようにする
→MediaQueriesやスマートフォン用CSS、
JavaScriptを入れる。
ステップ3:スマートフォンならではの機能を追加
→タッチアップ時のハイライトやWebクリップなど
12年12月17日月曜日
![Page 74: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/74.jpg)
62
ハンズオンの流れ
実機で確認したら・・・
フォントの大きさや間隔などの微調整を行う
(ハンズオンには入れていません。)
12年12月17日月曜日
![Page 75: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/75.jpg)
63
ハンズオンの流れ
配布ファイルの説明
Facebookページにもフォルダをアップロードしています。
https://www.facebook.com/it.zerogo
00フォルダ・・・初期状態の固定レイアウト
01フォルダ・・・ステップ1のみ終了した状態
02フォルダ・・・ステップ2まで終了した状態
03フォルダ・・・ステップ3まで終了した状態
それぞれのステップ(1~3)のコメントアウトを外し、重複
するタグをコメントアウトします。変更方法は次のページにて→
12年12月17日月曜日
![Page 76: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/76.jpg)
64
ハンズオンの流れ
コメントアウト変更方法→下の例にあるステップ1ではpxをemに変更する作業を行う。 コメントアウトせずに削除でもOK
header#navtop {/* ステップ1 " margin-bottom: 0.5em;*/" margin-bottom: 5px; " clear: both;" overflow: hidden;}
header#navtop {/* ステップ1 */" margin-bottom: 0.5em;" /* margin-bottom: 5px; */ " clear: both;" overflow: hidden;}
12年12月17日月曜日
![Page 77: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/77.jpg)
64
ハンズオンの流れ
コメントアウト変更方法→下の例にあるステップ1ではpxをemに変更する作業を行う。 コメントアウトせずに削除でもOK
header#navtop {/* ステップ1 " margin-bottom: 0.5em;*/" margin-bottom: 5px; " clear: both;" overflow: hidden;}
header#navtop {/* ステップ1 */" margin-bottom: 0.5em;" /* margin-bottom: 5px; */ " clear: both;" overflow: hidden;}
12年12月17日月曜日
![Page 78: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/78.jpg)
65
ハンズオンの流れ
ブレークポイントごとのレイアウト
12年12月17日月曜日
![Page 79: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/79.jpg)
66
ブレークポイントごとのレイアウト
ハンズオンの流れ
12年12月17日月曜日
![Page 80: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/80.jpg)
67
現在の幅=XXpx 変更後の幅=(XX%)
12年12月17日月曜日
![Page 81: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/81.jpg)
動作確認方法
68
動作確認の方法
Chromeのデベロッパーツール
Firefoxのツール
ブックマークレット
シミュレーター
やはり実機でないとわからないことも…
12年12月17日月曜日
![Page 82: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/82.jpg)
Chromeで確認
69
Chrome デベロッパーツール
Windows Control+Shift+I(F12)>右下歯車>User Agent
Mac command+option+I>右下歯車>User Agent
12年12月17日月曜日
![Page 83: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/83.jpg)
Firefoxで確認
70
Firefox レスポンシブデザインビュー
Firefox 15から提供
Firefox>ツール>Web開発>レスポンシブデザインビュー
Windows Ctrl+Shift+M
Mac Option+command+M
12年12月17日月曜日
![Page 84: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/84.jpg)
ブックマークレットで確認
71
ブックマークレット VIEWPORT RESIZERhttp://lab.maltewassermann.com/viewport-resizer/
真ん中の画像をドラッグ&ドロップでブックマークバーへ好きなサイトを開いて、クリック
12年12月17日月曜日
![Page 85: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/85.jpg)
シミュレータで確認
72
Android SDK EmulatorGoogleから提供されているAndroidエミュレータ
iPhoneシミュレータappleのx-codeに同梱(純正のシミュレータ)
iWebInspectorhttp://www.iwebinspector.com/iPhoneシミュレータ内のSafariでソースを表示させhtmlやcssを編集できる。
12年12月17日月曜日
![Page 86: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/86.jpg)
シミュレータで確認
73
Ripple Emulator (Beta) Chromeの拡張機能 http://goo.gl/ovUS6
FireMobileSimulator 携帯端末・スマートフォン表示をシミュレート Chromeの拡張機能およびFirefoxアドオンで提供 Chrome http://goo.gl/cozjS Firefox http://goo.gl/4e266
12年12月17日月曜日
![Page 87: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/87.jpg)
74
スマートフォン対応時に使用するタグ
ステータスバーの色を変更する<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
デバイスの表示領域に合わせて表示させる<meta name="viewport" content="width=device-width">
ユーザーによる拡大縮小が出来ないようにする<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1, user-scalable=no">
フルスクリーンにする。ホームから立ち上げた際にフルスクリーンモード(URLバー) ※他にも設定項目あり<meta name="apple-mobile-web-app-capable" content="yes">
12年12月17日月曜日
![Page 88: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/88.jpg)
75
cssで文字サイズを指定する-webkit-text-size-adjust: none;※ デスクトップのSafariで意図しない表示をすることがあるらしい
デバイスに合わせて文字サイズ変更※小さくなりすぎる-webkit-text-size-adjust: auto(=デフォルト値)
%で指定する-webkit-text-size-adjust: 100%;
タップの範囲を大きくする※PCだとよくてもスマートフォンだと押しづらいものが多いため.class a{ display: block; }
スマートフォン対応時に使用するタグ
12年12月17日月曜日
![Page 89: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/89.jpg)
76
タップするとハイライトされるa{-webkit-tap-highlight-color : rgba(00,33,99,0.60);}
電話番号やメールアドレスに自動リンクをつけない<meta name="format-detection" content="telephone=no,email=no">
逆に自動リンクを付ける場合<a href="tel:090-XXX-XXX">090-XXX-XXX</a><a href="mailto:[email protected]?subject=タイトル&body=本文">メールアドレス</a>
住所をmapアプリで表示させる<a href="http://maps.google.com/maps?q=住所+名称">
スマートフォン対応時に使用するタグ
12年12月17日月曜日
![Page 90: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/90.jpg)
77
ホーム画面用アイコンを指定
<!-- For iPhone 4 --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/114/apple-touch-icon.png">
<!-- for iPad 1--><link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/72/apple-touch-icon.png">
<!-- for the new iPad --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">
<!-- for iPhone 3G, iPod Touch and Android --><link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
<!-- For Nokia --><link rel="shortcut icon" href="img/l/apple-touch-icon.png">
スマートフォン対応時に使用するタグ
12年12月17日月曜日
![Page 91: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/91.jpg)
レスポンシブWebデザインのポイント
7812年12月17日月曜日
![Page 92: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/92.jpg)
79
レスポンシブWebデザインの有効な点
PC用URLとスマートフォン用URLが単一なため以下のメリットがある
SEOでのメリット
被リンク先URLが分散しない
クローラーのクロール回数が減る
検索結果のリンク先がPC、スマフォで同一となる
ソーシャルメディア等でのシェアやリンクが容易である
Googleも推奨 「Google がお勧めするスマートフォンに 適化されたウェブサイトの構築方法」 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
12年12月17日月曜日
![Page 93: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/93.jpg)
80
レスポンシブWebデザインの注意点
%、em、remを使用して相対的にレイアウト幅を 指定することが多い
画像の表示サイズをブラウザ側で調節・リサイズ
CPUとメモリに負荷
PCと画像ファイルサイズが同じ → 転送量が多い
ブレークポイントを増やし過ぎないように注意する
設計への負担
CSSファイルが長くなる
ブレイクポイントはデザインに応じて柔軟に決定する
12年12月17日月曜日
![Page 94: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/94.jpg)
静的なカンプは過去の手法になる?
PSやFWでカンプを作って切り出すやり方は過去の方法になる?
実機での確認が重要
81
レスポンシブWebデザインのワークフローの考え方
同一サイトで複数のデザインが存在する
今までのワークフローでは作業量が増える
お客様とデザインについて共有が重要
12年12月17日月曜日
![Page 95: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/95.jpg)
82
解像度に応じた画像指定方法
retina.js等を使用して解像度ごとに違う画像を読み込む
複数の画像ファイルを用意し、解像度に応じてCSSで使用する画像ファイルを使い分ける
画像ファイルにSVGを使用する※対応していないブラウザがある 重いためロゴなどでの使用がおススメ
ボタンをCSS3で作るCSSジェネレータを活用する
12年12月17日月曜日
![Page 96: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/96.jpg)
83
レスポンシブWebデザインでの画像表現
CSS3 please! リアルタイム表示
12年12月17日月曜日
![Page 97: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/97.jpg)
HTML5とCSS3
8412年12月17日月曜日
![Page 98: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/98.jpg)
スマートフォンはHTML5やCSS3が使える!
とよく言われていますが・・・
意外と端末によって挙動が違ったり対応していなかったり。
色んなサードパーティがあります。
85
HTML5・CSS3の対応状況
12年12月17日月曜日
![Page 99: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/99.jpg)
スマートフォンはHTML5やCSS3が使える!
とよく言われていますが・・・
意外と端末によって挙動が違ったり対応していなかったり。
色んなサードパーティがあります。
85
HTML5・CSS3の対応状況
12年12月17日月曜日
![Page 100: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/100.jpg)
86
スマートフォンのブラウザにも種類がある
標準ブラウザ
iPhone Safari (Mobile Safari)
Android 標準ブラウザ (4.0以前の標準) Chrome(4.1以降の標準)
WindowsPhone7.5 Internet Explorer Mobile 9
アプリケーションとして提供されるブラウザ
Chrome (iPhone)
Firefox for Mobile (Android)
Opera for Mobile / Opera Mini 等
12年12月17日月曜日
![Page 101: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/101.jpg)
Can I use...(caniuse.com)
CSS3/HTML5/JS APIの端末への対応状況が確認出来る
スマートフォン用ブラウザiOS Safari
Android Browser
Blackberry Browser
Opera Mini
PC用ブラウザInternet Explorer
Firefox
Chrome
Safari
87
対応状況の確認
端末の種類やバージョンによって対応しているかどうか
12年12月17日月曜日
![Page 102: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/102.jpg)
HTML5TEST ( http://html5test.com/ )
ブラウザのHTML5対応状況を確認するサイト
MAX500点で対応状況に応じて
点数が表示される
確認ではなく対応させる方法はないの・・・?
88
対応状況の確認
12年12月17日月曜日
![Page 103: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/103.jpg)
89
対応していないブラウザを対応させる方法
ポリフィルJavascriptライブラリでブラウザの機能を補完し、対応ブラウザと同様の表示をさせること
CSS3 PIE
Selectivizr
CSS3Please!
Grad3
12年12月17日月曜日
![Page 104: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/104.jpg)
90
対応していないブラウザを対応させる方法
CSS3 PIE ( http://css3pie.com/ )グラデーション・角丸・ドロップシャドー付きのボタンを作成
12年12月17日月曜日
![Page 105: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/105.jpg)
91
対応していないブラウザを対応させる方法
Selectivizr ( http://selectivizr.com/ )CSS3セレクタをIE6-8で利用できるようにする
12年12月17日月曜日
![Page 106: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/106.jpg)
92
対応していないブラウザを対応させる方法
CSS3Please!(http://css3please.com/)CSS3を各種ブラウザで使えるようなルールを作成してくれる
12年12月17日月曜日
![Page 107: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/107.jpg)
93
対応していないブラウザを対応させる方法
Grad3 ( http://grad3.ecoloniq.jp/ )CSS3のグラデーションを生成するサービス(日本人が開発)
12年12月17日月曜日
![Page 108: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/108.jpg)
94
対応状況確認サイト
Modernizr ( http://modernizr.com/ )jsをソース内に埋め込みブラウザのCSS3対応状況を調べることができる
12年12月17日月曜日
![Page 109: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/109.jpg)
95
(スマフォから離れて)CSS3でできること
CSS3/jQuery Clock demohttp://css-tricks.com/examples/CSS3Clock/
回転する風車http://css3.zxq.net/wind/Wind_Electricity.html
12年12月17日月曜日
![Page 110: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/110.jpg)
96
CSS3表現する
ボタンなどを画像ではなくCSS3で表現することのメリット
ファイルサイズが軽量化できる
画像の解像度に依存しない
非対応ブラウザどうするか?
ポリフィル使う
12年12月17日月曜日
![Page 111: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/111.jpg)
まめちしき
9712年12月17日月曜日
![Page 112: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/112.jpg)
98
ターゲットユーザーの決め方(対応端末)
アクセス解析でみて多い端末
購買者の多い端末
WindowsPhoneやBlackberryをどうするか?( サイトによっては携帯ブラウザよりもレア )
12年12月17日月曜日
![Page 113: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/113.jpg)
99
Webクリップを準備しよう
Webクリップ
スマートフォンのホーム画面にリンクを設置した際に表示されるアイコンを指定
光沢あり、光沢なしで指定方法が異なる
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-
precomposed.png" />
12年12月17日月曜日
![Page 114: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/114.jpg)
100
画像ファイルについて
大きいサイズの画像を、そのままスマートフォンで表示するため、ファイルサイズが大きく転送に時間がかかる場合がある
スマートフォンの横幅の解像度に合わせた画像ファイルを用意する
画像ファイルの大きさにも注意大2メガピクセルまで(デジカメの写真やCSS Sprite)
12年12月17日月曜日
![Page 115: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/115.jpg)
101
ファイルを扱う時のポイント
Windows Mediaなどに対応しておらず、Flashに対応しているOSも限定される
HTML5など他の技術を使用して対応する
ファイルのアップロード・ダウンロードが出来ない
専用アプリを作って対応する
12年12月17日月曜日
![Page 116: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/116.jpg)
102
position:fixedの違い
iOS
iOS4まで非対応
iOS5から対応URLに#がついている場合に消えたりする場合も。。。
Androidの場合
Android 2.2から対応
viewportで、content="user-scalable=no" にする必要がある
12年12月17日月曜日
![Page 117: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/117.jpg)
103
overflow:scrollの違い
iOS4まで → 非対応
iOS5から → 対応
スマフォでは拡大縮小したりするのでユーザビリティの観点から使いづらい。
構成を変更することで対応
12年12月17日月曜日
![Page 118: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/118.jpg)
104
iOSブラウザの標準フォントの変更
iOSのバージョンによりフォントが異なる
iOS5まで → ゴシック体
iOS6から → 明朝体
注意!
font-family指定なしでゴシック体で表示されていたサイトがiOS6以降では明朝体になってしまい修正する必要が発生
仕様変更を踏まえたコーディングを行うことで対応していく
12年12月17日月曜日
![Page 119: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/119.jpg)
105
Androidの仕様について
太字に対応していない
Border-radius Androidだと少しギザギザになる
http://www.slideshare.net/HiroakiWakamatsu/ss-12718639
参考cssnite in OSAKA VOL.29
スマートフォンブラウザ不具合特集 (株式会社ジークス 若松様)
に詳しい不具合の情報が掲載されているます
12年12月17日月曜日
![Page 120: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/120.jpg)
106
スマートフォン固有の動作
オンマウスという概念がない
リンクを分かりやすくする必要がある。
タッチしてもリンクが反応したか分かりづらい
タップするとハイライトされる
a{-webkit-tap-highlight-color : rgba(00,33,99,0.60);}
※iPhoneのみ対応
12年12月17日月曜日
![Page 121: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/121.jpg)
制作とスマートフォンサイト
10712年12月17日月曜日
![Page 122: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/122.jpg)
108
スマートフォンサイト制作で気をつけること
対象ユーザーの年齢、性別、利用目的に対応方法は様々
PCより画面が狭い
→ 配置や見せ方、ファーストビューなど
バグや仕様の他だけでなく
「内容(コンテンツ)」についても検討したほうがよい。
12年12月17日月曜日
![Page 123: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/123.jpg)
109
UI&UXについて
対象ユーザーの年齢、性別、利用目的に対応方法は様々
PCより画面が狭い → 配置や見せ方、ファーストビューなど
バグや仕様の他だけでなく「内容(コンテンツ)」についても検討したほうがよい。
フォントの大きさは・・・?
ボタンの 低限なサイズ・・・?
画像間の 低限の幅・・・?
<実際に困ったこと>
12年12月17日月曜日
![Page 124: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/124.jpg)
110
モバイルファーストという考え方
PCよりも画面が狭いスマートフォンに、効果的にコンテンツを見せるためにはより情報を精査し表示する必要がある
作る順番「ユーザーにとって必要な情報・必要な機能かなにか?」を考え、制約の多いスマートフォンサイトから作成した方が必要とする情報がより明確になる。
ソースを書く順番モバイル向け→タブレット向け→PC向けの順に書いた方が無駄が少なくなる(例えば、わざわざフロートさせたコンテンツをフロート解除させたり)
12年12月17日月曜日
![Page 125: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/125.jpg)
110
モバイルファーストという考え方
PCよりも画面が狭いスマートフォンに、効果的にコンテンツを見せるためにはより情報を精査し表示する必要がある
作る順番「ユーザーにとって必要な情報・必要な機能かなにか?」を考え、制約の多いスマートフォンサイトから作成した方が必要とする情報がより明確になる。
ソースを書く順番モバイル向け→タブレット向け→PC向けの順に書いた方が無駄が少なくなる(例えば、わざわざフロートさせたコンテンツをフロート解除させたり)
12年12月17日月曜日
![Page 126: スマートフォン対応とレスポンシブWebデザイン](https://reader038.vdocuments.pub/reader038/viewer/2022102717/556a747cd8b42a7c758b4602/html5/thumbnails/126.jpg)
111
最後に
課題も多いスマートフォン用Webサイト
案件を受けた際には、仕様やバグなどについてクライアント
に理解して貰った上で不可能な動作・挙動・表示であれば、
方向転換なりして進めていく必要があります。
12年12月17日月曜日