webデザイニングの2011.11月号にはスマートフォン向けの記事もあったので、それも
まとめておこうと思います。とはいっても私はスマートフォンを持っていないので
iPodTouchで検証してみました。そのうちAndroidケータイも購入して検証できるように
しようと思います。
　

Normalize.cssについて

viewportの設定の前に、シンプルなスマートフォン用のページを作成しました。
そこで前回紹介したNormalize.cssを利用してみたのですが、ulとかに40pxの
paddingとか設定してあったりと（私的に）余分なものも多い印象を受けました。
　
ということで、いきなり前言撤回…利用するのをやめました…。
色々検証しながら自作していこうと思います。
現時点でのスマートフォン用のreset.cssはこちら。
　
　
　

viewportって？

ではviewportの説明に入ります。まずはviewportの設定をしていないページが
どのように表示されるかを確認しておきましょう。
viewportの設定をしていないサンプルです
　
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

あ　

iPodTouchの解像度は960*640ですが、上記のように横幅が960より少し大きく表示
されました（背景画像に目盛を薄く入れてあります）。このサンプルは幅を固定
していないので、より深く検証するためサイズを指定したサンプルも用意しました。
幅を固定したサンプル
　
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

上記の通り、表示される領域はコンテンツの幅には関係なく一定であることが
確認できました。
スマートフォン用のブラウザで表示される領域はviewportと呼ばれデフォルトで
980pxとなっているそうです（これはPCサイトを横スクロール無しで表示できるように
するための配慮だそうです）。

しかし、これでは文字が小さくて拡大しないと内容が分かりません。ですので、
スマートフォン用のサイトではviewportを指定して閲覧しやすくします。
　
　
　

viewportの設定

デフォルトで980pxになっているviewportの幅を320pxに設定したいと思います。
viewportの設定はメタタグで以下の様に行います。

<meta name="viewport" content="width=320">

　
viewportで幅を320にしたサンプル
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

viewportを設定すると上記の通り、表示幅が320pxで表示されるようになります。
このサンプルは幅を固定していないので、ちょうど良く表示されていますが
固定幅でデザインしたサイトで幅がviewportに納まらない場合は横スクロールが
生じます。しかしiPodTouchではスクロールバーがないため、横スクロールに
気が付かない危険性があるため、幅は固定幅にしない方が無難だとおもいます。
viewportで幅を320にした状態で幅500px以上のレイアウトをしたサンプル
　
上記のページをiPodTouchで表示し、横縦を切り替えていると表示倍率が変わって
バグのようになりますが、これは次回利用するinitial-scaleやmaximum-scaleを設定する
と直りますが、向きを変えるたびにセンタリング表示されるため、やはりviewport以上
の幅でデザインするのは避けるべきだとおもいます。
viewportで表示倍率を固定したサンプル
　
　
　

device-width

viewportのwidthには、利用機種の横幅に合わせるという設定が可能です。この場合
以下の様にwidthにdevice-widthを設定します。

<meta name="viewport" content="width=device-width">

　
viewportの幅にdevice-widthを利用したサンプル
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

　
上記のようにdevice-widthを設定しても320pxの幅にしかなりません。しかし利用している
iPod Touchはretinaディスプレイなので画面解像度は640*960あります。
設定を間違えたのかなぁ？と色々確認したのですが、retinaディスプレイでも320*480として
扱われるそうです（そうすることで昔のディスプレイとの互換性を保つそうです）。
参考サイト
　
まだAndroidケータイを購入していないので確認できませんが、色々な機種で
汎用的に表示するのにはdevice-widthを利用しておくのが良さそうです。
　
まだviewportの設定は色々あるのですが、今回はここまで。
次回はviewportのその他の設定について試したいと思います。
　
　
　

initial-scaleの設定

以下の画像は前回の最後に紹介した表示幅にdevice-widthを利用したものです。
ここで不満に思ったのが、横向きにしたら320pxではなく480pxにして欲しい
ということです。横向きでも320pxだと、表示倍率が変わってしまいますから…。
　

　
そこで次に試したのがviewportのinitial-scaleです。これを1（等倍）にしておけば
表示倍率が変化するのを避けられるのかな….と。ですが、実際は以下の様にダメでした。
横にしても320pxになってしまいます。
initial-scaleに１を設定したサンプル
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

　
問題は右側の横の状態です。幅は320pxでコンテンツサイズが480pxになってしまって
います。コンテンツは固定幅でないから、この時点で予想外の表示になっています…。
さらに検証すると、最初から横にした状態でこのページを見ると、予想通り480pxの
幅で表示されます。
　

　
ここで気が付いたわけです。initial-scaleという名前ですから
最初だけ1で表示して、向きを変えたら倍率が変わってしまうのだと….。
　
　
　

maximum-scaleの設定

そこで次に試したのがmaximum-scaleです。これで必要以上に大きく表示されるのを
防ぐことができます。
maximum-scaleに１を設定したサンプル
これをiPodTouchで表示すると以下の様になります（クリックで実物表示）。
　

　
しかし、ここでまた予想外のことが発生しました。縮小もできなくなったのです…。
minimum-scaleを0.1とかに設定しても無理でした…。しかしinitial-scaleを0.1にすると
0.1〜1.0までの拡大縮小ができるようになりました…。問題の解決にはなりませんが。
しかしスマートフォンサイトの多くでは拡大縮小をできないようにしているので
これは問題にならないと思います。
　
　
　

user-scalableの設定

実は、この記事を作成するにあたり多くのスマートフォン用サイトのviewpoint設定を
確認しました。ほとんどのケースで拡大縮小をできないようにしています。そこで
利用されているのがuser-scalableです。これをnoに設定するとユーザーによって
拡大縮小することができなくなります。今回の検証では、すでにmaximum-scaleの
設定をした段階で拡大縮小できなくなっていますが、これも念のため設定した方が
よいのでしょう。
maximum-scaleに１を設定したサンプル
見た目はmaximum-scaleを設定したサンプルと変わらないので、
キャプチャは省略します。
　
　
　
最後に多くのサイトで設定されていたviewportを書いておきます。

　
上記の他にreset.cssで利用した以下の設定もポイント。これを設定しておくことで縦向きでも
横向きでも文字の大きさが変化しなくなります。

 -webkit-text-size-adjust: 100%;

　
おしまい
　
　
　

今回もwebデザイニングの2011.11月号のスマートフォン向けの記事をもとに勉強していきます。
　
スマートフォンのブラウザではブックマークだけでなくホームボタンにリンクアイコンを配置する
ことができます。このときホーム画面に表示されるのが「ホームアイコン」です。
ホームアイコンはhead領域にlinkタグで設定します。
　

・光沢処理の有無

今回、仮作成したホームアイコン用の画像（114×144）はこちら。光沢をいれたデザインに
しました。まずは最小限の設定だけでサンプルで確認しましょう。ソースには下記の通り。
ホームアイコンの設定（最小設定）をしたサンプル

<link rel="apple-touch-icon" href="../images/home114.png" />

　
キャプチャ画像を紹介する前に、もう１つ別の設定を紹介します。iPhone/iPod/iPadでは
ホームアイコンを作成すると自動で光沢処理がかかります。この処理はAndroidではされません。
そのためiPhoneとAndroidでは同じ画像を利用しても異なる表示となってしまいます。
　
この問題を解決するため、iOS3以降のiPhoneでは以下の様に記載することで光沢処理を外すことが
できるようになりました。
ホームアイコンの光沢加工をしない設定にしたサンプル

<link rel="apple-touch-icon-precomposed" href="../images/home114.png" />

　
この設定にしてホームアイコンを設定すれば、iPhoneでもAndroidでも同じようにホームアイコンを
表示することが可能となります。以下のキャプチャ画像で、どのように表示が変わるかを確認して
おきましょう。
　

