Responsive  Web  Design  〜～  Basic  understanding〜～

〜～⾃自⼰己紹介〜～
Daisuke Yamazaki

レスポンシブWebデザイン「超」実践デザイン集中講義

〜～⾃自⼰己紹介〜～

Job：・  U-‐‑‒SYS（  web  professional  fellow）
・  デジタルハリウッド（ソーシャルアプリクリエイター専攻）
・  デジタルハリウッド（オンライン：PHP、Webアプリ開発）
・  Web関連のセミナー（全国各地、ヒカ☆ラボ）
Microsoft  MVP  （Bing  Maps  Development）

執筆＆記事：
⽇日経ソフトウエア、＠IT、ITpro、Software  Designなど、IT関連のメディアで情報発信中。＠IT「HTML5アプリ作ろうぜ」を連載。⽇日経PC21「名作フリーソフトを訪ねて」でも⾃自⾝身の開発したアプリが選出。  
HTML5アプリ「impress.js  design」ChromeWebストアにて公開中。

なぜレスポンシブWeb
デザイン？
なのか・・・

従来求められてるWebサイト

0 情報を正しく表⽰示するサイト
0 ⽬目的の情報を探しやすいサイト  0 集客を上げられるサイト

SEO、広告、ソーシャルメディアとの連携

0 バリアフリーなサイト

視覚障害者（画⾯面を⾒見見れない）、⾝身体障害者（マウス使えない）、⾼高齢者

今これから求められるWebサイト 　  「マルチデバイス対応」
PC	 タブレット	 スマートフォン	 

0 「さまざまなデバイスで正しく表⽰示・利利⽤用できるサイトを制作  」先ほどのスライドをに追加して  ．．．

今これから求められるWebサイト
0 情報を正しく表⽰示するサイト
0 ⽬目的の情報を探しやすいサイト  0 集客を上げられるサイト
0 バリアフリーなサイト
0 マルチデバイス対応

PC、携帯電話＋スマートフォン、タブレットなどやること増えたね	 モバイル端末からの閲覧増  現在のWebでは不不⼗十分なのか？
モバイル向けサイトの必要性  今はパソコンは持っていなくても・・・ 　  スマートフォン 　（携帯電話フィーチャーフォンも）   　      タブレット 　（iPad,  Nexus,  Kindle…）
 　 　 　 　 　 　 　 　 　 　 　 　 　 　を持ってる⼈人の⽐比率率率は⽇日々増加してます。

現在のWebでは不不⼗十分である理理由
モバイル向けサイトの必要性  パソコンではなく、スマートフォン・タブレットをWeb閲覧のメインデバイスとして使う時代に来ています。
スマートデバイスを優先でサイトを構築する時代なのかも知れません。

従来のマルチデバイス対応方法	 
デバイス毎にディレクトリを分ける	 
URL：

www.domainname.com/A/

サイトA（PC向け）

www.domainname.com/B/

サイトB（タブレット向け）

www.domainname.com/C/

サイトC（スマートフォン）

広告例）	 

http://www.●●●/…	 
http://www.●●●/…	 
http://www.●●●/…	 

従来のマルチデバイス対応方法	 
サーバサイド、クライアントスクリプトにて切り分け	 <?php	  	  	  	  /*	  UserAgent	  Switch	  */	  $ua=$_SERVER['HTTP_USER_AGENT'];	  if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’Android’)!==false))	  {	  	  header(“Location:/sp/index.php”);	  	  exit();	  }	  ?>	 

ユーザーエージェント	  (自動振り分けの注意点)	 
・新たなデバイスが発売された場合      (デバイスのユーザーエージェントを調査し振り分け処理理を確認・追加する作業が必要)

・必要なスクリプトなどの技術を習得している⼈人材が必要

ワンソースでマルチデバイス対応	  （レスポンシブWebデザイン）	 
・	  Javascript	  のようなプログラミング	  	  	  	  （スクリプト）知識は必要ない	 
・	  CSSの知識で作成できる	 ・	  ワンソース	  （HTMLとCSS）で作成可能	 

ブラウザのスクリーンサイズ（解像度）を基準にレイアウトを調整することができるのでマルチスクリーンに対応したWebサイトを制作できるのが特徴です。	 

デザイナーの方には是非覚えてほしい手法です	 レスポンシブWebデザイン
誰が？いつ頃から？

レスポンシブWebデザイン提唱者： 　
 　 　 　 　 　 　ETHAN  MARCOTTE⽒氏（イーサン・マルコット⽒氏）
2010年年5⽉月25⽇日  に  ブログで紹介したマルチデバイス対応のWebサイト制作の⼿手法  「RWD」です。

