ワンソースマルチユース

One Source Multi Use ワンソースマルチユース
GUIDELINE
ガイドライン

2011.10.13 マルチデバイスLab.

COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.

更新履歴

日付バージョン更新内容変更者

2011/09/01 ver1.0 新規作成丸居久仁男

2011/10/13 ver1.1 P10,P11 iOS5対応UA反映丸居久仁男

2

目次

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

はじめに

00
INTRODUCTION

はじめに

Useとは html文書などをmedia queriesを用いてCSSを振り分けることができる。
One Source Multi Useとは

One Source Multi Useとは、１つのドキュメントを、仕様や画面サイズの異なる複数のデバイ
スに対して最適化して表示させるための考え方です。
広義としては、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


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


02
CSS SWITCH IMPLEMENTATION

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


link要素 media要素

Media属性
Media属性
TIPS 制作に役立つヒント

CSSの読み分けを考える際の基本として、メディアタイプによる読み分けがあります。
左図のほかにも、projection(プロジェクタ)、braille(点字ブラウザ)、
「メディアタイプ」とは、ウェブページの出力先媒体（＝メディア）を、いくつかの種類に分類し、
embossed(点字プリンタ)、speech(音声ブラウザ)などが定義されてい
スタイルシートを変更する機能のことで、W3Cが定めたWeb標準の仕様のことです。る。

メディアタイプ名特徴

screen 非ページ型のコンピュータ・スクリーンで表。

携帯デバイス（小画面、モノクロ、ビットマップ画像、帯域
handheld
幅に制限がある）で表示。

テレビ型デバイス（解像度、色数が低く、スクロール能力
TV
に制限がある）で表示。

print ページ形式の不透明な物質及び、印刷プレビュー・モー
ドで見る文書を表示。

7


link要素 media要素メディア特性判別基準

width ウィンドウサイズの幅
media属性機能拡張media queriesの
media属性機能拡張media queriesの指定方法
属性機能拡張
min-width 最小のウィンドウ幅

CSS3による読み分け方法として、Media Queriesによる読み分けがあります。 max-width 最大のウィンドウ幅

media queriesとは、画面サイズやデバイス幅、高さなどを基準に任意のCSSを読み分けで height ウィンドウの高さ
きるCSS3の機能です。PC、タブレット、スマートフォン端末を１つのＨＴＭＬソースでＣＳＳを 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


スマートフォン/タブレットの
スマートフォン/タブレットの画面解像度

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 ●iＰad
(SH-03C) (SO-01B) 06C XOOM（Tbi11M）
(SC-01C) (001DL)