左側のアイコンが光沢処理をされたものです。元からのハイライトと、光沢処理のハイライトが
重なって２重になっていることが確認できます。右は光沢処理がない（precomposed）サンプルで
ハイライトは重なっていません。
　
　
　

・アイコンの解像度

iPhone4以前のホームアイコンのサイズは「57×57」retinaディスプレイを搭載したiPhone4では
面積比4倍の「114×114」となっています。解像度が異なっても自動的に拡大表示されるので
「57×57」のアイコンだけでも問題ないのですが、アップルではiOS4.2以降で利用できる
sizes属性を追加し、機種によって異なるアイコンを表示できるようにしました。
　
構文はwebデザイニングの記事にある通りなのですが、記事では最後にsizes設定していないlinkタグ
があり、cssを知っている方は不安になると思います。cssの設定などでは、同じ設定がある場合は
後の設定になりますから、これでは全ての機種でhome.pngが選択されるのではないか？と….。
　
しかし、これには根拠があるようで以下の参考サイトを確認するとiPhoneでのアイコン設定は
最初の設定が有効になるそうです（この性質を利用してAndroidとiPhoneでアイコンを変えることも
できるそうです）。
iPhone と Android の apple-touch-icon の違い
　
念のため確認しておきましょう。確認用のサンプルには以下の順番でアイコンを設定しました、
これを私のiPod Touchがどの様に判断するか…。
アイコンの採用順番を確認するサンプル１

<link rel="apple-touch-icon" href="../images/home_A.png" />
<link rel="apple-touch-icon-precomposed" href="../images/home_B.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/home_C.png" />

　
結果は予想とは異なり、一番最後のhome_C.pngが選択されました…。
ですが、これは各アイコンの条件が異なるため、このようになったとも考えられます。
ということで次は以下の様に全く同じ条件で設定しました。
アイコンの採用順番を確認するサンプル２

<link rel="apple-touch-icon" href="../images/home_A.png" />
<link rel="apple-touch-icon" href="../images/home_B.png" />
<link rel="apple-touch-icon" href="../images/home_C.png" />

　
上記の設定では予想通り最初のhome_A.pngが選択されました。他にも色々検証して
以下の様なルールになっているのを確認しました（Androidの方は予想です）。

　
ということでwebデザイニングの記事の順番で問題ないことが確認できました。
ただし、これではprecomposedに対応していないiOS2以前のものには対応できないので、
私は以下の様にしてみました。

途中にprecomposed設定に対応していないiOS2以前用のアイコンを追加しています
（home.pngには光沢処理していません）。Androidは最後の行が選択されると思うのですが、
検証できていないのでAndroid携帯を購入後、確認したいと思います。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/home114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../images/home72.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../images/home57.png" />
<link rel="apple-touch-icon" href="../images/home.png" />
<link rel="apple-touch-icon-precomposed" href="../images/home57.png" />

アイコンの設定（最終案）
　
　
いろいろ時間をかけて検証しましたが、スマートフォン用のサイトを確認すると上記のような
細かい設定はほとんどされておらず、最小限の設定が１行のあるか、設定されてないかでした…。
確かにホームにまで置いておきたいページはあまり無い気がします。
　
サンプルとして銀行系のホームアイコン
・みずほ銀行
・三井住友銀行
　
　

・Androidのことも考えると

上記でまとまったようにも感じますが、Androidのケースを考えるともう少し考えたくなります。
厄介なのは、Androidが現状sizesに対応しておらず、そのうえ機種によってサイズが異なり
さらにアイコンサイズを任意で変更可能なアプリや機種が存在することです。
　
iPhoneもAndroidも自分の環境に合わせてアイコンをリサイズしてくれます。ですから
上記銀行のアイコンは57×57のものしか有りませんが、retinaディスプレイの私のiPodでも
４倍にリサイズされます（リサイズされなかったら1/4の小さなアイコンになるでしょう）。
　
これを踏まえアイコンは114×114で作成し、最小設定のアイコン指定だけで良い気がします。
つまり最初に学んだ以下のコードです。

