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

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

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

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

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

■グルメサイト

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

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

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

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

■SNSサイト

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

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

■ショッピングサイト

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

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

　いずれのサイトも、PC向けではトップページにおすすめ商品などを賑やかに並べているのに対して、スマートフォン向けでは検索窓を大きく設置して、かなりシンプルなデザインにまとめています。

スマートフォンへの対応方法あれこれ

　前に紹介したサイトへアクセスしてみると、ひとくちに「スマートフォン対応」といってもさまざまな方法があることが分かります。たとえば、Googleはほぼすべてのコンテンツやサービスをスマートフォン向けに最適化して表示していますが、食べログのようにサイトとは別に専用アプリを提供する方法や、ぐるなびのように一部のページだけ対応する方法もあります。

■スマートフォンへの完全対応

　Googleやmixi、Facebookのように、スマートフォンでもPCとほぼ同様のコンテンツ、サービスを提供する方法です。PCサイトと同一のURLにアクセスすると、スマートフォンの場合だけ最適化された専用サイトへ移動します。

　専用のURLの入力や特別な操作が必要ないので、Twitterやメールなどのリンクからもそのままアクセスできますし、スマートフォンとPCのブラウザーのブックマークを同期しているユーザーにも便利な対応方法です。

■専用アプリを提供

　Webサイトとは別に、iPhoneのApp StoreやAndroid Marketから専用アプリを提供する方法です。専用アプリは、Webサイトだけでは実現しにくい機能をユーザーに提供できるのが強みです。たとえば食べログのアプリでは、外出先で利用することが多いスマートフォンの特性を生かして、付近の飲食店を検索する「現在地から検索」という機能が付いています。

　Facebookのように、スマートフォン向けサイトを用意しつつ、メッセージの着信通知などの独自機能を持つ専用アプリを提供しているサイトもあります。必要十分な機能を提供するサイトと、付加機能を提供するアプリの両方を用意する方法です。Amazonはバーコードをスキャンして商品を検索できるアプリを、Yahoo!はオークション管理に特化したアプリを提供しています。

■一部のページだけを対応

　「ぐるなび」やYahoo!のように、スマートフォンユーザーのニーズが高い一部のページだけを最適化する方法です。この場合、トップページにアクセスした時点ではいったんPCサイトを表示してバナーなどでスマートフォン向けページへ誘導したり、フッターにPCサイトへ切り替えるリンクを設置したりして、スマートフォン向けには提供されていないコンテンツや機能へもアクセスできるようにしています。

Yahoo!はスマートフォン向けとPC向けを切り替えるリンクを設置している

　実際にWebサイトを「スマートフォン対応」する場合にどの方法がよいかは、サイトの規模や構造、スマートフォンユーザーをどのよう程度取り込みたいかといった、サイトの戦略や方向性によります。「完全対応」や「専用アプリ」を用意する方法はユーザーにとってはメリットが大きい半面、クライアント（発注者）側にはそれなりのコストがかかります。一部のページから少しずつスマートフォン対応を始めて、ユーザーの動向を見ながら徐々に完全対応や専用アプリを検討するアプローチもあります。