電子雑誌のためのWeb Adaptive Layout

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

境祐司 Youji Sakai

Instructional Designer境祐司

profile

YOUJI SAKAI

community

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

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

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

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

A List Apart

“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

Webzine

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

Webzine

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

Webzine

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

Webzine

contents

Webzine

New York Magazinehttp://nymag.com/

Webzine

New York Magazinehttp://nymag.com/contents

Webzine

WIRED for iPad

Webzine

WIRED for iPad

Webzine

WIRED for iPad

Webzine

WIRED for iPad

Webzine

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

ペイドコンテンツ

Webzine

contents広告モデル

Webzine

WIRED for iPad

定期購読モデル

Webzine

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

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

Webzine

HTML5 based Magazine

Webzine

HTML5basedMagazine

treesaverhttp://treesaver.net/

Webzine

treesaver

Webzine

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

The Innovation Issue

Webzine

Grid layout

Webzine

PC smartphone

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

Webzine

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

“content first, navigation second”

Designing Mobile Web Experienceshttp://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

one web flexible

Grid LayoutFlexible Box LayoutMulti-column Layout

Grid Layout

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

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

2011年9月17日

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

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

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

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+

Multi-column Layout

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

記事の可読性向上

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

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

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

記事の可読性向上

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

Web Adaptive Layout

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

Web Adaptive Layout

Media Queries

Web Adaptive LayoutMedia Queries

リーダビリティの基準

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

マルチカラムの切り替え

構成要素の配置換え

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

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

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

雑誌コード／定期刊行物コード ... - jpo.or.jp · 2. 定期刊行物コード（雑誌）の概要とコード体系 定期刊行物コード（雑誌）の概要 わが国の流通では、一般の商品については、janコードをjanシンボルで表したバーコードが広

雑誌名 編者 所蔵巻号 所蔵年 誌名変遷 雑誌番号 … › library › docs › wazassi20170926.pdf1 / 29 ページ 雑誌名 編者 所蔵巻号 所蔵年 誌名変遷

明治前期の京都における新聞・雑誌の印刷所の実態 URL … · Hitotsubashi University Repository Title 明治前期の京都における新聞・雑誌の印刷所の実態

BUNKAdspace.bunka.ac.jp/dspace/bitstream/10457/1839/1/0210606...黎明期 女性誌からの分化（明治時代） わが国最初の雑誌は、1867（慶応3）年刊行の「西洋雑誌」といわれ

雑誌でパソコンの進化を振り返る！ · 2016年 夏→秋 44号 Science Industry and Information Library 科学と産業の情報ライブラリーニュース 雑誌でパソコンの進化を振り返る！

1980 年代のリハビリテーション雑誌のなかの「寝たきり老人」言説

図書館利用ガイド - dokkyo.ac.jp · - 2 - 1. 図書館の概要 ・蔵書数 図 書 約98万冊（和書約64万冊、洋書約34万冊） 雑 誌 約14,000タイトル（和雑誌：約9,100、洋雑誌：約4,900）

医学中央雑誌 Web (Ver.4)

太陽雑誌会速報 2004.05.24 T.T.Ishii

和雑誌 雑誌名 所蔵データ（巻・号・年） 電子ジャーナル閲覧開 … · 雑誌名 所蔵データ（巻・号・年） 電子ジャーナル閲覧開始年

4 BOOK and DVD in Library...図書館 1階 雑誌コーナー よく利用される雑誌の最新号がある。 図書館 2 階 雑誌コーナー ビジネス雑誌の他、学術雑誌の最新号～過去2･3

少女雑誌に見る現代少女の身体文化 - 日本子ども社会学会...少女雑誌に見る現代少女の身体文化：東野 3．少女雑誌に見る現代少女の身体文化

書籍・雑誌の流通・取引慣行の現状d21.lekumo.biz/discover/files/080724tenpu01-1.pdf1 1 書籍・雑誌の市場動向 書籍・雑誌（取次経由）の販売金額，書籍の出回り部数及び雑誌の発行部数は

論文や雑誌記事を検索しよう！ - Toyo University『CiNii Articles』（サイニィアーティクルズ）や『magazineplus』（マガジンプラス）では、雑誌記事・論文の情報を検索

ファッション雑誌にみる“カリスマ”ファッション雑誌にみる“カリスマ”＊ 難波功士＊＊ 【0】はじめに 周知のように社会学の文脈においては、「カリ

雑誌(C案) のコピーTitle 雑誌(C案) のコピー Created Date 7/13/2015 9:30:10 AM

『生物医学雑誌への統一投稿規程』① › magazines › urm.pdf1978年，ブリティッシュ・コロンビア州バンクー バー（カナダ）にて，少人数の総合医学雑誌編集者たち

「雑誌POSセンター」とは 雑誌POSセンターの案内日 本雑誌協会 「雑誌POSセンター」とは 雑 誌出版界の 重要なインフラ機能としての役割を担っています

雑誌所蔵目録 [ 和雑誌 ] - ls-assist.jp · 雑誌所蔵目録 [ 和雑誌 ] INR :International Nursing Review ISSN： 03863247 ( 502 ) 6(1983)-15(1992) 出版社：日本看護協会出版会

雑誌コード／定期刊行物コード ... - jpo.or.jp · 2. 定期刊行物コード（雑誌）の概要とコード体系定期刊行物コード（雑誌）の概要わが国の流通では、一般の商品については、janコードをjanシンボルで表したバーコードが広

雑誌名編者所蔵巻号所蔵年誌名変遷雑誌番号 … › library › docs › wazassi20170926.pdf1 / 29 ページ雑誌名編者所蔵巻号所蔵年誌名変遷

BUNKAdspace.bunka.ac.jp/dspace/bitstream/10457/1839/1/0210606...黎明期女性誌からの分化（明治時代）わが国最初の雑誌は、1867（慶応3）年刊行の「西洋雑誌」といわれ

雑誌でパソコンの進化を振り返る！ · 2016年夏→秋 44号 Science Industry and Information Library 科学と産業の情報ライブラリーニュース雑誌でパソコンの進化を振り返る！

図書館利用ガイド - dokkyo.ac.jp · - 2 - 1. 図書館の概要・蔵書数図書約98万冊（和書約64万冊、洋書約34万冊）雑誌約14,000タイトル（和雑誌：約9,100、洋雑誌：約4,900）

和雑誌雑誌名所蔵データ（巻・号・年）電子ジャーナル閲覧開 … · 雑誌名所蔵データ（巻・号・年）電子ジャーナル閲覧開始年

4 BOOK and DVD in Library...図書館 1階雑誌コーナーよく利用される雑誌の最新号がある。図書館 2 階雑誌コーナービジネス雑誌の他、学術雑誌の最新号～過去2･3

書籍・雑誌の流通・取引慣行の現状d21.lekumo.biz/discover/files/080724tenpu01-1.pdf1 1 書籍・雑誌の市場動向書籍・雑誌（取次経由）の販売金額，書籍の出回り部数及び雑誌の発行部数は

ファッション雑誌にみる“カリスマ”ファッション雑誌にみる“カリスマ”＊難波功士＊＊【0】はじめに周知のように社会学の文脈においては、「カリ

『生物医学雑誌への統一投稿規程』① › magazines › urm.pdf1978年，ブリティッシュ・コロンビア州バンクーバー（カナダ）にて，少人数の総合医学雑誌編集者たち

「雑誌POSセンター」とは雑誌POSセンターの案内日本雑誌協会「雑誌POSセンター」とは雑誌出版界の重要なインフラ機能としての役割を担っています