<link rel="apple-touch-icon" href="../images/home114.png" />

　
ただしアイコンのデザインは光沢処理をいれません。
各環境に任せます（iPhoneでは光沢処理され、Androidでは光沢処理されない）。
retinaディスプレ以外ではリサイズされますが、縮小リサイズなので画像の劣化はあまり
ないはずです。解像度がまちまちのAndroidケータイでも機種に合わせてリサイズされます。
ただしアイコンをデザインするときに注意しましょう。リサイズによる劣化が目立つ
ストライプ系のデザインは避けるべきです。ホームに配置されることを期待するwebアプリ以外
ではこの設定で充分なのではないでしょうか。
　
　
おしまい
　
　
　

今回もwebデザイニングの2011.11月号のスマートフォン向けの記事には電話番号の扱いに
ついての注意点があったので、これもまとめておくことにします。しかしそれだけでは記事が
少ないのでwebアプリに利用しそうなフルスクリーンの設定についても書こうと思います。
　
　
　

・電話番号の自動リンクを無効にする

スマートフォン用のブラウザでは、ハイフンやピリオド混じりの数字を電話番号と誤認して
自動的にリンクを設定してしまうそうです。そのためシリアル番号のようなものでも電話番号
と認識され間違い電話のもとになる危険があります。ですから、この設定はOFFにするのが
良いそうです。その設定は以下の様にメタタグで行います。

<meta name="format-detection" content="telephone=no" />

　
企業サイトから間違い電話をかけてしまうのは絶対避けたいので、必須だと思います。
この設定をしてもリンクタグでtel:〜と明示してあげれば、電話番号へのリンクも可能です。
電話番号の自動リンクをOFFにしたサンプル
これで電話番号についての説明はおしまいです。
　
　
　
　

・webアプリを作成するときに利用しそうな設定

以下の設定をするとホームアイコンから起動したときブラウザのアドレスバーやメニューが
表示されないフルスクリーンモードになります。これを利用すればjQueryベースのwebアプリも
よりアプリっぽくなります。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　
１行目はフルスクリーンモードでページを開く設定です。iOSではフルスクリーンでもステータス
バーが消えません。そのかわり上記の２行目の処理によってバーを黒くして目立たなくすることが
できます。他にはblack-translucentが設定でき、これは半透明のメニューバーになります。
これを設定しない場合はデフォルトのグレーになります。　
以下はblack-translucentが設定にした場合のキャプチャです（クリックで実物表示）。
　

これでwebアプリを作成する際の注意点としては、上記のようにページの上部がメニューバーに
隠れてしまうため、コンテンツが隠れないように上部マージンを持たせることです。
　
　
おしまい
　
　
　

引き続き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にも対応した店舗検索アプリの紹介

　
おしまい
　
　
　

今回はwebデザイニングの2011.11月号のスマートフォン向けの最後の項目です。
retinaディスプレイは本当にキレイです。電子書籍は好きではなかったのですが、
iPadがretinaディスプレイを搭載したら電子書籍が好きになりそうです。特に
雑誌は嵩張るので電子書籍のほうが嬉しいです。
　
　
　

高解像度ディスプレイ向けの画像は必要か？

高解像度ディスプレイは現時点で少数派なので、対応しているところは少ないと
思っていたのですが結構多かったです。以下のリンク集から巡ってみました。
iPhone Design Box
　
高解像度ディスプレイに対応しているかいないかは結構わかります。みずほ銀行など銀行系の
スマートフォンサイトでは対応していないので画像アイコンがぼやけた感じになっています。
テキストがとてもキレイに表示されているので、なおさら差を感じます。
　
ということで、これは手を抜かない方がよいと感じました。
　
　
　

環境による表示画像の切り替え

