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

第０回目
スマートフォン対応とレスポンシブWebデザイン
みま & たま

1
12年12月17日月曜日

自己紹介

みま (ハンドルネーム)
＜活動＞
都内でWeb制作に携わっています
マークアップを中心に担当

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

2

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

ヒト

人
スマートフォン

ひと

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

3

本日のアジェンダ

スマートフォンの利用者の傾向
スマートフォン対応について（利用者側の視点）
スマートフォンへの対応方法（作成者側の視点）
レスポンシブWebデザインとは
ハンズオン
レスポンシブWebデザインのポイント
HTML5とCSS3
まめちしき
制作とスマートフォンサイト

4

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

5

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

携帯スマートフォン
4000万台

3489
3000万台 3210 3110
2909
2417
2000万台
1857

1000万台 1130
855

0万台 110 234
2008 2009 2010 2011 2012(予)
※MM総研調べ


年代別スマートフォン所有割合
全体 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より


スマートフォンはいつ使う？

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

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

9


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

10



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

10




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

10





ピンチイン・ピンチアウト（画像縮小・拡大）を
必要とするサイトはユーザーが離れていく

10






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

10




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

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

10


スマートフォン購入した理由の６０％はPCサイトを
閲覧するため
　http://research.lifemedia.jp/2011/05/110511_smartphone.html#more
　※ライフメディア調べ

スマートフォンページが喜ばれないこともある。
PCで見たときと見え方が違う・・・

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

作り手の配慮が必ずしも喜ばれるとは限らない。
n PC用とスマフォ用ページをユーザーが選択できるように。

11


スマートフォン用サイト制作において、
頭を抱えないことはない。

12



少し過言です。

12



どんなバグがあるか

12




どのタグが非対応か

12




どのタグが非対応か

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

12


解像度がバラバラ

画面が小さい

オンマウスの概念がない

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

指定ありデフォルトのViewport

13

1. 解像度がバラバラ

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

全部に対応しよう！

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

14

1. 解像度がバラバラ

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

全部に対応しよう！

現在：何百種類・・・

今後もどんどん増えていきます。
そんなに対応するなんて無理！

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

14

スマートフォンの解像度およびppi（１インチあたりのピクセル密度）
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

Retinaの解像度について

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

●CSSデバイス
　画像の1ピクセルを画像ピクセル
従来　：1csspx = 1dpx

●ピクセルデバイス Retina：1csspx = 2dpx
　デバイスのピクセル

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

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

16

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

17

対応方法の種類

アプリケーション型

プログラム変換型

マルチソース型

ワンソース型

18



HTML CSS PC

アプリケーションスマートフォン

19



HTML CSS PC

プログラムで変換する

HTML CSS スマートフォン

20



HTML CSS PC

HTML CSS スマートフォン

21


ワンソース型

CSS PC

HTML

CSS スマートフォン

22


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

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

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

23


ネイティブ

Webアプリ

ハイブリッド

24


ネイティブ

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

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

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

25


Webアプリ

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

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

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

26


ハイブリッドアプリ

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

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

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

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

27


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

方法は大きく分けて２種類
ソース上にタグを埋め込み外部のサービスを利用する方法
Webサーバにモジュールを追加する方法

アクセス数に応じた費用が発生することが多い
比較サイト
http://smartphone-japan.com/2012/04/06/smartphone-convert-services/

28


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

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

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

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

29


フルスクラッチ

フレームワーク

jQuery Mobile

Sencha Touch フレームワーク選び重要
FRAMELESS

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

30

マルチソース型(フレームワーク)

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


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

JavaScriptで記述

WebKit系ブラウザに
対応

32


FRAMELESS
http://framelessgrid.com/

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

33

マルチソース型(サンプル)

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

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

UserAgentをみてふりわけを行う

JavaScriptで行う

.htaccessで行う

UserAgentのポイント

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

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

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

35

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

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(conﬁrm('スマートフォン用のサイトがあります。表示しますか？')) {
            location.href = 'http://www.example.com/sp/';
          }
   }
</script>

36

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

.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

ワンソース型

HTMLファイルは１つ

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

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

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

38


39



一つのHTMLを使用する

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

40

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

可変させるパターン例

41

ブレイクポイントとは？

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

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

42

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

ブラウザ幅を狭めると
ちょっと変わります。

43


ブラウザ幅を狭めると
ちょっと変わります。

ブレイクポイントは

721px
44


どうすればいいか？
（色々な方法あり）

45

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

MediaQueries

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

MediaQueriesの記述方法

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

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

@import：すっきりする

46

MediaQueriesの記述方法 -その１-

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

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

メジャーな書き方

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

47

MediaQueriesの記述方法 -その２-

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

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

無駄に長くなる

＠importより軽い

48

MediaQueriesの記述方法 -その３-

@importルール：

@import url('b.css');

メンテナンスしやすい

49

MediaQueries未対応ブラウザには

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

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

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

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



50

ViewPortとは

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

iPhone4/4S

iPhone5
640px

640px

1136px
960px

51

ViewPortとは

PCサイトを表示すると
自動的に縮小されて表示される

