Lesson 12 応用編(3) スマートフォン向けパーツデザインと実装 - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 12			応用編(3) スマートフォン向け パーツデザインと実装
	制作・文			山岸ひとみ（株式会社Gaji-Labo）

スマートフォンサイトは、さまざまな解像度のデバイスがあるのでパフォーマンスにも限界がある。画像はポイントを絞って使用し、できるだけCSS3で表現できるようにパーツを作ることで対応したい。

PNGは圧縮率が高いため、GIFなどを用いるよりもファイルサイズが小さくなる。複数色の透過処理を行うことができること、アルファチャンネルを使用して半透明画像が作れることなどもメリットだ。

PCでは古いバージョンのIEがPNGのアルファチャンネルに対応していないという問題があるが、スマートフォンサイトを作る際にはその点心配がない。

ファイルサイズを小さくできれば、表示速度の向上が期待できるので、PNGを積極的に使いたい【1】。


【1】画像はPNGで書き出そう

text-shadowを使えば、立体感などの効果を出してテキストを装飾できる。サ ンプルではページのタイトルやメニューのタイトル、アイコンの文字などに使用している【2】【3】。

美しく見せるだけでなく、読みやすくする効果を持たせることもできるが、あまり強調すると読みづらくなるので注意したい。


【2】サンプルファイル（index.html）



【3】画像を使わなくてもリッチな表現ができる

border-radius、gradient、boxshadowなどを組み合わせ、さまざまなボタンを作ることができる。たくさんの色数が必要で繊細な表現といえるグラデーションをデバイスが描画してくれるので、解像度や大きさが異なる画面で見ても画 像のように潰れたり、にじんだりしないというメリットがあるだろう。サンプルではCSSで作ったボタンに画像を乗せて、アイコンのように表現している。

リンクを設定する場合にはa 要素をdisplay: block;とし、ボタンもしくはアイコン全体がタップ領域になるように気を 付けよう【4】【5】。また、画面の幅いっぱいのボックスにbox-shadowを使用すると、横スクロールが発生する場合があるので注意したい。



【4】サンプルファイル（index.html）



【5】画像は効果の組み合わせ次第でさまざまな表現が可能なPNGで書き出そう

opacityを使用することによって、ボックスをまるごと透明化できる【6】。透過を使用できる場面はそう多くはないかもしれないが、別画像を用意しなくても変 化のバリエーションを増やせるため、使いどころによっては豊かな表現が可能になる【7】。

透過したパーツを重ねればパーツやモ ジュールを使いまわしたり減らしたりすることも可能なので、サイト全体のスリム化も期待できる。ぜひとも工夫して使いこなしていきたい表現だ。


【6】サンプルファイル（index.html）



【7】ボックスまるまる半透明にもできるし、もちろん個別に設定することもできる

iPhoneもAndroidもHTML5やCSS3で表現できることがたくさんあるが、デバイスやブラウザ間で差が出るのは防ぎようがない。iPhoneは常に最新版のOSに対応しているが、Androidでは端末によってOSやブラウザのバージョンに差がある【8】【9】。

フォントの違いや描画の特性などすでに認知されてものもあれば、まだ発見されていないバグのような挙動もあるかもしれない。

ひとくちにスマートフォンサイトと言っても、スマートフォンと呼ばれる機種全般にゆるやかに対応するのか、特定機種に特化してガッチリと最適化するのかではかなり違いが出る。どちらのケースなのかきちんと把握したうえで、適切なパーツと実装方法を用意しよう。


【8】サンプル用HTMLファイルをiPhoneで見たキャプチャ


【9】サンプル用HTMLファイルをAndroidで見たキャプチャ