電子雑誌のためのWeb Adaptive Layout

電子雑誌のためのWeb Adaptive Layout

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

境祐司 Youji Sakai

Instructional Designer境祐司

profile

YOUJI SAKAI

community

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

デザインの未来http://www.facebook.com/TheFutureDesign

http://www.facebook.com/pages/dian-zi-shu-jimedia-lun/143512822352930








Agenda今日お話すること

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

1-1. スマートデバイスの普及で変わること1-2. アダプティブデザインとは？

2-1. ウェブマガジンと電子雑誌の違い2-2. コンテンツ・ファースト

Web for All, Web on Everything

Webzine


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

Web Adaptive Layout


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

Future


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


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

常時身につけている最も身近なウェブ端末


スマートデバイスの普及で変わることスマートフォンで本・雑誌を読む

SMARTPHONE OPTIMIZATIONS


スマートデバイスの普及で変わることタブレットで本・雑誌を読む

TABLET OPTIMIZATIONS


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



Ethan Marcotteイーサン・マルコッテ

“Fluid Grids, Fluid Images”

Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design

A Book Apart

http://www.abookapart.com/products/responsive-web-design

http://www.abookapart.com/products/responsive-web-design



Fluid Gridshttp://www.alistapart.com/articles/fluidgrids/

A List Apart

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

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



“Fluid Grids”



“Fluid Grids”

［段の幅÷コンテントの幅×100］410÷860×100＝47.6744186

［段の余白÷コンテントの幅×100］20÷860×100＝ 2.3255814



“Fluid Grids”



DEMONSTRATIONデモをご覧ください



Jeffrey Zeldmanジェフリー・ゼルドマン

“mobile, responsive, and adaptive”

Jeffrey Zeldman's keynote talk from DIBI Conference 2011.

The Medium Comes of Age

http://vimeo.com/27769380





最適化？


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



http://www.amazon.com/b?ie=UTF8&node=2248263011

Kindle Editionswith Audio/Video

Kindle for iPad, Kindle for iPhone






デバイスごとの最適化では追いつかない



最適化ではなく「適応」


Chrome LiteMobile Safari

SMART DEVICE

DESKTOP


Chrome LiteMobile Safari

SMART DEVICE


Chrome Lite Mobile Safari


Chrome Lite Mobile Safari

IE9

Webzine

Webzine

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

Webzine

ウェブマガジンと電子雑誌の違いThe New Yorkerhttp://www.newyorker.com/ WIRED for iPad

http://www.newyorker.com/


Webzine


The New Yorkerhttp://www.newyorker.com/



Webzine


The New Yorkerhttp://www.newyorker.com/

contents



Webzine


New York Magazinehttp://nymag.com/

http://nymag.com

http://nymag.com

Webzine


New York Magazinehttp://nymag.com/contents

http://nymag.com

http://nymag.com

Webzine



http://nymag.com

http://nymag.com

Webzine


WIRED for iPad

Webzine


・広告モデル・定期購読モデル

ペイドコンテンツ

Webzine



contents広告モデル

http://nymag.com

http://nymag.com

Webzine


WIRED for iPad

定期購読モデル

Webzine


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

ビジネスモデルによってデザインも変わる

Webzine


HTML5 based Magazine

Webzine


HTML5basedMagazine

treesaverhttp://treesaver.net/

http://treesaver.net

http://treesaver.net

http://treesaver.net/

http://treesaver.net/

Webzine


Webzine


treesaver

Webzine


Webzine


Think Quarterlyhttp://www.thinkwithgoogle.com/quarterly/innovation

The Innovation Issue

by

http://www.thinkwithgoogle.com/quarterly/innovation

http://www.thinkwithgoogle.com/quarterly/innovation

Webzine


Webzine


Grid layout

Webzine


PC smartphone

Webzine


Website Apps WebApps

Webzine


Website Apps WebApps eMagazine

Kindle EditionEPUBMobiPDF

Webzine


Technology

Webzine

コンテンツ・ファースト

Webzine

Luke Wroblewskiルーク・ウロブレウスキ

“Mobile-first”


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

http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU

http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU

Webzine

Luke Wroblewskiルーク・ウロブレウスキ

“content first, navigation second”


Designing Mobile Web Experienceshttp://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/

http://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-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 AdaptiveLayout

Web Adaptive Layout

電子雑誌の設計

Web Adaptive Layout電子雑誌の設計

データはマシンリーダブルであること

適切なフォールバックを用意すること

情緒的価値の高い魅力的なビジュアルを提供すること

Web Adaptive Layout電子雑誌の設計

データはマシンリーダブルであること