PCサイト iPhoneで見た場合

52

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

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

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

54

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

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

55

マルチソース型の実例

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

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

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

56

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

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

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

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

57

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

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

58

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

59

仮案件

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

要望２.
更新は今まで通りがよい（更新ページ２倍はちょっ
と・・・）

●レスポンシブWebデザインにてスマートフォン対応を行
う。どのように変更するのか、ハンズオンでやり方・考え
方を学ぶ。

60

ハンズオンの流れ

ステップ１：既存の固定レイアウトを
レスポンシブにする。
→width,height,margin,paddingのpxを変更する

ステップ２：スマートフォンで見れるようにする
→MediaQueriesやスマートフォン用CSS、
　JavaScriptを入れる。

ステップ３：スマートフォンならではの機能を追加
→タッチアップ時のハイライトやWebクリップなど

61


実機で確認したら・・・
フォントの大きさや間隔などの微調整を行う
（ハンズオンには入れていません。）

62


配布ファイルの説明
Facebookページにもフォルダをアップロードしています。
https://www.facebook.com/it.zerogo

00フォルダ・・・初期状態の固定レイアウト
01フォルダ・・・ステップ１のみ終了した状態
02フォルダ・・・ステップ２まで終了した状態
03フォルダ・・・ステップ３まで終了した状態

それぞれのステップ（１∼３）のコメントアウトを外し、重複
するタグをコメントアウトします。変更方法は次のページにて→

63

コメントアウト変更方法
→下の例にあるステップ１ではpxをemに変更する作業を行う。
コメントアウトせずに削除でもOK

header#navtop {
/* ステップ1
" margin-bottom: 0.5em;*/
" margin-bottom: 5px;
" clear: both;
" overﬂow: hidden;
}

header#navtop {
/* ステップ1 */
" margin-bottom: 0.5em;
" /* margin-bottom: 5px; */
" clear: both;
" overﬂow: hidden;
}

64


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

65


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

66

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

67

動作確認方法

動作確認の方法
Chromeのデベロッパーツール
Firefoxのツール
ブックマークレット
シミュレーター
やはり実機でないとわからないことも…

68

Chromeで確認

Chrome デベロッパーツール

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

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

69

Firefoxで確認

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

Firefox 15から提供

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

Windows Ctrl+Shift+M

Mac Option+command+M

70

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

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

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

71

シミュレータで確認

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

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

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

72

シミュレータで確認

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

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

73

スマートフォン対応時に使用するタグ

ステータスバーの色を変更する
<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


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

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

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

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

75


タップするとハイライトされる
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

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


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

77

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

78

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

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

SEOでのメリット

被リンク先URLが分散しない
クローラーのクロール回数が減る
検索結果のリンク先がPC、スマフォで同一となる
ソーシャルメディア等でのシェアやリンクが容易である

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

79

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

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

画像の表示サイズをブラウザ側で調節・リサイズ
CPUとメモリに負荷
PCと画像ファイルサイズが同じ　→　転送量が多い
ブレークポイントを増やし過ぎないように注意する
設計への負担
CSSファイルが長くなる
ブレイクポイントはデザインに応じて柔軟に決定する

80

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

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

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

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

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

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

実機での確認が重要

81

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

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

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

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

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

82

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

CSS3　please!　リアルタイム表示

83

HTML5とCSS3

84

HTML5・CSS3の対応状況

スマートフォンはHTML5やCSS3が使える！
　とよく言われていますが・・・

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

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

85

スマートフォンのブラウザにも種類がある

標準ブラウザ

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

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

対応状況の確認

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

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

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

CSS3 PIE

Selectivizr

CSS3Please!

Grad3

89


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

90


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

91


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

92


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

93

対応状況確認サイト

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

94

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

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

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

95

CSS3表現する

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

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

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

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

ポリフィル使う

96

まめちしき

97

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

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

購買者の多い端末

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

98

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

画像ファイルについて

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

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

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

100

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

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

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

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

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

101

position:fixedの違い

iOS

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

Androidの場合
Android 2.2から対応
viewportで、content="user-scalable=no"
　　　　　　　　　　　　　　　　　にする必要がある

102

overflow:scrollの違い

iOS4まで　→　非対応

iOS5から　→　対応

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

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

103

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

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

iOS5まで　→　ゴシック体

iOS6から　→　明朝体

注意！

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

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

104

Androidの仕様について

太字に対応していない

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

参考
cssnite in OSAKA VOL.29
　スマートフォンブラウザ不具合特集
(株式会社ジークス　若松様)
http://www.slideshare.net/HiroakiWakamatsu/ss-12718639

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

105

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

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

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

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

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

a{-webkit-tap-highlight-color : rgba(00,33,99,0.60);}
※iPhoneのみ対応

106

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

107

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

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

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

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

108

UI＆UXについて

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

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

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

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

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

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

＜実際に困ったこと＞

109

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

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

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

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

110

最後に

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

案件を受けた際には、仕様やバグなどについてクライアント
に理解して貰った上で不可能な動作・挙動・表示であれば、
方向転換なりして進めていく必要があります。

111

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

More Related Content

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