Color Selector

default niceblue intenseblue otherblue blue puregreen grassgreen green olive gold orange pink fuchsia violet red

Container Selector

Article

iphone対応サイト制作まとめ

Share on LinkedIn
Pocket

iphoneに表示最適化したサイトもかなりたくさん出てきていますが、iphone対応サイトの作り方を備忘録的にまとめたかったので途中までまとめてみた。もっと書きたい事あるけど、続きは追記しておこうかな。

iphone最適化とはヤフー検索が対応した事例でもある通り、すぐに情報を見つけられるように、よりページを軽く、そして操作性の良い、iphoneに特化した見せ方をする事を言います。iphoneは通常PCでの見え方をそのまま表示し、タップしたりピンチオープンして拡大させたりしながら使用しますが、PC表示だといらない情報が多く、特に検索だと、パッと探してパッと表示できるものであって欲しいですよね。使う人の利便性を考えた設計から成り立ってます。

と言うことで今回は、iphoneサイト制作の基本をまとめてみた。

基本

iphoneのブラウザはMobile Safari

ブラウザ: Safari2.x ベース
画面解像度(縦): w320xh356px (上80pxと下44px分を除く表示領域のみ)
画面解像度(横): w480xh208px (上80pxと下32px分を除く表示領域のみ)

iphoneUIに関わる基本的な動作用語

  • タップ(PCのクリック)
  • ダブルタップ(PCのダブルクリック)
  • ピンチオープン、ピンチクローズ(拡大・縮小の機能)
  • フリック(指でシャッシャッとスライドさせる機能)
  • ドラッグ(PCのドラッグと同じ)

iphoneの判別法(01.htm)

  • jsのuserAgentで判別する
  • Apacheモジュールのmod_rewriteを使う
  • css3のメディアクエリーを使う

viewport(02.htm)

iPhone用Safariは、PCにおけるブラウザのウィンドウサイズに該当するViewportという概念を持っている。
Safari mobileの独自機能で、ページの縦横サイズや拡大などできるか指定できる。

参考:Viewport [iPhone生活]

ホーム画面に仕様するアイコン

w57 h57のpng 「apple-touch-icon.png」でルートディレクトリに入れる。登録すると勝手に角丸、光沢、ドロップシャドウが加えられる。
「apple-touch-icon-precomposed.png」にすると光沢だけ取れる。

特別なページに大して特別な画像アイコンにしたい時は↓

フルスクリーンモード(iphoneOS2.1以降)(03.htm)

以下のメタを入れるとフルスクリーンモードになる。
フルスクリーンモードになる条件は、そのページがホーム画面からタップされた事である事。

apple-mobile-web-app-capableがyesの場合はフルスクリーンになる。デフォルトはno。apple-mobile-web-app-status-bar-styleはフルスクリーン時のステータスバーの設定。

iphoneらしいインターフェース

内蔵フォントについて

日本語は「ヒラギノ角ゴシックProN-W3」「ヒラギノ角ゴシックProN-W6」のみで明朝体は使えない
英語は16種
以下デフォルトおすすめ指定

Mobile Safariの自動フォントサイズの無効

viewportで指定してもiphoneの向きを変更した際、一部の文字列はフォントサイズが自動調整されてしまう。それを回避したい場合はCSSで指定する。

最適な行間

Mobile Safariでline-heghtを指定しない場合の行間は17.6px=line-height:1.1なので、日本語でのデフォルト設定はやや読みにくい。おすすめは1.5。

ホーム画面風のUI

まずiphoneのホーム画面のようなhtmlを作成してみる。(04.htm)

読みこんだ時に自動的にアドレスバーが出ない位置に移動させ、コンテンツ部分の表示を大きくする方法

iphone本体の向きを変更にしてもアドレスバーが出ないようにするには、onOrientationChangeイベントを使う。
以上、jsを関数化、最適化したサンプル(05.htm)

エッジ・トゥ・エッジ・リスト

iphoneではお馴染みのリストメニュー

  • html構造を作る(06.htm)
  • もろもろデザインする(07.htm)

角丸長方形リスト

角丸の作り方

  • html構造を作る(08.htm)
  • もろもろデザインする(09.htm)

と、今日はここまで。

参考

iPhoneサイト制作ハンドブック iPhone&iPod touch対応
向井 領治
インプレスジャパン
売り上げランキング: 147910
Share on LinkedIn
Pocket

3 Comments

コメントする

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

Favorite Post

Recent Comments