タブレット向けWebデザインのノウハウ40選　――　第3章　ワークフローを整理する

3-1 構成

#31マルチスクリーンの対応方法を検討する

タブレットを中心にマルチスクリーンWebのポイントを見てきましたが、ここで簡単に具体的な作り方を考えてみたいと思います。

まず、どのようにマルチスクリーンに対応させるのかを決めましょう。大きく分けて次の3つの方法になります。

1. 専用サイト
2. テンプレート（CMSを利用している場合）
3. レスポンシブWebデザイン

#32対応方法で気をつけること

①の専用サイトは制作・運用のコストがかかってしまいますが、きちんとリソースが確保できるのならば、マルチスクリーンのための設計に頭を悩ます必要は少なくなります。この場合でも、基本的にはどのデバイスでも同じ情報をユーザーが得られるようにするのがよいでしょう。また、別URLにはしないで、同じURLをサーバーサイドで振り分けるようにしましょう。

②のテンプレート対応は、使用しているCMSがどの程度対応できるかによりますが、完全にリニューアルするよりは早く済む可能性があります。個別に静的HTMLを出力するような場合は、デバイスごとに違うURLにならないよう注意が必要です。

リニューアルが可能であれば、③のレスポンシブWebデザインの導入が、同じURLでマルチスクリーン対応できるベストな方法でしょう。どのサイズでレイアウトを変更するか、CSSのメディアクエリーで決定するブレークポイントの設定と、各レイアウトごとのCSSの記述を事前に綿密に設計する必要があります。その際、SASSやLESSなどのCSS拡張言語が使用できれば混乱を軽減できます。

3-2 ワイヤーフレーム

#33PCサイトのベースを捨てる

もし今までPC用のサイトを作る際にワイヤーフレームのベースとなるようなものを使用していたら、それは一度忘れてしまいましょう。PCで当たり前のことがタッチデバイスではまったく使えないということがあり得るからです。

ヘッダーにはロゴとナビゲーションを配置しましょう。なるべく余計なスペースを取らずにシンプルにすると良いでしょう。

ナビゲーションをスライドパネルで表示させるのならば、ロゴをセンターに配置するといいでしょう。ロゴは左上になければならないというのは、PCサイトを前提にした古い考え方です。

ワシントン・ポスト紙のスマートフォン版サイトでは、文字サイズやシェアなどの機能メニューをユーザーが四隅の好きな位置に配置できるように工夫してあります。

#34レイアウトを考える

コンテンツ部分の構成を考えます。

2カラム、3カラム、リキッドレイアウト――コンテンツのレイアウトはサイトによってさまざまありますが、気をつけなければいけないのは、コンテンツの幅は固定できないということです。

iPadのポートレートモードであれば768ピクセルの横幅ですが、Nexus 7の場合は640ピクセルです。

ランドスケープにするとiPadの幅は1024ピクセルになる一方で、今度はNexus 7は1200ピクセルになります。

小さい画面で横スクロールが必要になってしまうような設計は論外ですが、最小幅に合わせておいて画面の大きいデバイスではセンターに寄せるというのも、バランスが悪くなってしまいます。

画面サイズに合わせて2～3パターンに配置が変わることも念頭に置いて、基本レイアウトを考えましょう。

#35メインビジュアルとコピーを決める

次に来るのは、メインビジュアルです。企業やサービスのイメージを伝える重要な要素です。

インパクトのある写真と思いを伝えられるコピーは用意できましたか？

ここで気を付けたいのは、伝えたいことを何でもここに詰め込まないこと。特にレスポンシブにイメージを提供するのであれば、小さい画面でもきちんとコピーが読めることが大事です。

ビジュアルの中で主題となる要素は全体の3分の1ぐらいに収まるようにして、残りのスペースの半分以下にコピーを配置してみます。

スマートフォンも含めてワンソースで対応するのであれば、このコピーはビジュアルの外に出る可能性もあります。

#36ブロックの積み方とフッターを検討する

プライバシーポリシーや著作権表記など詳細なページへのリンクはメニューの中に収めてしまってもいいかもしれません。

その次には、各カテゴリーの紹介ブロックを入れてみます。

スマートフォンの場合は幅が小さいので縦に積んだ方がスッキリしますが、タブレットでは画面に余裕があるので、それぞれの入り口はPCと同じように横並びに配置しても大丈夫でしょう。

