1. 小川 裕之
レスポンシブWebデザインの基礎と
WordPressを使った最適化の手法
WordBench東京7月 モバイル勉強会

2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。
「レスポンシブWebデザイン入門」執筆
小川 裕之
barchin hiro.ogw

3. 本日の流れ
•レスポンシブWebデザインの実装方法
•グリッドシステム・CSSフレームワークの紹介
•RWDとWordPressを組み合わせて最適化を
•まとめ

4. レスポンシブWebデザインの実装

5. ワンソースで各デバイスの画面サイズに
対応したレイアウトを実現
HTML
CSSCSS CSS
幅768px
以下
幅480px
以下
幅769px
以上

6. RWDを実現する要素
•Fluid Grid
•Fluid Image
•Media Queries
•viewport

7. Fluid Grid

8. 規則性をもったライン（Grid）にそって
コンテンツを配置
Grid Design

9. グリッドの幅を相対値で指定
Fluid Grid
%

10. 求める要素の幅÷親要素の幅×100%
相対値の求め方
620px 300px
960px
60px 20px

11. =64.58333%
300÷960×100
960px
相対値の求め方
620÷960×100
=31.25%
求める要素の幅÷親要素の幅×100%

12. Fluid Grid Systemが便利
pxからいちいち計算するのは手間

13. 960px
60px 20px
1カラム=60px÷960px×100%=6.25%

14. 960px
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
3カラム= (60px×3+20×2) ÷960px×100%=22.91667%
4カラム= (60px×4+20×3) ÷960px×100%=31.25%
5カラム= (60px×5+20×4) ÷960px×100%=39.5833%
12カラム=(60px×12+20×11)÷960px×100%=97.9166%

15. 8カラム 4カラム
100%
=31.25%=64.58333%

16. Gridに沿ってレイアウトすると実装しやすい

17. px %
幅を相対値にする

18. box-sizing

19. margin
(50px)
border(20px)
padding
(50px)
box-sizing:content-box
contents
(100px)
width
(100px)

20. margin
(50px)
border(20px)
padding
(50px)
box-sizing:border-box
contents
(100px)
width
(240px)

21. 12
Xカラムの幅=(Xカラム÷最大カラム数)×100%

22. 12
1カラム=1÷12×100%=6.25%
2カラム=2÷12×100%=16.6666%
3カラム=3÷12×100%=25%
4カラム=4÷12×100%=33.3333%
5カラム=5÷12×100%=41.6666%
6カラム=6÷12×100%=50%
12カラム=12÷12×100%=100%

23. .col1,col2,col3,……col12{
padding: 0 10px;
}
width
padding:10px

24. Fluid Image

25. 画像が親要素より
はみ出してしまう
画像を可変にする

26. 画像を可変にする
img{
max-width: 100%;
height: auto;
}
CSS
親要素内に
収まる

27. Media Queries

28. メディアタイプと特性に関する条件を調べ
その結果に応じて処理を行う

29. @media screen and (min-width: 640px){
body{
background-color: red;
}
}
メディアがスクリーンで表示領域幅が
640px以上の場合背景色を赤にする
メディアタイプ メディア特性
CSS

30. メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表示領域の向き ☓
resolution 解像度 ○

31. body{
backgorund-color:red;
}
モバイルファースト
1025px768px
全サイズ
に適用

32. body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
モバイルファースト
1025px768px
幅768px
以上に適用
全サイズ
に適用

33. 幅1025px
以上に適用
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
@media screen and (min-width:1025px){
body{
background-color:green;
}
}
モバイルファースト
1025px768px
幅768px
以上に適用
全サイズ
に適用

34. body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
@media screen and (max-width:767px){
body{
background-color:green;
}
}
767px1024px
デスクトップファースト
幅767px
以下に適用
幅1024px
以下に適用
全サイズ
に適用

35. Viewport

36. Viewportに指定されたサイズで
ページを描画する
980pxのウインドウサイズで
アクセスしたときと同じ表示

37. <meta name="viewport" content="width=device-width,
initial-scale=1">
そのデバイスの幅で
サイトが表示される

38. もっと効率化を

39. Grid System

40. さらにラクをする

41. CSSフレームワーク

42. Bootstrap

43. Bootstrap

44. CSSフレームワークのメリット
•簡単にRWDに対応できる
•検証の手間が減る
•作業時間の短縮

45. DEMO

46. 8カラム 4カラム

47. Easy Bootstrap Shortcode

48. CSSフレームワークのデメリット
•学習コスト
•カスタマイズしにくい
•余分なコンポーネントがある

49. ドットインストール

50. Bootstrap Live Customizer

53. 既にあるモノを活用してラクをしよう
Photo by Matteo Paciotti

54. WordPressを活用してさらに最適化を

55. HTML
CSSCSS CSS

56. HTML
CSSCSS CSS

57. CSSのみでは、できることに制限がある

58. 構成の制限

59. 1
2 3
4
1
4
3
2

60. CSS Flexible Box Layout Module Level 1

61. Can I Use...

62. .hidden-pc{
display:none;
}
@media screen and (max-widht:768px){
.hidden-pc{
display:block;
}
.hidden-mobile{
display:none;
}
}
768px
.hidden-pc
CSSで表示・非表示切り替え
CSS
.hidden-sp .hidden-pc.hidden-sp

63. まだ実用的でない

64. 画像サイズの問題

65. 光回線 3G回線
表示に時間が
かかる

66. <script src="matchmedia.js"></script>
<script src="picturefill.js"></script>
!
<span data-picture data-alt="pic">
<span data-src="img/smallImage.jpg"></span>
<span data-src="img/largeImage.jpg" media="(min-width:
600px)"></span>
<noscript><img src="img/smallImage.jpg" alt="pic"></noscript>
</span>
600px
smallImage.jpg
largeImage.jpg
JavaScriptのライブラリ
CSS

67. <img alt="" src="default.jpg" srcset="small.jpg 320w,
large.jpg 768w, 2x.jpg 2x” />
Responsive Image
幅320px以下
幅768px以下 デバイスピクセル比2

68. 手間がかかる。
まだ使えない。

69. RESS
Responsive design with server-side components

70. RWD ×

71. User
Agent

72. HTML HTML HTML
User
Agent

73. WordPressの関数を使う
<?php if(wp_is_mobile()): ?>
<p>mobile</p>
<?php else: ?>
<p>PC</p>
<?php endif; ?>
PHP

74. PHPを使う
function is_sp() {
$ua=$_SERVER['HTTP_USER_AGENT'];
if( strpos($ua, 'iPhone') !== false
|| strpos($ua, 'Android') !== false){
return true;
}else{
return false;
}
}
<?php if(is_sp()): ?>
<p>smart phone</p>
<?php else: ?>
<p>tablet and PC</p>
<?php endif; ?>
PHP

75. User
Agent
smallImage.jpg
largeimage.jpg

76. WordPressの関数の組み合わせ
<?php
$small_image = wp_get_attachment_image_src(
get_post_meta($post->ID,’galleryimg’,true),'medium');
$large_image = wp_get_attachment_image_src(
get_post_meta($post->ID,’galleryimg',true),'large');
?>
!
!
<?php if(wp_is_mobile()): ?>
<img src="<?php echo $small_image[0]; ?>">
<?php else:?>
<img src="<?php echo $large_image[0]; ?>">
<?php endif;?>
PHP

77. 各手法のメリット・デメリット
手法 メリット デメリット
レスポンシブWebデザイン
更新がラク
URLがひとつ
無数のデバイスに適応できる
構成の制限
設計が難しい
テストの工数が増える
デバイス専用サイト
デバイスの特性にあった最適化ができる
デザインの自由度が高い
開発コストがかかる
更新の手間がかかる
新しいデバイスを判定する必要がある
プログラム変換
更新が比較的ラク
URLが共通
デザインの自由度が高い
開発コストがかかる
新しいデバイスを判定する必要がある

78. スマートフォンのシェア
Android iOS 他
63.0%
35.6%
1.4%
MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)

79. スマートフォンのシェア
Android iOS 他
63.0%
35.6%
1.4%
MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)
AndroidとiOSでほぼ100%

80. Photo by zzpza
技術を組み合わせることで
より最適化を

81. まとめ

82. 本日のまとめ
・RWDはワンソースでマルチデバイスに対応する手法
・RWDを実装する要素
（Fluid Grid,Fluid Image,Media Queries,viewport）
・グリッドシステム、CSSフレームワークを使って
ラクをする
・WordPressの特性を活かしてより最適化を

83. ありがとうございました