AFTER」を以下の記事で紹介しています。合わせてご覧ください。日本のスマホサイトは2年間でこんなに変わったiPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。金融(銀行)金融(保険・証券)金融(クレジット・消費者金融)通信メディア(ニュース)メディア(テレビ)EC・通販ポータル・Webサービスその他の業種ファッション・アパレルBEAMSURL:http://www.beams.co.jp/ip/企業名:ビームスセレクトショップ「BEAMS」のスマートフォンサイトは、店舗検索や商品紹介など、コンテンツが充実している。iPhoneらしいリスト型のレイアウトを採用し、余白を多めにとって白を基調としたシンプルなデザインにまとめている。ABこちらも商品紹介などコンテンツが充実しているスウェーデン発のファストファッションブランド「H&M」のサイト。モデルの写真画像を大きく使い、ファッション誌のような感覚で楽しく閲覧できる。リスト型のUIに写真を組み合わせるなど、全体的に写真を多用しているのが特徴。LabURL:http://www.nike.com/nikelab/i/app.html#ja_JP/home企業名:ナイキジャパンナイキが運営するアスリート製品のプロモーションサイト。Ajaxでコンテンツを読み込み、スライドやフェードイン/アウトなどのアニメーションを使ってページを切り替えている。Webサイトというよりはアプリといっていいほど、よく作り込まれているスマートフォンサイトだ。http://www.anapnet.com/企業名:ANAP女性向けカジュアルファッションブランド「ANAP」のスマートフォンサイト。ピンクをベースにしたデザインで、明るく元気のよいイメージを表現している。商品紹介ページでは写真を画面幅いっぱいに配置し、折り畳みパネルで表示するUIを採用。GAPURL:http://mobile.gap.co.jp/企業名:ギャップジャパンGAPは、ケータイ向けのモバイルサイトを流用したスマートフォンサイトを開設。ケータイサイトがベースなのでボタンなどのパーツ類がやや小さく、使い勝手はあまりよくないが、その分コンテンツは充実している。G-SHOCKURL:http://world.g-shock.com/m/jp/企業名:カシオ計算機カシオ計算機の腕時計「G-SHOCK」のブランドサイト。黒と赤を基調とした力強いデザインで、ブランドの世界観をうまく演出している。JavaScriptを活用し、画像読み込み中にロードアイコンを表示したり、オーバーレイでナビゲーションメニューを表示したりと、使い勝手にもこだわっている。スマートフォンサイトが作りたい!本記事で紹介しているスマートフォンサイトを見ると、単にページ幅を画面サイズに合わせて調整するだけでなく、スマートフォンで見やすく使いやすいように、さまざまな工夫がされていることが分かる。快適に閲覧できるサイト構成やページの長さ、タップしやすいボタンのサイズや位置、迷わず操作できるナビゲーションなど、優れたスマートフォンサイトにはスマートフォンならではの工夫が必要だ。Books)では、サイト設計・画面デザインから、HTML5/CSS3によるマークアップ、JavaScriptによるUI作成まで、スマートフォンサイト制作の基本を入門者向けに解説している。これからスマートフォンサイトを作りたい、と考えるWeb制作者におすすめの1冊だ。前へ12345次へこの記事の編集者は以下の記事をオススメしていますDESIGN実践!iPhone&Androidサイト制作ガイド「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者の...4590DESIGNWebデザイン劇的ビフォーアフター09年春版この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。スマホお気に入り一覧マイページ。