Responsive Web Design Adaptive Web Design マルチ 環 境 対 応 の 考 え 方
考 え 方は? 違 いは?
Responsive Web Design.content {! position: absolute;! }! @media screen and (min-width: 768px) {!.content {! position: relative;! }! }! @media screen and (min-width: 1024px) {!.content {! position: static;! }! } ブレイクポイントを 設 定 して 画 面サイズの 対 象 範 囲 ごとに レイアウトを 変 更更 する
Responsive Web Design ワンソースマルチユースの 考 え 方により 一つのHTMLファイルを 共 通 利利 用する
Responsive Web Design レイアウトを 画 面やウィンドウサイズの 変 化 に 追 従 して 柔 軟 に 変 更更 できる Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point
Responsive Web Design コンテンツを 非 表 示にできても ソースから 消 すことはできない <div id= boxa >! <!-- contents -->! </div>! <div id= boxb style= display:none; >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>! <div id= boxd >! <!-- contents -->! </div> <div id= boxa >! <!-- contents -->! </div>! <div id= boxb >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>
Responsive Web Design 画 像 などのリソースは 共 通 で 利利 用される 将 来 的 にはHTML5が 解 決 予 定 (picture 要 素 / imgsrc 属 性 ) <div id= boxa >! <img src= idea.png >! </div>! <div id= boxb >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div> <div id= boxa >! <img src= idea.png >! </div>! <div id= boxb >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>! <div id= boxc >! <!-- contents -->! </div>
Adaptive Web Design <script type="text/javascript">! if((navigator.useragent.indexof('iphone') > 0 &&!! navigator.useragent.indexof('ipad') == -1)!! navigator.useragent.indexof('ipod') > 0!! navigator.useragent.indexof('android') > 0) {!! location.href = '/sp/';! }! </script> ブラウザやデバイスを 判 定 して ファイル 読 み 込 みを 振 り 分 ける <!--[if IE 6]>!! <link rel="stylesheet" href="ie6.css"><![endif]-->! <!--[if IE 7]>!! <link rel="stylesheet" href="ie7.css"><![endif]-->! <!--[if IE 8]>!! <link rel="stylesheet" href="ie8.css"><![endif]-->! <!--[if IE 9]>!! <link rel="stylesheet" href="ie9.css"><![endif]-->
Adaptive Web Design 対 象 ごとに 専 用コンテンツやレイアウト を 個 別 に 用 意 する Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point
Adaptive Web Design 画 面やウィンドウサイズの 変 化 に 伴 った 柔 軟 なレイアウト 変 更更 はできない Small Display Meddium Display Large Display Smartphone Tablet (landscape) / Laptop Tablet (portrait) Break Point Break Point
Adaptive Web Design Contents PC Smartphone A E C 専 用HTML A C + E A B C 専 用HTML A+B + + C+D C A D D B E HTMLやCSSなどが 表 示 対 象 専 用の 設 定 となるため 目 的 や 方 法 に 合 わせた 個 別 のコンテンツを 提 供 可 能
Adaptive Web Design PC Smartphone A E C 専 用HTML A C + E A B C 専 用HTML A+B + + C+D C B A D 対 象 外 想 定 外 D E 対 象 外 や 想 定 外 の 環 境 では 操 作 や 表 示に 問 題 が 起 きたり 将 来 的 に 増 えるかもしれない 未 知 の 端 末 への 対 応 ができない
共 通 点 と 相 違 点
相違点 RWD 同じファイルを全ての表 示環境で 共通して利利 用する AWD 表 示環境ごとに個別のレイアウト やコンテンツを利利 用する Media Queries http://mediaqueri.es/
共通点 レイアウトは 特定の画 面サイズ を持つ表 示環境や 画 面サイズの 範囲を指定して変更更する 特定の画 面サイズを持つ表 示環境 や画 面サイズの範囲ごとに固有の レイアウトを提供する Media Queries http://mediaqueri.es/
レイアウトに限ると... RWDはワンソースマルチユース を前提とした AWDに含まれる 一つの 方法 Responsive ワンソースマルチユース Adaptive 表 示環境に合わせた コンテンツや レイアウトを提供 Media Queries http://mediaqueri.es/
Responsive Web Design コンテンツは 共 通 として 画 面 変 化 に 柔 軟 に 応 じた レイアウト 変 更更 が 目 的 Adaptive Web Design 画 面サイズあるいは 環 境 ごとに 専 用コンテンツを 提 供 することが 目 的
... Responsive Web Design Responsive Web Layout Adaptive Web Design Adaptive Web Contents
さて マルチ 環 境 対 応 には レイアウトとコンテンツ どちらが 重 要 なのか?
ADAPTIVE VS AND RESPONSIVE 両 方とも 重 要 あくまで 理理 想 ですが...
利利 用 方 法 が 異異 なれば 必 要 なコンテンツも 異異 なる 端 末 が 異異 なれば 操 作 方 法 も 異異 なる Adaptive Web Design 利利 用 目 的 や 画 面サイズに 適 した コンテンツとレイアウトを 提 供
端 末 によって 画 面サイズ や 解 像 度度 は 異異 なる 横 縦 どちらでユーザ が 利利 用するかわからない Responsive Web Design 画 面サイズや 画 面 解 像 度度 の 変 化 に 柔 軟 に 対 応 するレイアウトを 提 供
マルチ 環 境 対 応 の 問 題
Responsive Web Design Small Display Smartphone Tablet (portrait) Break Point Meddium Display Tablet (landscape) / Laptop Break Point Large Display PC / SmartTV Adaptive Web Design
RWDは... #1 特定の環境に特化したサイトが必 要ではない場合や サーバ連携に 制約がある場合 デバイス判定結果を信頼できない 状況や ユーザーエージェントに 依存しないサイト構築 Media Queries http://mediaqueri.es/
RWDは... #2 一つのソースで複数環境に対応で きるため コストパフォーマンス は 高い ただし 構造と装飾の分離離が必要 なため HTMLが適切切に構造化さ れていることが重要となる Media Queries http://mediaqueri.es/
AWDは... デバイスやユーザーエージェント 判定結果を信頼できる できる限り利利 用 目的や表 示環境に 最適化したUXやUIを提供する コストパフォーマンスより最適化 を重視する Media Queries http://mediaqueri.es/
導 入にあたっては... 既存サイトのRWD化は 構造化 が問題となるケースがある 新規やリニューアルでは AWD の 方が導 入しやすい AWDは専 用となるため 対象が 増えるとコスト負担が 大きい Media Queries http://mediaqueri.es/
汎 用+ 専 用サイト 構 築
RESS Responsive Design + Server Side Components Media Queries http://mediaqueri.es/
LukeW IDEATION+DESIGN : 2011-9- 12 http://www.lukew.com/ff/entry.asp?1392
RESS Contents PC Smartphone A E C 専 用HTML A C + E A B C 専 用HTML A+B + + C+D C A D D B E 端 末 やUAを 判 定 して 必 要 なコンテンツを 配 信 表 示はRWDでUAに 合 わせて 調 整
利利 用 目 的 や 操 作 方 法 機 能 に 合 わせたコンテンツの 提 供 AWDで 個 別 に 対 応 RESS Small Display Smartphone Tablet (portrait) Break Point Meddium Display Tablet (landscape) / Laptop Break Point Large Display PC / SmartTV 画 面サイズや 解 像 度度 の 違 い RWDで 対 応 画 面サイズや 解 像 度度 の 違 い RWDで 対 応 RESS 画 面サイズや 解 像 度度 の 違 い RWDで 対 応
特別な 方法ではなく... コンテンツのコンポーネント化 UAごとの配信コンテンツ管理理 コンテントネゴシエーション RWDによる表 示制御 UA デバイス判定とブレイクポイントの設定 Media Queries http://mediaqueri.es/ RESSはこの体系化の提案です
メリットは... Google推奨するRWDによるSEO 効果を期待できる <body> {{>header}} t...] n e t n o c t n e m u [...doc AWDはURLが環境ごとに異異なる <img " 0 0 3 " = h t id w " height= 300 " } } e g a im { { " = c r s n}}"> io t ip r c s e d e g a alt="{{im {{>footer}} が RESSでは解消 テンプレート管理理による将来的な </body> 環境の増加にも対応可能
結 論論... RWD / AWD を 利利 用したコンテンツ 提 供 は 必 須 マルチ 環 境 への 対 応 には コンテンツ をどのように 管 理理 し 環 境 に 合 わせて どのように 配 信 するかが 重 要 となる