Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 スマートフォン版Yahoo! JAPANトップでは、CSS3やCSSアニメーション、タッチセンサー、Geolocation APIなどを効果的に使用しています。今回はこれらの新技術を具体的な事例を挙げながら紹介しようと思います。

目次

はじめに

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

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

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

CSSグラデーション

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

サンプル1
.sample1 {
  background: -webkit-gradient(linear, left top, left bottom,
    from(#fff),
    to(#000)
  );
}
サンプル2
.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-1 サンプル1 実行結果
図2-2 サンプル2 実行結果
図2-2 サンプル2 実行結果

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

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

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

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

角丸の表現

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

サンプル(角丸の表現)
-webkit-border-radius: 10px;
図4 サンプル 実行結果
図4 サンプル 実行結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 藤木 裕介(ヤフー株式会社)(フジキ ユウスケ)

    ヤフー株式会社 R&D統括本部 制作本部 ウェブデベロップメント部 所属。 1984年生まれ、神奈川県横浜市出身。美術大学にて情報デザイン等を学び、2007年にヤフー株式会社デザイナー職の新卒採用にて入社。同社では、スマートフォン版Yahoo! JAPANトップのマークアップを担当。 H...

バックナンバー

連載:Yahoo! JAPANの制作チームによる、さまざまなWebサイト最適化手法

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5