皆様こんにちは。澤田です。最近はどんどん夏の気配が消えていき、すっかり秋の気温になってきましたね。
さてさて、今回はレスポンシブWebサイトの表示確認に便利なツール・Webサービスをご紹介します。
Webサイト制作を依頼する立場の方などは、社内で情報を共有するため社内会議でプレゼン資料でが必要になることもありますよね。レスポンシブサイトの資料を作るとき、プレゼン資料でスマホ、タブレット、PCの形にはめた図をいちいち用意するのは面倒！ですよね。
サイトを制作する立場の場合は、レスポンシブWebデザインは複数の解像度に対応しているため、複数デバイスでの確認が必要になります。制作する側の人も、ちょっとしたデザイン変更の確認でいちいちスマホ実機を見るより、まとめて表示確認ができると便利ですよね。お客様へ複数デバイスでの表示キャプチャーを送ることも少なくないと思います。
そんなときに便利なツールがないかな〜と思い調べてみたところ、いろいろなWEBサービスがありましたので、ご紹介いたします。
表示確認や比較に便利なツール
複数デバイスでの表示確認や、比較をしたいとき、またはまとめて表示プレビューを確認したいときに便利なツールをまとめました。
どちらかと言えばサイト制作者向けですが、一つの画面で複数デバイスのプレビューが閲覧できるサイトも多いので、
キャプチャをとることで複数デバイスでの表示画像をまとめて作成することができ、プレゼン資料にも使えます。
Responsinator
スマートフォン・タブレットでのプレビューを見ることができます。いくつかのデバイスの解像度に合わせたプレビューが表示され、iPhone5,iPhone6,Android,iPadでのプレビューが閲覧できます。スマホやタブレットなどの実機のイラストの中にWebサイトが表示されるので、視覚的にもわかりやすいです。 イラスト枠の中でスクロールすることもできるので、実機での閲覧に近い感触で見ることができます。
juce’r
iPhone4,Android,iPadでのプレビューを閲覧できます。プレビュー画面内での操作も可能です。
上記のResponsinatorよりもデバイス枠がリアルなので、デザイン確認と一緒にスクリーンショットなどを撮ってプレゼン資料に使用するのもいいかもしれませんね。
mattkersley
URLを入れると複数の解像度でのプレビューを一度に閲覧できます。表示される解像度は、240×320,320×480,480×640,768×1024,1024×768の5種類です。最初にプレビューを表示したときは全解像度のheightは同じですが、ページ右上のラジオボタンでWidth only と、Device Sizeが選択できます。 小さなスマートフォン、iPhone、小さめのタブレット、iPadの縦向き・横向きのプレビューを見ることができます。横並びで表示されるので、違うデバイスで見た時との見比べもしやすいですね。横スクロールなので操作には少し注意が必要かもしれません。
screenfly
こちらはプレビューが閲覧できる解像度の種類が豊富です。タブレットはiPad、kindle、Galaxy Tab、Nexus7、スマートフォンはiPhone、Android、Galaxyだけでなく、MotorolaやBrackBerryにまで対応しているのがすごい！ただし、上記のmattkersleyやresponsinatorと違い、一画面に表示されるのは一つの解像度のみなのはまとめて閲覧したい場合には不便かもしれませんが、ページ上部のアイコンですぐにプレビューを変えることができます。操作する手間はかかりますが、より多種類のデバイス表示を確認したい時にはいいかもしれませんね。
RWD Tester
この手のツールは外国語サイトが多いですが、こちらは日本語サイトです。 ボタン一つで縦向き・横向きが切り替えられるのがちょっとしたことながらも便利です。
ish
ブラウザ上でサイズを変更できます。S,M,L,FULLサイズのほか、数値入力での変更も可能です。プレビュー画面右端にマウスをのせると可変カーソルも出てくるので、ドラッグでも変更できます。実用性があるのかは少しわかりませんが、「DISCO」や「HAY!」というボタンも押すとちょっと面白いかも。（サイトトップにDISCOモードやHAYモードの説明があるようですがうまく翻訳できずちょっとわかりません…）
deviceponsive
iPhone,samsung,kindle,iPad,macbookでの表示が確認できます。タブレットのプレビューはiPadがほとんどな印象ですが、こちらはkindleのプレビューもあります。 画面内での操作ができ、プレビュー枠もリアルなのでプレゼンや資料にも使えそうですね。 すっきりしていてプレビューの邪魔にならない見やすいサイトデザインで、個人的には好みです。
かっこいいモックアップ画像が欲しい！そんなときはこのツール
サイトイメージを実機のフレームにあてはめた画像が作成できるWebサービス。デスクに置かれたPCや、手に持ったスマートフォンでサイトを閲覧しているかのようなモックアップ画像の作成には以下のサービスが便利です。前述したWebサービスとは違い、モックアップのフレームにはめ込むための、ホームページのスクリーンショット等キャプチャー画像を用意する必要がありますが、スマートフォンの写真素材を用意して、サイトのキャプチャ画像を用意して、Photoshopではめこんで…とするよりは断然簡単で時間短縮にもなりますよね。
実際に閲覧したときに近い画像を作成できるので、レスポンシブWebサイトがいまいちピンとこない方にとってもわかりやすいサンプル画像になります。
かっこいいモックアップ素材をうまく使えば、プレゼン資料のクオリティもぐっと上がって見えますよ。
frame
フレームは36種類あり、手に持ったスマートフォンやおしゃれなデスクに開かれたPCでサイトを閲覧しているイメージが作成できます。
イメージが綺麗です。
mockuphone
スマートフォンのモックアップ画像を種類豊富にとりそろえたWebサービスです。スマートフォンが多いですが、iPadやTV、imacのモックアップもあります。
以前私が使った時はiPhone 5s発売直後だったため、まだiPhone 5sのモックアップ画像がなかったのですが、現在はiPhone 6 Plusまで用意されています。対応デバイスの更新がされているようですので、近々iPhone 6sのモックアップも導入されるのでは、と期待しています。
Dunnnk
様々な日常のシチュエーションがフレームとなっており、生活感のある写真が多いです。
日常的に利用するアプリやWebサイトのモックアップにマッチしそうですね。
こちらのサイトはApple Watchまで対応しています！
画像作成がとても簡単で、一覧の中から使用したい画像のサムネイルを選択するとはめこみ画像アップロード画面になり、ぽん、ぽん、とクリックだけでモックアップ画像が作成できます。
おわりに
Web制作者も、企業担当者も雑多な時間や資料作成にかかる時間はなるべく短縮したいですよね。表示確認用のツールでまとめて複数デバイスの挙動を確認したり、モックアップ画像を短時間で用意ししたり、効率的に質のいいものを制作できるよう、使えるものはどんどん利用するのが理想的ですね。 かく言う私はなかなか業務の効率化ができず、結果、非効率的な方法をとって時間短縮に失敗していることが多いのですが、、、探すとけっこう便利なWebサービスがたくさんあるので、うまく利用していきたいものです。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。