かかえているサイトを急にスマートフォン対応して！
なんて時に困らない様に、スマートフォン特有のデザインやユーザビリティ等、構築時に抑えておきたいサイト・記事を集めました。
半分位自分用メモですが、何かの役に立てば幸いです。
スマートフォン最適化デザイン
国内のスマートフォン向けに最適化されたサイトをまとめているサイトをまとめました。
iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト
あのモバイルデザインアーカイブと姉妹サイトです。
登録数も豊富、カテゴリ毎で見れて便利です。
iPhone対応サイト トップ | meet i [ミートアイ]
こちらもかなりの登録数、スマートフォン対応サイトってこんなにあるんですね。
iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています
残念ながら更新が10年6月でストップしている模様ですが、国内サイトのまとめです。
iPhone/touch に最適化されているサイト報告
2chのログ？にもありました。
FX関連のiPhone対応アプリ/サイトまとめ | [FOREX PRESS]
FXサイトに特化したまとめ。
2011/02/08追加
参考にしたい優れたiPhone(スマフォ)Webデザイン集 - iPhoneデザインボックス
PCとの比較があるので、どうやってイメージを保っているかが分かりやすいです。
2011/02/15追加
Mobile UI Patterns › Splash Screens
左メニューから有名サービス各シーンのデザインを確認出来ます。
2011/05/23追加
【実録】アプリアイコンの作り方 〜２％のデザイン〜 | Everything was born from Love
アプリアイコンの作り方ですが、apple-touch-iconの作り方にも共通します。
優れたデザインのiOSアイコンまでもアーカイブしてるサイト iOS INSPIRES ME
デザイン構築時に抑えておきたいこと
スマートフォン最適化を実施する際に最低限抑えておきたいこと - livedoor ディレクターブログ
基本だと思いますが忘れないようにしないといけないですね。
要点引用。
・一画面に表示する要素はできるだけ軽く、シンプルにスマートフォン最適化を実施する際に最低限抑えておきたいこと
・画面遷移を省いた表示方法を活用する
・外出先で必要とされる機能を重視する
・スマートフォン本体やアプリなどで馴染みのあるUIを参考にする
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
超まとめ。軽量化についてなんかも載っています。
KenG Weblog - WebサイトをiPhoneに最適化する方法
iPhone上でのブラウザの挙動等、基本情報がまとまっています。
これも抑えておいた方が良さそうです。
スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)
11/06/18追加
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]
スマートフォン特有タグ
スマートフォン向けサイトの制作では、普段使わないタグが出てきます。
Yuki's SlowLife | 【iPhone・iPad】サイト制作のまとめ
viewportやフルスクリーンモードの事等、非常にまとまっていて分かりやすいです。
iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK
html5のお勉強も合わせて。inputのtype属性を覚えましょう。
シミュレータ
iPhoneのシミュレータ
ある程度出来上がった段階で表示の確認をしたいのに、iPhoneもスマートフォンも無いよ！という方はシミュレータを利用しましょう。
iPhoneのシミュレータ「iBBDemo」（Windows用）
こちらで紹介されているAir製のiBBDemo（現在はver2）で、iPhone/iPadの表示確認が可能です。
利用にはAirとSafariのインストールが必要です。
androidのシミュレータ
10/12/10追加
Android SDKをインストールしてエミュレータを起動してみる＠デザイナー
android用のシミュレータの導入までのまとめ記事書いてみました。
スマートフォンのユーザーエージェント一覧
スマートフォンのユーザエージェントを纏めてみたよ « 色々やってみてはみる
もの凄いまとまってます。
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最適化サイトを作り込む
これだけ見ておけば急に言われても困らないでしょう。
明日から頑張ります！
このエントリーのトラックバックURL：
このエントリーへのトラックバック：
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニ...
2011年4月27日 21:10 GREE Engineers' Blog
Posted by ; むゆう ： 2010年12月 9日 21:39
caraldo_K
Webディレクター的な事やってます！iPhone楽しい！マラソン・ロードバイクで肉体改造計画中！でも一番好きなのは漫画です㌰㌰⋋( 'Θ')⋌㌰㌰
poooooon
俗に言うWeb屋の人。馬車馬のように働きお休みがありません。いつか目の前に天使ちゃんが舞い降りてきてくれるのではないかと妄想を膨らませる毎日。
- Web [84]
- スマートフォン [30]
- デザインツール [14]
- Fireworks [5]
- Illustrator [1]
- Photoshop [6]
- パソコン [33]
- プログラミング [49]
- JavaScript [25]
- MovableType [24]
- PHP [9]
- 個人的ななにか [58]
はじめまして、STACKSTOCK書いてるむゆうと申します。
紹介していただいてありがとうございます！
このまとめ記事、僕の知らないページも多く参考になります！
これからもよろしくです！