この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。
iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。
ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
ファッション・アパレル
BEAMS
- URL：http://www.beams.co.jp/ip/
- 企業名：ビームス
セレクトショップ「BEAMS」のスマートフォンサイトは、店舗検索や商品紹介など、コンテンツが充実している。iPhoneらしいリスト型のレイアウトを採用し、余白を多めにとって白を基調としたシンプルなデザインにまとめている。
H＆M
- URL：http://m.hm.com/jp/mobilev2__mobileStart.nhtml
- 企業名：H & M Hennes & Mauritz AB
こちらも商品紹介などコンテンツが充実しているスウェーデン発のファストファッションブランド「H&M」のサイト。モデルの写真画像を大きく使い、ファッション誌のような感覚で楽しく閲覧できる。リスト型のUIに写真を組み合わせるなど、全体的に写真を多用しているのが特徴。
Nike Lab
- URL：http://www.nike.com/nikelab/i/app.html#ja_JP/home
- 企業名：ナイキジャパン
ナイキが運営するアスリート製品のプロモーションサイト。Ajaxでコンテンツを読み込み、スライドやフェードイン/アウトなどのアニメーションを使ってページを切り替えている。Webサイトというよりはアプリといっていいほど、よく作り込まれているスマートフォンサイトだ。
ANAP
- URL： http://www.anapnet.com/
- 企業名：ANAP
女性向けカジュアルファッションブランド「ANAP」のスマートフォンサイト。ピンクをベースにしたデザインで、明るく元気のよいイメージを表現している。商品紹介ページでは写真を画面幅いっぱいに配置し、折り畳みパネルで表示するUIを採用。
GAP
- URL：http://mobile.gap.co.jp/
- 企業名：ギャップジャパン
GAPは、ケータイ向けのモバイルサイトを流用したスマートフォンサイトを開設。ケータイサイトがベースなのでボタンなどのパーツ類がやや小さく、使い勝手はあまりよくないが、その分コンテンツは充実している。
G-SHOCK
- URL：http://world.g-shock.com/m/jp/
- 企業名：カシオ計算機
カシオ計算機の腕時計「G-SHOCK」のブランドサイト。黒と赤を基調とした力強いデザインで、ブランドの世界観をうまく演出している。JavaScriptを活用し、画像読み込み中にロードアイコンを表示したり、オーバーレイでナビゲーションメニューを表示したりと、使い勝手にもこだわっている。
スマートフォンサイトが作りたい！
本記事で紹介しているスマートフォンサイトを見ると、単にページ幅を画面サイズに合わせて調整するだけでなく、スマートフォンで見やすく使いやすいように、さまざまな工夫がされていることが分かる。たとえば、快適に閲覧できるサイト構成やページの長さ、タップしやすいボタンのサイズや位置、迷わず操作できるナビゲーションなど、優れたスマートフォンサイトにはスマートフォンならではの工夫が必要だ。
| Image from Amazon.co.jp |
| iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL) |
2月22日に発売される書籍「iPhone+Android スマートフォンサイト制作入門」（たにぐちまこと著、Web Professional Books）では、サイト設計・画面デザインから、HTML5/CSS3によるマークアップ、JavaScriptによるUI作成まで、スマートフォンサイト制作の基本を入門者向けに解説している。これからスマートフォンサイトを作りたい、と考えるWeb制作者におすすめの1冊だ。