スマートフォン対応とレスポンシブWebデザイン

みま & たま

1

第０回目

スマートフォン対応とレスポンシブWebデザイン

12年12月17日月曜日

みま (ハンドルネーム)

＜活動＞都内でWeb制作に携わっていますマークアップを中心に担当

0.5からはじめるIT勉強会　Facebookページhttps://www.facebook.com/it.zerogo

2

自己紹介


https://www.facebook.com/it.zerogo


スマートフォンをお持ちの方はどれくらいいますか？

PCサイトをそのまま表示でいいのでは？スマートフォン用に設計し直す必要性って何？

3

人

ヒト

ひと

スマートフォン


4

本日のアジェンダ

スマートフォンの利用者の傾向

スマートフォン対応について（利用者側の視点）

スマートフォンへの対応方法（作成者側の視点）

レスポンシブWebデザインとは

ハンズオン

レスポンシブWebデザインのポイント

HTML5とCSS3

まめちしき

制作とスマートフォンサイト


スマートフォン利用者の傾向


0万台

1000万台

2000万台

3000万台

4000万台

2008 2009 2010 2011 2012(予)

3110

2417

855

234110

1130

1857

29093210

3489

携帯スマートフォン

スマートフォン出荷台数（日本）

※MM総研調べ


全体

男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より


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」より


スマートフォン対応について


PCサイトをそのまま表示させることに対する問題点





10

不安定なキャリア回線＝通信回線の制限




10


画像が小さすぎて押せない




10



ピンチイン・ピンチアウト（画像縮小・拡大）を

必要とするサイトはユーザーが離れていく




10





画像は極力使わずボタンリンクは大きくすればよいのか。




10





画像は極力使わずボタンリンクは大きくすればよいのか。

そういうわけではない !!



11

n PC用とスマフォ用ページをユーザーが選択できるように。

スマートフォン購入した理由の６０％はPCサイトを閲覧するため

　http://research.lifemedia.jp/2011/05/110511_smartphone.html#more　※ライフメディア調べ

スマートフォンページが喜ばれないこともある。

PCで見たときと見え方が違う・・・

見たいコンテンツがスマートフォンでは見れない・・・

作り手の配慮が必ずしも喜ばれるとは限らない。


http://research.lifemedia.jp/2011/05/110511_smartphone.html#more

http://research.lifemedia.jp/2011/05/110511_smartphone.html#more

スマートフォン用サイト制作において、

頭を抱えないことはない。


12





12

少し過言です。





どんなバグがあるか

12







どのタグが非対応か

12







どのタグが非対応か

12


スマートフォンの特徴やクセを把握し、大きなトラブルを防ごう



13

解像度がバラバラ

画面が小さい

オンマウスの概念がない

タッチしてもリンクが反応したか分かりづらい

デフォルトのViewport指定あり


1. 解像度がバラバラ

まず・・・

*解像度がOS、バージョンによって異なる。

全部に対応しよう！

14

* 解像度＝幅と高さのサイズ（px）


1. 解像度がバラバラ

まず・・・

*解像度がOS、バージョンによって異なる。

全部に対応しよう！

14

現在：何百種類・・・

今後もどんどん増えていきます。

そんなに対応するなんて無理！

* 解像度＝幅と高さのサイズ（px）


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（１インチあたりのピクセル密度）


16

作成のこつ高解像度の画像を作成する時には偶数で割り切れる値にする。文字部分はアンチエイリアスなどで目視で微調整していく。

Retinaの解像度について

CSSデバイスとピクセルデバイス

従来　：1csspx = 1dpx

Retina：1csspx = 2dpx

●CSSデバイス　画像の1ピクセルを画像ピクセル

●ピクセルデバイス　デバイスのピクセル

１：１だと文字が小さすぎるので１：２に。→画像や文字が２倍サイズになりぼける


スマートフォンへの対応方法


アプリケーション型

プログラム変換型

マルチソース型

ワンソース型

18

対応方法の種類


19



アプリケーション

CSS PC


HTML


20



CSS

