〇2015年～　モバイルフレンドリー（Googleの対応）

スマホ対応のポイント

・Box-model　・Media Queries　・Viewport　・UI/UX

UI/UX

①タッチデバイスを意識したボタン（リンク）

・ボタンの領域を広く
・リンク個所のデザインルールを変える
・バナー（リンク）はよりわかりやすく

②迷子に刺せない導線

・わかりやすい導線
・1クリックで1割のユーザーが離れる
・ファーストビューで「最優先のコンテンツ」
　フッターで「各コンテンツへ」

③ページの表示スピード対応「画像」

・Retinaディスプレイ、4Kテレビへの対応
・imgとback-groundの違いを確認
・Webアイコンや「canvas」「SVG」を上手に取り入れる

④ページの表示スピード対策「プログラム」

・動的プログラムは表示スピードを低下させる
・CMSなどのテンプレ→よく確認してから
・誤ったプログラムは表示スピードを低下させる

⑤使いやすさの追求

・Webフォントの利用（源ノ角ゴシック/源ノ角明朝）
・jQueryの利用
・Googleアナリティクスの利用→スピードも調べられる

〇Webの技術は柔軟に対応

レスポンシブWebデザイン

メリット

・Htmlファイルが1つで済む
・URLが同じ→共有されやすくなる
・「モバイルフレンドリー」に対応し、SEO効果がある

デメリット

・複雑
・デザインの大幅な変更はできない
・表示スピードの低下

〇max-widthプロパティを使う
〇widthプロパティは％指定にする

3つのブレークポイント

PC：1280px
タブレット：768px～
スマホ：～767px