MD-Blog_Web Creative

こんにちわ！
最近猫が我が家にやって来まして、下僕としての日々をすごしているRSKです。

今回はマルチデバイス時代におけるコーディングを取り上げます。
ブラウジング環境の多様化...、それはマークアップエンジニアとしては日々悩ましいトピックです。変遷するスピードが速すぎる！というわけで、今回は改めてその状況をまとめつつ、傾向と対策を練っていきたいと思います。

ターゲットはPC？ タブレット？ スマートフォン？ はたまたガラケー？

ノートPCを超えるタブレット、アンドロイドがシェア67％

上のリンクはノートPCだけが対象ですが、近いうちにPCよりタブレット・スマートフォンのシェアが上回るとも言われています。
一人一台と言われた携帯電話（ガラケー・フューチャーフォン）が、スマートフォンに移り変わろうとしているんだから不思議ではありません。

今まではPCでの閲覧を対象にオーサリングすることが多かったのですが、最近はタブレット・スマートフォン用に最適化したページを作成する案件も増えてきました。
PCとタブレット・スマートフォンの最大の違いは、画面のサイズ・操作方法の違いが一番大きいかと思います。
（しかし、ブラウザの差異がなくなってきたと思ったら、今度は画面サイズ・閲覧環境が多様化するとは...。）

PCとタブレット・スマートフォンの違い

PCは画面のサイズ（解像度）がどんどん大きくなり、デスクトップPCではフルHD（1920 .A NW1080）より大きいWQHD（2560x1440）なんていうサイズもあったりします。

一方、タブレット・スマートフォンは登場時こそ480x320（iPhone）というサイズでしたが、1136x640（iPhone5）まで大きくなりました。
しかし、解像度が大きくなったとはいえ、PCモニタよりは画面が小さいため表示できる情報量に違いがあります。

解像度

Retinaディスプレイを採用したiPhoneは、それ以前と比べると解像度が縦横ともに2倍になっています（ppiでいうと、163から326へ増加）。この比率をデバイスピクセル比という。

Androidはこのデバイスピクセル比は1やら1.5やら2など、マチマチです。
画像の容量を切り詰めないのであれば２を基準にしておくと良いでしょう。
（Androidは、最近のだと319ppiや342ppiのモデルが多いです。）
iOSはppiが大きくなっても、UIの文字サイズなどはそのまま変わりませんが、Androidはそういう設計になってないらしくUIも大きくなってしまうのです。
なので、iPhoneと比べAndroidは画面サイズも大きくなっているのです。

もう一つの大きな違いである操作方法は、PCはマウス、タブレット・スマートフォンは指が主流です。
指で操作するので、ボタンやリンクは押しやすいように大きめにしないといけません。

ただでさえ限られた画面スペースに、大きめのボタンを用意しないといけないため、デザインにも影響が出ます。 マウスと違い「タッチ ＝ クリック」なため、マウスオーバーアニメーション（hover）でリンクやボタンだということをユーザーに直感的に伝えることができません。

PCとタブレット・スマートフォン向けページ制作の方法4パターン

実際、案件でオーサリングするにあたっては以下の6パターンがあると思います。

	PC	タブレット	スマートフォン	備考	コスト
1	A	A(PC版を表示)		1つのHTML・CSS・JS	1
2	A	B		各1つずつのHTML・CSS・JS	3
3				1つのHTML、CSS・JS（ファイル内で条件分岐）	4
4	A	B	C	各1つずつのHTML・CSS・JS	5
5				1つのHTML、CSS・JS（ファイル内で条件分岐）	6
6	A（スマートフォン寄りのデザイン）			1つのHTML・CSS・JS	2

【PCに最適化】：工数小
[1]は、タブレット・スマートフォンではPC向けのページそのまま表示します。1つのHTML・CSS・JS。

【PC/スマートフォンに対応】：工数大
[2]は、PCとタブレット・スマートフォンでそれぞれに合わせた表示をする。2パターンのデザイン。
[4]は、PC、タブレット、スマートフォンと3パターンのデザインにする場合。 共通する点は、各端末用にHTML・CSS・JSを別ファイルにしているところです。端末を判別して読み込むファイル自体を変えてしまいます。 HTMLが各端末用に用意しているので、作業量は増えますが柔軟なデザインが可能になります。

[3]は、[2]と同じく2パターンのデザイン。
[5]も、[4]と同じく3パターンのデザイン。
こちらの共通する点は、HTMLはひとつでCSS・JS（ファイル内で条件分岐など）を分けるところです。
HTMLは同じなので上記に比べて工数が単純に半分になります。