CSS PC

スマートフォンHTML

HTML

プログラムで変換する


21



CSS

CSS PC

スマートフォンHTML

HTML


22


ワンソース型

CSS

CSS

HTML

PC



スマートフォンに適化されているので操作性が良い

PCサイトとの関連は無いことが多い

ゲームや、特定機能のアプリケーション等で　　　　　　　　　　　　　　　利用されることが多い（例：乗り換え案内、天気予報、地図等）

23



24


ネイティブ

Webアプリ

ハイブリッド


ネイティブ

各OSごとに開発環境が異なるため開発コストがかかる

スマートフォン固有の機能が利用できる

マーケット（AppStore/Google Play等）からスマートフォンにダウンロードして使用する

25



Webアプリ

HTML5+CSS+JavaScriptといったWeb技術で作成できるので開発コストが抑えられる

スマートフォン固有の機能の利用には制限がある

Webサイトへ接続して使用するマーケット（AppStore/Google Play等）は利用できない

26



27


ハイブリッドアプリ

外枠のみが各OSごとに異なる

アプリケーション内部はHTML5+CSS+JavaScriptといったWeb技術で作成できるので、ネイティブと比較して開発コストが抑えられる

スマートフォン固有の機能の利用には制限がある

マーケット（AppStore/Google Play等）からスマートフォンにダウンロードして使用する


28


PCサイトや携帯サイトを変換して、　　　　　　　　　　　　スマートフォンに適化する

方法は大きく分けて２種類

ソース上にタグを埋め込み外部のサービスを利用する方法

Webサーバにモジュールを追加する方法

アクセス数に応じた費用が発生することが多い

比較サイトhttp://smartphone-japan.com/2012/04/06/smartphone-convert-services/


http://smartphone-japan.com/2012/04/06/smartphone-convert-services/

http://smartphone-japan.com/2012/04/06/smartphone-convert-services/

29


PCサイトとスマートフォンサイトを別々に構築する

スマートフォンに適化されているので操作性が良い

PCサイトとは別々に作成・更新する必要があり　　　　　　　　　　　　　　　運用コストが増える

見た目がPCとスマートフォンで異なる


30


フルスクラッチ

フレームワーク

jQuery Mobile

Sencha Touch

FRAMELESS

フレームワーク選び重要

それぞれの特徴を知ることが大切


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以前は一部対応


http://jquerymobile.com

http://jquerymobile.com

32


Sencha Touchhttp://www.sencha.com/products/touch/

JavaScriptで記述

WebKit系ブラウザに対応


http://www.sencha.com/products/touch

http://www.sencha.com/products/touch

33


FRAMELESShttp://framelessgrid.com/

em単位のグリッドで作れるフレームワーク


http://framelessgrid.com

http://framelessgrid.com

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


http://ascii.jp/elem/000/000/674/674677/

http://ascii.jp/elem/000/000/674/674677/

http://www.jqmgallery.com

http://www.jqmgallery.com

http://m.inc.com/

http://m.inc.com/

http://extjs.co.jp/company/customers.php

http://extjs.co.jp/company/customers.php

35

マルチソース型(振り分け方)

UserAgentをみてふりわけを行う

JavaScriptで行う

.htaccessで行う

UserAgentのポイント

iOSを搭載するスマートフォン（および相当の端末）には、「iPod」か「iPhone」が含まれる

Androidのスマートフォンには、「Android」と「Mobile」が含まれる

Windows Phoneは「Windows」と「Phone」が含まれる(「IEMobile」で判定してもよい)


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>


http://www.example.com/sp/'

http://www.example.com/sp/'

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>


38

ワンソース型

HTMLファイルは１つ

デバイスや画面サイズによって適応するCSSを切り替えることでデバイスに適化した表示を行う

1つのHTMLファイルで管理しているので、作成・更新作業を複数のファイルに対して行う必要がないので、運用コストが抑えられる

レスポンシブWebデザインが主流になりつつある


40



一つのHTMLを使用する

スクリーン幅に応じて、CSSを切り替え、レイアウトを可変させるデザイン


