Download - 電子雑誌のためのWeb Adaptive Layout
電子雑誌のための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
Web Adaptive Layoutウェブ・アダプティブ・レイアウト
3-1. 電子雑誌の設計3-2. Web Layoutの種類3-3. Grid Layout, Flexible Box Layout3-4. Multi-column Layout3-5. Media Queries
Web Adaptive Layout
Web Adaptive Layoutウェブ・アダプティブ・レイアウト
4-1. まとめ4-2. 電子雑誌の未来、ウェブの未来
Future
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”
Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
A Book Apart
Web for All, Web on Everything
アダプティブデザインとは?
Fluid Gridshttp://www.alistapart.com/articles/fluidgrids/
A List Apart
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”
Jeffrey Zeldman's keynote talk from DIBI Conference 2011.
The Medium Comes of Age
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
アダプティブデザインとは?
http://www.amazon.com/b?ie=UTF8&node=2248263011
Kindle Editionswith Audio/Video
Kindle for iPad, Kindle for iPhone
Web for All, Web on Everything
アダプティブデザインとは?
デバイスごとの最適化では追いつかない
Web for All, Web on Everything
アダプティブデザインとは?
最適化ではなく「適応」
Web for All, Web on Everything
Chrome LiteMobile Safari
SMART DEVICE
DESKTOP
Web for All, Web on Everything
Chrome LiteMobile Safari
SMART DEVICE
Web for All, Web on Everything
Chrome Lite Mobile Safari
Web for All, Web on Everything
Chrome Lite Mobile Safari
IE9
Webzine
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違いThe New Yorkerhttp://www.newyorker.com/ WIRED for iPad
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
contents
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
ウェブマガジンと電子雑誌の違い
New York Magazinehttp://nymag.com/
contents広告モデル
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
定期購読モデル
Webzine
ウェブマガジンと電子雑誌の違い
・広告モデル・定期購読モデルペイドコンテンツ
ビジネスモデルによってデザインも変わる
Webzine
ウェブマガジンと電子雑誌の違い
HTML5 based Magazine
Webzine
ウェブマガジンと電子雑誌の違い
HTML5basedMagazine
treesaverhttp://treesaver.net/
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
treesaver
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
Think Quarterlyhttp://www.thinkwithgoogle.com/quarterly/innovation
The Innovation Issue
by
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
Webzine
ウェブマガジンと電子雑誌の違い
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 LayoutWeb Layoutの種類
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
浮動化絶対配置
Web Adaptive LayoutWeb Layoutの種類
ノーマルフロー フロート ポジショニング
浮動化 絶対配置相対配置固定配置
Web Adaptive LayoutWeb Layoutの種類
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
浮動化絶対配置
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
Web Adaptive LayoutWeb Layoutの種類
グリッド配置複数列配置
可変ボックス配置
浮動化絶対配置
Web Adaptive LayoutWeb Layoutの種類
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
グリッド配置
複数列配置
可変ボックス配置
リキッドデザインの特性を維持したまま高度なレイアウトを実現
記事の可読性を向上させる
レイアウト要素のコンポーネント化に適している
Web Adaptive Layout
Grid LayoutFlexible Box Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
大きく変わる!ウェブレイアウトの設計
グリッドフィールドの指定
構成要素の配置
デスクトップ向けのレイアウトフレーム
スマートデバイス向けのレイアウトフレーム
Web Adaptive LayoutGrid Layout, Flexible Box Layout
大きく変わる!ウェブレイアウトの設計
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Douglas Bowmanダグラス・ボーマン
“Throwing Tables Out the Window”テーブルは窓から投げ捨てろ
2004年7月
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Jeremy Keithジェレミー・キース
“ There Is No Mobile Web”
There Is No Mobile Webhttp://adactio.com/extras/slides/thereisnomobileweb.pdfPDF
Web Adaptive LayoutGrid Layout, Flexible Box Layout
one web flexible
Web Adaptive LayoutGrid Layout, Flexible Box Layout
one web flexible
Grid LayoutFlexible Box LayoutMulti-column Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layouthttp://www.w3.org/TR/css3-grid-layout/
まだ策定中です。最新情報はW3Cのサイトで確認してください
2011年9月17日
Web Adaptive LayoutGrid Layout, Flexible Box Layout
グリッドフィールドの指定
grid-columnsgrid-rows
Web Adaptive LayoutGrid Layout, Flexible Box Layout
構成要素の配置
grid-columngrid-row
grid-column-spangrid-row-span
Web Adaptive Layout
DEMONSTRATIONデモをご覧ください
Web Adaptive LayoutGrid 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 LayoutGrid 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 LayoutGrid 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>
たったこれだけdiv要素は1つ
Web Adaptive LayoutGrid 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>
headernav
article section section
aside sectionfooter
Web Adaptive Layout
Grid Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid 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 LayoutGrid 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 LayoutGrid 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 LayoutGrid Layout, Flexible Box Layout
#container {width: 90%;min-width:840px;
}
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
要素を再配置する
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
nav { -ms-grid-column: 1;-ms-grid-row: 2;}article { -ms-grid-column: 2;-ms-grid-row: 2;}
Web Adaptive LayoutGrid 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 LayoutGrid Layout, Flexible Box Layout
要素を再配置する-2
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid 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 Module
http://www.w3.org/TR/css3-flexbox/
まだ策定中です。最新情報はW3Cのサイトで確認してください
2011年9月17日
Web Adaptive Layout
Web Adaptive LayoutGrid 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 LayoutGrid 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 LayoutGrid Layout, Flexible Box Layout
グリッドレイアウトに組み込む
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid 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 LayoutGrid Layout, Flexible Box Layout
Grid Layout+
Flexible Box Layout+
Multi-column Layout
Web Adaptive LayoutGrid Layout, Flexible Box 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/
Web Adaptive LayoutMulti-column Layout
記事の可読性向上
グリッドフレームにマルチカラムを挿入
デスクトップ向けのマルチカラム
スマートデバイス向けのマルチカラム
Web Adaptive LayoutMulti-column Layout
記事の可読性向上
column-countcolumn-gap, column-rule
column-spanbreak-before, break-after
Web Adaptive Layout
DEMONSTRATIONデモをご覧ください
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
.multicol {column-count:2;
}
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
@media screen and (max-width:940px) {.multicol {
column-count:1;}
}
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
.multicol {column-count:3;column-gap:2em;column-rule:solid 1px #999;
}
Web Adaptive Layout
Web Adaptive Layout
Web Adaptive LayoutGrid Layout, Flexible Box Layout
フロートとポジショニングの融合
Web Adaptive Layout
PositionedFloats
CSS Floats and Positioning Level 3http://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 LayoutMedia Queries
リーダビリティの基準
スクリーンサイズとブラウザのウィンドウサイズ
マルチカラムの切り替え
構成要素の配置換え
Web Adaptive LayoutMedia Queries
スクリーンサイズとブラウザのウィンドウサイズ
min-width, max-widthmin-device-widthmax-device-width
Web Adaptive LayoutMedia Queries
Web Adaptive LayoutMedia Queries
Web Adaptive LayoutMedia Queries
Web Adaptive LayoutMedia Queries
Web Adaptive LayoutMedia Queries
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
電子雑誌の未来、ウェブの未来
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