スマートフォンサイトの制作案件が年々増えてきました。
自分自身もスマートフォンサイトを見るのに慣れてきたので、ネットサーフィンしてる時にスマートフォンサイトがないと「なんだよーPCサイトだけかよー」と思ったりします。
スマートフォンサイト制作でよく使うツール等を少し紹介します。
スマートフォンの表示をする User Agent Switcher
PCブラウザに、スマートフォンからアクセスしているように思い込ませるChromeのアドオンです。
PCのブラウザから「/sp/」とか「sp.」とかスマートフォンディレクトリやドメインにアクセスしてもPC版にリダイレクトされる時ありますよね。そういう時に便利です。
スマートフォンサイトは作り方によって、横幅を100%表示したり、画面をzoomして引き延ばしているので、Chromeで見た時に見にくくなってしまいます。このアドオンではディスプレイサイズを変更できないので少し不便な部分もあります。
・windowsでもスマートフォンの表示を確認したい!chromeのアドオン「User-Agent Switcher」が便利 - emuramemo
ダウンロードはこちらからです
・Chrome Web Store - User-Agent Switcher
Chromeの開発ツールでコーディング画面を見やすくする
ChromeのF12で出てくるおなじみツール。FirefoxでいうFirebug的な優秀ツールです。個人的にFirebugより好きです。
これをスマートフォン制作で使うときにとても便利な表示ができるのです。
開発ツールの右上の四角いアイコンのボタンをクリックしながら選択します。
そうすると、開発ツールが横並びレイアウトになり、画面がちょうどスマートフォン風になってとても作業しやすくなります。
スマートフォン版Yahooにアクセスして、横並びレイアウトで開発ツールを表示した状態。ページが縦長で表示され、ソースを見るのも快適。上記のUserAgentSwitcherのディスプレイサイズ問題が解消できます。
スマートフォン実機で確認する QR-Code Tag Extension
現在開いているタブのURLをQRコードに変換してくれるChromeのアドオンです。
これをスマートフォンのバーコードリーダーアプリで読み取ればそのURLにアクセスできます。
やはりPCだけではチェックしきれない部分がありますのでしっかり実機でもチェックしましょう。
・Chrome ウェブストア - QR-Code Tag Extension
あれば便利なもの
デュアルモニタ
片方にスマートフォンサイト、もう片方にPCサイトやデザインpsdを表示しながらコーディングするとチェックが簡単にできて快適です。作業速度が速くなるかはわかりませんが、とにかく快適。最高です、デュアルモニタ。

BenQ 24型ワイドディスプレイ(5ms/フルHD/HDMI×1) GL2460HM
- 出版社/メーカー: ベンキュージャパン
- 発売日: 2013/06/21
- メディア: Personal Computers
- この商品を含むブログを見る