レスポンシブWebデザイン
どんなことができるの？

レスポンシブWebデザイン提唱者： 　
 　 　 　 　 　 　ETHAN  MARCOTTE⽒氏（イーサン・マルコット⽒氏）
記事内容：  Media  Queryを使ってレイアウトし、例例えば１カラムを２カラムに流流動的に変形させる事を指し、閲覧されたそのデバイスの解像度度によって柔軟に、シンプルに最適化（フルードグリッド、フルードイメージ）させる。

レスポンシブWebデザイン
メリット・デメリット
メリット•

画⾯面を各デバイスに合わせてソースを複数作る必要がない、作業⼯工数の軽減に繋がる•

ワンソースで管理理するのでメンテナンスがしやすくなる•

１つのURLのみにアクセスを集中できる（各デバイスごとにTOPページを分けた場合、ページヘのアクセスが分散化される）•１つのURLだけなので、告知・宣伝等がやりやすくなる•

HTML/CSSなどのクライアント技術のみで実装できるためWebデザイナーが実装できる

レスポンシブWebデザイン
メリット・デメリット
デメリット•

芸術的な⾒見見せ⽅方、拘りのあるビジュアルなサイトにはデメリットの可能性あり•ワンソースで各デバイスに対応するため、設計/デザインの調整に時間がかかる•

ワンソースで対応するため、より⾼高度度で複雑な設計となる可能性がある•

全デバイスに必要なソースコードも読み込みます、必要のない要素も⼀一緒に読み込まれてしまい、ページの読み込み時間やレンダリング速度度に影響する可能性も考慮する必要があります。

テクニカルMediaQuery、ブレイク

解説ポイントMedia  Queryとは？
スクリーンサイズ（デバイスサイズ）によりCSSスタイルを複数指定することを可能にします。このCSSを複数指定することを可能したのがCSS3の「MediaQueries」です。

特徴：
デバイスごとの細かい配慮／⼯工夫は向いていません。
特定のデバイスにだけ特別な⼯工夫をしようと思った場合に、他のデバイス（CSSスタイル）への影響も出る可能性が考えられます。  何を基準にして設計・構築する？
スマートフォンサイトから考える
まずスマートフォンを基準に考えることの⽅方が、作る上で簡単なはずです。
各デバイスの画⾯面表⽰示をスマートフォン⽤用のスタイルを最初に定義し、タブレット、パソコン⽤用の順番でスタイルを決めた⽅方が設計・構築はスムーズかと思います。
（例例：スマートフォン480px  →  タブレット768px  →  パソコン980px）

ブレイクポイントとはブレークポイントを決めておく  メディアクエリを使⽤用した⽅方法で画⾯面サイズ別にCSSスタイリングする場合（例例：スマートフォン320px 　→ 　タブレット788px 　→ 　パソコン880px）と画⾯面サイズの境⽬目を先に決め⼿手しまします。この決めた画⾯面サイズに合わせてCSSスタイルを切切り替える事ができ、この決めた画⾯面サイズによる切切り替えのポイントを、「ブレークポイント」と呼びます。  Media  Query  書き⽅方１@media   　ひとつのCSSファイル内で振り分け  @media  screen  and  (min-‐‑‒width:  481px)  {          body  {...}}@media  screen  and  (min-‐‑‒width:  768px)  {        body  {...}  }Link   　複数CSSファイルをlink要素で読み込む  <link  href=”sp.css"><link  media="screen  and  (min-‐‑‒width:  481px)"  href="tablet.css"><link  media="screen  and  (min-‐‑‒width:  768px)"  href="desktop.css">@import 　複数CSSファイルをimport要素で読み込む  @import  url(”sp.css");@import  url("tablet.css")  only  screen  and  (min-‐‑‒width:  481px);  @import  url("desktop.css")  only  screen  and  (min-‐‑‒width:  768px);  Media  Query  書き⽅方２@media	  が使いやすい<link…  @import…
複数CSSファイルに分けてブレイクポイント（スマホ、タブレット、パソコン）を管理理するとスタイル管理理しやすくなりそうですが、@mediaの⽅方法で単⼀一CSSファイルにした⽅方が、   　 　「  HTTPリクエスト数を節約できる  」   　 　 　 　 　 　 　 　 　 　 　 　特典があります。
 　 　 　 　 　 　スマートデバイスの３G回線にもよい。

