金融(クレジット・消費者金融)
三井住友VISAカード
- URL:http://www.smbc-card.com/sp/index.jsp
- 企業名:三井住友カード
三井住友カードの主力商品「三井住友VISAカード」のスマートフォンサイト。トップページと一部コンテンツがスマートフォン向けに最適化されている。JavaScriptを使ったスライドパネルやタブパネルは使いやすいが、サイト全体のナビゲーションに一貫性がなく、操作にやや戸惑う点が残念。
三菱UFJニコス
- URL:http://www.cr.mufg.jp/spn/
- 企業名:三菱UFJニコス
国内最大手のクレジットカード会社「三菱UFJニコス」のサイトは、トップページとサブカテゴリートップをスマートフォン向けに最適化。定番のリスト型UIをベースにしているが、適切なサイズで配置されており操作性がいい。リンク要素やPCサイトへのリンクを示すアイコンの分かりやすさもよい。
アメリカン・エキスプレス
- URL:http://www.americanexpress.com/japan/mobile/sp/
- 企業名:アメリカン・エキスプレス・インターナショナル・インコーポレイテッド
全面に敷いた濃紺の背景と大きな写真が印象的な、アメリカン・エキスプレスのスマートフォンサイト。ナビゲーション部分に統一感は持たせながらも、ページごとレイアウトを変えており、使いやすく見た目に楽しい。JavaScriptを使ったページの切り替えなど、アニメーション効果も多数盛り込む。写真の効果的な使い方も参考になる。
JCB
- URL:http://smp.jcb.co.jp/lnk000/=http://www.jcb.co.jp/
- 企業名:ジェイシービー
JCBはトップページに加えて、多くのコンテンツをスマートフォンサイトでも提供している。PCサイトを踏襲したデザインは、PCサイトを訪れたことのあるユーザーにとって違和感が少ない。ヘッダーにあるメニューボタン(タップするとグローバルナビが展開する)からすぐにサイト内を移動できるのは便利だが、リンクテキストやボタン類が全体的にやや小さく、タップしづらいのが残念。
アコム
- URL:http://www.acom.co.jp/smart/index.html
- 企業名:アコム
消費者金融大手「アコム」のスマートフォンサイト。トップページにはタレントの写真を前面に出し、中づりや新聞広告といった他の広告展開と連続したイメージを保っている。ヘッダーに電話番号を大きく表示しているのが消費者金融業らしい(タップすると電話もかけられる)。一部ページはPCサイトへリンク、ケータイサイトの流用ページも。
通信
ソフトバンクモバイル
- URL:http://mb.softbank.jp/mb/entrance.html
- 企業名:ソフトバンクモバイル
「SoftBank」ブランドで携帯電話事業を展開するソフトバンクモバイルのスマートフォンサイト。トップページと最新機種の紹介などの一部コンテンツをスマートフォンに最適化している。PCサイトのデザインをそのまま踏襲しており、違和感なく利用できる。
NTTドコモ
- URL:http://www.nttdocomo.co.jp/smt/
- 企業名:エヌ・ティ・ティ・ドコモ
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冊だ。