webデザイニングの記事にあるようにメディアクエリを利用すれば解像度によって
表示画像を切り替えることができます。しかし、この方法はcssしか設定できない
ためimgタグのsrcを切り替えることができません。ですので可能なのは背景画像
のみとなります。とはいえ通常の利用であれば背景画像で問題ないと思います。
　
ということで作成したサンプルが以下のものです。PCで開くと「低」と表示され
低解像度の画像が表示されるのが確認できます。
解像度による表示画像の切り替えサンプル
　
これをスマートフォンで確認すると以下の様に「高」と表示され高解像度の画像が
表示されるのが確認できます（クリックで実物表示）。
　

　
　
研究も兼ねてwebデザイニングとは異なるシンプルなソースにしました。
まずdiv.imageのcss設定は以下の様に50ｘ50のdiv領域の背景に50×50.pngを
表示しているだけです。

div.image{
　width:50px;
　height:50px;
　background:url(../images/50x50.png);
}

　
これを続きメディアクエリの-webkit-min-device-pixel-ratioを利用して解像度が
高い場合は上書き設定し直します。iPhone4等はこの値が2ですがwebデザイニングの
記事にあるように少し高解像度のアンドロイドにも対応するように1.5を設定しています。
この解像度以上であった場合｛｝内の処理が実行され、div.imageの背景画像が100×100.png
に再設定されるというわけです。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
　div.image{
　　background: url(../images/100x100.png);
　　-webkit-background-size: 50px 50px;
　}
}

また以下の処理によって、サイズが100×100の背景画像を50×50にして表示します。

-webkit-background-size: 50px 50px;

