[Web Design] Screensiz.es – スマートフォン、タブレット、PCの各機種ごとのディスプレイサイズ一覧サイト
スマートフォンやタブレット、PCなどの各種デバイスごとのディスプレイ解像度を一覧できるサイト。3つのカテゴリをそれぞれ抽出でき、メジャーなガジェットの解像度とインチ数などを確認できます。このサイト素晴らしいのが一番右にある「Pupularity」という数値。その端末がどれだけメジャーなのかが数値で分かります。モバイルサイトやアプリを作る際にとっても役に立ちそう。
Tag Archives: MobileSite
[Framework] Topcoat – フラットUIのCSSフレームワーク
最近流行りのフラットUIなCSSフレームワーク。PCとMobileの双方に対応できるようです。サイトではPCとMobileそれぞれのパーツ一覧の実動デモがあり、本文、見出し、カラー指定、アイコン、ボタン、パンクズ、ドロップダウン、リンク、トグルスイッチ、フォームパーツ、スライダー、スピナーなどの各種パーツを見る事ができます。一通り揃ってる感じのアレですね。フラットUIにしてはちょっとコッテリ目で、いかにもMetroな感じではなく使いやすそうな印象を受けました。
[Mobile Site] 10 Best Mobile Browser Framework For Developers – モバイルブラウザー向けのフレームワーク
モバイル端末向けのサイト制作時に便利なフレームワークをまとめた記事。全部で10個のフレームワークが紹介されてます。Zepto、Sencha Touch、jQuery Mobileあたりは知ってるけど他のはまるで知りませんでした。それぞれ得手不得手があるだろうから、この手の仕事する際にの参考になりそう。モバイルサイトだとPCと違ってスワイプ動作とか色々ありますからな。
[UI Design] INTERFACE SKETCH – MobileAppのプロトタイピングに便利なPDF
モバイルサイトやアプリ制作の際に便利なPDF。サイト内にはiPadやiPhone、Android、Windows Phoneなどの各種モックアップのベースとなるPDFが紹介されてます。それぞれA4とUS Letterサイズで素材として配布されていて、自由にダウンロードできます。印刷すればプロトタイピング（ワイヤーフレーム制作）に使えます。モバイル端末だけでなく、PCを想定したブラウザウィンドウのものもあるので、ローカル内にPDF一式用意しておくと便利っすね。Webデザイナーやアーキテクト関連の仕事してる人におすすめ。
[Software] Adobe Shadow – モバイル環境でのブラウザ確認補助ツール
Adobeが出したAdobe Shadowというツールがなかなかイケてます。簡単に言えばWebサイトをモバイル環境で確認するための補助ツール・デバッグツールというものなんですが、モバイルデバイスを対象にしたサイト制作時にものスゴく役立ちそうです。使うにはまずiPhoneやAndroidなどの確認側に専用のアプリをインストール。次にAdobe ShadowのPC用クライアントアプリをインストール（Mac版とWin版があります）。そして3つめにGoogle Chrome用のエクステンションを追加。
ソフトウェアの準備が出来たら次は設定です。PC用クライアントを立ち上げた状態でChromeから「Sd」ボタンを押下するとパスワードを求められます。このパスはモバイルデバイスでAppを立ち上げれば出てくるので、そいつを入力。認証は初回だけで、2回目からは必要ないです。この認証の際に注意する事は、PCとモバイルデバイスが同一ネットワーク上にある事。Wi-Fiを使ってコネクトするため、別のネットワーク上にあるとお互いが見えなくなります。
以上で準備は完了。あとはChromeで任意のサイトを見るだけ。PC側で見ているサイトがモバイルデバイスにも1秒ほどのタイムラグで表示されます。ここで表示されている情報は、PC版Chromeで表示されているそのままの絵ではなく、URL情報だけをモバイルデバイスに送信し、モバイル側でレンダーされたもの。今までだとモバイルサイト作ってアップしてURLをメールか何かでiPhoneに送って、それからブラウザ確認・・・という手順だったものが、Chromeでサイト開くだけで済むようになります。
またFirebugのようなデバッグツールも内蔵されているので、サイトのレイアウト崩れの際にも役だってくれそうです。多少準備は面倒だけど、Webのコーディングに関わる人なら持ってて損はないなかなかホットなツールかと。
[Web Design] 30 Fresh Web UI, Mobile UI and Wireframe Kits – ウェブやモバイルウェブ制作で使えるUIキット、あとワイヤーフレームキットも
ウェブデザインやモバイルウェブ制作で使える、UIキットやワイヤーフレームなどの素材がまとめられた記事。Fireworksのライブラリ、Keynote用のステンシル、パワーポイント用の素材、PSDフォーマットのボタンパーツなどがあります。また記事後半では各種スマートフォンの外観やUIを含めたPSD・PNGの素材が多数用意されていて、モバイルサイトやアプリの開発に役立ちそうです。もちろんiPadやGalaxy tabなどのタブレット端末の素材もあります。コレ系の素材まとめ記事としてはなかなかホットです。
[WEB DESIGN] Mobile Awesomeness – よく出来たモバイルサイトまとめ
よく出来たモバイルサイトの投稿サイト。モバイルサイトとは言ってもいわゆる日本のケータイサイトではなく、スマートフォンを対象としたもの。iPhoneユーザーならだいたいピンときますよね。スマートフォンからアクセスがあった時はこっちのCSSを読ませて・・・みたいな事をするサイトって最近増えてきたけど（ウチもそう）、そんな時にインターフェースデザインの参考になりそうです。