ヨコハマとともに生きるクリエイティブ研究サイト
このebookは、今からタブレットも視野に入れたサイトを作るためにどのように考えればいいのか、その40ものノウハウをまとめたものです。2013年米国のサイバーマンデーでは、タブレットからの購入が増加しました。今後は日本でも増加することを踏まえ、コンバージョン、売上、顧客満足度をよりアップできるタブレット最適化の準備をしましょう！
画面の向きやサイズによるレイアウト変更の有無に応じて、どのような仕組みにするかを決定しましょう。基本的にはリキッドレイアウトとして、サイズにかかわらず幅100%が基準サイズとなるようにすると良いでしょう。
向きの違いでの変更は、「ポートレートモードでは3列」「ランドスケープモードでは5列」にするなどが考えられます。
向きやサイズの違いで見え方が異なることは問題ありません。一方、コンテンツや機能そのものが異なることは避けた方が良いでしょう。
ただし、ポートレートモードではメニューをスライドパネルで表示、ランドスケープモードでは同じ位置に常時表示させておくと使い勝手がいい場合もあります。
モバイルファーストで設計が出来上がり、今まで見てきたポイントを押さえながら取り組めば、デザインの工程はPCとそう大差はないはずです。
気をつけるべき所をおさらいすると、以下のような点になります。
- キービジュアルとなる画像はRetina対応も考慮して大きく作る。
- テキストにはデバイスフォントを使い、画像と切り離す。
- ユーザーインターフェイスはタッチデバイスを考慮したサイズで作成する。
- レイアウトや各要素のサイズはピクセルで固定しないで％指定で構成する。
- リキッドレイアウトになることを前提に配置する。
基本設計が組まれた後のデザイン制作は割とスムーズに行えるのに比べて、コーディングは、また慎重に取り組まねばならない工程となります。
特にレスポンシブWebデザインでブレークポイントを設定する場合は、各ブロックの位置関係がめまぐるしく変わることもあるので、注意が必要です。
このとき気をつけるべき点は、「見た目から順にマークアップしない」ということです。
PC環境では人間の視線は上から下、左から右へと流れがちで、マークアップも自然とデザイン上の順番に従ってしまいがちです。しかし、そうすると文書構造が要素によってバラバラになってしまい、ブレークポイントに対処できなくなることがあるからです。
2006年頃に「Web標準」という言葉が盛んに使われるようになり、そのおかげで今ではCSSコーディングは当たり前となっています。しかし実際には、文書構造を規定するHTMLにレイアウトやデザイン情報が沢山入り込んでいるサイトが多いというのが実状です。
正しい文書構造になっているかは、次のようなブックマークレットを用いて簡易的に確認することができます。
CSS解除
javascript:for%20(i=0;i%3Cdocument.styleSheets.length;i++)%20%7Bvoid(document.styleSheets.item(i).disabled=(document.styleSheets.item(i).disabled)?false:true);%7D
ALT表示
javascript:(function()%7Bfunction%20toArray%20(c)%7Bvar%20a,%20k;a=new%20Array;for%20(k=0;%20k%3Cc.length;%20++k)a%5Bk%5D=c%5Bk%5D;return%20a;%7Dvar%20images,%20img,%20altText;images=toArray(document.images);for%20(var%20i=0;%20i%3Cimages.length;%20++i)%7Bimg=images%5Bi%5D;altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,%20img)%7D%7D)();
マルチスクリーン対応、特にレスポンシブWebデザインでは、HTMLとCSSの役割を明確に分けなければ次第に収拾がつかない状態になる可能性があるため、今一度Web標準という原点に還って、HTMLはきちんとした文書構造でマークアップするよう心がける必要があります。
HTML5への移行という観点からも、この点はぜひ押さえておきたい点です。
「はじめに」(連載第1回)でも触れたように、PCが減少しスマホやタブレットが増加する現在は、どれか1つのデバイスがメジャーではなく、どれもが同じぐらい必要とされているという状況です。
ユーザーは1つのデバイスのみを使い続けるのではなく、出勤中やランチの間はスマホ、職場ではPC、家に帰ったらソファでタブレットというように、1日のうちでも状況に応じてデバイスを選んでいます。それは意図的に選んでいるというわけではなく、そのとき手近にあるデバイスを利用しているに過ぎないのかもしれません。そうであれば尚更、どのデバイスからでもアクセスできるWebサイトは、どのデバイスを使用していても同じコンテンツを得られるようにしなければならないでしょう。
それでも今の段階では、PCを中心にWebサイトを考えておけばいいと思う方もいるかもしれません。Googleのエリック・シュミット会長が2014年を予想したインタビューで「モバイルはすでにPCに勝っている」と宣言している点を1つの材料に、今後のマルチスクリーン対応というものを検討してみてはいかがでしょうか？
「モバイルが勝利を収めつつあるというのがこれまでの流れだった。だが、今はもうモバイルが勝利を手に入れた。今は、PCよりタブレットやスマートフォンの方が売れている。人々は、この新しいアーキテクチャに急速なペースで移行している」
（Bloomberg TVのインタビューより）
※なお、連載元のebook記事はカナダMobify社の「Tablet Web Design Best Practices」を基に加筆・再構成したものです。
＜無料＞「タブレット向けWebデザインのノウハウ40選」をいますぐ全て読む！
＜文／カナダ・Mobify社、翻訳・編集／ドーモ＞
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
