最近なにかと忙しくあまり釣りに行けてないなと思ったら
シーズンオフしてしまいそうで悲しいです。
デザイナーの小島です。

スマホサイトが定着してきて、最近ではPC表示のみのサイト制作も少なくなってきました。
そこで今回はスマホサイトをデザインするときに個人的に必須のツールをご紹介します。

Adobe Preview

https://itunes.apple.com/jp/app/adobe-preview-cc/id973272286?mt=8

弊社ではデザイン時はPhotoshopを使っていますが、デザインしながら実機で表示確認できるので超便利です。
Creative CloudでPCとスマホを同期してスマホをPCにUSBで繋ぐとすぐに使えるのでPC繋ぎっぱなしの起動しっぱなしです。

ただし、Photoshopの動作が若干遅くなるので繋ぎっぱなしは嘘です。
要所要所で使うと良い感じです。

QRコードリーダー for iPhone & The QR Code Extension

Adobe Previewも良い感じなのですが、ブラウザ枠が出ないので、完成系と同じ感覚でみるためには、やはりサーバーアップしてスマホのブラウザで見る必要があります。
そんなわけで手っ取り早くみるのにQRコードが必要ですがいろいろ使った結果、これが最強です。

QRコードリーダー for iPhone
https://itunes.apple.com/jp/app/qrkodorida-for-iphone/id585561686?mt=8

バカみたいに読み取りが早いです。
もう、QRコードの全体を写す前に読取っちゃうくらい早いです。
そして読み取り後もSafariで起動できるので一部のURLをコピーしなきゃいけないアプリとかよりも良いです。

The QR Code Extension
https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

Google Chromeの拡張機能ですが、開いているページを瞬時に大きなQRコードで表示してくれるので超便利です。

Googleフォト

https://photos.google.com/?hl=ja

サイズ感とかを参考にしたいときに、スマホでキャプチャを撮ってPCに送りたい時、スマホとPCを同じアカウントでログインすれば、メールとかで送る必要もなく、直接ダウンロードできて超便利です。

User-Agent Switcher for Chrome

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja

ささっと確認したい時はユーザーエージェントを変えてみます。
いろいろあるけれど、個人的にはこれが使いやすくて好きです。

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

後輩の小河原に教えてもらいました。後輩に教えてもらったというのが癪に障りますが。
ブラウザ上のフォントやサイズなどを表示してくれる拡張機能ですが、ユーザーエージェントを組み合わせるとスマホ時のフォントサイズもわかるので良い感じです。

とりあえずこの辺りは常に使っていますが、また何かあれば追記します。