ユーザーエージェント一覧 スマートフォンのユーザエージェントを纏めてみたよ

スマートフォン最適化デザイン

国内のスマートフォン向けに最適化されたサイトをまとめているサイトをまとめました。

iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト

あのモバイルデザインアーカイブと姉妹サイトです。

登録数も豊富、カテゴリ毎で見れて便利です。

iPhone対応サイト トップ | meet i [ミートアイ]

こちらもかなりの登録数、スマートフォン対応サイトってこんなにあるんですね。

iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています

残念ながら更新が10年6月でストップしている模様ですが、国内サイトのまとめです。

iPhone/touch に最適化されているサイト報告

2chのログ?にもありました。

FX関連のiPhone対応アプリ/サイトまとめ | [FOREX PRESS]

FXサイトに特化したまとめ。



デザイン構築時に抑えておきたいこと

スマートフォン最適化を実施する際に最低限抑えておきたいこと - livedoor ディレクターブログ

基本だと思いますが忘れないようにしないといけないですね。

要点引用。


・一画面に表示する要素はできるだけ軽く、シンプルに

・画面遷移を省いた表示方法を活用する

・外出先で必要とされる機能を重視する

スマートフォン本体やアプリなどで馴染みのあるUIを参考にする
スマートフォン最適化を実施する際に最低限抑えておきたいこと


iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ

超まとめ。軽量化についてなんかも載っています。

KenG Weblog - WebサイトをiPhoneに最適化する方法

iPhone上でのブラウザの挙動等、基本情報がまとまっています。

これも抑えておいた方が良さそうです。

スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)



スマートフォン特有タグ

スマートフォン向けサイトの制作では、普段使わないタグが出てきます。

Yuki’s SlowLife | 【iPhone・iPad】サイト制作のまとめ

viewportやフルスクリーンモードの事等、非常にまとまっていて分かりやすいです。

iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK

html5のお勉強も合わせて。inputのtype属性を覚えましょう。



シミュレータ

ある程度出来上がった段階で表示の確認をしたいのに、iPhoneスマートフォンも無いよ!という方はシミュレータを利用しましょう。

iPhoneのシミュレータ「iBBDemo」(Windows用)

こちらで紹介されているAir製のiBBDemo(現在はver2)で、iPhone/iPadの表示確認が可能です。

利用にはAirとSafariのインストールが必要です。



スマートフォンのユーザーエージェント一覧

スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる

もの凄いまとまってます。

Web サイトのスマートフォン最適化: UA 判別篇 - terkel.jp

PHPでのユーザーエージェントの切り分けが記載されていますので、この2つの記事を合わせると完璧かも知れません。



JavaScriptライブラリ

スマートフォン最適化を行うためのJavaScriptライブラリがいくつかあります。

このブログのスマートフォンページはiPhoneテンプレートfor MTを使用していますが、そこではiuiというライブラリを使用されています。

iui - Project Hosting on Google Code



他にも流行りのjQueryを使用したものがいくつかあります。さすがに中身は全て見れていませんが有名なところと紹介記事をピックアップ。

jQuery Mobile

MOONGIFT : スマートフォン最適化サイトの本命か「jQuery Mobile」

jQuery Mobile | jQuery Mobile

jQuery Mobileの公式サイトです。

jQuery Mobile: Demos and Documentation

アルファ版のデモページです。いい動きしてます。

jQuery iPhone UI

MOONGIFT : iPhone向け最適化Webサイトを構築するjQueryライブラリ「jQuery iPhone UI」

jQTouch

iPhone最適化サイト構築 Post Topic jQTouchを使ってiPhone最適化サイトを作り込む

これだけ見ておけば急に言われても困らないでしょう。

明日から頑張ります!



style="margin-top:10px;">







Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ|caraldo.net | WebとiPhoneとロードバイクが大好き!

以下を参考にしたサイト作りを行いたいですね。

・一画面に表示する要素はできるだけ軽く、シンプルに

・画面遷移を省いた表示方法を活用する

・外出先で必要とされる機能を重視する

スマートフォン本体やアプリなどで馴染みのあるUIを参考にする

スマートフォン最適化を実施する際に最低限抑えておきたいこと