Lesson 04　スマートフォンサイトのページデザイン - Webデザイン表現&技法の新・スマートフォン編

Webデザイン 表現&技法の 新・スタンダード

Lesson04

スマートフォンサイトのページデザイン

制作・文

樋山 淳

スマートフォン向けのデザインを考える場合、その画像解像度と実際のサイズをきちんと把握する必要がある。ここではスマートフォン向けサイトをデザインする上で注意したいポイントを紹介する。

スマートフォン向けのサイトを構築する上で検討しなくてはならないのがHTML5＋CSS3である。

HTML5に関してはこれからのPC向けWebサイトの構築においても必須となる技術であり、PC、スマートフォンともにここ数年間、一番のトレンド技術になることは間違いないだろう。ここではHTML5＋CSS3でどのようなことがスマートフォンでできるか、どのような問題があるかを見ていこう。

スマートフォンのデザインを考える際に重要となるのは、画面サイズである。一般的に480×320pixel ～960×640pixelだが、実際の寸法としては80mm×50mm弱程度しかない。

つまり、非常に小さい画面の中にWebデザインを構築しなければならないため、おのずとPC向けのデザインでは通用しなくなるのが理解できるだろう。

最近では多くのニュースサイトがスマートフォンに対応している。PCサイトのレイアウトではマルチカラムが基本だが、これらのスマートフォン対応サイトはワンカラムで構成される場合が多い。また、一般に横幅320pixelを基準に作成し【1】、縦向き（ポートレート）、横向き（ランドスケープ）に対応できるようにリキッドデザイン（後述）になっている。

Lesson6で紹介する「iUI」などのライブラリを利用すれば、iPhoneアプリと同等のUIと操作感を与えることも可能だ。

また、当初からHTML5＋CSS3をいち早く取り入れており、スマートフォン市場では圧倒的なシェアを持つブラウザ用エンジンといえるだろう。


【1】一般的なスマートフォン対応サイトは横幅320pixelで作成されることが多い。端末によって異なるが、iPhoneで閲覧した場合のファーストビューは高さ356pixelとなる

スマートフォン向けのサイトでは表面的な解像度や表示サイズだけではなく、利用する技術などもPC向けとは違うことを理解する必要がある。そのひとつがイベント処理だ。PCの場合はマウスオーバー、マウスオンといったマウスイベントが存在し、実際にWebページで頻繁に利用されているが、スマートフォンにはマウス自体がない。

このようなマウスイベントを利用しているPCサイトをベースにスマートフォン向けのサイトを構築する場合は、公開前に十二分にテストをくり返すべきである。また、JavaやFlashは現状スマートフォンでは利用できないといっていいだろう。Flashに関してはAndroid Ver.2.2以降では対応しているが、iPhoneや2.1以下のAndroidでは未対応なので、利用は避けたほうが無難だ。

【2】の表にまとめた制約を念頭に置いてページ構成を考えよう。


【2】データ量の制約が多いが、そもそも3G回線でこれ以上のデータを読み込むこと自体が相当ストレスとなる

現在流通しているスマートフォンの大部分はタッチパネルを採用している。マウスがない代わりに【3】や【4】のようなタッチパネル独特のイベント処理が存在する。スマートフォンのWebページでもタッチイベント処理を活用したサイトが目立ちはじめてきた。

また、最近ではxui-js（http://xuijs.com/）などのスマートフォンに特化したJavaScriptのフレームワークも登場しているので、より一層扱いやすくなっている。

これらのイベントはJavaScriptを介して利用することができ、機能も多彩だが、元々はiPhone向けに整備されてきたものだ。iPhoneでは問題なくても、過去のAndroidの機種の中にはマルチタッチに対応していないものもある。汎用性を考えると、基本はマルチタッチよりもシングルタッチ、スワイプ程度のシンプルなイベント処理でページ構成を考えていくべきだろう。


【3】標準的なタッチイベントとその情報


【4】標準的なタッチイベントオブジェクトとその情報

通常のPC向けWebデザインには固定デザインとリキッドデザインという考え方がある。

しかし、スマートフォン向けのサイトでは固定デザインを採用することは滅多にない。

これは、スマートフォン自体が縦横自由にレイアウトを変えられるため、固定デザインではそのメリットが損なわれることが挙げられる。

つまり、スマートフォンのWebデザインに関してはリキッドデザインが標準であり、固定デザインは明確な意図がない限りは利用すべきではない。

また、容量の軽いページが好まれるものの、文字データのみで展開すると華やかさに欠けてしまうので、CSS3のグラデーション機能などを利用して装飾されることも多い。スマートフォンのデザイン例としてよく引き合いに出されるYahoo!Japanのページでは、縦横の変化に応じてCSS3を使ったリキッドデザインが用いられており、ユーザビリティがよく考えられている好例といえる【5】。


【5】



【5】

スマートフォン向けのデザインの代名詞となっているYahooのトップページのリキッドデザイン。横幅に合わせてデザインが伸縮する

先に取り上げたリキッドデザインにも関係することだが、基本的にスマートフォンのページでは文字情報を画像データとして利用しないほうがよい。

これはレイアウトが常に固定されているようなPCサイトではあまり関係ないが、縦横の表示が切り替わる可能性があるスマートフォンでは、縦表示では綺麗に表示されている画像も、横表示にした際に崩れてしまう可能性があるためだ。

もちろん、Viewportの設定とレイアウトデザインでカバーできる問題ではあるが、スマートフォンは3G回線下で利用されることが多いので、データ量をできるだけ少なくする必要がある。必要最低限の画像以外はできるだけ文字データとして扱うべきだろう。

その際、テキストに関しての処理は、CSS3から導入されているテキストシャドウなどを積極的に活用すれば手軽に装飾もほどこせる。

CSS3のグラデーションとテキストシャドウをうまく使えば、テキストをボタンのように見せるのも簡単だ【6】。


【6】まるで画像データのような文字処理であるが、上記のCSSを使えば簡単にできる

繰り返しになるが、スマートフォンがもっと有効に利用されるのは多くの場合外出時であり、基本は3G回線下だ。当然、屋内のWi-Fi下での利用よりも回線スピードが遅い。

そのため、レイアウトをシンプルにしたり、インターフェイスをわかりやすくするのは当たり前であり、ページ容量にも配慮する必要がある。

【7】に気をつけるべき項目を挙げてみたので注意してほしい。

特にユーザーがどのような環境下でWebを見るかという点は絶えず意識する必要がある。

たとえば、アフィリエイトなどの外部リンクを使うようなページ要素は本来はできるだけ利用をひかえるべきだ。また、凝ったデザインのページを作成しても、読み込みや動作に著しく時間がかかるようなら、ユーザーはリピーターとはならずに離脱していくだろう。

何かと制限の多いスマートフォンのサイトデザインではあるが、逆に考えればシンプルでつくりやすいともいえる【8】。


【7】


【8】シンプルなiPhone/Android対応「CNET Japan」サイト（http://m.japan.cnet.com/）