Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第0回目        スマートフォン対応とレスポンシブWebデザイン                みま & たま                   112年12月17日月曜日
自己紹介               みま (ハンドルネーム)               <活動>               都内でWeb制作に携わっています               マークアップを中心に担当              ...
スマートフォンをお持ちの方はどれくらいいますか?                      ヒト            人                スマートフォン                          ひと          ...
本日のアジェンダ               スマートフォンの利用者の傾向               スマートフォン対応について(利用者側の視点)               スマートフォンへの対応方法(作成者側の視点)           ...
スマートフォン利用者の傾向                         512年12月17日月曜日
スマートフォン出荷台数(日本)                                                   携帯           スマートフォン               4000万台               ...
年代別スマートフォン所有割合                全体                   31                          67.5               男20代                    ...
スマートフォンはいつ使う?               Facebook利用者の70%はスマートフォンからアクセス               2011/12/7付 MMD研究所発表「Facebookインサイト調査」より            ...
スマートフォン対応について                         912年12月17日月曜日
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                           1012年12月17日月曜日
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                           1012年12月1...
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                画像が小さすぎて押せない        ...
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                画像が小さすぎて押せない        ...
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                画像が小さすぎて押せない        ...
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                画像が小さすぎて押せない        ...
スマートフォン対応について               PCサイトをそのまま表示させることに対する問題点                不安定なキャリア回線=通信回線の制限                画像が小さすぎて押せない        ...
スマートフォン対応について               スマートフォン購入した理由の60%はPCサイトを               閲覧するため                http://research.lifemedia.jp/2011...
スマートフォン対応について               スマートフォン用サイト制作において、                  頭を抱えないことはない。                       1212年12月17日月曜日
スマートフォン対応について               スマートフォン用サイト制作において、                  頭を抱えないことはない。                             少し過言です。          ...
スマートフォン対応について                  スマートフォン用サイト制作において、                     頭を抱えないことはない。               どんなバグがあるか                ...
スマートフォン対応について                  スマートフォン用サイト制作において、                     頭を抱えないことはない。               どんなバグがあるか                ...
スマートフォン対応について                  スマートフォン用サイト制作において、                     頭を抱えないことはない。               どんなバグがあるか                ...
スマートフォン対応について                  スマートフォン用サイト制作において、                     頭を抱えないことはない。               どんなバグがあるか                ...
スマートフォン対応について               解像度がバラバラ               画面が小さい               オンマウスの概念がない               タッチしてもリンクが              ...
1. 解像度がバラバラ               まず・・・               *解像度がOS、バージョンによって異なる。               全部に対応しよう!                               ...
1. 解像度がバラバラ               まず・・・               *解像度がOS、バージョンによって異なる。               全部に対応しよう!                  現在:何百種類・・・   ...
スマートフォンの解像度およびppi(1インチあたりのピクセル密度)                                                 year    横      縦     inch   ppi         ...
Retinaの解像度について                     CSSデバイスとピクセルデバイス               ●CSSデバイス                画像の1ピクセルを画像ピクセル                 ...
スマートフォンへの対応方法                         1712年12月17日月曜日
対応方法の種類               アプリケーション型               プログラム変換型               マルチソース型               ワンソース型                         ...
スマートフォンへの対応方法               アプリケーション型                  HTML          CSS      PC                     アプリケーション          スマー...
スマートフォンへの対応方法               プログラム変換型                  HTML      CSS      PC                          プログラムで変換する           ...
スマートフォンへの対応方法               マルチソース型                  HTML    CSS      PC                  HTML    CSS    スマートフォン          ...
スマートフォンへの対応方法               ワンソース型                          CSS      PC                  HTML                          CSS...
アプリケーション型               スマートフォンに最適化されているので操作性が良い               PCサイトとの関連は無いことが多い               ゲームや、特定機能のアプリケーション等で       ...
アプリケーション型               ネイティブ               Webアプリ               ハイブリッド                            2412年12月17日月曜日
アプリケーション型               ネイティブ                各OSごとに開発環境が異なるため開発コストがかかる                スマートフォン固有の機能が利用できる                マー...
アプリケーション型               Webアプリ                HTML5+CSS+JavaScriptといったWeb技術で                作成できるので開発コストが抑えられる            ...
アプリケーション型               ハイブリッドアプリ                外枠のみが各OSごとに異なる                アプリケーション内部はHTML5+CSS+JavaScriptと           ...
プログラム変換型               PCサイトや携帯サイトを変換して、                           スマートフォンに最適化する               方法は大きく分けて2種類               ...
マルチソース型               PCサイトとスマートフォンサイトを別々に構築する               スマートフォンに最適化されているので操作性が良い               PCサイトとは別々に作成・更新する必要があり...
マルチソース型               フルスクラッチ               フレームワーク                jQuery Mobile                Sencha Touch      フレームワーク選...
マルチソース型(フレームワーク)         jQuery Mobile         http://jquerymobile.com/               DW5.5から対応               UIコンポーネントが  ...
マルチソース型(フレームワーク)         Sencha Touch         http://www.sencha.com/products/touch/               JavaScriptで記述           ...
マルチソース型(フレームワーク)         FRAMELESS         http://framelessgrid.com/               em単位のグリッドで                 作れるフレームワーク  ...
マルチソース型(サンプル)               jQuery Mobileサンプル                ASCII.jp:jQuery Mobileを使った国内スマホサイト                http://asci...
マルチソース型(振り分け方)               UserAgentをみてふりわけを行う                JavaScriptで行う                .htaccessで行う               Us...
マルチソース型 (振り分け方)               JavaScriptでの記述方法               head要素内に記述する               <script type="text/javascript">   ...
マルチソース型 (振り分け方)               .htaccessでの記述方法               <IfModule mod_rewrite.c>               RewriteEngine On       ...
ワンソース型               HTMLファイルは1つ               デバイスや画面サイズによって適応するCSSを切り替えるこ               とでデバイスに最適化した表示を行う               ...
レスポンシブWebデザインとは                          3912年12月17日月曜日
レスポンシブWebデザインとは               レスポンシブWebデザインとは                一つのHTMLを使用する                スクリーン幅に応じて、CSSを切り替え、レイアウトを可      ...
レスポンシブWebデザインのパターン               可変させるパターン例                            4112年12月17日月曜日
ブレイクポイントとは?               ブレイクポイントとはCSSを切り替える境目               標準的なブレークポイントは320px、480px、768px、960px                        ...
ブレイクポイントとデザインの関係                           ブラウザ幅を狭めると                           ちょっと変わります。                      4312年12月17...
ブレイクポイントとデザインの関係                                ブラウザ幅を狭めると                                ちょっと変わります。               ブレイクポイン...
ブレイクポイントとデザインの関係                   どうすればいいか?                   (色々な方法あり)                       4512年12月17日月曜日
レスポンシブWebデザインの実装方法               MediaQueries           CSS3のMediaQueriesを使用してブレイクポイントを実装する                          Media...
MediaQueriesの記述方法 -その1-               @mediaルール:CSSソース内に記述           @media screen and(max-width:1024px){           /* 102...
MediaQueriesの記述方法 -その2-               link要素のmedia属性:ブラウザ幅に応じてcssファイルを変更           <link rel="stylesheet" href="hoge.css" ...
MediaQueriesの記述方法 -その3-               @importルール:             @import url(b.css);                 メンテナンスしやすい              ...
MediaQueries未対応ブラウザには               MediaQueriesが使用できないブラウザへの対応                IE8以下はCSS3やHTML5に対応していない                htm...
ViewPortとは               スマートフォンのディスプレイサイズは?               iPhone4/4S               iPhone5                               ...
ViewPortとは               PCサイトを表示すると               自動的に縮小されて表示される                  PCサイト                iPhoneで見た場合       ...
ViewPortとは               スマートフォンの多くは「ViewPort」が指定されている               iPhone4/4S/5では980px               「ViewPort」はコンテンツ表示領...
レスポンシブWebデザインの実例 -その1-         Shiny Demos         ( http://shinydemos.com/ )                                      5412年12...
レスポンシブWebデザインの実例 -その2-         Kingshill Cars         ( http://www.kingshillcars.com/ )                                   ...
マルチソース型の実例               Qlife ( http://www.qlife.jp/ )               UserAgentで振り分けを行なっている               色味は同じだが、スマートフォン用...
通常サイトでスマートフォンでも                        見やすくしている実例               京都造形芸術大学 通信教育部 芸術教養学科               http://www.kyoto-art.a...
レスポンシブWebデザインの実例 -その他-         Media Queries         ( http://mediaqueri.es/ )                                     5812年12...
ハンズオン               - レスポンシブWebデザインを体験してみよう -                            5912年12月17日月曜日
仮案件               要望1.               既存のサイトをスマートフォンに対応させたい               要望2.               更新は今まで通りがよい(更新ページ2倍はちょっ       ...
ハンズオンの流れ               ステップ1:既存の固定レイアウトを               レスポンシブにする。               →width,height,margin,paddingのpxを変更する      ...
ハンズオンの流れ                実機で確認したら・・・               フォントの大きさや間隔などの微調整を行う               (ハンズオンには入れていません。)                    ...
ハンズオンの流れ               配布ファイルの説明               Facebookページにもフォルダをアップロードしています。               https://www.facebook.com/it.ze...
ハンズオンの流れ           コメントアウト変更方法           →下の例にあるステップ1ではpxをemに変更する作業を行う。            コメントアウトせずに削除でもOK               header#n...
ハンズオンの流れ           コメントアウト変更方法           →下の例にあるステップ1ではpxをemに変更する作業を行う。            コメントアウトせずに削除でもOK               header#n...
ハンズオンの流れ               ブレークポイントごとのレイアウト                      6512年12月17日月曜日
ハンズオンの流れ               ブレークポイントごとのレイアウト                      6612年12月17日月曜日
現在の幅=XXpx   変更後の幅=(XX%)                         6712年12月17日月曜日
動作確認方法               動作確認の方法                Chromeのデベロッパーツール                Firefoxのツール                ブックマークレット          ...
Chromeで確認               Chrome デベロッパーツール                Windows Control+Shift+I(F12)>右下歯車>User Agent                Mac co...
Firefoxで確認               Firefox レスポンシブデザインビュー                Firefox 15から提供                Firefox>ツール>Web開発>レスポンシブデザインビュ...
ブックマークレットで確認               ブックマークレット VIEWPORT RESIZER               http://lab.maltewassermann.com/viewport-resizer/      ...
シミュレータで確認               Android SDK Emulator               Googleから提供されているAndroidエミュレータ               iPhoneシミュレータ        ...
シミュレータで確認           Ripple Emulator (Beta)           Chromeの拡張機能           http://goo.gl/ovUS6           FireMobileSimulat...
スマートフォン対応時に使用するタグ               ステータスバーの色を変更する               <meta name="apple-mobile-web-app-status-bar-style"           ...
スマートフォン対応時に使用するタグ               cssで文字サイズを指定する               -webkit-text-size-adjust: none;               ※ デスクトップのSafari...
スマートフォン対応時に使用するタグ               タップするとハイライトされる               a{               -webkit-tap-highlight-color : rgba(00,33,99,...
スマートフォン対応時に使用するタグ               ホーム画面用アイコンを指定               <!-- For iPhone 4 -->               <link rel="apple-touch-ico...
レスポンシブWebデザインのポイント                          7812年12月17日月曜日
レスポンシブWebデザインの有効な点               PC用URLとスマートフォン用URLが単一なため以下のメリット               がある                 SEOでのメリット              ...
レスポンシブWebデザインの注意点               %、em、remを使用して相対的にレイアウト幅を                                 指定することが多い               画像の表示サイズを...
レスポンシブWebデザインの                     ワークフローの考え方               同一サイトで複数のデザインが存在する                今までのワークフローでは作業量が増える         ...
解像度に応じた画像指定方法               retina.js等を使用して解像度ごとに違う画像を読み込む               複数の画像ファイルを用意し、解像度に応じてCSSで使用す               る画像ファイ...
レスポンシブWebデザインでの画像表現               CSS3 please! リアルタイム表示                               8312年12月17日月曜日
HTML5とCSS3                            8412年12月17日月曜日
HTML5・CSS3の対応状況                スマートフォンはHTML5やCSS3が使える!                とよく言われていますが・・・                意外と端末によって挙動が違ったり対応していな...
HTML5・CSS3の対応状況                スマートフォンはHTML5やCSS3が使える!                とよく言われていますが・・・                意外と端末によって挙動が違ったり対応していな...
スマートフォンのブラウザにも種類がある               標準ブラウザ                iPhone     Safari (Mobile Safari)                Android    標準ブラウザ...
端末の種類やバージョンによって対応しているかどうか                                  対応状況の確認               Can I use...(caniuse.com)               C...
対応状況の確認               HTML5TEST ( http://html5test.com/ )               ブラウザのHTML5対応状況を確認するサイト               MAX500点で対応状況に...
対応していないブラウザを対応させる方法               ポリフィル               Javascriptライブラリでブラウザの機能を補完               し、対応ブラウザと同様の表示をさせること       ...
対応していないブラウザを対応させる方法               CSS3 PIE ( http://css3pie.com/ )               グラデーション・角丸・ドロップシャドー付き               のボタンを...
対応していないブラウザを対応させる方法               Selectivizr ( http://selectivizr.com/ )               CSS3セレクタをIE6-8で利用できるようにする         ...
対応していないブラウザを対応させる方法               CSS3Please!(http://css3please.com/)               CSS3を各種ブラウザで使えるようなルールを作               ...
対応していないブラウザを対応させる方法               Grad3 ( http://grad3.ecoloniq.jp/ )               CSS3のグラデーションを生成するサービス               (日...
対応状況確認サイト               Modernizr ( http://modernizr.com/ )               jsをソース内に埋め込みブラウザのCSS3対応状               況を調べることがで...
(スマフォから離れて)CSS3でできること               CSS3/jQuery Clock demo               http://css-tricks.com/examples/CSS3Clock/        ...
CSS3表現する               ボタンなどを画像ではなくCSS3で表現すること               のメリット                ファイルサイズが軽量化できる                画像の解像度に依存し...
まめちしき                       9712年12月17日月曜日
ターゲットユーザーの決め方                         (対応端末)               アクセス解析でみて多い端末               購買者の多い端末               WindowsPhone...
Webクリップを準備しよう               Webクリップ                スマートフォンのホーム画面に                リンクを設置した際に表示される                アイコンを指定   ...
画像ファイルについて               大きいサイズの画像を、そのままスマートフォンで表示する               ため、ファイルサイズが大きく転送に時間がかかる場合があ               る            ...
ファイルを扱う時のポイント               Windows Mediaなどに対応しておらず、Flashに対応している               OSも限定される                HTML5など他の技術を使用して対応す...
position:fixedの違い               iOS                 iOS4まで非対応                 iOS5から対応                 URLに#がついている場合に消えたりす...
overflow:scrollの違い               iOS4まで → 非対応               iOS5から → 対応                スマフォでは拡大縮小したりするのでユーザビリティの観         ...
iOSブラウザの標準フォントの変更               iOSのバージョンによりフォントが異なる                iOS5まで → ゴシック体                iOS6から → 明朝体            ...
Androidの仕様について               太字に対応していない               Border-radius Androidだと少しギザギザになる           参考           cssnite in O...
スマートフォン固有の動作               オンマウスという概念がない               リンクを分かりやすくする必要がある。               タッチしてもリンクが反応したか分かりづらい             ...
制作とスマートフォンサイト                         10712年12月17日月曜日
スマートフォンサイト制作で気をつけること               対象ユーザーの年齢、性別、利用目的に対応方法は様々               PCより画面が狭い                → 配置や見せ方、ファーストビューなど   ...
UI&UXについて               対象ユーザーの年齢、性別、利用目的に対応方法は様々               PCより画面が狭い                → 配置や見せ方、ファーストビューなど              ...
モバイルファーストという考え方               PCよりも画面が狭いスマートフォンに、効果的に               コンテンツを見せるためにはより情報を精査し表示               する必要がある         ...
モバイルファーストという考え方               PCよりも画面が狭いスマートフォンに、効果的に               コンテンツを見せるためにはより情報を精査し表示               する必要がある         ...
最後に               課題も多いスマートフォン用Webサイト               案件を受けた際には、仕様やバグなどについてクライアント               に理解して貰った上で不可能な動作・挙動・表示であれば、 ...
Upcoming SlideShare
Loading in …5
×

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

13,157 views

Published on

0.5からはじめるIT勉強会

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

  1. 1. 第0回目 スマートフォン対応とレスポンシブWebデザイン みま & たま 112年12月17日月曜日
  2. 2. 自己紹介 みま (ハンドルネーム) <活動> 都内でWeb制作に携わっています マークアップを中心に担当 0.5からはじめるIT勉強会 Facebookページ https://www.facebook.com/it.zerogo 212年12月17日月曜日
  3. 3. スマートフォンをお持ちの方はどれくらいいますか? ヒト 人 スマートフォン ひと PCサイトをそのまま表示でいいのでは? スマートフォン用に設計し直す必要性って何? 312年12月17日月曜日
  4. 4. 本日のアジェンダ スマートフォンの利用者の傾向 スマートフォン対応について(利用者側の視点) スマートフォンへの対応方法(作成者側の視点) レスポンシブWebデザインとは ハンズオン レスポンシブWebデザインのポイント HTML5とCSS3 まめちしき 制作とスマートフォンサイト 412年12月17日月曜日
  5. 5. スマートフォン利用者の傾向 512年12月17日月曜日
  6. 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. 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. 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」より 812年12月17日月曜日
  9. 9. スマートフォン対応について 912年12月17日月曜日
  10. 10. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 1012年12月17日月曜日
  11. 11. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 1012年12月17日月曜日
  12. 12. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 画像が小さすぎて押せない 1012年12月17日月曜日
  13. 13. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 画像が小さすぎて押せない ピンチイン・ピンチアウト(画像縮小・拡大)を 必要とするサイトはユーザーが離れていく 1012年12月17日月曜日
  14. 14. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 画像が小さすぎて押せない ピンチイン・ピンチアウト(画像縮小・拡大)を 必要とするサイトはユーザーが離れていく 1012年12月17日月曜日
  15. 15. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 画像が小さすぎて押せない ピンチイン・ピンチアウト(画像縮小・拡大)を 必要とするサイトはユーザーが離れていく 画像は極力使わずボタンリンクは大きくすればよいのか。 1012年12月17日月曜日
  16. 16. スマートフォン対応について PCサイトをそのまま表示させることに対する問題点 不安定なキャリア回線=通信回線の制限 画像が小さすぎて押せない そういうわけではない !! ピンチイン・ピンチアウト(画像縮小・拡大)を 必要とするサイトはユーザーが離れていく 画像は極力使わずボタンリンクは大きくすればよいのか。 1012年12月17日月曜日
  17. 17. スマートフォン対応について スマートフォン購入した理由の60%はPCサイトを 閲覧するため  http://research.lifemedia.jp/2011/05/110511_smartphone.html#more  ※ライフメディア調べ スマートフォンページが喜ばれないこともある。 PCで見たときと見え方が違う・・・ 見たいコンテンツがスマートフォンでは見れない・・・ 作り手の配慮が必ずしも喜ばれるとは限らない。 n PC用とスマフォ用ページをユーザーが選択できるように。 1112年12月17日月曜日
  18. 18. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 1212年12月17日月曜日
  19. 19. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 少し過言です。 1212年12月17日月曜日
  20. 20. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 どんなバグがあるか 少し過言です。 1212年12月17日月曜日
  21. 21. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 どんなバグがあるか 少し過言です。 どのタグが非対応か 1212年12月17日月曜日
  22. 22. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 どんなバグがあるか 少し過言です。 どのタグが非対応か 1212年12月17日月曜日
  23. 23. スマートフォン対応について スマートフォン用サイト制作において、 頭を抱えないことはない。 どんなバグがあるか 少し過言です。 どのタグが非対応か スマートフォンの特徴やクセを把握し、大きなトラブルを防ごう 1212年12月17日月曜日
  24. 24. スマートフォン対応について 解像度がバラバラ 画面が小さい オンマウスの概念がない タッチしてもリンクが 反応したか分かりづらい 指定あり デフォルトのViewport 1312年12月17日月曜日
  25. 25. 1. 解像度がバラバラ まず・・・ *解像度がOS、バージョンによって異なる。 全部に対応しよう! * 解像度=幅と高さのサイズ(px) 1412年12月17日月曜日
  26. 26. 1. 解像度がバラバラ まず・・・ *解像度がOS、バージョンによって異なる。 全部に対応しよう! 現在:何百種類・・・ 今後もどんどん増えていきます。 そんなに対応するなんて無理! * 解像度=幅と高さのサイズ(px) 1412年12月17日月曜日
  27. 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 1512年12月17日月曜日
  28. 28. Retinaの解像度について CSSデバイスとピクセルデバイス ●CSSデバイス  画像の1ピクセルを画像ピクセル 従来 :1csspx = 1dpx ●ピクセルデバイス Retina:1csspx = 2dpx  デバイスのピクセル 1:1だと文字が小さすぎるので1:2に。 →画像や文字が2倍サイズになりぼける 作成のこつ 高解像度の画像を作成する時には偶数で割り切れる値にする。 文字部分はアンチエイリアスなどで目視で微調整していく。 1612年12月17日月曜日
  29. 29. スマートフォンへの対応方法 1712年12月17日月曜日
  30. 30. 対応方法の種類 アプリケーション型 プログラム変換型 マルチソース型 ワンソース型 1812年12月17日月曜日
  31. 31. スマートフォンへの対応方法 アプリケーション型 HTML CSS PC アプリケーション スマートフォン 1912年12月17日月曜日
  32. 32. スマートフォンへの対応方法 プログラム変換型 HTML CSS PC プログラムで変換する HTML CSS スマートフォン 2012年12月17日月曜日
  33. 33. スマートフォンへの対応方法 マルチソース型 HTML CSS PC HTML CSS スマートフォン 2112年12月17日月曜日
  34. 34. スマートフォンへの対応方法 ワンソース型 CSS PC HTML CSS スマートフォン 2212年12月17日月曜日
  35. 35. アプリケーション型 スマートフォンに最適化されているので操作性が良い PCサイトとの関連は無いことが多い ゲームや、特定機能のアプリケーション等で                利用されることが多い (例:乗り換え案内、天気予報、地図等) 2312年12月17日月曜日
  36. 36. アプリケーション型 ネイティブ Webアプリ ハイブリッド 2412年12月17日月曜日
  37. 37. アプリケーション型 ネイティブ 各OSごとに開発環境が異なるため開発コストがかかる スマートフォン固有の機能が利用できる マーケット(AppStore/Google Play等)から スマートフォンにダウンロードして使用する 2512年12月17日月曜日
  38. 38. アプリケーション型 Webアプリ HTML5+CSS+JavaScriptといったWeb技術で 作成できるので開発コストが抑えられる スマートフォン固有の機能の利用には制限がある Webサイトへ接続して使用する マーケット(AppStore/Google Play等)は利用できない 2612年12月17日月曜日
  39. 39. アプリケーション型 ハイブリッドアプリ 外枠のみが各OSごとに異なる アプリケーション内部はHTML5+CSS+JavaScriptと いったWeb技術で作成できるので、ネイティブと比較して 開発コストが抑えられる スマートフォン固有の機能の利用には制限がある マーケット(AppStore/Google Play等)から スマートフォンにダウンロードして使用する 2712年12月17日月曜日
  40. 40. プログラム変換型 PCサイトや携帯サイトを変換して、             スマートフォンに最適化する 方法は大きく分けて2種類 ソース上にタグを埋め込み外部のサービスを利用する方法 Webサーバにモジュールを追加する方法 アクセス数に応じた費用が発生することが多い 比較サイト http://smartphone-japan.com/2012/04/06/smartphone-convert-services/ 2812年12月17日月曜日
  41. 41. マルチソース型 PCサイトとスマートフォンサイトを別々に構築する スマートフォンに最適化されているので操作性が良い PCサイトとは別々に作成・更新する必要があり                運用コストが増える 見た目がPCとスマートフォンで異なる 2912年12月17日月曜日
  42. 42. マルチソース型 フルスクラッチ フレームワーク jQuery Mobile Sencha Touch フレームワーク選び重要 FRAMELESS それぞれの特徴を知ることが大切 3012年12月17日月曜日
  43. 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以前は一部対応 3112年12月17日月曜日
  44. 44. マルチソース型(フレームワーク) Sencha Touch http://www.sencha.com/products/touch/ JavaScriptで記述 WebKit系ブラウザに 対応 3212年12月17日月曜日
  45. 45. マルチソース型(フレームワーク) FRAMELESS http://framelessgrid.com/ em単位のグリッドで 作れるフレームワーク 3312年12月17日月曜日
  46. 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 3412年12月17日月曜日
  47. 47. マルチソース型(振り分け方) UserAgentをみてふりわけを行う JavaScriptで行う .htaccessで行う UserAgentのポイント iOSを搭載するスマートフォン(および相当の端末)に は、「iPod」か「iPhone」が含まれる Androidのスマートフォンには、「Android」と「Mobile」 が含まれる Windows Phoneは「Windows」と「Phone」が含まれる (「IEMobile」で判定してもよい) 3512年12月17日月曜日
  48. 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> 3612年12月17日月曜日
  49. 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サーバに              導入されている必要がある 3712年12月17日月曜日
  50. 50. ワンソース型 HTMLファイルは1つ デバイスや画面サイズによって適応するCSSを切り替えるこ とでデバイスに最適化した表示を行う 1つのHTMLファイルで管理しているので、作成・更新作業を 複数のファイルに対して行う必要がないので、運用コストが 抑えられる レスポンシブWebデザインが主流になりつつある 3812年12月17日月曜日
  51. 51. レスポンシブWebデザインとは 3912年12月17日月曜日
  52. 52. レスポンシブWebデザインとは レスポンシブWebデザインとは 一つのHTMLを使用する スクリーン幅に応じて、CSSを切り替え、レイアウトを可 変させるデザイン 4012年12月17日月曜日
  53. 53. レスポンシブWebデザインのパターン 可変させるパターン例 4112年12月17日月曜日
  54. 54. ブレイクポイントとは? ブレイクポイントとはCSSを切り替える境目 標準的なブレークポイントは320px、480px、768px、960px 4212年12月17日月曜日
  55. 55. ブレイクポイントとデザインの関係 ブラウザ幅を狭めると ちょっと変わります。 4312年12月17日月曜日
  56. 56. ブレイクポイントとデザインの関係 ブラウザ幅を狭めると ちょっと変わります。 ブレイクポイントは 721px 4412年12月17日月曜日
  57. 57. ブレイクポイントとデザインの関係 どうすればいいか? (色々な方法あり) 4512年12月17日月曜日
  58. 58. レスポンシブWebデザインの実装方法 MediaQueries  CSS3のMediaQueriesを使用してブレイクポイントを実装する MediaQueriesの記述方法 @mediaルール:CSSソース内に記述 link要素のmedia属性:ブラウザ幅に応じてcssファイルを変更 @import:すっきりする 4612年12月17日月曜日
  59. 59. MediaQueriesの記述方法 -その1- @mediaルール:CSSソース内に記述 @media screen and(max-width:1024px){ /* 1024pxまでのサイズに適応されるスタイルシート */ } メジャーな書き方 httpリクエストを減らすにはコレ 4712年12月17日月曜日
  60. 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より軽い 4812年12月17日月曜日
  61. 61. MediaQueriesの記述方法 -その3- @importルール:   @import url(b.css);   メンテナンスしやすい 4912年12月17日月曜日
  62. 62. MediaQueries未対応ブラウザには MediaQueriesが使用できないブラウザへの対応 IE8以下はCSS3やHTML5に対応していない html5.js、 html5shiv.js、 Respond.js等を使用する IE8以下に適応させるために、以下のように記述して分岐 させる   <!--[if lt IE 9]>   <script src="html5.js"></script>  ※   <![endif]--> 5012年12月17日月曜日
  63. 63. ViewPortとは スマートフォンのディスプレイサイズは? iPhone4/4S iPhone5 640px 640px 1136px 960px 5112年12月17日月曜日
  64. 64. ViewPortとは PCサイトを表示すると 自動的に縮小されて表示される PCサイト iPhoneで見た場合 5212年12月17日月曜日
  65. 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」で表示倍率を指定することが可能 5312年12月17日月曜日
  66. 66. レスポンシブWebデザインの実例 -その1- Shiny Demos ( http://shinydemos.com/ ) 5412年12月17日月曜日
  67. 67. レスポンシブWebデザインの実例 -その2- Kingshill Cars ( http://www.kingshillcars.com/ ) 5512年12月17日月曜日
  68. 68. マルチソース型の実例 Qlife ( http://www.qlife.jp/ ) UserAgentで振り分けを行なっている 色味は同じだが、スマートフォン用は完全に別サイト となり最適化されている 5612年12月17日月曜日
  69. 69. 通常サイトでスマートフォンでも 見やすくしている実例 京都造形芸術大学 通信教育部 芸術教養学科 http://www.kyoto-art.ac.jp/t-tenohira/index.php クリックする場所がわかりやすい 講師をタッチしてhistory backすると 不透明が残っているのは残念… 5712年12月17日月曜日
  70. 70. レスポンシブWebデザインの実例 -その他- Media Queries ( http://mediaqueri.es/ ) 5812年12月17日月曜日
  71. 71. ハンズオン - レスポンシブWebデザインを体験してみよう - 5912年12月17日月曜日
  72. 72. 仮案件 要望1. 既存のサイトをスマートフォンに対応させたい 要望2. 更新は今まで通りがよい(更新ページ2倍はちょっ と・・・) ●レスポンシブWebデザインにてスマートフォン対応を行 う。どのように変更するのか、ハンズオンでやり方・考え 方を学ぶ。 6012年12月17日月曜日
  73. 73. ハンズオンの流れ ステップ1:既存の固定レイアウトを レスポンシブにする。 →width,height,margin,paddingのpxを変更する ステップ2:スマートフォンで見れるようにする →MediaQueriesやスマートフォン用CSS、  JavaScriptを入れる。 ステップ3:スマートフォンならではの機能を追加 →タッチアップ時のハイライトやWebクリップなど 6112年12月17日月曜日
  74. 74. ハンズオンの流れ 実機で確認したら・・・ フォントの大きさや間隔などの微調整を行う (ハンズオンには入れていません。) 6212年12月17日月曜日
  75. 75. ハンズオンの流れ 配布ファイルの説明 Facebookページにもフォルダをアップロードしています。 https://www.facebook.com/it.zerogo 00フォルダ・・・初期状態の固定レイアウト 01フォルダ・・・ステップ1のみ終了した状態 02フォルダ・・・ステップ2まで終了した状態 03フォルダ・・・ステップ3まで終了した状態 それぞれのステップ(1∼3)のコメントアウトを外し、重複 するタグをコメントアウトします。変更方法は次のページにて→ 6312年12月17日月曜日
  76. 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; } 6412年12月17日月曜日
  77. 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; } 6412年12月17日月曜日
  78. 78. ハンズオンの流れ ブレークポイントごとのレイアウト 6512年12月17日月曜日
  79. 79. ハンズオンの流れ ブレークポイントごとのレイアウト 6612年12月17日月曜日
  80. 80. 現在の幅=XXpx   変更後の幅=(XX%) 6712年12月17日月曜日
  81. 81. 動作確認方法 動作確認の方法 Chromeのデベロッパーツール Firefoxのツール ブックマークレット シミュレーター やはり実機でないとわからないことも… 6812年12月17日月曜日
  82. 82. Chromeで確認 Chrome デベロッパーツール Windows Control+Shift+I(F12)>右下歯車>User Agent Mac command+option+I>右下歯車>User Agent 6912年12月17日月曜日
  83. 83. Firefoxで確認 Firefox レスポンシブデザインビュー Firefox 15から提供 Firefox>ツール>Web開発>レスポンシブデザインビュー Windows Ctrl+Shift+M Mac Option+command+M 7012年12月17日月曜日
  84. 84. ブックマークレットで確認 ブックマークレット VIEWPORT RESIZER http://lab.maltewassermann.com/viewport-resizer/ 真ん中の画像をドラッグ&ドロップでブックマークバーへ 好きなサイトを開いて、クリック 7112年12月17日月曜日
  85. 85. シミュレータで確認 Android SDK Emulator Googleから提供されているAndroidエミュレータ iPhoneシミュレータ appleのx-codeに同梱(純正のシミュレータ) iWebInspector http://www.iwebinspector.com/ iPhoneシミュレータ内のSafariでソースを 表示させhtmlやcssを編集できる。 7212年12月17日月曜日
  86. 86. シミュレータで確認 Ripple Emulator (Beta)  Chromeの拡張機能  http://goo.gl/ovUS6 FireMobileSimulator  携帯端末・スマートフォン表示をシミュレート  Chromeの拡張機能およびFirefoxアドオンで提供  Chrome http://goo.gl/cozjS  Firefox http://goo.gl/4e266 7312年12月17日月曜日
  87. 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"> 7412年12月17日月曜日
  88. 88. スマートフォン対応時に使用するタグ cssで文字サイズを指定する -webkit-text-size-adjust: none; ※ デスクトップのSafariで意図しない表示をすることがあ るらしい デバイスに合わせて文字サイズ変更※小さくなりすぎる -webkit-text-size-adjust: auto(=デフォルト値) %で指定する -webkit-text-size-adjust: 100%; タップの範囲を大きくする※PCだとよくてもスマートフォン だと押しづらいものが多いため .class a{ display: block; } 7512年12月17日月曜日
  89. 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=住所+名称"> 7612年12月17日月曜日
  90. 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"> 7712年12月17日月曜日
  91. 91. レスポンシブWebデザインのポイント 7812年12月17日月曜日
  92. 92. レスポンシブWebデザインの有効な点 PC用URLとスマートフォン用URLが単一なため以下のメリット がある SEOでのメリット 被リンク先URLが分散しない クローラーのクロール回数が減る 検索結果のリンク先がPC、スマフォで同一となる ソーシャルメディア等でのシェアやリンクが容易である Googleも推奨  「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」   http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 7912年12月17日月曜日
  93. 93. レスポンシブWebデザインの注意点 %、em、remを使用して相対的にレイアウト幅を                   指定することが多い 画像の表示サイズをブラウザ側で調節・リサイズ CPUとメモリに負荷 PCと画像ファイルサイズが同じ → 転送量が多い ブレークポイントを増やし過ぎないように注意する 設計への負担 CSSファイルが長くなる ブレイクポイントはデザインに応じて柔軟に決定する 8012年12月17日月曜日
  94. 94. レスポンシブWebデザインの ワークフローの考え方 同一サイトで複数のデザインが存在する 今までのワークフローでは作業量が増える お客様とデザインについて共有が重要 静的なカンプは過去の手法になる? PSやFWでカンプを作って切り出すやり方は過去の方法にな る? 実機での確認が重要 8112年12月17日月曜日
  95. 95. 解像度に応じた画像指定方法 retina.js等を使用して解像度ごとに違う画像を読み込む 複数の画像ファイルを用意し、解像度に応じてCSSで使用す る画像ファイルを使い分ける 画像ファイルにSVGを使用する img_name.jpg ※対応していないブラウザがある img_name@2x.jpg  重いためロゴなどでの使用がおススメ ボタンをCSS3で作る CSSジェネレータを活用する 8212年12月17日月曜日
  96. 96. レスポンシブWebデザインでの画像表現 CSS3 please! リアルタイム表示 8312年12月17日月曜日
  97. 97. HTML5とCSS3 8412年12月17日月曜日
  98. 98. HTML5・CSS3の対応状況 スマートフォンはHTML5やCSS3が使える!  とよく言われていますが・・・ 意外と端末によって挙動が違ったり対応していなかったり。 色んなサードパーティがあります。 8512年12月17日月曜日
  99. 99. HTML5・CSS3の対応状況 スマートフォンはHTML5やCSS3が使える!  とよく言われていますが・・・ 意外と端末によって挙動が違ったり対応していなかったり。 色んなサードパーティがあります。 8512年12月17日月曜日
  100. 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   等 8612年12月17日月曜日
  101. 101. 端末の種類やバージョンによって対応しているかどうか 対応状況の確認 Can I use...(caniuse.com) CSS3/HTML5/JS APIの端末への対応状況が確認出来る スマートフォン用ブラウザ iOS Safari Android Browser Blackberry Browser Opera Mini PC用ブラウザ Internet Explorer Firefox Chrome Safari 8712年12月17日月曜日
  102. 102. 対応状況の確認 HTML5TEST ( http://html5test.com/ ) ブラウザのHTML5対応状況を確認するサイト MAX500点で対応状況に応じて           点数が表示される 確認ではなく対応させる方法はないの・・・? 8812年12月17日月曜日
  103. 103. 対応していないブラウザを対応させる方法 ポリフィル Javascriptライブラリでブラウザの機能を補完 し、対応ブラウザと同様の表示をさせること CSS3 PIE Selectivizr CSS3Please! Grad3 8912年12月17日月曜日
  104. 104. 対応していないブラウザを対応させる方法 CSS3 PIE ( http://css3pie.com/ ) グラデーション・角丸・ドロップシャドー付き のボタンを作成 9012年12月17日月曜日
  105. 105. 対応していないブラウザを対応させる方法 Selectivizr ( http://selectivizr.com/ ) CSS3セレクタをIE6-8で利用できるようにする 9112年12月17日月曜日
  106. 106. 対応していないブラウザを対応させる方法 CSS3Please!(http://css3please.com/) CSS3を各種ブラウザで使えるようなルールを作 成してくれる 9212年12月17日月曜日
  107. 107. 対応していないブラウザを対応させる方法 Grad3 ( http://grad3.ecoloniq.jp/ ) CSS3のグラデーションを生成するサービス (日本人が開発) 9312年12月17日月曜日
  108. 108. 対応状況確認サイト Modernizr ( http://modernizr.com/ ) jsをソース内に埋め込みブラウザのCSS3対応状 況を調べることができる 9412年12月17日月曜日
  109. 109. (スマフォから離れて)CSS3でできること CSS3/jQuery Clock demo http://css-tricks.com/examples/CSS3Clock/ 回転する風車 http://css3.zxq.net/wind/Wind_Electricity.html 9512年12月17日月曜日
  110. 110. CSS3表現する ボタンなどを画像ではなくCSS3で表現すること のメリット ファイルサイズが軽量化できる 画像の解像度に依存しない 非対応ブラウザどうするか? ポリフィル使う 9612年12月17日月曜日
  111. 111. まめちしき 9712年12月17日月曜日
  112. 112. ターゲットユーザーの決め方 (対応端末) アクセス解析でみて多い端末 購買者の多い端末 WindowsPhoneやBlackberryをどうするか? ( サイトによっては携帯ブラウザよりもレア ) 9812年12月17日月曜日
  113. 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" /> 9912年12月17日月曜日
  114. 114. 画像ファイルについて 大きいサイズの画像を、そのままスマートフォンで表示する ため、ファイルサイズが大きく転送に時間がかかる場合があ る スマートフォンの横幅の解像度に合わせた画像ファイルを用 意する 画像ファイルの大きさにも注意 最大2メガピクセルまで(デジカメの写真やCSS Sprite) 10012年12月17日月曜日
  115. 115. ファイルを扱う時のポイント Windows Mediaなどに対応しておらず、Flashに対応している OSも限定される HTML5など他の技術を使用して対応する ファイルのアップロード・ダウンロードが出来ない 専用アプリを作って対応する 10112年12月17日月曜日
  116. 116. position:fixedの違い iOS iOS4まで非対応 iOS5から対応 URLに#がついている場合に消えたりする場合も。。。 Androidの場合 Android 2.2から対応 viewportで、content="user-scalable=no"                  にする必要がある 10212年12月17日月曜日
  117. 117. overflow:scrollの違い iOS4まで → 非対応 iOS5から → 対応 スマフォでは拡大縮小したりするのでユーザビリティの観 点から使いづらい。 構成を変更することで対応 10312年12月17日月曜日
  118. 118. iOSブラウザの標準フォントの変更 iOSのバージョンによりフォントが異なる iOS5まで → ゴシック体 iOS6から → 明朝体 注意! font-family指定なしでゴシック体で表示されていたサイ トがiOS6以降では明朝体になってしまい修正する必要が発 生 仕様変更を踏まえたコーディングを行うことで対応してい く 10412年12月17日月曜日
  119. 119. Androidの仕様について 太字に対応していない Border-radius Androidだと少しギザギザになる 参考 cssnite in OSAKA VOL.29  スマートフォンブラウザ不具合特集 (株式会社ジークス 若松様) http://www.slideshare.net/HiroakiWakamatsu/ss-12718639  に詳しい不具合の情報が掲載されているます 10512年12月17日月曜日
  120. 120. スマートフォン固有の動作 オンマウスという概念がない リンクを分かりやすくする必要がある。 タッチしてもリンクが反応したか分かりづらい タップするとハイライトされる a{-webkit-tap-highlight-color : rgba(00,33,99,0.60);} ※iPhoneのみ対応 10612年12月17日月曜日
  121. 121. 制作とスマートフォンサイト 10712年12月17日月曜日
  122. 122. スマートフォンサイト制作で気をつけること 対象ユーザーの年齢、性別、利用目的に対応方法は様々 PCより画面が狭い  → 配置や見せ方、ファーストビューなど バグや仕様の他だけでなく 「内容(コンテンツ)」についても検討したほうがよい。 10812年12月17日月曜日
  123. 123. UI&UXについて 対象ユーザーの年齢、性別、利用目的に対応方法は様々 PCより画面が狭い  → 配置や見せ方、ファーストビューなど バグや仕様の他だけでなく 「内容(コンテンツ)」についても検討したほうがよい。 フォントの大きさは・・・? ボタンの最低限なサイズ・・・? 画像間の最低限の幅・・・? <実際に困ったこと> 10912年12月17日月曜日
  124. 124. モバイルファーストという考え方 PCよりも画面が狭いスマートフォンに、効果的に コンテンツを見せるためにはより情報を精査し表示 する必要がある 作る順番 「ユーザーにとって必要な情報・必要な機能かなにか?」 を考え、制約の多いスマートフォンサイトから作成した方が 必要とする情報がより明確になる。 ソースを書く順番 モバイル向け→タブレット向け→PC向けの順に書いた方が 無駄が少なくなる(例えば、わざわざフロートさせたコン テンツをフロート解除させたり) 11012年12月17日月曜日
  125. 125. モバイルファーストという考え方 PCよりも画面が狭いスマートフォンに、効果的に コンテンツを見せるためにはより情報を精査し表示 する必要がある 作る順番 「ユーザーにとって必要な情報・必要な機能かなにか?」 を考え、制約の多いスマートフォンサイトから作成した方が 必要とする情報がより明確になる。 ソースを書く順番 モバイル向け→タブレット向け→PC向けの順に書いた方が 無駄が少なくなる(例えば、わざわざフロートさせたコン テンツをフロート解除させたり) 11012年12月17日月曜日
  126. 126. 最後に 課題も多いスマートフォン用Webサイト 案件を受けた際には、仕様やバグなどについてクライアント に理解して貰った上で不可能な動作・挙動・表示であれば、 方向転換なりして進めていく必要があります。 11112年12月17日月曜日

×