●iPhone 4
●GALAXY S AQUOS PHONE SH- LYNX SH-
※解像度は例外で ●REGZA Phone T-01C ●iＰad2
(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


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


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

レイアウトの考え方

03
LAYOUT

レイアウトの

情報ブロックの
情報ブロックの整理
ブロック【ブロックの配列例１】

・One Source Multi Useを実施にあたり、情報をどのように整理するかが重要となります。
A
情報があつまったら、情報を整理して各デバイスに適した配置を考えることが必要です。

右図では、画面サイズの大きいデバイスと小さいデバイスでのコンテンツレイアウトの出し C E
分けのイメージ図になります。大きいデバイスで並べているレイアウトを小さい端末では上
からプライオリティ順に配列しています。 B

D F

A

B

C

D

E

F

PCサイトからスマートフォンなどの端末に最適化する際の配置として
は、上から下への情報ブロックを崩さぬように配置することが理想形
です。

12


情報ブロックの
情報ブロックの整理
ブロック【ブロックの配列例２】

情報ブロックについては、大まかな並べ替えも可能です。また、Bのようにデバイスにより表
A
示・非表示を切り替えるレイアウトも可能です。ただし、並べ替えについてはデバイスごとの
設計に注意する必要があります。表示・非表示では、CSSでの切替になるため、HTML容量
は大きいままになります。
C E

情報ブロックの並べ替えはあまりにも極端なものだったりブロック単位では無い場合は、レ
B
イアウトが不可能な場合もあります。右図例でも示しているように、Bのコンテンツは画面の
小さいデバイスでは非表示にして、大きいデバイスでは表示させるということも可能です。
D F

A

D
B
C

E

F

コンテンツの並べ替えについては、慎重に設計しなければなりません。
表示・非表示については、HTML容量に注意しましょう。

13


04
PROJECT FLOW

進行

プロジェクトの
プロジェクトの進行

One Source Multi Useのプロジェクトを進行する場合、デバイス別に進めていたプロジェクト
進行フローでは、情報・デザインの統一と相互に補完しあえる構成を作成できなければ、プ
ロジェクトが崩壊してしまう可能性があります。

通常のプロジェクトでの進行例

PCサイト要件定義

画面構成

デザイン

マークアップ

SP/FPサイト要件定義デバック

画面構成納品

デザイン

マークアップ

デバック

納品

ディレクタ
主な稼動職能

デザイナマークアップデバッガー

14


プロジェクトの
プロジェクトの進行

One Source Multi Useのプロジェクトを進行する場合、統一した情報設計のために、全体
的な要件定義が必要となります。この要件定義のメインとなるテーマはデバイスをまた
いだ情報設計を意図しており、ディレクタはもちろんのこと、デザイナやマークアップエン
ジニアも積極的にプロジェクトに関わるように意識することが大切になってきます。
要件定義後は、ディレクタが音頭となり、各職種メンバーの作業で設計思想が反映され
ているかを随時チェックしながら進めていく必要があります。各メンバーは自作業だけで
はなく、プロジェクトを俯瞰しながら進行していくことが求められます。

One Source Multi Useプロジェクトでの進行例

PCサイト画面構成デザインマークアップデバック納品
要件定義
（情報設計）
SP/FPサイト画面構成デザインマークアップデバック納品

ディレクタ
主な稼動職能

デザイナ

マークアップ

デバッガー

15


05
DESIGN VARIATIONS

移行
TIPS デザイン移行バリエーション一覧

PCからスマートフォンへのデザイン移行バリエーション
PCからスマートフォンへのデザイン移行バリエーション
からスマートフォンへのデザイン移行 ① 幅詰、縮小、リサイズ
② 縦積み
③ inline-block積み
PCのデザインを基軸にスマートフォンサイトへのリデザインする場合、いくつかの移行パ ④ センタリング
ターンがあります。 ⑤ クリッカブルオブジェクト化
⑥ スマートフォンアイコン化
One Source Multi Useを用いる案件に限らずにデザイン移行する場合の参考事例をご紹介 ⑦ 分解
して行きます。 ⑧ 格納
⑨ 省略
⑩ Flash代替化

PCサイトデザインからスマートフォンサイトへのデザイン移行をする際
には、主に左記の要素に対しての最適化をすることで対応することが
できます。



幅詰、縮小、
① 幅詰、縮小、リサイズ

デザインを大きく変更せずサイズをスマートフォンサイズに最適化

PCサイト

移行

スマートフォンサイト

17


縦積み
② 縦積み

横構造を縦構造に変換する

PCサイトスマートフォンサイト

移行

18


inline-block積
③ inline-block積み

横構造を横“成り行き”構造に置き換える

PCサイト

移行


19


④ センタリング

縦積みに付随してサムネイル画像などはセンターレイアウトする


移行

20


⑤クリッカブルオブジェクト化
クリッカブルオブジェクト化

スマートフォン独自の操作性や“スマートフォンらしさ”を加味し機能をリデザインする。ブ
ロックのクリッカブル化もその一つ。


移行

PCではテキストリンクの場合も．．．エリア全体をクリック可能にする

21


スマートフォンアイコン化
⑥ スマートフォンアイコン化

iOSなどのアイコンデザインにより操作感とスマートフォンらしさの演出を踏襲する


移行

22


⑦ 分解

table要素の表組みは、分解することで視認性が向上する場合がある

PCサイト

移行


23


⑧ 格納

非表示化により初期表示の省スペース化を図る


移行

開閉式に

24


⑨ 省略

導線を損なわない範囲であれば、思い切ってリンク機能を省略することで、ナビゲーション
が整理される場合もある

PCサイト

移行

省略

25


Flash代替化
⑩ Flash代替化

iOSで表示できない（201106現在）Flashオブジェクトを代替画像化

26

移行困難なデザインパターン

06
DIFFICULT DESIGN PATTERN

移行困難な
TIPS まとめ

デザイン移行の
デザイン移行の条件
移行 ① ソース記述順を大きく逸脱するレイアウト・・・ ×
※ある程度であればpositionで位置換えすることは可能
PCサイトデザインからスマートフォンサイトをリデザインする際に、まれに実装が困難な ② inline-block成り行き積みで縦積み・・・ ×
ケースもあります。実装困難なデザインについてのポイントは以下のようなものがあります。



①ソース記述順を大きく逸脱するレイアウト
ソース記述順をきく逸脱するレイアウト
記述順逸脱する

以下のPCレイアウトからスマートフォンCのレイアウト移行はお勧めしません。

PCサイト
C
A

D
B


A B C
A A D

B C
C

C B
B

D D A

28


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

ワンソースマルチユース

Recomendados

Recomendados

Más contenido relacionado

Similar a ワンソースマルチユース

Similar a ワンソースマルチユース (20)

ワンソースマルチユース