お久しぶりです。なべしです。

先日、スマートフォン対応サイト制作にフォーカスした「CSS Nite LP, Disk 27」に参加してきました。

このセミナーを受けて印象に残ったスマホサイトを制作する上でのオススメツールを5つ今回のブログでは紹介したいと思います。

1. POP -Prototype on Paper-

ウェブサイトやアプリを設計する際に、

スケッチをしながら画面遷移などを考える開発手法を

「ペーパー・プロトタイピング」と言うのですが

この手法がスマホ上で簡単にできてしまうアプリがあるんです。

 

それがこちらの「POP -Prototype on Paper-」

流れは簡単！以下の3ステップ

1. 紙にイラストを書く

2. それを写真に撮る

3. アプリ上でシミュレーションを行う

 

[動作デモ]

おもしろそうー☆

操作感もいい感じなのでぜひ触ってみてください～

 

 

2. Adobe Edge Inspect

複数のスマホやタブレットとPCブラウザ(Chromeのみ)を

ワイヤレスで繋ぐAdobe Edge Inspect

Web制作者の間では、言わずと知れた(？)神ツールです。

Adobe Creative Cloudの利用する必要があるのですが

ブラウザの同期表示、デバック、スクリーンショットがお手軽にできてしまうのでかなり効率的に作業ができます。

[slideshare id=17550990&doc=debugwithadobeedgeinspect-130323073924-phpapp01]

 

3.Easy Switch Keyboard

先程の神ツール「Adobe Edge Inspect」を使えば違うデバイスでも同時に表示ができるのですが、

パスワード入力などは個々のデバイスに持ち替えないといけません（めんどい。。）

そこで役立つのが、PC、タブレット、スマホをスイッチで切り替えて利用できるこちらのワイアレスキーボード

このキーボードはファンクションキーを押すだけで入力切り替えができるんです。

[紹介ムービー]

Mac

Windows

 

4.Developers AppKitBox

年々増え続けるデバイス、メーカーによっても異なる仕様…

皆さん、Androidの検証って正直大変ですよね。。？

そんな問題を解決してくれる(？)のがこの「Developers AppKitBox」

リモートによるAndroid実機検証機能を備え、

有料(一部無料)ではありますが、スマホの実機検証機能をこのサービスのみで行えるというのは
時間とコストの大幅な削減になると思います。

 

5. Fontello

昨今、多くのウェブフォントやアイコンフォントを使うサイトはますます増えていますが

こちらののサービスでは、様々ななアイコンフォントの中から、必要なアイコンだけを選択して、
自分だけのフォントファイルを作成できるのです。

オシャレなフォントが多い！！

自分でカスタマイズできるっていうのが良いですね♪

こちらのブログでも紹介されていました。

 

…と、まぁ若干偏っている感はありますが

皆さんもオススメツールがあればぜひおしえてください☆