電子雑誌のためのWeb Adaptive Layout
ウェブ・アダプティブ・レイアウト

境祐司 Youji Sakai

profile

YOUJI SAKAI
Instructional Designer
境祐司

community
電子書籍メディア論
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesignAgenda
今日お話すること

Web Adaptive Layout
ウェブ・アダプティブ・レイアウト

Web for All, Web on Everything

1-1. スマートデバイスの普及で変わること
1-2. アダプティブデザインとは？
Webzine2-1. ウェブマガジンと電子雑誌の違い
2-2. コンテンツ・ファーストWeb Adaptive Layout
ウェブ・アダプティブ・レイアウト

Web Adaptive Layout

3-1. 電子雑誌の設計
3-2. Web Layoutの種類
3-3. Grid Layout, Flexible Box Layout
3-4. Multi-column Layout
3-5. Media Queries

Web Adaptive Layout
ウェブ・アダプティブ・レイアウト

Future4-1. まとめ4-2. 電子雑誌の未来、ウェブの未来

Web for All,Web on Everything

Web for All, Web on Everything

スマートデバイスの普及で変わること

Web for All, Web on Everything

スマートデバイスの普及で変わること
常時身につけている
最も身近なウェブ端末

Web for All, Web on Everything

スマートデバイスの普及で変わること
スマートフォンで本・雑誌を読む
SMARTPHONE OPTIMIZATIONSWeb for All, Web on Everything

スマートデバイスの普及で変わること
タブレットで本・雑誌を読む
TABLET OPTIMIZATIONSWeb for All, Web on Everything

アダプティブデザインとは？

Web for All, Web on Everything

アダプティブデザインとは？

Ethan Marcotte
イーサン・マルコッテ“Fluid Grids, Fluid Images”

A Book Apart

Responsive Web Design

http://www.abookapart.com/products/responsive-web-designWeb for All, Web on Everything

アダプティブデザインとは？

A List Apart

Fluid Grids

http://www.alistapart.com/articles/fluidgrids/

Web for All, Web on Everything

アダプティブデザインとは？

“Fluid Grids”

Web for All, Web on Everything

アダプティブデザインとは？

“Fluid Grids”［段の幅 コンテントの幅 100］410 860 100＝47.6744186［段の余白 コンテントの幅 100］20 860 100＝ 2.3255814

Web for All, Web on Everything

アダプティブデザインとは？

“Fluid Grids”

Web for All, Web on Everything

アダプティブデザインとは？

デモをご覧ください

DEMONSTRATION

Web for All, Web on Everything

アダプティブデザインとは？

Jeffrey Zeldman
ジェフリー・ゼルドマン“mobile, responsive, and adaptive”

The Medium Comes of Age
Jeffrey Zeldman's keynote talk from DIBI Conference 2011.
http://vimeo.com/27769380

Web for All, Web on Everything

アダプティブデザインとは？

Web for All, Web on Everything

アダプティブデザインとは？

最適化？

Web for All, Web on Everything

アダプティブデザインとは？
Buy Once, Read Everywhere.

Web for All, Web on Everything

アダプティブデザインとは？
Kindle Editions
with Audio/Video
http://www.amazon.com/b?ie=UTF8&node=2248263011

Kindle for iPad, Kindle for iPhone

Web for All, Web on Everything

アダプティブデザインとは？

デバイスごとの最適化では追いつかないWeb for All, Web on Everything

アダプティブデザインとは？

最適化ではなく「適応」Web for All, Web on Everything

Mobile Safari

Chrome Lite

SMART DEVICEDESKTOP

Web for All, Web on Everything

Mobile Safari

Chrome Lite

SMART DEVICEWeb for All, Web on Everything

Chrome Lite

Mobile Safari

Web for All, Web on Everything
IE9

Chrome Lite

Mobile Safari

WebzineWebzine

ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い
The New Yorker
http://www.newyorker.com/

WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い

The New Yorker

http://www.newyorker.com/

Webzine
ウェブマガジンと電子雑誌の違い

The New Yorker

http://www.newyorker.com/

Webzine
ウェブマガジンと電子雑誌の違い

