実践！iPhone＆Androidサイト制作ガイド ― 第1回

スマートフォン対応サイトの作り方、教えます

2010年07月28日 10時00分更新

文● たにぐちまこと／H2O Space.

「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部）

　iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。

　PCとの連携、PDA（Personal Digital Assistance）機能の充実、アプリによる機能拡張などのさまざまな特徴を持つスマートフォンですが、Web制作者として注目したいのはやはり「Web閲覧端末」としての存在です。従来の携帯ともPCとも違うスマートフォンの普及が進むにつれて、PC向けのWebサイトであってもスマートフォンからどう見えるか少なくとも意識する機会は増えるでしょうし、スマートフォンをターゲットにしたWebサイトを制作する機会は増えていくでしょう。

　この連載では、スマートフォンの中でも主流になりつつあるiPhoneとAndroidにフォーカスしたWebサイト制作の基礎知識とテクニックを紹介します。まずはスマートフォン対応サイトの制作にはどのようなアプローチがあるのか、どのような知識が必要なのか、ざっくり確認しましょう。

こんなにあるスマートフォン向けサイト

　スマートフォンのブラウザーはいわゆる「フルブラウザー」ですから、多くの場合、PC向けのWebサイトをほぼそのまま閲覧できます。しかし、画面解像度や通信回線の速度などの制限、タッチパネル操作などの特性から、PC向けのサイトが必ずしも快適に閲覧できるとは限りません。そこで、大手サイトを中心に、スマートフォン向けにレイアウトを工夫し、機能やコンテンツを絞り込んで提供する「スマートフォン対応」のサイトが増えています。

　いくつか代表的な例を紹介しますので、スマートフォンをお持ちの方はぜひ実際の端末で確認してみましょう。

■検索／ポータルサイト

Google（http://google.com/）
Yahoo! JAPAN（http://yahoo.co.jp/）
NAVER（http://naver.jp/）

　Googleは、検索サービスはもちろん、GmailやGoogleカレンダーなど、ほぼすべてのサービスがスマートフォンに対応しています。iPhoneとAndroidでアクセスすると、スマートフォン向けに最適化されたページが表示されます。

	グーグルのiPhoneサイト。トップページは検索窓だけのシンプルな画面

　Yahoo! JAPANの場合は、トップページとオークションや地図などの一部のサービスのみスマートフォン向けページを提供しています（対応ページ以外はPC向けページが表示される）。「NAVER」も同様にiPhoneとAndroidで閲覧するとスマートフォン向けのページが表示されますが、Androidでは利用できない「＋」ボタンが表示されることからiPhoneを前提にした作りのようです（＋ボタンはiPhoneのホーム画面にアイコンを追加する機能）。

	Yahoo! JAPANのトップページをiPhoneで表示したところ。各種サービスやニュースなどへのリンクが並んでいる


NAVERのスマートフォンサイト。Androidでアクセスした場合（右）も「＋」ボタンが表示されるのでiPhoneが前提のようだ

■グルメサイト

ぐるなび（http://gnavi.co.jp/）
食べログ（http://tabelog.com/）

　「ぐるなび」は、iPhone用の専用サイトを用意しています。http://gnavi.co.jp/にアクセスするとPC用のサイトがそのまま表示されますが、画面の上部に表示されるバナー画像をクリックすることでiPhone専用のサイトに移動します。


iPhoneでぐるなびのトップページにアクセスするとPC用のサイトが表示されるが（左）、バナーをクリックするとiPhone用のサイトに切り替わる

　同じくグルメサイトの「食べログ」にはスマートフォン用のサイトはなく、PC用のサイトがそのまま表示されます。その代わり、iPhone向けには専用アプリを提供していて、アプリからサイトと同じ情報を利用できます。

	食べログはスマートフォン用サイトを用意していないが、iPhone向けには専用アプリを提供している

■SNSサイト

mixi（http://mixi.jp/）
Facebook（http://facebook.com/）

　mixiやFacebookなどのSNS（Social Network Service）サイトもスマートフォン向けの専用サイトを用意しています。PCと同じID名、パスワードでログインすると、スマートフォン向けに見やすく最適化されたサイトが表示されます。


mixi（左）、Facebook（右）のような大手SNSサイトもスマートフォン用サイトを用意している。PC版と同じURLでアクセスすると、スマートフォン向けのページが表示される

■ショッピングサイト

Amazon.co.jp（http://amazon.co.jp/）
楽天（http://rakuten.co.jp/）

　Amazonや楽天などのショッピングサイトもスマートフォンに対応しており、商品の検索から購入手続きまで、すべての操作を専用サイト上で完結できます。


Amazon.co.jp（左）や楽天（右）といった大手ショッピングサイトもスマートフォン用サイトを用意。PC向けに比べるとシンプルなトップページになっている