Tablet タブレット

 
タブレットデザイン・UI

【連載】タブレット向けWebデザインのノウハウ40選(6)

ebookシリーズより「タブレット向けWebデザインのノウハウ40選」連載中!(第6回/全6回)

lab40

このebookは、今からタブレットも視野に入れたサイトを作るためにどのように考えればいいのか、その40ものノウハウをまとめたものです。2013年米国のサイバーマンデーでは、タブレットからの購入が増加しました。今後は日本でも増加することを踏まえ、コンバージョン、売上、顧客満足度をよりアップできるタブレット最適化の準備をしましょう!

【第3章】ワークフローを整理する

3-3 機能

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

タブレット37

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

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

向きやサイズの違いで見え方が異なることは問題ありません。一方、コンテンツや機能そのものが異なることは避けた方が良いでしょう。

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

 

3-4 デザイン

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

タブレット38

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

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

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

 

3-5 コーディング

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

タブレット39

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

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

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

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

[40]Web標準を心がける

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選」をいますぐ全て読む!

★連載・第1回はこちら★

★連載・第2回はこちら★

★連載・第3回はこちら★

★連載・第4回はこちら★

★連載・第5回はこちら★

<文/カナダ・Mobify社、翻訳・編集/ドーモ>

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事