実際の使い⽅方レスポンシブをIE6〜～8で使う⽅方法  css3-‐‑‒mediaqueries.js、CSS3の@mediaクエリをサポートしてないブラウザでもサポートしてるかのように⾒見見せるスクリプトです。CSSを解析して、ブラウザのサイズを変更更したときにもリアルタイムに@mediaクエリを適⽤用します

respond.js
メディアクエリーに対応していないIE8以下のブラウザーでもメディアクエリーを利利⽤用できるようにするスクリプト。⾮非常に軽量量なライブラリーで、古いIEでも簡単にメディアクエリーに対応できます。
ダウンロードURL：  https://github.com/scottjehl/RespondレスポンシブをIE6〜～8で使う⽅方法  css3-‐‑‒mediaqueries.js
html5shiv.js<!-­‐-­‐[if	  lt	  IE	  9]>	  	  <script	  src="js/html5shiv.js"></script>	  	  <![endif]-­‐-­‐>	  css3-‐‑‒mediaqueries.js<!-­‐-­‐[if	  lt	  IE	  9]>	  	  <script	  src="js/css3-­‐mediaqueries.js"></script>	  	  <![endif]-­‐-­‐>	 実際のコード例	 viewport  Viewportviewport指定できること• モバイル端末ブラウザの表⽰示幅を指定• ピンチによる、拡⼤大縮⼩小の可否の指定• 拡⼤大縮⼩小の最⼤大・最少倍率率率の指定
記載⽅方法• <meta  name=“viewport”  content=“width=1024”>※  例例：アップルサイト• <meta  name=“viewport”  content=“device-‐‑‒width”>  ※端末画⾯面の幅に合わせる実際のコード例	 CSS
CSS作成の考え⽅方

CSSを作成する際、スマートフォンの⼀一番⼩小さい⽅方に合わせて記述する⽅方法で解説してます。

CSS
タブレット向けのスタイル：481px  〜～  @media	  only	  screen	  and	  (min-­‐width:	  481px)	  {	  	  //*********[	  １:Start	  ]********	  	  	  	  	  }	    PC向けのスタイル：769px〜～@media	  only	  screen	  and	  (min-­‐width:	  769px)	  {	  	  	  	  	  //*********[	  ２:Start	  ]********	  	  	  	  	  }	 CSS

CSSコードサンプルを見ましょう！	 

img
Img要素（フルードイメージ）
width・height属性を  指定すると⽐比率率率がおかしくなります  フルードイメージ	 

img  {
 　 　 　 　max-‐‑‒width:  100%;   　 　 　 　height:  auto;} 　
IE  7以下では縮⼩小された画像が粗く⾒見見える。
この問題はimgSizer.jsというjsで対処できる。次ページへ＞＞img
imgSizer.js<!-­‐-­‐[if	  lte	  IE	  7.0]>	  	  <script	  type="text/javascript"	  src="imgSizer.js"></script>	  <![endif]-­‐-­‐>	 注意ポイント
デスクトップ上でのブラウザ実行は	 ☓	 です。	  	  http://….	  
https://….	  	  のように実際にWebサーバ上に上げて確認する必要が有ります。	  
	  ※XMAPPなどPCにWebサーバを作るのはOK！	  	 DEMO	 参考サイト■Media	  Queries（http://mediaqueri.es/）	  	   	 参考サイト■Microsoft（http://www.microsoft.com/en-­‐us/default.aspx）	  	   	 参考サイト■Nathan  Sawaya（http://brickartist.com/）

キービジュアルの画像がスライド（フェードイン・フェードアウトで切り替わ参考サイト■COOP（http://coworkchicago.com/）      右側からパソコン、タブレット、スマートフォンサイズの表示なりますが、スマートフォンのサイズ（左側）が大きくデザインが変わります。	 	 

参考サイトAdobe社 　「Dreamweaver  CS6  と  HTML5  で始めようスマートフォン＆タブレット対応」
http://adobe-‐‑‒html5.jp/
アドビシステムのHTML5特設サイトもレスポンシブWebデザインで作成されてます。ブレイクポイントは0〜～520pxの場合は1カラムレイアウト、520px〜～920pxの間は2カラムレイアウト、920px〜～より⼤大きい場合は3カラムレイアウトの表⽰示となります。  
ブレイクポイント：520px,  920px  アンケートにご協力ください！	 
あなたのフィードバックが、	  html5jの活動を支えています！	  	  	  	  アンケートへ答えた方にもれなく記念品プレゼント！	  
（アンケートの完了画面を1F受付にてご提示ください）	  h"p://bit.ly/html5C201311	
お知らせ:	  最終スペシャルセッションの開始時刻が変更になりました（18:30→18:20）	  10分早まっています。ご注意ください！