The New Yorker

http://www.newyorker.com/

contents

Webzine
ウェブマガジンと電子雑誌の違い

New York Magazine

http://nymag.com/

Webzine
ウェブマガジンと電子雑誌の違い

New York Magazine

contents

http://nymag.com/

Webzine
ウェブマガジンと電子雑誌の違い

New York Magazine

http://nymag.com/

Webzine
ウェブマガジンと電子雑誌の違い

New York Magazine

http://nymag.com/

Webzine
ウェブマガジンと電子雑誌の違い

WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い

WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い

WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い

・広告モデル・定期購読モデル
ペイドコンテンツ

Webzine
ウェブマガジンと電子雑誌の違い

広告モデル
contents

New York Magazine
http://nymag.com/

Webzine
ウェブマガジンと電子雑誌の違い

定期購読モデル
WIRED for iPad

Webzine
ウェブマガジンと電子雑誌の違い

ビジネスモデルによってデザインも変わる
・広告モデル・定期購読モデル
ペイドコンテンツ

Webzine
ウェブマガジンと電子雑誌の違いHTML5 based Magazine

Webzine
ウェブマガジンと電子雑誌の違い

HTML5basedMagazinetreesaver

http://treesaver.net/

Webzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

treesaverWebzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

The Innovation Issue

Think Quarterly
http://www.thinkwithgoogle.com/quarterly/innovationbyWebzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

Webzine
ウェブマガジンと電子雑誌の違い

Grid layout

Webzine
ウェブマガジンと電子雑誌の違いPC

smartphoneWebzine
ウェブマガジンと電子雑誌の違いPC

smartphoneWebzine
ウェブマガジンと電子雑誌の違い

WebsiteAppsWebApps

Webzine
ウェブマガジンと電子雑誌の違いKindle Edition
EPUB
Mobi
PDF

WebsiteApps

WebAppseMagazine

Webzine
ウェブマガジンと電子雑誌の違い

Technology

Webzine

コンテンツ・ファーストWebzine
コンテンツ・ファースト

Luke Wroblewski
ルーク・ウロブレウスキ“Mobile-first”

Mobile First - 5/27/2010
http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU

Webzine
コンテンツ・ファースト

Luke Wroblewski
ルーク・ウロブレウスキ“content first, navigation second”

Designing Mobile Web Experiences
http://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/Webzine
コンテンツ・ファースト“Content Strategy”

Webzine
コンテンツ・ファースト

Kristina Halvorson
クリスティーナ・ハルバーソン“Content Strategy”
Erin Kissane
エリン・キセイン

Web Adaptive
LayoutWeb Adaptive Layout

電子雑誌の設計Web Adaptive Layout
電子雑誌の設計

データはマシンリーダブルであること
適切なフォールバックを用意すること
情緒的価値の高い魅力的なビジュアルを提供すること

Web Adaptive Layout
電子雑誌の設計

データはマシンリーダブルであること・HTML5は文脈依存のマークアップ

適切なフォールバックを用意すること・グレースフル・デグラデーションを理解する

情緒的価値の高い魅力的なビジュアルを提供すること
・心を揺さぶる表現なくして人を惹きつけることはできない

Web Adaptive Layout

Web Layoutの種類

Web Adaptive Layout
Web Layoutの種類

ノーマルフローフロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト

Web Adaptive Layout
Web Layoutの種類
ノーマルフローフロート

浮動化

ポジショニング

絶対配置

グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト

Web Adaptive Layout
Web Layoutの種類

ノーマルフローフロート

ポジショニング

浮動化

絶対配置
相対配置固定配置

Web Adaptive Layout
Web Layoutの種類
ノーマルフロー
フロート浮動化

ポジショニング

絶対配置

グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト

Web Adaptive Layout
Web Layoutの種類
ノーマルフロー
フロート浮動化

ポジショニング

絶対配置

グリッドレイアウト

グリッド配置マルチカラムレイアウト

複数列配置

フレキシブルボックスレイアウト

可変ボックス配置

Web Adaptive Layout
Web Layoutの種類
グリッドレイアウト

