iOS safari:スマートフォン用サイトへの誘導

引き続きwebデザイニングの2011.11月号のスマートフォン向けの記事をもとに勉強。
今回はスマートフォン用サイトへの誘導についてです。
 
 

・ユーザーに選択の機会を!

スマートフォンでは簡単に画面の拡大ができたり、最近の高解像度ディスプレイの
おかげもあり、意外とストレス無くPCサイトを閲覧することができます。しかし
画面が小さいこともありPCと同レベルのユーザビリティは期待できません。
 
そこで最近の企業サイトはスマートフォン用のサイトを用意し、スマートフォンで
アクセスした場合はそちらへ誘導するようにしています。
 
その方法は色々あるようですが、私は「無条件にスマートフォン用サイトに移動」
させる方法は良くないと考えています。前述したように最近のスマートフォンは
通常のPCサイトもそれほどストレス無く閲覧できるのですから、ユーザーに選択させた
ほうが良いと思うのです。
 
というわけで.htaccessを利用するよりも、javaScriptの方法を学んでみようと思います。
ですが、webデザイニングのコードだと最初だけスマートフォン用のサイトを利用するか
質問されますが、その結果を記憶し以降は質問されません。そのため途中で切り替える
手段がありません。とはいえ記事中にあるように、毎回質問されるのも鬱陶しいです。
 
 
色々なサイトを巡ってみたのですが、ソニーのタブレットサイトはスマートフォンで
アクセスすると強引に専用サイトに飛ばされました(解像度によってはタブレット用の
ページ
に飛ばされます)。そこに至るまではPCページだったのに…。
しかし強引に飛ばされた先のコンテンツは、すでにタブレットを持っている方向けの
ページとなっていて「すでに購入した方」と「購入を考えている方」のニーズに個別に
対応しているところが素敵だなと思いました。
 
ただしタブレット機を持っていないスマートフォンユーザーがアクセスした場合は
タブレットを持っていないのに、タブレットを持っている方向けのコンテンツを
見せられることになるので悲しいかもしれません。
 
 
 

・スマートフォン用のリンクボタン

悩んだときは、既存のサイトを研究しましょう。私が良いと思ったのは、みずほ銀行
の方法です。このサイトはスマートフォンでアクセスすると以下のように画面上部に
スマートフォン用のリンクが表示されるのです(クリックで実物表示)。
 

 
この方法であれば、利用目的に合わせてユーザーがサイトを選択することができますし
javascriptでconfirmダイアログを表示するよりも鬱陶しくありません。ただリンクボタン
は大きくしても以外と気が付きにくいので目立つようなデザインにすべきでしょう。
私はスマートフォン用サイトを期待してサイトを見ていたので、気が付きましたが
同系色だと気が付かないユーザーも多いのでは?
 
 
ということで、デザインドリルに表示するリンクボタンはサイトカラーの緑の補色である
赤色にしてみました。css3の練習を兼ねて画像データを利用せずに作成しました。
画像を利用せずcss3だけで作成したボタン(safari & chrome用)
※スマートフォン用でしか表示しないボタンなのでPCのIEでの表示は考えませんでした。
ボタン作成にあたり参考にしたサイトはこちら
 
 
 

・jQueryでリンクボタンの表示

ということでデザインドリルのトップページにこの仕組みを組み込んでみました
ちなみにリンク先はスマートフォン向けの記事で紹介してきたサンプルです。
PCではリンクボタンは表示されませんが、スマートフォンでは以下の様に表示されます。
(クリックで実物表示)
 

 
jQueryのソースは以下の通りです。ユーザーエージェントの分岐処理はwebデザイニングの
記事に習っていますが、処理はconfirmではなくjQueryによってリンクボタンを追加する
処理にしました。

$(function () {
 var ua = navigator.userAgent;
 if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || 
 ua.indexOf('Android') > 0 || ua.indexOf('IEMobile') > 0) {
  $('#header').before('<a class="spLink" 
  href="http://www.designdrill.jp/s/">スマートフォン用ページ</a>');
 }
});

 
上記のbeforeメソッドはセレクタで指定した要素の前にhtmlを追加します。セレクタで指定した
#headはページの一番最初の要素なので、これによりhtmlの最初にリンクボタンが挿入される
ことになります。リファレンス:before(content)
 
しかし、まだスマートフォン用のサイトを用意しているところは少ないですね。
スマートフォン用のサイトが用意してあるところもトップページだけだったり…。
せめて外出先から利用しそうな「店舗検索」も用意してくれればよいのに、
PCサイトに飛ばされます…。
 
みずほ銀行は「店舗検索」用のアプリをダウンロード出来るようになっていましたが、
頻繁に利用するようなページではないのにダウンロードするのはねぇ..と感じる
今日この頃です。面白そうなのですけどね→ARにも対応した店舗検索アプリの紹介

 
おしまい
 
 
 

2 Responses to iOS safari:スマートフォン用サイトへの誘導

  1. いつもブログを拝見させていただいてます。
    「スマートフォン用サイトへの誘導」の記事を読ませていただき、
    スマートフォン用のリンクボタンの表示の仕方を今度サイトを制作する時に
    使用したいと思っておりますが、ライセンスはどのようになっておりますでしょうか?

    商用サイトでの使用を考えております。
    またご使用しても問題なければ著作権表示などの必要はございますでしょうか?

    お手数お掛けしますが、何卒よろしくお願いいたします。

  2. ブログへのコメントを見逃してしまい
    返信が大変遅れてしまいました申し訳ありません。

    ご連絡頂いた件ですが、ライセンスなどはありませんので
    商用サイトにもご自由にお使いください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


7 × 七 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>