小川 裕之

レスポンシブWebデザインの基礎

13年10月8日火曜日

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

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

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

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

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

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

小川 裕之

barchin　　hiro.ogw

13年10月8日火曜日

レスポンシブWebデザインとは

13年10月8日火曜日

13年10月8日火曜日

Photo by Jeremy Keith

スマートデバイスの増加

13年10月8日火曜日

１日の平均インターネット接続時間

博報堂ＤＹメディアパートナーズ メディア環境研究所「メディア定点調査2013」より

72,8分

50.6分

13年10月8日火曜日

マルチデバイス対応の手法

•レスポンシブWebデザイン•デバイス専用サイト•プログラム変換

13年10月8日火曜日

RWDの特徴

•URLがひとつ•ワンソース•更新が比較的簡単•新しいデバイスにも対応しやすい

13年10月8日火曜日

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

HTML

CSSCSS CSS

幅768px以下

幅480px以下

幅769px以上

13年10月8日火曜日

URLがひとつ

13年10月8日火曜日

ワンソース

13年10月8日火曜日

HTML

CSSCSS CSS

更新の手間が少ない

更新

! !!

13年10月8日火曜日

新しいデバイスにも対応しやすい

? ??

??

13年10月8日火曜日

それぞれのメリット・デメリット

手法 メリット デメリット

レスポンシブWebデザイン更新がラクURLがひとつ無数のデバイスに適応できる

構成の制限設計が難しいテストの工数が増える

デバイス専用サイト デバイスの特性にあった最適化ができるデザインの自由度が高い

開発コストがかかる更新の手間がかかる新しいデバイスを判定する必要がある

プログラム変換更新が比較的ラクURLが共通デザインの自由度が高い

開発コストがかかる新しいデバイスを判定する必要がある

13年10月8日火曜日

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

13年10月8日火曜日

A LIST APART

13年10月8日火曜日

RWDを実現する要素

•Fluid Grid

•Fluid Image

•Media Queries

13年10月8日火曜日

Fluid Grid

13年10月8日火曜日

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

Grid Design

13年10月8日火曜日

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

Fluid Grid

%

13年10月8日火曜日

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

相対値の求め方

620px 300px

960px

60px 20px

13年10月8日火曜日

=64.58333%300÷960×100

960px

相対値の求め方

620÷960×100=31.25%

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

13年10月8日火曜日

Fluid Grid Systemが便利

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

13年10月8日火曜日

960px

60px 20px

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

13年10月8日火曜日

960px

60px 20px

1カラム=60px÷960px×100%=6.25%2カラム=(60px×2+20)÷960px×100%=14.58333%

13年10月8日火曜日

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%

13年10月8日火曜日

8カラム 4カラム

100%

=31.25%=64.58333%

13年10月8日火曜日

px %

幅を相対値にする

13年10月8日火曜日

Fluid Image

13年10月8日火曜日

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

画像を可変にする

13年10月8日火曜日

<img src="photo.jpg" alt="photo">

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

}

HTML

CSS

画像を可変にする

親要素内に収まる

13年10月8日火曜日

Media Queries

13年10月8日火曜日

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

13年10月8日火曜日

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

}

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

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

13年10月8日火曜日

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

width 表示領域の幅 ○

height 表示領域の高さ ○

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

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

orientation 表示領域の向き ☓

resolution 解像度 ○

13年10月8日火曜日

@import url ("pc.css") screen and (min-width:600px);

<link rel="stylesheet" href="pc.css" media="screen and (min-width:600px)">

@media screen and (min-width:600px){/*style*/}

CSS

CSS

HTML

13年10月8日火曜日

body{ backgorund-color:red; }

モバイルファースト

1025px768px

全サイズに適用

13年10月8日火曜日

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

モバイルファースト

1025px768px

幅768px以上に適用

全サイズに適用

13年10月8日火曜日

幅1025px以上に適用

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

モバイルファースト

1025px768px

幅768px以上に適用

全サイズに適用

13年10月8日火曜日

body{ backgorund-color:red; }

767px1024px

デスクトップファースト

全サイズに適用

13年10月8日火曜日

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

767px1024px

デスクトップファースト

幅1024px以下に適用

全サイズに適用

13年10月8日火曜日

body{ backgorund-color:red; }@media screen and (max-width:1024px){ body{ backgorund-color:blue; }}@media screen and (max-width:767px){ body{ background-color:yellow; }}

767px1024px

デスクトップファースト

幅767px以下に適用

幅1024px以下に適用

全サイズに適用

13年10月8日火曜日

モバイルファーストのメリット

•スタイルが少なくなる

#main{float:left;width:80%;}@media screen and (max-width: 639px){#main{float: none;width: auto;}

}

デスクトップファースト

@media screen and (min-width: 640px){#main{float: left;width: 80%;}

}

モバイルファースト

13年10月8日火曜日

デスクトップファーストのメリット

•Media Queriesに非対応のブラウザ対応が簡単デスクトップファーストモバイルファースト

13年10月8日火曜日

ブレイクポイント

13年10月8日火曜日

@media screen and (min-width: 480px){/*style*/

}@media screen and (min-width: 940px){ /*style*/}

940px480px

ブレイクポイント

13年10月8日火曜日

Sorce:Design Spice

サイトによって様々

13年10月8日火曜日

ブレイクポイントを決めるヒント

•主要となるデバイスの幅から•コンテンツの最適なレイアウトから

13年10月8日火曜日

デバイスの幅から

主要となるデバイス、シェアの多いデバイスなどを元に決める

13年10月8日火曜日

コンテンツから

動かしてみて調整が必要な部分に適時ブレイクポイントを追加する

13年10月8日火曜日

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

}

幅をemで指定

768px=48em1em=16px

13年10月8日火曜日

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