グリッド配置リキッドデザインの特性を維持したまま高度なレイアウトを実現
マルチカラムレイアウト

複数列配置

記事の可読性を向上させる

フレキシブルボックスレイアウト

可変ボックス配置

レイアウト要素のコンポーネント化に適しているWeb Adaptive Layout

Grid Layout
Flexible Box Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

大きく変わる！ウェブレイアウトの設計
グリッドフィールドの指定
構成要素の配置
デスクトップ向けのレイアウトフレーム
スマートデバイス向けのレイアウトフレーム

Web Adaptive LayoutGrid Layout, Flexible Box Layout

大きく変わる！
ウェブレイアウトの設計

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Douglas Bowman
ダグラス・ボーマン“Throwing Tables Out the Window”
テーブルは窓から投げ捨てろ
2004年7月

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Jeremy Keith
ジェレミー・キース“ There Is No Mobile Web”
There Is No Mobile Web

PDF http://adactio.com/extras/slides/thereisnomobileweb.pdf

Web Adaptive Layout
Grid Layout, Flexible Box Layout

one web flexible

Web Adaptive Layout
Grid Layout, Flexible Box Layout

one web flexible
Grid Layout
Flexible Box LayoutMulti-column Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Grid Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Grid Layout
http://www.w3.org/TR/css3-grid-layout/

まだ策定中です。最新情報は
W3Cのサイトで確認してください2011年9月17日

Web Adaptive Layout
Grid Layout, Flexible Box Layout

グリッドフィールドの指定

grid-columns
grid-rows

Web Adaptive Layout
Grid Layout, Flexible Box Layout

構成要素の配置grid-column
grid-row
grid-column-span
grid-row-span

Web Adaptive Layout

デモをご覧ください

DEMONSTRATION

Web Adaptive Layout
Grid Layout, Flexible Box Layout<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>

Web Adaptive Layout
Grid Layout, Flexible Box Layout

たったこれだけ<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>

Web Adaptive Layout
Grid Layout, Flexible Box Layout

たったこれだけ
div要素は１つ<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>

Web Adaptive Layout
Grid Layout, Flexible Box Layout

headernavarticle section
sectionaside sectionfooter<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>

Web Adaptive Layout

Grid Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout#container {width: 90%;
margin: 0 5%;
display: -ms-grid;-ms-grid-columns: 12% 64% 24%;
-ms-grid-rows: 1fr 1fr 1fr;}

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout
header {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-column-span: 3;}
nav {-ms-grid-column: 1;-ms-grid-row: 2;}
article {-ms-grid-column: 2;-ms-grid-row: 2;}

aside {
-ms-grid-column: 3;-ms-grid-row: 2;}
footer {-ms-grid-column: 1;-ms-grid-row: 3;-ms-grid-column-span: 3;}

Web Adaptive Layout

Web Adaptive Layout
column:1; row:1; column-span:3;column:2; row:2;column:3;row:2;

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout#container {-ms-grid-columns: 130px 64% 1fr;}

Web Adaptive Layout

130px

64%

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout#container {width: 90%;
min-width:840px;}

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout要素を再配置する

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

nav {-ms-grid-column: 1;-ms-grid-row: 2;}
article {-ms-grid-column: 2;-ms-grid-row: 2;}

Web Adaptive Layout
Grid Layout, Flexible Box Layout

nav {-ms-grid-column: 1;-ms-grid-row: 2;}
article {-ms-grid-column: 2;-ms-grid-row: 2;}

nav {-ms-grid-column: 2;-ms-grid-row: 2;}
article {-ms-grid-column: 1;-ms-grid-row: 2;}

Web Adaptive Layout

column:2; row:2;

Web Adaptive Layout

column:1; row:2;

Web Adaptive Layout
Grid Layout, Flexible Box Layout

要素を再配置する-2

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

わかりますか？

Web Adaptive Layout
column:1; row:1; column-span:3;

Web Adaptive Layout

Web Adaptive Layout
column:2;
row:1;column-span:2;

Web Adaptive Layout
column:2;
row:1;
column-span:2;

column:1;
row:2;

Web Adaptive Layout
column:2;
row:1;
column-span:2;

