Weitere ähnliche Inhalte
Ähnlich wie ワンソースマルチユース (20)
ワンソースマルチユース
- 1. One Source Multi Use ワンソースマルチユース
GUIDELINE
ガイドライン
2011.10.13 マルチデバイスLab.
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 2. 更新履歴
日付 バージョン 更新内容 変更者
2011/09/01 ver1.0 新規作成 丸居久仁男
2011/10/13 ver1.1 P10,P11 iOS5対応UA反映 丸居久仁男
2
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 3. 目次
INDEX
00 INTRODUCTION
はじめに 4
01 MERIT AND DEMERIT
メリットとデメリット
メリットと 5
02 CSS SWITCH IMPLEMENTATION
CSSによる読
CSSによる読み分け実装
による 6
03 LAYOUT
レイアウトの
レイアウトの考え方 12
04 PROJECT FLOW
プロジェクト進行
プロジェクト進行フロー
進行フロー 14
05 DESIGN VARIATIONS
デザイン移行バリエーション
デザイン移行バリエーション
移行 16
06 DIFFICULT DESIGN PATTERN
移行困難な
移行困難なデザインパターン 27
3
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 4. はじめに
00
INTRODUCTION
はじめに
Useとは html文書などをmedia queriesを用いてCSSを振り分けることができる。
One Source Multi Useとは
One Source Multi Useとは、1つのドキュメントを、仕様や画面サイズの異なる複数のデバイ
スに対して最適化して表示させるための考え方です。
広義としては、HTMLファイルのデバイスごとの振分対応やCMSなども概念としては含むこと
ができます。
複数デバイスに対応する方法は、フィーチャーフォンの世界では既に行われていますが、
ここ最近定義されてきているOne Source Multi Useの考え方では、主にCSS3のmedia
queriesを使用したCSSの振分対応のことをさしていることが多く、画面サイズ(解像度・ウィ
ンドウサイズ)を元にどのようにレイアウト別のCSSを出し分けるかがテーマになっています。
IMJGが提唱するOne
IMJGが提唱するOne Source Multi Useの定義
する Useの
IMJGが考えるOne Source Multi Useの定義は、Webブラウザ上で閲覧できるHTMLデータを
2種類以上のデバイス(モバイルキャリア)で、最適に閲覧することが出来るように効率化し
た設計思想のことです。
「One Source Multi Useとは」でも触れていますが、方法は複数考えられ、media queriesの
使用によるデバイスごとの表示分け、UA取得によるデバイスの切り分けなど、幾つかの選
択肢があります。
One Source Multi Useは設計の思想になりますので、実現するための方法を以後のページ
で解説していくことにしましょう。
4
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 5. メリットとデメリット
01
MERIT AND DEMERIT
メリットと
メリットとデメリット
TIPS まとめ
Useの
One Source Multi Useのメリット ■メリット
・制作リソースを抑えられる
・各デバイスへの準個別対応(完全対応ではない)
One Source Multi Use思想で構築をするメリットは、元となるHTMLソースのパターンを少な ・デバイス別ターゲットユーザーへの対応
くして、複数のデバイス(モバイルキャリア)へ展開させることができるため、デバイス別に ・初期投資以後のランニングコストを抑えることができる
・media queries ではJavaScriptに依存しない振分けが可能
膨らみがちな制作リソースを抑えることができます。それにより、(デバイスの)ある程度の
将来性を見据えて対応するため、準個別対応をすることが可能となります。また、初期投 ■デメリット
資のみで、デバイスごとに微妙に違うターゲットユーザーを広くカバーすることが可能となり ・高いスキルを必要とするため制作者が限られる
・設計思想を理解してもらう時間を要する
ます。さらに、デバイス別に運用することなく、元となるHTMLソースを編集するだけで対応 ・スロースタート+初期投資へのコスト高
できるため、ランニングコストを抑えることができます。 ・運用者にも深い構造理解が必要
・media queriesの画面サイズによる振分けが破綻する可能性も・・・?
media queriesの使用に限ればJavaScriptに依存することなく、切分け、振分けが可能なの
でJavaScriptがoffの際の挙動を気にしなくてもよくなります。
Useの
One Source Multi Useのデメリット
One Source Multi Use思想で構築をするデメリットは、初期設計に多く時間を割かなければ
ならない点です。初期設計にはデバイス別に高度で幅広い知識が必要となるため、設計者
には高いスキルが要求されてしまいます。さらには、顧客を含めたプロジェクトに関わる全
てのメンバーが設計思想への理解が必要となるため、定義を固める時間を要します。その
ため、初期投資部分は他のプロジェクトよりも初動を慎重に進めることとなり、スロースター
ト+初期投資増となる可能性が高くなります。また、運用時に入ってからは、部分的なリ
ニューアルやデバイス別のカスタマイズなどが発生した場合、設計思想を理解した上での
対応を求められてしまい、手軽とはいえない作業になってしまう可能性もあります。
media queriesの使用に関しては、画面サイズを判別してCSSを出し分けるため、新デバイ
スなど、対応するデバイスが増えるたびに画面サイズを考慮しなくてはいけない上、幾つか
の条件上ではmedia queriesだけでデバイス別にCSSを出し分けることが難しい状況になり
つつあります。
5
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 6. CSSによる読み分け実装
02
CSS SWITCH IMPLEMENTATION
CSSによる読
CSSによる読み分け実装
による
Useの
One Source Multi Useのメリット 【CSSの読み分けパターン】
One Source Multi Useを実践するためにCSSを読み分けする必要がありますが、実装する
ためには主に以下にあげる3つのパターンが考えられます。デバイスや環境、コンテンツの
特性を意識しながら、どの方法で実装するべきかを検討しましょう。
CSSの読み分けの種類
CSSの けの種類
読み分けの種類
Media Queries式 link要素 media要素 media属性・media属性機能拡張Media Queriesによる読
CSS3 JS PHP
み分け
メリット=JavaScriptに依存しない/デメリット=画面サイ
ズがバッティングする可能性有
JavaScript式 JavaScript userAgent振 navigator.userAgent振り分け/document.write出力
り分け出力
メリット=UAを判別して振り分けるため厳密/デメリット
=JavaScript環境に依存する
PHP式 PHP HTTP_USER_AGENT $_SERVIER[‘HTTP_USER_AGENT’]振り分け/printなど
振り分け出力 出力
CSS3のMedia Queries、JavaScript、PHPのいずれかを用いて、適切な
メリット=JavaScriptに依存せずUAで振分できる/デメリ CSSを出し分けること出来る。
ット=UA偽装された場合に判定できない
どの出し分け方式を用いるかはサイトの方針や環境によるところがある。
※デメリットはJavaScript振り分けでも同様
6
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 7. CSSによる読み分け実装
link要素 media要素
link要素 media要素
Media属性
Media属性
TIPS 制作に役立つヒント
CSSの読み分けを考える際の基本として、メディアタイプによる読み分けがあります。
左図のほかにも、projection(プロジェクタ)、braille(点字ブラウザ)、
「メディアタイプ」とは、ウェブページの出力先媒体(=メディア)を、いくつかの種類に分類し、
embossed(点字プリンタ)、speech(音声ブラウザ)などが定義されてい
スタイルシートを変更する機能のことで、W3Cが定めたWeb標準の仕様のことです。 る。
メディアタイプ名 特徴
screen 非ページ型のコンピュータ・スクリーンで表。
携帯デバイス(小画面、モノクロ、ビットマップ画像、帯域
handheld
幅に制限がある)で表示。
テレビ型デバイス(解像度、色数が低く、スクロール能力
TV
に制限がある)で表示。
print ページ形式の不透明な物質及び、印刷プレビュー・モー
ドで見る文書を表示。
7
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 8. CSSによる読み分け実装
link要素 media要素
link要素 media要素 メディア特性 判別基準
width ウィンドウサイズの幅
media属性機能拡張media queriesの
media属性機能拡張media queriesの指定方法
属性機能拡張
min-width 最小のウィンドウ幅
CSS3による読み分け方法として、Media Queriesによる読み分けがあります。 max-width 最大のウィンドウ幅
media queriesとは、画面サイズやデバイス幅、高さなどを基準に任意のCSSを読み分けで height ウィンドウの高さ
きるCSS3の機能です。PC、タブレット、スマートフォン端末を1つのHTMLソースでCSSを min-height 最小のウィンドウの高さ
読み分ける際に有効ですが、サイズ選定を慎重にする必要があります。 max-height 最大のウィンドウの高さ
device-width 画面解像度の幅
media queriesによる読み分け例
queriesによる
による読 min-device-width 最小の画面解像度の幅
max-device-width 最大の画面解像度の幅
media属性機能拡張media queriesの
media属性機能拡張media queriesの指定方法
属性機能拡張 device-height 画面解像度の高さ
min-device-height 再送の画面解像度の高さ
【読み分けをタブレット、スマートフォンにて実施した場合】
max-device-height 最大の画面解像度の高さ
・スマートフォン向け設定
論理演算子 用途
<link rel="stylesheet" type="text/css" href="./css/b.css" media="screen">
and AND:かつ(区切りとして使用)
, OR:または(区切りとして使用)
スマートフォン向けにはmedia queriesではない通常link要素を読み込ませます。
not NOT:~でない(前につけて使用)
・タブレット向け設定 only 特定のCSSのみ(前につけて使用)
<link rel=“stylesheet” type=“text/css” media=“screen and (min-device-width:768px) and
(orientation:portrait)” href="../css/tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:1024px) and Orientation 用途
(orientation:landscape)" href="../css/tablet.css">
portrait 縦長端末
Landscape 横長端末
スマートフォン向け設定を記述した後、上記のように「デバイスの横幅が768px且
つ縦長端末」もしくは「横幅1024px且つ横長端末」という設定を加えます。これに
より、768px縦長もしくは1024px横長以上の端末で閲覧した場合のみ、タブレット
向けのCSSが表示されるようになっています。
8
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 9. CSSによる読み分け実装
スマートフォン/タブレットの
スマートフォン/タブレットの画面解像度
windowサイズ比較表 ※windowサイズとはブラウザから情報バーを除いたサイズ
windowサイ
768×102
ズ 320×480 320×533 320×569 360×640 400×683 800×480 954×474 1280×768 800×1280
4
(横×縦)
768×102
解像度 320×480 480×800 480×854 540×960 600×1024 800×480 960×480 1280×768 800×1280
4
●GALAXY ●DELL
●LYNX 3D ●Xperia ●Optimus Pad L- MOTOROLA
●iPhone 3GS(3G) ●INFOBAR(A01) Tab Streak ●IS01 ●iPad
(SH-03C) (SO-01B) 06C XOOM(Tbi11M)
(SC-01C) (001DL)
●iPhone 4
●GALAXY S AQUOS PHONE SH- LYNX SH-
※解像度は例外で ●REGZA Phone T-01C ●iPad2
(SC-02B) 12C 10B
640×960
●Optimus chat ●HTC Desire HD
REGZA Phone IS04 AQUOS PHONE 006SH
(L-04C) (001HT)
●Libero AQUOS PHONE
●IS03 REGZA Phone IS11T
(003Z) IS11SH
HTC Aria ●GALAXY S II ●MEDIAS AQUOS PHONE
(S31HT) (SC-02C) (N-04C) IS12SH
Pocket WiFi S II G'zOne MEDIAS WP AQUOS PHONE f
(S41HW) (IS11CA) (N-06C) (SH-13C)
HTC Desire Xperia arc
(X06HTII) (SO-01C)
htc EVO WiMAX Xperia acro
(ISW11HT) (SO-02C)
SIRIUS α ●Xperia acro
(IS06) (IS11S)
Optimus bright
IS05
(L-07C)
Optimus bright
INFOBAR A01
(L-07C)
AQUOS PHONE THE
F-12C HYBRID
(007SH)
GALAPAGOS Sweety
003SH (003P)
GALAPAGOS
P-07C
005SH
S42HW
※端末やブラウザの仕様変化により最適な実装方法の見直しが適宜必要です。
9
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 10. CSSによる読み分け実装
userAgent振
JavaScript userAgent振り分け出力
navigator.userAgent振
navigator.userAgent振り分け/document.write出力
document.write出力 TIPS まとめ
JavaScriptによる読み分け方法として、User Agentを元にブラウザを判別してCSSを振り分 ■メリット
けるやり方があります。 端末とOSを明確に振分け、確実な処理を付与できる
User Agentの情報としてOS名を返したり、ブラウザ名を返したりするため、判別できる種類
■デメリット
も大雑把なものから、フィーチャーフォンのように機種名別に振り分けることも可能です。 javascriptオフ時非対応でユーザーの利用設定に依存する
※ただし、Java Scriptが動作する環境下に限ります。 userAgent文字列依存であり、予想外の仕様変更に対して運用が発
生する
【Java Scriptによる振り分け記載例】
var nUa=navigator.userAgent;
var nUalPh=nUa.indexOf(‘iPhone; CPU iPhone ’)!;//iPhone
var nUalPh=nUa.indexOf(‘iPhone; U; CPU iPhone’)!;//iPhone
var nUalPa=nUa.indexOf(‘iPad; CPU OS’)!;//iPad
var nUalPa=nUa.indexOf(‘iPad; U; CPU OS’)!;//iPad
var nUalPo=nUa.indexOf(‘iPod; CPU iPhone’)!;//iPod
var nUalPo=nUa.indexOf(‘iPod; U; CPU iPhone’)!;//iPod
var nUaAnd=nUa.indexOf(‘Linux; U; CPU Android’)!;//Android
if(nualPh||nUalPa||nualPo||nUaAnd||nUaBlb||nUaWmb){
document.write(‘<meta name=“format-detection” content=“telephone=no”>¥n’);
document.write(‘<meta name=“viewport” content=“initial-scale=1.0,maximum-
scale=1.0,user-scalable=yes”>¥n’);
document.write(‘<link rel=“stylesheet” type=“text/css” href=“[スマートフォンレイア
ウトCSS]” media=“screen”>¥n);
}
else{
document.write(‘<link rel=“stylesheet” type=“text/css” href=“[PCレイアウトCSS]”
media=“all”>¥n);
}
10
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 11. CSSによる読み分け実装
HTTP_USER_AGENT振
PHP HTTP_USER_AGENT振り分け出力
$_SERVIER[‘HTTP_USER_AGENT’
$_SERVIER[‘HTTP_USER_AGENT’]振り分け/printなど出力
printなど出力
など TIPS まとめ
PHPによる読み分け方法は、基本的にはJava Scriptと同様の動作をすることとなります。 ■メリット
ただし、Java ScriptのようにON/OFFがあるわけではないので、サーバー環境さえ整ってい サーバサイド処理でクライアントに負荷がかからない
端末とOSを明確に振分け確実な処理を付与できる
れば安定した動作が期待できます。
フィーチャーフォンでのキャリア/機種世代別の振り分けは主にこちらの方法がとられてい ■デメリット
ます。 サーバサイド要件のため、サーバ仕様に依存し、知識とサーバ管理
権限を要する。
HTTP_USER_AGENT文字列依存であり、予想外の仕様変更に対して
運用が発生する
【PHPによる振り分け記載例】
$nUa=$_SERVER[‘HTTP_USER_AGENT’];
if(ereg(‘iPhone; CPU iPhone ’,$nUa)||ereg(‘iPhone; U; CPU iPhone ’,$nUa)|| ereg(‘iPad; CPU OS ‘,$nUa)||
ereg(‘iPad; U; CPU OS ‘,$nUa)||ereg(iPod; CPU iPhone ‘,$nUa)ereg(iPod; U; CPU iPhone
‘,$nUa)||ereg(Linux; U; Android ‘,$nUa)){
print<<<EOD
<meta name=“format-detection” content=“telephone=no”>
<meta name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0,user-scalabe=yes”>
<link rel=“stylesheet” type=“text/css” href”[スマートフォンレイアウトCSS]” media=“screen”>¥n
EOD;
} else(
print<<<EOD
<link rel=“stylesheet” type=“text/css” href”[PCレイアウトCSS]” media=“all”>¥n
EOD;
}
11
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 12. レイアウトの考え方
03
LAYOUT
レイアウトの
レイアウトの考え方
情報ブロックの
情報ブロックの整理
ブロック 【ブロックの配列例1】
・One Source Multi Useを実施にあたり、情報をどのように整理するかが重要となります。
A
情報があつまったら、情報を整理して各デバイスに適した配置を考えることが必要です。
右図では、画面サイズの大きいデバイスと小さいデバイスでのコンテンツレイアウトの出し C E
分けのイメージ図になります。大きいデバイスで並べているレイアウトを小さい端末では上
からプライオリティ順に配列しています。 B
D F
A
B
C
D
E
F
PCサイトからスマートフォンなどの端末に最適化する際の配置として
は、上から下への情報ブロックを崩さぬように配置することが理想形
です。
12
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 13. レイアウトの考え方
情報ブロックの
情報ブロックの整理
ブロック 【ブロックの配列例2】
情報ブロックについては、大まかな並べ替えも可能です。また、Bのようにデバイスにより表
A
示・非表示を切り替えるレイアウトも可能です。ただし、並べ替えについてはデバイスごとの
設計に注意する必要があります。表示・非表示では、CSSでの切替になるため、HTML容量
は大きいままになります。
C E
情報ブロックの並べ替えはあまりにも極端なものだったりブロック単位では無い場合は、レ
B
イアウトが不可能な場合もあります。右図例でも示しているように、Bのコンテンツは画面の
小さいデバイスでは非表示にして、大きいデバイスでは表示させるということも可能です。
D F
A
D
B
C
E
F
コンテンツの並べ替えについては、慎重に設計しなければなりません。
表示・非表示については、HTML容量に注意しましょう。
13
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 14. プロジェクト進行フロー
04
PROJECT FLOW
プロジェクト進行フロー
プロジェクト進行フロー
進行
プロジェクトの
プロジェクトの進行
One Source Multi Useのプロジェクトを進行する場合、デバイス別に進めていたプロジェクト
進行フローでは、情報・デザインの統一と相互に補完しあえる構成を作成できなければ、プ
ロジェクトが崩壊してしまう可能性があります。
通常のプロジェクトでの進行例
PCサイト 要件定義
画面構成
デザイン
マークアップ
SP/FPサイト 要件定義 デバック
画面構成 納品
デザイン
マークアップ
デバック
納品
ディレクタ
主な稼動職能
デザイナ マークアップ デバッガー
14
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 15. プロジェクト進行フロー
プロジェクトの
プロジェクトの進行
One Source Multi Useのプロジェクトを進行する場合、統一した情報設計のために、全体
的な要件定義が必要となります。この要件定義のメインとなるテーマはデバイスをまた
いだ情報設計を意図しており、ディレクタはもちろんのこと、デザイナやマークアップエン
ジニアも積極的にプロジェクトに関わるように意識することが大切になってきます。
要件定義後は、ディレクタが音頭となり、各職種メンバーの作業で設計思想が反映され
ているかを随時チェックしながら進めていく必要があります。各メンバーは自作業だけで
はなく、プロジェクトを俯瞰しながら進行していくことが求められます。
One Source Multi Useプロジェクトでの進行例
PCサイト 画面構成 デザイン マークアップ デバック 納品
要件定義
(情報設計)
SP/FPサイト 画面構成 デザイン マークアップ デバック 納品
ディレクタ
主な稼動職能
デザイナ
マークアップ
デバッガー
15
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 16. デザイン移行バリエーション
05
DESIGN VARIATIONS
デザイン移行バリエーション
デザイン移行バリエーション
移行
TIPS デザイン移行バリエーション一覧
PCからスマートフォンへのデザイン移行バリエーション
PCからスマートフォンへのデザイン移行バリエーション
からスマートフォンへのデザイン移行 ① 幅詰、縮小、リサイズ
② 縦積み
③ inline-block積み
PCのデザインを基軸にスマートフォンサイトへのリデザインする場合、いくつかの移行パ ④ センタリング
ターンがあります。 ⑤ クリッカブルオブジェクト化
⑥ スマートフォンアイコン化
One Source Multi Useを用いる案件に限らずにデザイン移行する場合の参考事例をご紹介 ⑦ 分解
して行きます。 ⑧ 格納
⑨ 省略
⑩ Flash代替化
PCサイトデザインからスマートフォンサイトへのデザイン移行をする際
には、主に左記の要素に対しての最適化をすることで対応することが
できます。
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 17. デザイン移行バリエーション
幅詰、縮小、
① 幅詰、縮小、リサイズ
デザインを大きく変更せずサイズをスマートフォンサイズに最適化
PCサイト
移行
スマートフォンサイト
17
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 18. デザイン移行バリエーション
縦積み
② 縦積み
横構造を縦構造に変換する
PCサイト スマートフォンサイト
移行
18
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 22. デザイン移行バリエーション
スマートフォンアイコン化
⑥ スマートフォンアイコン化
iOSなどのアイコンデザインにより操作感とスマートフォンらしさの演出を踏襲する
PCサイト スマートフォンサイト
移行
22
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 26. デザイン移行バリエーション
Flash代替化
⑩ Flash代替化
iOSで表示できない(201106現在)Flashオブジェクトを代替画像化
26
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 27. 移行困難なデザインパターン
06
DIFFICULT DESIGN PATTERN
移行困難な
移行困難なデザインパターン
TIPS まとめ
デザイン移行の
デザイン移行の条件
移行 ① ソース記述順を大きく逸脱するレイアウト ・・・ ×
※ある程度であればpositionで位置換えすることは可能
PCサイトデザインからスマートフォンサイトをリデザインする際に、まれに実装が困難な ② inline-block成り行き積みで縦積み ・・・ ×
ケースもあります。実装困難なデザインについてのポイントは以下のようなものがあります。
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
- 29. 移行困難なデザインパターン
inline-block成 みで縦積
縦積み
② inline-block成り行き積みで縦積み
以下のPCレイアウトからスマートフォンBのレイアウト移行は対応できません
PCサイト
テキストリンクA テキストリンクB テキストリンクC テキストリンクD テキストリンクE テキストリンクF
スマートフォンサイト
A B
テキストリンクA テキストリンクB テキストリンクC テキストリンクA テキストリンクC テキストリンクE
テキストリンクD テキストリンクE テキストリンクF テキストリンクG テキストリンクB テキストリンクD
29
COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.