Clik here to view.
3-1 構成
#31マルチスクリーンの対応方法を検討する
Clik here to view.
タブレットを中心にマルチスクリーンWebのポイントを見てきましたが、ここで簡単に具体的な作り方を考えてみたいと思います。
まず、どのようにマルチスクリーンに対応させるのかを決めましょう。大きく分けて次の3つの方法になります。
- 専用サイト
- テンプレート（CMSを利用している場合）
- レスポンシブWebデザイン
#32対応方法で気をつけること
①の専用サイトは制作・運用のコストがかかってしまいますが、きちんとリソースが確保できるのならば、マルチスクリーンのための設計に頭を悩ます必要は少なくなります。この場合でも、基本的にはどのデバイスでも同じ情報をユーザーが得られるようにするのがよいでしょう。また、別URLにはしないで、同じURLをサーバーサイドで振り分けるようにしましょう。
②のテンプレート対応は、使用しているCMSがどの程度対応できるかによりますが、完全にリニューアルするよりは早く済む可能性があります。個別に静的HTMLを出力するような場合は、デバイスごとに違うURLにならないよう注意が必要です。
リニューアルが可能であれば、③のレスポンシブWebデザインの導入が、同じURLでマルチスクリーン対応できるベストな方法でしょう。どのサイズでレイアウトを変更するか、CSSのメディアクエリーで決定するブレークポイントの設定と、各レイアウトごとのCSSの記述を事前に綿密に設計する必要があります。その際、SASSやLESSなどのCSS拡張言語が使用できれば混乱を軽減できます。
3-2 ワイヤーフレーム
#33PCサイトのベースを捨てる
もし今までPC用のサイトを作る際にワイヤーフレームのベースとなるようなものを使用していたら、それは一度忘れてしまいましょう。PCで当たり前のことがタッチデバイスではまったく使えないということがあり得るからです。
ヘッダーにはロゴとナビゲーションを配置しましょう。なるべく余計なスペースを取らずにシンプルにすると良いでしょう。
ナビゲーションをスライドパネルで表示させるのならば、ロゴをセンターに配置するといいでしょう。ロゴは左上になければならないというのは、PCサイトを前提にした古い考え方です。
#34レイアウトを考える
Clik here to view.
コンテンツ部分の構成を考えます。
2カラム、3カラム、リキッドレイアウト――コンテンツのレイアウトはサイトによってさまざまありますが、気をつけなければいけないのは、コンテンツの幅は固定できないということです。
iPadのポートレートモードであれば768ピクセルの横幅ですが、Nexus 7の場合は640ピクセルです。
ランドスケープにするとiPadの幅は1024ピクセルになる一方で、今度はNexus 7は1200ピクセルになります。
小さい画面で横スクロールが必要になってしまうような設計は論外ですが、最小幅に合わせておいて画面の大きいデバイスではセンターに寄せるというのも、バランスが悪くなってしまいます。
画面サイズに合わせて2～3パターンに配置が変わることも念頭に置いて、基本レイアウトを考えましょう。
#35メインビジュアルとコピーを決める
次に来るのは、メインビジュアルです。企業やサービスのイメージを伝える重要な要素です。
インパクトのある写真と思いを伝えられるコピーは用意できましたか？
ここで気を付けたいのは、伝えたいことを何でもここに詰め込まないこと。特にレスポンシブにイメージを提供するのであれば、小さい画面でもきちんとコピーが読めることが大事です。
ビジュアルの中で主題となる要素は全体の3分の1ぐらいに収まるようにして、残りのスペースの半分以下にコピーを配置してみます。
スマートフォンも含めてワンソースで対応するのであれば、このコピーはビジュアルの外に出る可能性もあります。
#36ブロックの積み方とフッターを検討する
Clik here to view.
その次には、各カテゴリーの紹介ブロックを入れてみます。
スマートフォンの場合は幅が小さいので縦に積んだ方がスッキリしますが、タブレットでは画面に余裕があるので、それぞれの入り口はPCと同じように横並びに配置しても大丈夫でしょう。
3列か4列か？ 並べる数はサイトの構成によりますが、大事なのは「ユーザーがそこをタップしてアクションを起こしてもらえるか」ということです。「続きはこちら」というテキストリンクだけでは、そこをタップするとどんなコンテンツが出てくるのかがイメージできず、先に進んでもらう可能性が低くなってしまいます。
最後に、サイト共通のフッターにテキストリンクをたくさん入れて、不必要に重くしていませんか？ もしヘッダーを固定にしてメニューにいつでもアクセスできるようにしているのであれば、無意味に重いフッターは排除しましょう。
3-3 機能
#37リキッドレイアウトを基準にする
画面の向きやサイズによるレイアウト変更の有無に応じて、どのような仕組みにするか決定しましょう。基本的にはリキッドレイアウトとして、サイズにかかわらず幅100%が基準サイズとなるようにすると良いでしょう。
向きの違いでの変更は、「ポートレートモードでは3列」「ランドスケープモードでは5列」にするなどが考えられます。
向きやサイズの違いで、見え方が異なるのはOKですが、コンテンツや機能そのものが異なることは避けた方が良いでしょう。
ただし、ポートレートモードではメニューをスライドパネルで表示した場合、ランドスケープモードでは同じ位置に常時表示させた方が使い勝手がいい場合もあります。
3-4 デザイン
#38気を付けるべき5つのこと
モバイルファーストで設計が出来上がれば、今まで見てきたポイントを押さえながら取り組めば、デザインの工程はPCのときとそう大差はないはずです。
気をつけるべき所をおさらいすると、以下のような点になります。
- キービジュアルとなる画像はRetina対応も考慮して大きく作る。
- テキストにはデバイスフォントを使い、画像と切り離す。
- ユーザーインターフェイスはタッチデバイスを考慮したサイズで作成する。
- レイアウトや各要素のサイズはピクセルで固定しないで％指定で構成する。
- リキッドレイアウトになることを前提に配置する。
3-5 コーディング
#39ブレークポイントに気をつける
Clik here to view.
基本設計が組まれてからのデザインが割とスムーズに行くのに比べて、コーディングは、また慎重に取り組まねばならない工程となります。
特にレスポンシブデザインでブレークポイントを設定する場合は、各ブロックの位置関係がめまぐるしく変わることもあるので、注意が必要です。
このとき気をつけるべき点は、「見た目から順にマークアップしない」ということです。
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のインタビューより
この記事の元となる資料を作った株式会社ドーモでは、Web担当者さん向けのEbookをほかにも提供しています。興味をもたれた方は、こちらもチェックしてみてください。
マルチスクリーン時代にむけた
タブレット向けWeb構築のノウハウ40選
この記事は、企業Webサイトのタブレット対応における戦略および制作対応のノウハウをまとめた資料として、モビファイ社の「Tablet Web Design Best Practices」をもとに、日本語に翻訳し、日本におけるデザインベースの違いを踏まえて株式会社ドーモの大賀匠竜が加筆・修正し再構成したものです。
オリジナル：
Tablet Web Design Best Practices:
30 Ways to Create Amazing Web Experiences on Tablets
(by Mobify)
- オリジナル原稿： モビファイ
- 日本版原稿： 大賀匠竜（ドーモ 技術担当責任 兼 デザイナー）
- 監修・編集： 占部雅一（ドーモ 代表取締役）
モビファイは、世界各国でモバイルサイト最適化サービスを提供するカナダ・バンクーバーを拠点とする会社です。このプラットフォームは、米グーグルにもマルチスクリーンベンダーとして推奨されたもので、安定かつ高いパフォーマンスが定評で、日本でも60サイトのマルチデバイス対応を裏側から支えています（2013年12月現在）。
- 内容カテゴリ：サイト企画／制作／デザイン
- コーナー：タブレット向けWebデザインのノウハウ40選
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：タブレット向けWebデザインのノウハウ40選 ―― 第3章 ワークフローを整理する [タブレット向けWebデザインのノウハウ40選] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.