HTML5とCSS3を使ってスマートフォン向けサイトを構築
－ iPhone版Yahoo!JAPANトップの開発事例紹介

はじめに

　スマートフォン版Yahoo! JAPANトップでは、ユーザーへ高品質なユーザーエクスペリエンスを提供するために、対象端末をiOSとAndroid OSのスマートフォン端末に絞り、最新のブラウザ仕様に基づいたサイト構築を行っています。

• スマートフォン版Yahoo! JAPANトップ

図1　スマートフォン版Yahoo! JAPANトップ

　画像の使用を抑えるためCSS3や、ネイティブアプリケーションに近づけるためCSSアニメーションや、タッチセンサー、Geolocation APIなどを効果的に使用しています。今回はこれらの新技術を具体的な事例を挙げながら紹介しようと思います。

CSSグラデーション

　今まで画像を使わなければできなかった表現も、CSSだけで表現できます。白から黒への単純なグラデーションや、グラデーションの位置を細かく指定することによる複雑なグラデーションを表現することが可能です。

.sample1 {
  background: -webkit-gradient(linear, left top, left bottom,
    from(#fff),
    to(#000)
  );
}

.sample2 {
  background: -webkit-gradient(linear, left top, left bottom,
    from(#b9c3e4),
    color-stop(0.03, #b9c3e4), /* topから 3% の位置で #b9c3e4 */
    color-stop(0.03, #93a3d5), /* topから 3% の位置で #93a3d5*/
    color-stop(0.48, #5a77af), /* topから48% の位置で #5a77af*/
    color-stop(0.52, #3a57a0), /* topから52% の位置で #3a57a0*/
    to(#1e3a95)
  );
}

図2-1　サンプル1 実行結果

図2-2　サンプル2 実行結果

　なお、CSSグラデーションはiPhoneのiOS 2.x以下の端末で表示されないため、注意が必要です。そのため、もしiOS2.x以下へも対応させる場合は、background-colorでも併記し代用するか、User-AgentのOSバージョンに応じて画像のグラデーション版CSSに上書きをする必要があります。スマートフォン版Yahoo! JAPANトップでは後者を選択しています。

　グラデーションの設定値はデザイナーから受け取ったPhotoshopデータ上のグラデーション情報をそのまま利用できます。デザインを少ない工数で再現することができます。

図3　グラデーションエディタ

　CSSグラデーションを利用するもうひとつのメリットは、WebKitブラウザにおいて非常になめらかで高品質のグラデーションが得られるということです。2010年6月に発売されたiPhone 4は今までの4倍の解像度をもっているため、通常の画像を表示させるとテキストなどと比べてピクセルが荒く見えてしまいます。そこで、CSSグラデーションを使うと端末のグラフィックエンジンで処理されるため、解像度にあった高品質のグラデーションを得ることが可能です。

角丸の表現

　画像を使わずにブロック要素に角丸の効果を適用できます。top, bottom, left, rightの指定を組み合わせることで一部分のみ角丸にすることも可能です。スマートフォン版のYahoo! JAPANでは、ボタンやトグルスイッチなどiPhoneのデザインパーツをいくつか採用していますが、iPhone上で使われるデザインパーツのほとんどが丸みを帯びています。サイト上で表現されるボタンのほとんどはa要素にCSSを当て、作られています。

-webkit-border-radius: 10px;

図4　サンプル 実行結果