column:1;
row:1;
column-row:2;

Web Adaptive Layout

Flexible Box Layout

Web Adaptive Layout

Flexible Box Layout
Modulehttp://www.w3.org/TR/css3-ﬂexbox/

まだ策定中です。最新情報はW3Cのサイトで確認してください2011年9月17日

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout<nav role="navigation"><h3>Navigation</h3><ol><li><a href="#">Facebook</a></li><li><a href="#">Twitter</a></li><li><a href="#">YouTube</a></li><li><a href="#">Ustream</a></li><li><a href="#">Google+</a></li></ol></nav>

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout@media screen and (min-width: 35em) {body {
display: -ms-box;
display: box;
box-orient: vertical;
box-direction: reverse;}[role="navigation"] ol {display: box;
box-orient: horizontal;
box-direction: normal;}[role="navigation"] li {box-flex: 1;}}

Web Adaptive Layout
Grid Layout, Flexible Box Layout

グリッドレイアウトに組み込む

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Grid Layout+Flexible Box Layout+Multi-column Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Grid Layout+Flexible Box Layout+Multi-column Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

Grid Layout+Flexible Box Layout+Multi-column Layout

Web Adaptive Layout

Multi-column Layout

Web Adaptive Layout
Multi-column Layout

CSS Multi-column
Layout Module
http://www.w3.org/TR/css3-multicol/

Web Adaptive Layout
Multi-column Layout

記事の可読性向上
グリッドフレームにマルチカラムを挿入
デスクトップ向けのマルチカラム
スマートデバイス向けのマルチカラム

Web Adaptive Layout
Multi-column Layout

記事の可読性向上

column-countcolumn-gap, column-rulecolumn-span
break-before, break-afterWeb Adaptive Layout

デモをご覧ください

DEMONSTRATION

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout.multicol {column-count:2;}

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout@media screen and (max-width:940px) {.multicol {column-count:1;}}

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout.multicol {column-count:3;column-gap:2em;column-rule:solid 1px #999;}

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout
Grid Layout, Flexible Box Layout

フロートとポジショニングの融合

Web Adaptive Layout

PositionedFloats
CSS Floats and Positioning Level 3
http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

デモをご覧ください

DEMONSTRATION

Web Adaptive Layout

IE10のデフォルトページから選択

Web Adaptive Layout

Web Adaptive Layout

Web Adaptive Layout

Media Queries

Web Adaptive Layout
Media Queries

リーダビリティの基準
スクリーンサイズとブラウザのウィンドウサイズ
構成要素の配置換え
マルチカラムの切り替え

Web Adaptive Layout
Media Queries

スクリーンサイズとブラウザのウィンドウサイズ

min-width, max-width
min-device-width
max-device-width

Web Adaptive Layout
Media Queries

Web Adaptive Layout
Media Queries

Web Adaptive Layout
Media Queries

Web Adaptive Layout
Media Queries

Web Adaptive Layout
Media Queries

Web Adaptive Layout
Media Queries
http://mediaqueri.es/

Web Adaptive Layout
Hardboiled CSS3 Media Queries
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queriesFutureWeb Adaptive Layout
まとめ・アダプティブデザインとは？
・マシンリーダブルと適切なフォールバック
・数年後に大きく変わるウェブレイアウト
・今やっておくこと

Web Adaptive Layout
まとめ・アダプティブデザインとは？
さまざまな環境に（最適化ではなく）「適応」するデザインを目指す・マシンリーダブルと適切なフォールバック
プログラム処理可能なデータにする／古い環境を切り捨てない・数年後に大きく変わるウェブレイアウト
これからは“one web ﬂexible”を意識していこう・今やっておくこと試す（最も重要）、公開する、意見交換するFuture

電子雑誌の未来、ウェブの未来

Future

電子雑誌の未来、ウェブの未来

Web for All,Web on Everything
みんなのウェブ、どこからでもウェブ

Thank you for your attention.
ご清聴ありがとうございましたcommunity
電子書籍メディア論h t t p : / / w w w. f a c e b o o k . c o m / e B o o k S t r a t e g y