41

レスポンシブWebデザインのパターン

可変させるパターン例


42

ブレイクポイントとは？

ブレイクポイントとはCSSを切り替える境目

標準的なブレークポイントは320px、480px、768px、960px


43

ブレイクポイントとデザインの関係

ブラウザ幅を狭めると

ちょっと変わります。


44


ブラウザ幅を狭めると

ちょっと変わります。

ブレイクポイントは

721px


45


どうすればいいか？

（色々な方法あり）


46

レスポンシブWebデザインの実装方法

MediaQueries

　CSS3のMediaQueriesを使用してブレイクポイントを実装する

MediaQueriesの記述方法

@mediaルール：CSSソース内に記述

link要素のmedia属性：ブラウザ幅に応じてcssファイルを変更

@import：すっきりする


47

MediaQueriesの記述方法 -その１-

@mediaルール：CSSソース内に記述

@media screen and(max-width:1024px){/* 1024pxまでのサイズに適応されるスタイルシート */}

メジャーな書き方

httpリクエストを減らすにはコレ


48

MediaQueriesの記述方法 -その２-

link要素のmedia属性：ブラウザ幅に応じてcssファイルを変更

<link rel="stylesheet" href="hoge.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

無駄に長くなる

＠importより軽い


49

MediaQueriesの記述方法 -その３-

@importルール：

@import url('b.css');

メンテナンスしやすい


50

MediaQueries未対応ブラウザには

MediaQueriesが使用できないブラウザへの対応

IE8以下はCSS3やHTML5に対応していない

html5.js、 html5shiv.js、 Respond.js等を使用する

IE8以下に適応させるために、以下のように記述して分岐させる

　※

51

ViewPortとは

スマートフォンのディスプレイサイズは？

iPhone4/4S

iPhone5

960px1136px

640px

640px


52

ViewPortとは

PCサイトを表示すると

自動的に縮小されて表示される

PCサイト iPhoneで見た場合


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">


54

レスポンシブWebデザインの実例 -その１-