【スマートフォンに最適化】
[6]どの端末で見てもほぼ同じ表示をする、スマートフォン寄りのデザイン（1つのHTML・CSS・JS） フォントを大きく、全画面表示などそれっぽいデザインが最近流行りのようです。

特にスマートフォン用に対策をしていない、スマートフォンでとりあえず情報が見れればいいというサイトは1番にあたります。

2～5はそれぞれ個別に最適化していくので、デザインにもよりますが純粋に工数は増えます。しかし、ユーザにとっては見やすくなる・操作しやすくなるのでできれば対応したいところ。

それぞれメリット・デメリットがあるので、案件の予算・サイトのターゲットなどによって適切な方法を選ぶといいと思います。

すべてのプラットフォームで共通。リキッドレイアウト。

今回は、端末・環境を選ばないということで（6）の「柔軟な表示」を目指してオーサリングしてみることにします。
一般的にリキッドレイアウトとか呼ばれています。

ポイントとしては、各種サイズ（widthやheightなど）を%で指定する点です。
ブラウザの表示サイズが変わっても、指定した割合を保ちつつ柔軟な表示が可能です。

ターゲットブラウザをIE8以上にすれば、ボックスモデルのプロパティ「box-sizing」も使えますし無駄にタグで囲ったりする必要がありません。
（ある程度レガシーブラウザを必要最低限の対応にすることにより、表現の自由度が増します。）

例として、MONSTER DIVEでWEBショップを作るなら？をテーマにソースを書いてみました。（架空のものです）

<div class="panels">
 <article class="panel pFront">
  <div class="panelIn">
   <div class="backPanel">
    <h1 class="pName">作品名作品名作品名作品名作品名作品名</h1>
    <p class="pPrice">4,980<span>円</span></p>
    <p class="cartIn"><a href="aaaaa">カートに入れる</a></p>
   </div>
   <div class="frontPanel"><img src="share/img/img_01.jpg" width="204" height="204" alt=""></div>
  </div>
 <!-- //panel --></article>
</div>

.panel {
position:relative;
display:inline-block;
width:204px;
height:204px;
margin:2.5rem; 
overflow:hidden;
cursor:pointer;
-webkit-perspective:1000;
-moz-perspective:1000;
perspective:1000;
}
.panelIn {
-webkit-transform-style: preserve-3d ;
-webkit-transition: 0.5s;
-mox-transform-style: preserve-3d ;
-moz-transition: 0.5s;
-webkit-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.3), 1px 1px 0 0 rgba(000,000,000,0.4);
-moz-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.3), 1px 1px 0 0 rgba(000,000,000,0.4);
box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.3), 1px 1px 0 0 rgba(000,000,000,0.4);
}
.panelIn:hover {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.backPanel,
.frontPanel {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.backPanel {
position:absolute;
top:0;
left:0;
z-index: 10;
height:204px;
width:204px;
padding:3rem 1rem 3rem;
background:#000;
color:#fff;
text-align:left;
overflow:hidden;
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.frontPanel {
position:absolute;
top:0;
left:0;
z-index:10;
height:204px;
width:204px;
overflow:hidden;
}
.frontPanel img {
width:100%;
height:auto;
}
.panel:hover .frontPanel {
z-index:0;
}

商品の数だけ「.panel」の部分が増やします。表示はブラウザの幅に対応して1行の個数が1～5の間で増減します。
PC表示時はマウスオーバーアクションで、タブレット・スマートフォンではタップアクションにて「.frontPanel」と「.backPanel」がくるっと入れ替わります。

まとめ

パターン（1）以外のケースでは、端末によって画面サイズが違うため表示サイズが可変する点を考慮してデザインすることが求められます。
（閲覧環境はPCは横長、タブレット・スマートフォンは縦長が標準的でしょう）

デザインをクライアントに提案する際には、イメージがつきやすいようにできればサイズ違いのパターン作成すると、あとで「あれ、考えていたものと違う！」といった問題が起きにくいでしょう。

CSSに関しても、タブレット・スマートフォンは"IEという呪縛"から解き放たれたので、PCではちょっと使うのを躊躇われるようなプロパティを使いやすいです。
特にCSSアニメーションなどがそうですね。

PCに比べてCPUも劣るので、JSでやっていた処理をCSSに任せると、動作が軽く感じるようです。

以上、ひとまずは2013年度版です。果たして1年後にはどのような環境が標準となっていることやら...。また定期的にエントリしていきたいと思います。