このページの本文へ

日本語サイトの事例を一挙紹介(後編)

スマホサイトを作る前に見たい国内38社の実例

2011年02月28日 12時25分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

ポータル・Webサービス


Google

 登場当初からスマートフォン対応に非常に力を入れている「Google」。検索サービスをはじめ、ほとんどのサービスをスマートフォン向けに最適化して提供している。いずれもPC版と同様シンプルなデザインが多いが、ボタン類を大きく配置し、アプリ感覚で使えるサービスも多い。スマートフォンの位置情報を使って検索範囲を絞れる「プレイス」機能が特徴的だ。


Yahoo! JAPAN

 国内最大規模のポータルサイト「Yahoo! JAPAN」もスマートフォン対応に力を入れている。HTML5/CSS3を積極的に活用し、画像の使用頻度を減らしながら、リッチなデザインを実現している。ほとんどのサービスでスマートフォンサイトを用意しており、オークションやファイナンスではアプリ並みの機能を備える。


nanapi

 生活情報共有サイト「nanapi」のスマートフォンサイト。カラフルなアイコンのトップページは、PCサイトと同様、親しみやすい雰囲気。個別記事ページのヘッダーはiPhone風だが、背景などで「nanapiらしさ」を出している。


livedoor

 ポータルサイト「livedoor」のスマートフォンサイト。ニュースとブログの新着見出しをリストで並べた情報量の多いトップページだが、タブパネルを効果的に使ってうまく整理している。ヘッダーの大きなパンくずリストやスライド式のグローバルナビなど、ナビゲーションも使いやすい。


NAVER

 統合検索サイト「NAVER」のスマートフォンサイトは、コーポレートカラーのグリーンと黒の背景、大きな写真が目を惹く。話題のキーワードを並べた「トピックワード」は高頻度で更新され、いつ見てもフレッシュなイメージだ。ページ内のコンテンツを一度にすべて読み込まずに、一部をAjaxで読み込むことでユーザーのストレスを軽減。画面幅いっぱいの画像をさくさく見られる「画像検索」も気持ちがいい。


スマートフォンサイトに欠かせない、JavaScriptの活用

 PCに比べて画面領域が狭いスマートフォンサイトでは、ケータイサイトと同様、縦方向に多くの情報を並べていくことが多い。だが、縦長のページは見通しが悪く、ページ内の移動はストレスになる。

 そこで多くのスマートフォンサイトで使われているのが、タブパネルや折りたたみパネル、スライドパネルといったJavaScriptを活用したUIだ。Yahoo! JAPANやlivedoorのようなポータルサイトはもちろん、一般の企業でも導入しているサイトは多い。

書籍iPhone+Android スマートフォンサイト制作入門(たにぐちまこと著、Web Professional Books)では、こうしたスマートフォンサイトで定番のUIの作り方を解説している。いずれのUIもjQueryを使って手軽に作れる方法を解説しているので、プログラマーではないWeb制作者でも理解しやすく、応用もしやすい。サンプルコードの流用もOKなので実務でも活用できそうだ。

「スマートフォンサイト制作入門」では、定番のUIの作り方を図版とソースコードで詳しく解説している
■Amazon.co.jpで購入

■楽天ブックスで購入

【送料無料】iPhone+Androidスマ...

【送料無料】iPhone+Androidスマ...
価格:2,499円(税込、送料別)

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く