適切なフォールバックを用意すること

情緒的価値の高い魅力的なビジュアルを提供すること

・HTML5は文脈依存のマークアップ

・グレースフル・デグラデーションを理解する

・心を揺さぶる表現なくして人を惹きつけることはできない

Web Adaptive Layout

Web Layoutの種類

Web Adaptive LayoutWeb Layoutの種類

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


ノーマルフロー

フロート

ポジショニング

グリッドレイアウト

マルチカラムレイアウト

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

浮動化絶対配置


ノーマルフローフロートポジショニング

浮動化絶対配置相対配置固定配置



フロート







フロート






グリッド配置複数列配置

可変ボックス配置






グリッド配置

複数列配置

可変ボックス配置

リキッドデザインの特性を維持したまま高度なレイアウトを実現

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

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

Web Adaptive Layout

Grid LayoutFlexible Box Layout

Web Adaptive LayoutGrid Layout, Flexible Box Layout

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

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

構成要素の配置

デスクトップ向けのレイアウトフレーム

スマートデバイス向けのレイアウトフレーム


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


Douglas Bowmanダグラス・ボーマン

“Throwing Tables Out the Window”テーブルは窓から投げ捨てろ

2004年7月


Jeremy Keithジェレミー・キース

“ There Is No Mobile Web”

There Is No Mobile Webhttp://adactio.com/extras/slides/thereisnomobileweb.pdfPDF

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

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


one web flexible


one web flexible

Grid LayoutFlexible Box LayoutMulti-column Layout


Grid Layout


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

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

2011年9月17日

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

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


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

grid-columnsgrid-rows


構成要素の配置

grid-columngrid-row

grid-column-spangrid-row-span

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



たったこれだけ



たったこれだけdiv要素は１つ



headernav

article section section

aside sectionfooter

Web Adaptive Layout

Grid Layout

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


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


#container {-ms-grid-columns: 130px 64% 1fr;

}

Web Adaptive Layout

130px 64%

Web Adaptive Layout


#container {width: 90%;min-width:840px;

}

Web Adaptive Layout


要素を再配置する

Web Adaptive Layout


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

Web Adaptive Layout

column:2; row:2;

Web Adaptive Layout

column:1; row:2;


要素を再配置する-2

Web Adaptive 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 Module

http://www.w3.org/TR/css3-flexbox/

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

2011年9月17日



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


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

Multi-column Layout

Web Adaptive Layout


Grid Layout+

Flexible Box Layout+

Multi-column Layout

Web Adaptive Layout

Multi-column Layout

Web Adaptive LayoutMulti-column Layout

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

http://www.w3.org/TR/css3-multicol/

http://www.w3.org/TR/css3-multicol/


記事の可読性向上

グリッドフレームにマルチカラムを挿入

デスクトップ向けのマルチカラム

スマートデバイス向けのマルチカラム


記事の可読性向上

column-countcolumn-gap, column-rule

column-spanbreak-before, break-after

Web Adaptive Layout



.multicol {column-count:2;

}

Web Adaptive Layout


@media screen and (max-width:940px) {.multicol {

column-count:1;}

}

Web Adaptive Layout


.multicol {column-count:3;column-gap:2em;column-rule:solid 1px #999;

}

Web Adaptive Layout


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

Web Adaptive Layout

PositionedFloats

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

http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

Web Adaptive Layout

Web Adaptive Layout

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

Web Adaptive Layout

Web Adaptive Layout

Media Queries

Web Adaptive LayoutMedia Queries

リーダビリティの基準

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

マルチカラムの切り替え

構成要素の配置換え


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

min-width, max-widthmin-device-widthmax-device-width


http://mediaqueri.es/

http://mediaqueri.es

http://mediaqueri.es

Web Adaptive LayoutHardboiled CSS3 Media Queries

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries



Future

Web Adaptive Layout

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

・マシンリーダブルと適切なフォールバック

・数年後に大きく変わるウェブレイアウト

・今やっておくこと

まとめ

Web Adaptive Layout

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

・マシンリーダブルと適切なフォールバック

・数年後に大きく変わるウェブレイアウト

・今やっておくこと

まとめ

さまざまな環境に（最適化ではなく）「適応」するデザインを目指す

プログラム処理可能なデータにする／古い環境を切り捨てない

これからは“one web flexible”を意識していこう

試す（最も重要）、公開する、意見交換する

Future

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

Future

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


みんなのウェブ、どこからでもウェブ

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





電子雑誌のためのWeb Adaptive Layout

Design

Transcript of 電子雑誌のためのWeb Adaptive Layout