このメディアクエリはスマートフォン用のCSSというわけではなくPCサイトでも活用できます。
参考サイト：[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
　
　
　

メディアクエリの限界

メディアクエリでは背景画像にしか利用できないため、ショーケースコンテンツのように
画像をjQueryで操作する部分では利用できません。jQueryを利用すれば高解像度ディスプレイ
の時に画像を切り替えることが可能ですが、もとの画像と差し換える手順になるため
読込のリクエストが重なり、画像の表示が少し遅くなると思います。
　
悩んだときは既存のスマートフォンサイトを観察しましょう。以下のサイトは
PCでもスマートフォン用のページを閲覧できるため確認しやすいので、これで
画像をどの様に扱っているかを確認します。
JUN MEN
　
上記サイトではトップでjQueryを利用したショーケースを表示しています。
ソースを確認すると320pxの幅で表示していますが、実際に利用している
画像を開くと幅640pxの画像であることが確認できます。
　
つまり高解像度の画像だけ用意して50%のサイズで表示するようにしています。
実際に高解像度のスマートフォンで確認するときれいに表示されますし、
PCで確認できるように50%で表示されている画像も比較的きれいです。
この方法が一番シンプルで現実的な気がします。
　
この方法で作成したサンプルを確認しましょう。
高解像度の画像を50%表示したサンプル
　
このサンプルでは比較として低解像度の画像と並べて表示するようにしています。
PC（や低解像度のスマートフォン）で確認すると２つに差は無いように見えますが
高解像度のスマートフォンで確認すると以下の様に明らかに異なり、高解像度の
画像がとてもきれいに表示されているのが確認できます（クリックで実物表示）。
　

　
　

メディアクエリのメリットは？

一応メディアクエリのメリットも考えます。低解像度の古い機種では、低解像度の
軽い画像が表示されるため、古い機種の方は表示までの時間が短縮されるでしょう。
ですので、画像がたくさん利用されるページではメディアクエリを利用する価値が
ありそうですが、もう少し考えてみましょう。
　
上記の恩恵が受けられるのは古い機種だけです。新しい機種はきれいな画像を
多く（ダウンロード）表示するため時間が掛かってしまいます。これは
メディアクエリではどうにもなりませんから、別の方法で解決します。
　
具体例としては、１ページあたりの画像数を減らすようにページを分割する等が
あるでしょう。そうすれば表示時間の問題も解決できます。
高解像度の画像を利用しても表示時間が早くなれば、コードを多く書く面倒な
メディアクエリを利用するメリットも薄くなり、結局は前項で紹介した50%で
画像を表示する方法に落ち着くと思います。
　
　
　

可能な限り画像は避ける

ともあれ画像を含めたページのファイルサイズは少ない方が良いので、画像の利用は
抑える方がよさそうです。スマートフォンのブラウザはcss3に良く対応しているので
ボタン等はcssでデザインするようにしましょう。
　
　
おしまい
　
　
　

スマートフォン向けの勉強をしてきましたが、ちょっと記事がごちゃごちゃしているので
ここで簡単にまとめておこうと思います。
　
　

・html5とcss3を利用する

ほとんどのスマートフォンがhtml5に対応しており、css3への対応もかなり進んでいる。
css3を利用すれば、画面の広さが異なる各機種に柔軟に対応できるし、PCよりも通信速度が
遅い部分をカバーできるので利用すべき。
スマートフォン向けのリセットcssもブラッシュアップしていこう。
　
　
　

・viewportの設定

webデザイニング2011.12月号のsmartPhone.labでは３パターンのviewportを紹介して
いますが、やはり向きによって拡大縮小をされないリキッドレイアウトのパターンが一番良い
と思います。ということで、以前の記事通り以下の様な設定で以降と思います。

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1.0, user-scalable=no">

上記の設定で行く場合はフォントサイズも縦横で変化しないようにreset.cssに以下の設定を
いれておくようにします。

 -webkit-text-size-adjust: 100%;

・ホームアイコン

webアプリ以外では利用される機会はほとんど無いかもしれないが、企業サイトとしては準備して
おくべきです。Apple製品ではアイコンサイズがある程度決まっていますが、Android系は機種ごと
に異なり、しかもsizes設定に現状では対応していません。ですので以下の様に設定しておこうと
思います。

　
この処理によってiPhone系では他のApple系のアイコンと同じように光沢処理されAndroid系
では、他のアイコンと同じように通常表示されます。また、このコードでは各機種のアイコン
サイズにリサイズされるため、ストライプのようなデザインは避けるようにしましょう。
　
　
　

・自動電話リンクへの対処

スマートフォンでは電話番号でない数字の羅列に、自動的に電話リンクしてしまう場合があります。
これは企業サイトからの間違い電話を誘発する危険に栂なるため、必ず設定しておくべきでしょう。

<meta name="format-detection" content="telephone=no" />

・スマートフォンサイトへの誘導

最近のスマートフォンは画面サイズも大きく、PC用のサイトもそれほどストレス無く閲覧が
可能です。ですから強引にスマートフォン用サイトへ移動させるのではなく、ユーザーが
選択できるようにリンクボタンを表示するのが良いでしょう。その際、スマートフォンの
小さな画面でも目立つように、大きめのリンクボタンを表示するようにしましょう。また
逆にスマートフォン用サイトからPCサイトへ移動するボタンも設置するようにしましょう。
jQueryを利用すれば、簡単にスマートフォンでのアクセスの時だけリンクボタンを表示
できます。
　
　
　

・高解像度ディスプレイ向けの画像対策

表示する領域の4倍のサイズで画像を作成し、それを表示するようにします。
例：320×160のサイズで表示する場合は640×320の画像を用意し、それを320×160で表示する。
通信速度を考え、１ページ内にあまりたくさんの画像を配置しないようにレイアウトし、可能な
限りcss3でのデザインにする。
　
　
おしまい
　
　
　

アップルの開発者向けのサイトではプログラム関連の記事だけでなくインターフェイスデザイン
についての資料もあったりします。iOS developer library
　
例えばiOS ヒューマン インターフェイス ガイドライン ※13MBのPDFです！という資料は
iアプリの開発関連の資料ですが、スマートフォン用のサイトデザインにも有用そうです。

--以下13ページ引用--
タップ可能なUI要素の快適な最小サイズは、44 x 44ポイント。

　
　
しかしスマートフォン関連でいろいろサイトを見たのですが、ほんとにショーケースコンテンツの
ようなシンプルなFlashの多くはjQueryに置き換わってきていますね…。予想以上の速度です。