幅をemで指定

768px=48em1em=16px

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

}

13年10月8日火曜日

Viewport

13年10月8日火曜日

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

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

13年10月8日火曜日

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

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

13年10月8日火曜日

RWDでよくある問題点

13年10月8日火曜日

RWDでよくある問題点

•古いブラウザ対応の考え方•どのようなワークフローで進めるのか•カンプをどのようにつくるか

13年10月8日火曜日

古いブラウザ対応の考え方

Photo by rosefirerising13年10月8日火曜日

最近のブラウザ

古いブラウザ装飾は劣るが最低限の機能は提供

グレイスフルデグラデーション

基準

グレイスフルデグラデーション

13年10月8日火曜日

どのようなワークフローで進めるのか

Photo by the pale side of insomnia13年10月8日火曜日

•特定のデバイス対応•コンテンツの幅は固定•どの表示領域幅でもレイアウトは変わらない

ワークフローを見直す

今までのサイト

•マルチデバイス対応•コンテンツの幅は可変•表示領域幅でレイアウトが変わる

RWD

13年10月8日火曜日

作ってみないとわからない

13年10月8日火曜日

情報設計

画面設計

プロトタイプ デザイン

実装

調整 テスト

テスト

ワークフロー例

13年10月8日火曜日

情報設計

画面設計

プロトタイプ デザイン

実装

調整 テスト

テスト早めにプロトタイプを作成してテストをしながら完成へと近づける

13年10月8日火曜日

カンプをどのようにつくるか

13年10月8日火曜日

=

従来のサイト制作におけるカンプ

13年10月8日火曜日

= 　　　　　　

RWDにおけるカンプ

13年10月8日火曜日

体制や案件に応じて作り方を変える

•各ブレイクポイントで作成•PCサイズのみ作成する•主要な部分のみ作りこんで他はざっくりと

•Designing in the browserで

13年10月8日火曜日

その都度都度で体制を柔軟に変えられることが大事

13年10月8日火曜日

さらに最適化を

13年10月8日火曜日

Responsive Web Design

Performance

Responsive Web Design

Usability

Content Strategy User Interface

Readability

SEO

Accessibility

Information Architecture

User Experience

Visual Design

13年10月8日火曜日

Responsive Web Design

Usability

Performance

Content Strategy User Interface

Readability

SEO

Accessibility

Information Architecture

User Experience

Visual Design

13年10月8日火曜日

Good performance is good design

Brad Frost

13年10月8日火曜日

表示に時間がかかる

光回線3G回線

13年10月8日火曜日

画像の最適化

•CSSを使う•画像を圧縮する•Webフォント•画像を差し替える

13年10月8日火曜日

CSSを使う

#btn{ padding: 0.5em; display: inline-block; font-size: 40px; color: #333; font-weight: bold; letter-spacing: 0.1em; background: #83a603; background: -webkit-linear-gradient(top, #83a603, #769300); background: -moz-linear-gradient(top, #83a603, #769300); background: -o-linear-gradient(top, #83a603, #769300); background: linear-gradient(to bottom, #83a603, #769300); border-radius: 10px; box-shadow: 0px 5px 2px #274000,0px 0px 3px #96b618 inset; text-shadow: -1px -1px 0px rgba(255,255,255,0.2); border: 4px solid #558b00;}

13年10月8日火曜日

画像を圧縮する

JPEGmini

13年10月8日火曜日

画像を圧縮する

•JPEGmini

•ImageOptim

•PunyPNG

13年10月8日火曜日

画像を圧縮する

915kb

1200px×800px

350kb

38%!!

13年10月8日火曜日

Webフォントを使う

Google Fonts

13年10月8日火曜日

Webフォントを使う

•Google Fonts

•Adobe Edge Web Fonts

•FONT PLUS

•Type Square

13年10月8日火曜日

Webアイコンフォントを使う

Ico Moon

13年10月8日火曜日

Webアイコンフォントを使う

Font Awesome

•Font Awesome

•IcoMoon

•Fontello

13年10月8日火曜日

<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

画像を差し替える

13年10月8日火曜日

画像を差し替える

Font Awesome

•Picturefill

•Responsive Images

•Adaptive Images

13年10月8日火曜日

Responsive Images Chart

13年10月8日火曜日

RWDとこれからのWeb

13年10月8日火曜日

Android Fragmentation Visualized

多様化するデバイス

13年10月8日火曜日

Future of Screen Technology

Productivity Future Vision

13年10月8日火曜日

それぞれのデバイス専用にサイトを作るのは現実的ではなくなってくる

少ない労力でより多くのデバイスに対応できるのが理想

13年10月8日火曜日

Best practice?

Photo by Jeremy Keith13年10月8日火曜日

RWDは発展途上

•Media Queries Level4•Responsive Images•flexbox ,Regions,Column,...•vw,vh

13年10月8日火曜日

Photo by Barb Dybwad

考え方も変える

13年10月8日火曜日

完全を求めない

Photo by Peter Miller13年10月8日火曜日

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same

constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'”

John Allsopp, “A Dao of Web Design”

13年10月8日火曜日

　　　

　　　

13年10月8日火曜日

　　　

　　　

13年10月8日火曜日

What is king?

Photo by Kyle Johnston13年10月8日火曜日

未来を想像し、変化に順応する

Photo by dalioPhoto13年10月8日火曜日

まとめ

13年10月8日火曜日

本日のまとめ

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

•RWDを実装する要素（Fluid Grid,Fluid Image,Media Queries）

•グレイスフルデグラデーションで進められるとよい

•早めにテストを行いリスクを減らし効率的に進める

•カンプをつくるつくらないは案件に応じて

•パフォーマンスを上げるため画像を最適化する

•変化は必ず訪れるので少しずつ順応していく

13年10月8日火曜日