このページの本文へ

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

絶対見ておきたい有名企業のスマホサイトまとめ

2011年02月21日 10時00分更新

小橋川誠己/Web Professional編集部

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

メーカー(自動車・家電)


ch.日産

 日産自動車のスマートフォンサイト。車種カタログ、CMギャラリー、販売店検索など、PCサイトとほぼ同等のコンテンツがスマートフォン向けに最適化されている。トップページ以外はシンプルなデザインだが、リンク要素やボタンをかなり大きめにしており、タッチ操作でのストレスを感じない。


ホンダドリームサイト

 イラストを使ったトップページが印象的な「HONDA」のスマートフォンサイト。トップページはスマートフォン専用のオリジナルだが、一部コンテンツはケータイサイトを流用している。テキストベースなのでシンプルで見やすいデザイン。


ポルシェ

 ポルシェのスマートフォンサイト。トップページには折りたたみパネルを採用し、ページ遷移なしで車種の概要を確認できる。2011年2月現在、詳細ページはPCサイトへ移動するようになっている。


三菱自動車

 三菱自動車は2011年2月現在、トップページのみスマートフォン向けに最適化。メニューからコンテンツを選択するとPCサイトへ移動する。


パナソニック

 パナソニックのスマートフォンサイト。2011年2月現在、トップページとサブカテゴリトップのみスマートフォン向けに最適化している。


PC上でスマホサイトを見るには?

 ほとんどのスマートフォンサイトは、ユーザーエージェント文字列からスマートフォンのブラウザーを判別して専用サイト振り分けているので、PC上のブラウザーでは見られないことが多い。だが、Web制作の参考にするために、PC上でスマートフォンサイトを閲覧したい、といった場合もあるだろう。

開発メニューからユーザーエージェントを切り替えるとiPhoneになりすましてスマートフォンサイトを見られる。メニューバーに「開発」がない場合は「環境設定」→「詳細」を確認しよう

 そこで便利なのが、Safari(Windows版/Mac OS X版)にある「開発」モードだ。開発メニューからユーザーエージェントを「iPhone」に切り替えると、iPhoneになりすましてスマートフォンサイトを閲覧できる。iPhoneの標準ブラウザーはSafariがベースなので、レンダリング結果も比較的近い。正確な検証には使えないが、とりあえずサイトの雰囲気をつかみたい場合には十分だ。

 このほかにも、iPhoneやAndroidのエミュレーターを使ってスマートフォンサイトを閲覧する方法もある。エミュレーターのインストールや利用方法については、書籍iPhone+Android スマートフォンサイト制作入門(たにぐちまこと著、Web Professional Books)で詳しく解説されているので参考にしよう。

■Amazon.co.jpで購入
Web Professionalトップページバナー

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

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

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