このページの本文へ

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

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

2011年02月28日 12時25分更新

小橋川誠己/Web Professional編集部

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

金融(クレジット・消費者金融)


三井住友VISAカード

 三井住友カードの主力商品「三井住友VISAカード」のスマートフォンサイト。トップページと一部コンテンツがスマートフォン向けに最適化されている。JavaScriptを使ったスライドパネルやタブパネルは使いやすいが、サイト全体のナビゲーションに一貫性がなく、操作にやや戸惑う点が残念。


三菱UFJニコス

 国内最大手のクレジットカード会社「三菱UFJニコス」のサイトは、トップページとサブカテゴリートップをスマートフォン向けに最適化。定番のリスト型UIをベースにしているが、適切なサイズで配置されており操作性がいい。リンク要素やPCサイトへのリンクを示すアイコンの分かりやすさもよい。


アメリカン・エキスプレス

 全面に敷いた濃紺の背景と大きな写真が印象的な、アメリカン・エキスプレスのスマートフォンサイト。ナビゲーション部分に統一感は持たせながらも、ページごとレイアウトを変えており、使いやすく見た目に楽しい。JavaScriptを使ったページの切り替えなど、アニメーション効果も多数盛り込む。写真の効果的な使い方も参考になる。


JCB

 JCBはトップページに加えて、多くのコンテンツをスマートフォンサイトでも提供している。PCサイトを踏襲したデザインは、PCサイトを訪れたことのあるユーザーにとって違和感が少ない。ヘッダーにあるメニューボタン(タップするとグローバルナビが展開する)からすぐにサイト内を移動できるのは便利だが、リンクテキストやボタン類が全体的にやや小さく、タップしづらいのが残念。


アコム

 消費者金融大手「アコム」のスマートフォンサイト。トップページにはタレントの写真を前面に出し、中づりや新聞広告といった他の広告展開と連続したイメージを保っている。ヘッダーに電話番号を大きく表示しているのが消費者金融業らしい(タップすると電話もかけられる)。一部ページはPCサイトへリンク、ケータイサイトの流用ページも。


通信


ソフトバンクモバイル

 「SoftBank」ブランドで携帯電話事業を展開するソフトバンクモバイルのスマートフォンサイト。トップページと最新機種の紹介などの一部コンテンツをスマートフォンに最適化している。PCサイトのデザインをそのまま踏襲しており、違和感なく利用できる。


NTTドコモ

 NTTドコモは、トップページとサブカテゴリートップをスマートフォン向けに提供している。ほとんどのコンテンツはPCサイトへのリンクだが、スマートフォンサイトでも概要部分は確認できるようにしている。PCサイトへのリンクを示すアイコンも分かりやすい。


スマートフォンサイトならではのポイントが分かる本
「iPhone+Android スマートフォンサイト制作入門」

 本記事で紹介しているスマートフォンサイトを見ると、単にページ幅を画面サイズに合わせて調整するだけでなく、見やすく使いやすくするためのさまざまな工夫がなされていることが分かる。たとえば、快適に閲覧できるサイト構成やページの長さ、タップしやすいボタンのサイズや位置、迷わず操作できるナビゲーションなど、優れたスマートフォンサイトには共通する特徴がある。

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登録

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