小川 裕之

レスポンシブWebデザインの基礎と WordPressを使った最適化の手法

WordBench東京7月 モバイル勉強会

印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、

Web デザイナーのアルバイトとして複数の制作会社を転々としたり

海外に行ったりしたあと横浜の制作会社に務める。

制作会社でデザイン、コーディング、ディレクション、

コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。

「レスポンシブWebデザイン入門」執筆

小川 裕之

barchin　　hiro.ogw

本日の流れ

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

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

ワンソースで各デバイスの画面サイズに 対応したレイアウトを実現

HTML

CSSCSS CSS

幅768px 以下

幅480px 以下

幅769px 以上

RWDを実現する要素

•Fluid Grid

•Fluid Image

•Media Queries

•viewport

Fluid Grid

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

Grid Design

グリッドの幅を相対値で指定

Fluid Grid

%

求める要素の幅÷親要素の幅×100%

相対値の求め方

620px 300px

960px

60px 20px

=64.58333%300÷960×100

960px

相対値の求め方

620÷960×100=31.25%

求める要素の幅÷親要素の幅×100%

Fluid Grid Systemが便利

pxからいちいち計算するのは手間

960px

60px 20px

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

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%

8カラム 4カラム

100%

=31.25%=64.58333%

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

px %

幅を相対値にする

box-sizing

margin (50px)

border(20px)

padding (50px)

box-sizing:content-box

contents (100px)

width (100px)

margin (50px)

border(20px)

padding (50px)

box-sizing:border-box

contents (100px)

width (240px)

12

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

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%

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

width

padding:10px

Fluid Image

画像が親要素より はみ出してしまう

画像を可変にする

画像を可変にする

img{ max-width: 100%; height: auto;

}

CSS

親要素内に 収まる

Media Queries

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

@media screen and (min-width: 640px){ body{ background-color: red; }

}

メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする

メディアタイプ メディア特性

CSS

メディア特性 情報 max-/min-

width 表示領域の幅 ○

height 表示領域の高さ ○

device-width デバイスの横方向の解像度 ○

device-height デバイスの縦方向の解像度 ○

orientation 表示領域の向き ☓

resolution 解像度 ○

body{ backgorund-color:red; }

モバイルファースト

1025px768px

全サイズ に適用

body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } }

モバイルファースト

1025px768px

幅768px 以上に適用

全サイズ に適用

幅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 以上に適用

全サイズ に適用

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 以下に適用

全サイズ に適用

Viewport

Viewportに指定されたサイズで ページを描画する

980pxのウインドウサイズで アクセスしたときと同じ表示

<meta name="viewport" content="width=device-width, initial-scale=1">

そのデバイスの幅で サイトが表示される

もっと効率化を

Grid System

さらにラクをする

CSSフレームワーク

Bootstrap

Bootstrap

CSSフレームワークのメリット

•簡単にRWDに対応できる •検証の手間が減る •作業時間の短縮

DEMO

8カラム 4カラム

Easy Bootstrap Shortcode

CSSフレームワークのデメリット

•学習コスト •カスタマイズしにくい •余分なコンポーネントがある

ドットインストール

Bootstrap Live Customizer

既にあるモノを活用してラクをしよう

Photo by Matteo Paciotti

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

HTML

CSSCSS CSS

HTML

CSSCSS CSS

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

構成の制限

1

2 3

4　　　1432

CSS Flexible Box Layout Module Level 1

Can I Use...

.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

まだ実用的でない

画像サイズの問題

光回線 3G回線

　

表示に時間が かかる

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

600pxsmallImage.jpg

largeImage.jpg

JavaScriptのライブラリ

CSS

<img alt="" src="default.jpg" srcset="small.jpg 320w, large.jpg 768w, 2x.jpg 2x” />

Responsive Image

幅320px以下

幅768px以下 デバイスピクセル比2

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

RESSResponsive design with server-side components

RWD ×

User Agent

HTML HTML HTML

User Agent

WordPressの関数を使う

<?php if(wp_is_mobile()): ?> <p>mobile</p>

<?php else: ?> <p>PC</p> <?php endif; ?>

PHP

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

User Agent

smallImage.jpg

largeimage.jpg

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

各手法のメリット・デメリット

手法 メリット デメリット

レスポンシブWebデザイン

更新がラク

URLがひとつ

無数のデバイスに適応できる

構成の制限

設計が難しい

テストの工数が増える

デバイス専用サイトデバイスの特性にあった最適化ができる

デザインの自由度が高い

開発コストがかかる

更新の手間がかかる

新しいデバイスを判定する必要がある

プログラム変換

更新が比較的ラク

URLが共通

デザインの自由度が高い

開発コストがかかる

新しいデバイスを判定する必要がある

スマートフォンのシェア

Android iOS 他

63.0%

35.6%

1.4%

MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)

スマートフォンのシェア

Android iOS 他

63.0%

35.6%

1.4%

MM総研 携帯電話利用者に対するアンケート調査および出荷統計データ(2013)

AndroidとiOSでほぼ100%

Photo by zzpza

技術を組み合わせることで より最適化を

まとめ

本日のまとめ

・RWDはワンソースでマルチデバイスに対応する手法

・RWDを実装する要素（Fluid Grid,Fluid Image,Media Queries,viewport） ・グリッドシステム、CSSフレームワークを使って 　ラクをする

・WordPressの特性を活かしてより最適化を

ありがとうございました