iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。

　ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

ファッション・アパレル

　セレクトショップ「BEAMS」のスマートフォンサイトは、店舗検索や商品紹介など、コンテンツが充実している。iPhoneらしいリスト型のレイアウトを採用し、余白を多めにとって白を基調としたシンプルなデザインにまとめている。

　こちらも商品紹介などコンテンツが充実しているスウェーデン発のファストファッションブランド「H&M」のサイト。モデルの写真画像を大きく使い、ファッション誌のような感覚で楽しく閲覧できる。リスト型のUIに写真を組み合わせるなど、全体的に写真を多用しているのが特徴。

　ナイキが運営するアスリート製品のプロモーションサイト。Ajaxでコンテンツを読み込み、スライドやフェードイン/アウトなどのアニメーションを使ってページを切り替えている。Webサイトというよりはアプリといっていいほど、よく作り込まれているスマートフォンサイトだ。

　女性向けカジュアルファッションブランド「ANAP」のスマートフォンサイト。ピンクをベースにしたデザインで、明るく元気のよいイメージを表現している。商品紹介ページでは写真を画面幅いっぱいに配置し、折り畳みパネルで表示するUIを採用。

　GAPは、ケータイ向けのモバイルサイトを流用したスマートフォンサイトを開設。ケータイサイトがベースなのでボタンなどのパーツ類がやや小さく、使い勝手はあまりよくないが、その分コンテンツは充実している。

　カシオ計算機の腕時計「G-SHOCK」のブランドサイト。黒と赤を基調とした力強いデザインで、ブランドの世界観をうまく演出している。JavaScriptを活用し、画像読み込み中にロードアイコンを表示したり、オーバーレイでナビゲーションメニューを表示したりと、使い勝手にもこだわっている。

ソーシャルリアクション

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

• 実践！iPhone＆Androidサイト制作ガイド

• Webデザイン劇的ビフォーアフター09年春版

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

はてブ注目ランキング

1. 世界を変える方法は山川の教科書に書いてある274 users

2. 10分でわかる！ jQuery Mobileのキホン100 users

3. iBooks AuthorでHTML5の電子書籍作ってみた78 users

4. HTML5要素のブラウザー実装状況を調べてみた39 users

5. コンテンツを依頼するときのSEOチェックリスト1731 users

6. 40分で覚える！jQuery速習講座2225 users

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

8. もう配色には困らない！「Adobe Kuler」1683 users

9. 30分でできる！Webサイトを高速化する6大原則1498 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1217 users

最新記事

• 「Thunderbolt」対応のキャプチャーユニットが登場

  

• Radeon HD 7770最速のビデオカードがSAPPHIREから発売

  

• 奥行き118mmの小型ATX電源ユニット「小錻力4」が発売

  

• 編集太田のゲーム専用PCのノーガードっぷりは異常

  

• ドスパラ パーツ館「1周年記念セール」が今週からスタート！