3列か4列か？ 並べる数はサイトの構成によりますが、大事なのは「ユーザーがそこをタップしてアクションを起こしてもらえるか」ということです。「続きはこちら」というテキストリンクだけでは、そこをタップするとどんなコンテンツが出てくるのかがイメージできず、先に進んでもらう可能性が低くなってしまいます。

最後に、サイト共通のフッターにテキストリンクをたくさん入れて、不必要に重くしていませんか？ もしヘッダーを固定にしてメニューにいつでもアクセスできるようにしているのであれば、無意味に重いフッターは排除しましょう。

3-3 機能

#37リキッドレイアウトを基準にする

画面の向きやサイズによるレイアウト変更の有無に応じて、どのような仕組みにするか決定しましょう。基本的にはリキッドレイアウトとして、サイズにかかわらず幅100%が基準サイズとなるようにすると良いでしょう。

向きの違いでの変更は、「ポートレートモードでは3列」「ランドスケープモードでは5列」にするなどが考えられます。

向きやサイズの違いで、見え方が異なるのはOKですが、コンテンツや機能そのものが異なることは避けた方が良いでしょう。

ただし、ポートレートモードではメニューをスライドパネルで表示した場合、ランドスケープモードでは同じ位置に常時表示させた方が使い勝手がいい場合もあります。

>>第1章　タブレットの機能を知る

3-4 デザイン

#38気を付けるべき5つのこと

モバイルファーストで設計が出来上がれば、今まで見てきたポイントを押さえながら取り組めば、デザインの工程はPCのときとそう大差はないはずです。

気をつけるべき所をおさらいすると、以下のような点になります。

• キービジュアルとなる画像はRetina対応も考慮して大きく作る。
• テキストにはデバイスフォントを使い、画像と切り離す。
• ユーザーインターフェイスはタッチデバイスを考慮したサイズで作成する。
• レイアウトや各要素のサイズはピクセルで固定しないで％指定で構成する。
• リキッドレイアウトになることを前提に配置する。

>> 第2章　タブレットデザインを考える

3-5 コーディング

#39ブレークポイントに気をつける

基本設計が組まれてからのデザインが割とスムーズに行くのに比べて、コーディングは、また慎重に取り組まねばならない工程となります。

特にレスポンシブデザインでブレークポイントを設定する場合は、各ブロックの位置関係がめまぐるしく変わることもあるので、注意が必要です。

このとき気をつけるべき点は、「見た目から順にマークアップしない」ということです。

PC環境では人間の視線は上から下、左から右へと流れがちで、マークアップも自然とデザイン上の順番に従ってしまいがちです。しかし、そうすると文書構造が要素によってバラバラになってしまい、ブレークポイントに対処できなくなることがあるからです。

#40Web標準を心がける

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)();

マルチスクリーン対応、特にレスポンシブでは、HTMLとCSSの役割を明確に分けられないと、次第に収拾のつかない状態になる可能性があるため、今一度Web標準という原点に還って、HTMLはきちんとした文書構造でマークアップするよう心がける必要があります。

HTML5への移行という観点からも、この点はぜひ押さえておきたい点です

最後に ―― エリック・シュミット氏の言葉から

「はじめに」でも触れたように、PCが減少しスマートフォンやタブレットが増加する現在は、どれか1つのデバイスがメジャーだというのではなく、どれもが同じぐらい必要とされているという状況です。

ユーザーは1つのデバイスのみを使い続けるのではなく、出勤中やランチの間はスマートフォン、職場ではPC、家に帰ったらソファでタブレットというように、1日のうちでも状況に応じてデバイスを選んでいます。それは意図的に選んでいるというわけでもなく、そのとき手近にあるデバイスを利用しているに過ぎないのかもしれません。そうであれば尚更、どのデバイスからでもアクセスできるWebサイトは、どのデバイスを使用していても同じコンテンツを得られるようにしなければならないでしょう。

それでもまだ今の段階ではPCを中心にWebサイトを考えておけばいいと思う方もいるかもしれません。グーグルのエリック・シュミット会長が2014年を予想したインタビューで「モバイルはすでにPCに勝っている」と宣言している点を1つの材料に、今後のマルチスクリーン対応というものを検討してみてはいかがでしょうか？

モバイルが勝利を収めつつある（進行形）というのが、これまでの流れだった。

だが、今はもうモバイルが勝利を手に入れた（完了形）。

今は、PCよりもタブレットやスマートフォンのほうが売れている。人々は、この新しいアーキテクチャに急速なペースで移行している。

Bloomberg TVのインタビューより