このページの本文へ

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

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

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

小橋川誠己/Web Professional編集部

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

メディア(テレビ)


TBS

 TBSは、トップページと一部番組ページをスマートフォンサイトとして用意している。トップページは情報量が少なく、ほとんどのコンテンツはPCサイトへのリンクにとどまっている。どちらというと専用アプリの提供に力を入れているようだ。


フジテレビ

 フジテレビのスマートフォンサイトは、明るく楽しい雰囲気で“フジテレビらしい”デザイン。ほとんどのコンテンツはPCサイトへのリンクだが、もっとも利用頻度が高そうな「番組表」は見やすく最適化されている。


日本テレビ

 日本テレビは、トップページと一部コンテンツをスマートフォン向けに最適化。トップページのファーストビューに放送中の番組を示す「NOW OA」を置いている。一般的なスマートフォンサイトよりもさらに大きめの文字が非常に見やすい。


テレビ朝日

 キー局としてもっともスマートフォン対応が進んでいるのがテレビ朝日だ。トップページに加えて、番組表や番組紹介など、ほとんどのページでスマートフォン用ページを用意している。ページ内リンクをスムーズにたどれるナビゲーションボタンや、折りたたみ式のグローバルメニューなど、ナビゲーション設計も良好。アクセスするたびにランダムに切り替わる背景もユニークだ。


NHKオンライン

 NHKは、2011年2月現在、トップページのみスマートフォンサイトを提供している。ファーストビューに写真を大きく使ったスライド式の「おすすめ番組」枠を設置。番組表は一度地域を設定すると以後その地域の情報が表示される。


見栄えとストレス軽減を両立するCSS3の活用

 スマートフォンのブラウザーはいわゆる「フルブラウザー」なのでPCサイト並みの表現ができるが、通信速度が遅い3G回線で利用されることを考えると、画像の使用はなるべく抑えたいところだ。

 そこで多くのスマートフォンサイトでよく使われているのが、「CSS3(Cascading Style Sheets, level 3)」による装飾だ。CSS3を使うと、従来は画像を使っていたグラデーションや角丸ボックス、ドロップシャドウをスタイルシートで設定できる。そこそこ見栄えのいい表現が、画像を使わずにできてしまうわけだ。

 書籍iPhone+Android スマートフォンサイト制作入門(たにぐちまこと著、Web Professional Books)では、CSS3の機能を活用したデザインテクニックや、デザインカンプをCSS3で再現する方法など、実践的なテクニックをサンプルで紹介している。CSS3を使ってスマートフォンサイトを作りたい制作者の参考になるだろう。

「スマートフォンサイト制作入門」では、CSS3を使った装飾の方法をフルカラーの見やすい誌面で解説している
■Amazon.co.jpで購入

■楽天ブックスで購入

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

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

Web Professionalトップページバナー

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

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

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