Shiny Demos( http://shinydemos.com/ )


http://shinydemos.com

http://shinydemos.com

55

レスポンシブWebデザインの実例 -その２-

Kingshill Cars( http://www.kingshillcars.com/ )


http://www.kingshillcars.com

http://www.kingshillcars.com

Qlife ( http://www.qlife.jp/ )

UserAgentで振り分けを行なっている

色味は同じだが、スマートフォン用は完全に別サイトとなり適化されている

56

マルチソース型の実例


http://www.qlife.jp

http://www.qlife.jp

京都造形芸術大学通信教育部芸術教養学科 http://www.kyoto-art.ac.jp/t-tenohira/index.php

クリックする場所がわかりやすい

講師をタッチしてhistory backすると不透明が残っているのは残念…

57

通常サイトでスマートフォンでも見やすくしている実例


http://www.kyoto-art.ac.jp/t-tenohira/index.php

http://www.kyoto-art.ac.jp/t-tenohira/index.php

58

レスポンシブWebデザインの実例 -その他-

Media Queries( http://mediaqueri.es/ )


http://mediaqueri.es/

http://mediaqueri.es/

ハンズオン-　レスポンシブWebデザインを体験してみよう -


仮案件

要望１.

既存のサイトをスマートフォンに対応させたい

要望２.

更新は今まで通りがよい（更新ページ２倍はちょっ

と・・・）

●レスポンシブWebデザインにてスマートフォン対応を行

う。どのように変更するのか、ハンズオンでやり方・考え

方を学ぶ。


61

ハンズオンの流れ

ステップ１：既存の固定レイアウトを

レスポンシブにする。

→width,height,margin,paddingのpxを変更する

ステップ２：スマートフォンで見れるようにする

→MediaQueriesやスマートフォン用CSS、

　JavaScriptを入れる。

ステップ３：スマートフォンならではの機能を追加

→タッチアップ時のハイライトやWebクリップなど


62


実機で確認したら・・・

フォントの大きさや間隔などの微調整を行う

（ハンズオンには入れていません。）


63


配布ファイルの説明

Facebookページにもフォルダをアップロードしています。


00フォルダ・・・初期状態の固定レイアウト

01フォルダ・・・ステップ１のみ終了した状態

02フォルダ・・・ステップ２まで終了した状態

03フォルダ・・・ステップ３まで終了した状態

それぞれのステップ（１～３）のコメントアウトを外し、重複

するタグをコメントアウトします。変更方法は次のページにて→




64


コメントアウト変更方法→下の例にあるステップ１では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;}


65


ブレークポイントごとのレイアウト


66

ブレークポイントごとのレイアウト



67

現在の幅＝XXpx　　　変更後の幅＝(XX%)


動作確認方法

68

動作確認の方法

Chromeのデベロッパーツール

Firefoxのツール

ブックマークレット

シミュレーター

やはり実機でないとわからないことも…


Chromeで確認

69

Chrome デベロッパーツール

Windows Control+Shift+I(F12)>右下歯車>User Agent

Mac command+option+I>右下歯車>User Agent


Firefoxで確認

70

Firefox レスポンシブデザインビュー

Firefox 15から提供

Firefox＞ツール＞Web開発＞レスポンシブデザインビュー

Windows Ctrl+Shift+M

Mac Option+command+M


ブックマークレットで確認

71

ブックマークレット　VIEWPORT RESIZERhttp://lab.maltewassermann.com/viewport-resizer/

真ん中の画像をドラッグ&ドロップでブックマークバーへ好きなサイトを開いて、クリック


http://lab.maltewassermann.com/viewport-resizer/

http://lab.maltewassermann.com/viewport-resizer/

シミュレータで確認

72

Android SDK EmulatorGoogleから提供されているAndroidエミュレータ

iPhoneシミュレータappleのx-codeに同梱（純正のシミュレータ）

iWebInspectorhttp://www.iwebinspector.com/iPhoneシミュレータ内のSafariでソースを表示させhtmlやcssを編集できる。


http://www.iwebinspector.com

http://www.iwebinspector.com

シミュレータで確認

73

Ripple Emulator (Beta) 　Chromeの拡張機能　http://goo.gl/ovUS6

FireMobileSimulator 　携帯端末・スマートフォン表示をシミュレート　Chromeの拡張機能およびFirefoxアドオンで提供　Chrome　http://goo.gl/cozjS　Firefox　http://goo.gl/4e266


https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

https://chrome.google.com/webstore/detail/firemobilesimulator-for-g/mkihbloiacgiofaejgagokalpeflnmbe?hl=ja

https://chrome.google.com/webstore/detail/firemobilesimulator-for-g/mkihbloiacgiofaejgagokalpeflnmbe?hl=ja

https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

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">


75

cssで文字サイズを指定する-webkit-text-size-adjust: none;※　デスクトップのSafariで意図しない表示をすることがあるらしい

デバイスに合わせて文字サイズ変更※小さくなりすぎる-webkit-text-size-adjust: auto（＝デフォルト値）

%で指定する-webkit-text-size-adjust: 100%;

タップの範囲を大きくする※PCだとよくてもスマートフォンだと押しづらいものが多いため.class a{ display: block; }



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=住所+名称">



mailto:[email protected]?subject=

mailto:[email protected]?subject=

http://maps.google.com/maps?q=

http://maps.google.com/maps?q=

77

ホーム画面用アイコンを指定

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/114/apple-touch-icon.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/72/apple-touch-icon.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/h/apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">

<link rel="shortcut icon" href="img/l/apple-touch-icon.png">

レスポンシブWebデザインのポイント


79

レスポンシブWebデザインの有効な点

PC用URLとスマートフォン用URLが単一なため以下のメリットがある

SEOでのメリット

被リンク先URLが分散しない

クローラーのクロール回数が減る

検索結果のリンク先がPC、スマフォで同一となる

ソーシャルメディア等でのシェアやリンクが容易である

Googleも推奨　「Google がお勧めするスマートフォンに適化されたウェブサイトの構築方法」　　http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html


http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

80

レスポンシブWebデザインの注意点

%、em、remを使用して相対的にレイアウト幅を　　　　　　　　　　　　　　　　　　指定することが多い

画像の表示サイズをブラウザ側で調節・リサイズ

CPUとメモリに負荷

PCと画像ファイルサイズが同じ　→　転送量が多い

ブレークポイントを増やし過ぎないように注意する

設計への負担

CSSファイルが長くなる

ブレイクポイントはデザインに応じて柔軟に決定する


静的なカンプは過去の手法になる？

PSやFWでカンプを作って切り出すやり方は過去の方法になる？

実機での確認が重要

81

レスポンシブWebデザインのワークフローの考え方

同一サイトで複数のデザインが存在する

今までのワークフローでは作業量が増える

お客様とデザインについて共有が重要


82

解像度に応じた画像指定方法

retina.js等を使用して解像度ごとに違う画像を読み込む

複数の画像ファイルを用意し、解像度に応じてCSSで使用する画像ファイルを使い分ける

画像ファイルにSVGを使用する※対応していないブラウザがある　重いためロゴなどでの使用がおススメ

ボタンをCSS3で作るCSSジェネレータを活用する

[email protected]


mailto:[email protected]

mailto:[email protected]

83

レスポンシブWebデザインでの画像表現

CSS3　please!　リアルタイム表示


HTML5とCSS3


スマートフォンはHTML5やCSS3が使える！

　とよく言われていますが・・・

意外と端末によって挙動が違ったり対応していなかったり。

色んなサードパーティがあります。

85

HTML5・CSS3の対応状況


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　　　等


Can I use...(caniuse.com)

CSS3/HTML5/JS APIの端末への対応状況が確認出来る

スマートフォン用ブラウザiOS Safari

Android Browser

Blackberry Browser

Opera Mini

PC用ブラウザInternet Explorer

Firefox

Chrome

Safari

87

対応状況の確認

端末の種類やバージョンによって対応しているかどうか


HTML5TEST ( http://html5test.com/ )

ブラウザのHTML5対応状況を確認するサイト

MAX500点で対応状況に応じて

　　　　　　　　　　点数が表示される

確認ではなく対応させる方法はないの・・・？

88

対応状況の確認


http://html5test.com

http://html5test.com

89

対応していないブラウザを対応させる方法

ポリフィルJavascriptライブラリでブラウザの機能を補完し、対応ブラウザと同様の表示をさせること

CSS3 PIE

Selectivizr

CSS3Please!

Grad3


90


CSS3 PIE ( http://css3pie.com/ )グラデーション・角丸・ドロップシャドー付きのボタンを作成


http://css3pie.com

http://css3pie.com

91


Selectivizr ( http://selectivizr.com/ )CSS3セレクタをIE6-8で利用できるようにする


http://selectivizr.com

http://selectivizr.com

92


CSS3Please!（http://css3please.com/）CSS3を各種ブラウザで使えるようなルールを作成してくれる


http://css3please.com

http://css3please.com

93


Grad3 ( http://grad3.ecoloniq.jp/ )CSS3のグラデーションを生成するサービス(日本人が開発)


http://grad3.ecoloniq.jp

http://grad3.ecoloniq.jp

94

対応状況確認サイト

Modernizr ( http://modernizr.com/ )jsをソース内に埋め込みブラウザのCSS3対応状況を調べることができる


http://modernizr.com

http://modernizr.com

95

(スマフォから離れて)CSS3でできること

CSS3/jQuery Clock demohttp://css-tricks.com/examples/CSS3Clock/

回転する風車http://css3.zxq.net/wind/Wind_Electricity.html


http://css-tricks.com/examples/CSS3Clock/









http://css3.zxq.net/wind/Wind_Electricity.html

http://css3.zxq.net/wind/Wind_Electricity.html

96

CSS3表現する

ボタンなどを画像ではなくCSS3で表現することのメリット

ファイルサイズが軽量化できる

画像の解像度に依存しない

非対応ブラウザどうするか？

ポリフィル使う


まめちしき


98

ターゲットユーザーの決め方（対応端末）

アクセス解析でみて多い端末

購買者の多い端末

WindowsPhoneやBlackberryをどうするか？( サイトによっては携帯ブラウザよりもレア )


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" />


100

画像ファイルについて

大きいサイズの画像を、そのままスマートフォンで表示するため、ファイルサイズが大きく転送に時間がかかる場合がある

スマートフォンの横幅の解像度に合わせた画像ファイルを用意する

画像ファイルの大きさにも注意大２メガピクセルまで（デジカメの写真やCSS Sprite）


101

ファイルを扱う時のポイント

Windows Mediaなどに対応しておらず、Flashに対応しているOSも限定される

HTML5など他の技術を使用して対応する

ファイルのアップロード・ダウンロードが出来ない

専用アプリを作って対応する


102

position:fixedの違い

iOS

iOS4まで非対応

iOS5から対応URLに#がついている場合に消えたりする場合も。。。

Androidの場合

Android 2.2から対応

viewportで、content="user-scalable=no"　　　　　　　　　　　　　　　　　にする必要がある


103

overflow:scrollの違い

iOS4まで　→　非対応

iOS5から　→　対応

スマフォでは拡大縮小したりするのでユーザビリティの観点から使いづらい。

構成を変更することで対応


104

iOSブラウザの標準フォントの変更

iOSのバージョンによりフォントが異なる

iOS5まで　→　ゴシック体

iOS6から　→　明朝体

注意！

font-family指定なしでゴシック体で表示されていたサイトがiOS6以降では明朝体になってしまい修正する必要が発生

仕様変更を踏まえたコーディングを行うことで対応していく


105

Androidの仕様について

太字に対応していない

Border-radius　Androidだと少しギザギザになる

http://www.slideshare.net/HiroakiWakamatsu/ss-12718639

参考cssnite in OSAKA VOL.29

　スマートフォンブラウザ不具合特集 (株式会社ジークス　若松様)

　に詳しい不具合の情報が掲載されているます


106

スマートフォン固有の動作

オンマウスという概念がない

リンクを分かりやすくする必要がある。

タッチしてもリンクが反応したか分かりづらい

タップするとハイライトされる

a{-webkit-tap-highlight-color : rgba(00,33,99,0.60);}

※iPhoneのみ対応


制作とスマートフォンサイト


108

スマートフォンサイト制作で気をつけること

対象ユーザーの年齢、性別、利用目的に対応方法は様々

PCより画面が狭い

　→　配置や見せ方、ファーストビューなど

バグや仕様の他だけでなく

「内容（コンテンツ）」についても検討したほうがよい。


109

UI＆UXについて

対象ユーザーの年齢、性別、利用目的に対応方法は様々

PCより画面が狭い　→　配置や見せ方、ファーストビューなど

バグや仕様の他だけでなく「内容（コンテンツ）」についても検討したほうがよい。

フォントの大きさは・・・？

ボタンの低限なサイズ・・・？

画像間の低限の幅・・・？

＜実際に困ったこと＞


110

モバイルファーストという考え方

PCよりも画面が狭いスマートフォンに、効果的にコンテンツを見せるためにはより情報を精査し表示する必要がある

作る順番「ユーザーにとって必要な情報・必要な機能かなにか？」を考え、制約の多いスマートフォンサイトから作成した方が必要とする情報がより明確になる。

ソースを書く順番モバイル向け→タブレット向け→PC向けの順に書いた方が無駄が少なくなる（例えば、わざわざフロートさせたコンテンツをフロート解除させたり）


111

最後に

課題も多いスマートフォン用Webサイト

案件を受けた際には、仕様やバグなどについてクライアント

に理解して貰った上で不可能な動作・挙動・表示であれば、

方向転換なりして進めていく必要があります。


スマートフォン対応とレスポンシブWebデザイン

Documents

Transcript of スマートフォン対応とレスポンシブWebデザイン