このページの本文へ

日本語サイトの事例を一挙紹介(前編)

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

2011年02月21日 10時00分更新

小橋川誠己/Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。

日本のスマホサイトは2年間でこんなに変わった

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

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


ファッション・アパレル


BEAMS

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


H&M

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


Nike Lab

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


ANAP

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


GAP

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


G-SHOCK

 カシオ計算機の腕時計「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冊だ。

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング