1.デザイン
2.画像編集
3.シミュレート

スマートフォン向けサイトを作成するにあたって、役に立つツールをご紹介いたします。デザインと画像編集に関してはブラウザ上で動作するツールとなっています。インストールする面倒がなく利用できる利点があります。

■1.デザイン

【CSS3 Generator】
スマートフォンで使われる角丸や影などのスタイルを簡単に作成できるツール。
http://css3generator.com/

【CSS 3.0 MAKER】
スマートフォンで使われる角丸や影などのスタイルを簡単に作成できるツール。
http://www.css3maker.com/

■2.画像編集

【befunky】
ブラウザ上で画像編集ができるツール。無料でも十分使える。日本語版がないのが残念だがいろいろ触っているとかっこよく編集できる。
http://www.befunky.com/

【PHOTOX】
ブラウザ上で画像編集ができるツール。一般的な画像編集ソフトをオンライン化したもの。
http://photox.linkstudio.biz/

■3.シミュレート

【iPhoneシミュレーター】
iPhoneSDK に含まれるツール。技術者向けのため導入が難しい。再現性は本家であるので高い。Macのみ。
http://developer.apple.com/iphone/index.action

【Androidシミュレーター】
AndroidSDK に含まれるツール。技術者向けのため導入が難しい。再現性は本家であるので高い。様々なOSで利用可能。
http://developer.android.com/sdk/index.html

【FireMobileSimulator】
ブラウザFireFoxのアドオン。モバイル用シミュレータで有名。導入は簡単。FireFoxのインストールが必要。レンダリングエンジンが異なるため実機と異なることがある。Viewportのinitial-scaleが効かない。様々なOSで利用可能。
http://firemobilesimulator.org/

【Mobilizer】
Adobe Air により作成されたツール。Andoridには対応していないが、海外製のいくつかのスマートフォンに対応している。導入は簡単。よく再現できている。キャプチャも簡単に撮れる。Viewportのinitial-scaleが効かない。様々なOSで利用可能。
http://www.springbox.com/mobilizer/

【iBBDemo2】
ブラウザSafariを利用したiPhone用のシミュレータ。比較的導入が簡単。Safariのインストールが必要。レンダリングエンジンがiPhoneとほぼ同じためリアルに再現。横向きも可能。Viewportのinitial-scaleが効かない。様々なOSで利用可能。
http://www.puresimstudios.com/ibbdemo/

これらを利用してよりリッチなスマートフォンサイトを作りましょう。