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