My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

レスポンシブサイト制作で役立つツールまとめ (6選)

f:id:sntkk3:20171217214801p:plain
Blisk

レスポンシブサイト制作時に役立つおすすめツール6選

今日は、レスポンシブサイトの制作に役立つツールをピックアップしてみました。

いずれも、PC上からスマホタブレット等の各種デバイス表示が確認でき、制作の効率化に大いに役立つツールです。

以下よりご紹介させていただきます。


1) Chrome Developer Tool

おなじみChrome Developer Toolのエミューレーション機能です。
f:id:sntkk3:20171217214808p:plain

[ 使い方 ]
1. 対象サイトをChromeで表示します。
※ 使用例としてニトリさん ( https://www.nitori-net.jp/store/ja/ec
)のサイト閲覧時の画像を使用させていただいております。

2. ページ上で右クリック > 「検証」を選択するか、[Ctrl]+[Shift]+[I] でディベロッパーツールを起動します。

3. Toggle Device Toolbar をクリックします。
f:id:sntkk3:20180102160218p:plain

4. ページ上部のResponsive デバイスを選択します。
(ここでは、「iPhone 6 Plus」を選択しています)

⇒選択デバイスに応じた画面レイアウトが表示されます。

2) Blisk

Web開発者向けブラウザということもあり、デバイスごとの画面の比較、要素の検証の使い勝手がとても良く、便利です。
ダウンロード元URL:https://blisk.io

Bliskの場合、対象URLをブラウザのアドレスバーに入力すると、モバイル画面とPC画面の両方が一度に確認できます。

Blisk 使用例画面 (1)
f:id:sntkk3:20171217214834p:plain

Blisk 使用例画面 (2)
f:id:sntkk3:20171217214801p:plain

Bliskについては、以下記事でもご紹介していますので、併せてご参照ください。
times-diary.hatenablog.com


【参考】
Web開発者必見!高速でCSSレンダリングが可能なFirefox Developer Editionとは?|ferret [フェレット] :
https://ferret-plus.com/8624


3) XRespond – Virtual Device Lab

以下サイトにアクセスして使用します。
URL: http://app.xrespond.com/

f:id:sntkk3:20171217214818p:plain
※ 使用例としてニトリさん ( https://www.nitori-net.jp/store/ja/ec
)のサイト閲覧時の画像を使用させていただいております。

[ 使い方 ]
1. XRespond – Virtual Device Lab ( http://app.xrespond.com/ ) にアクセスします。

2. アドレスバーに対象サイトのURLを入力します。

3. [LOAD URL] ボタンをクリックします。

標準でも、
iPhone5に始まり、様々なデバイス20種類に対応。
幅×高さ 任意指定やデバイスの追加も可能。

[ 特徴 ]
スマホタブレット、PCの各種デバイス表示が一度に確認できるところが便利です。

XRespond 使用例画面
f:id:sntkk3:20171217214908p:plain

[ 一言コメント ]
レスポンシブサイトの確認に「すごい便利」と思ったけど、
指定URL先のファイルが index.php だと表示されないようです。

4) Responsive Design Checker

以下サイトにアクセスして使用します。
URL:http://responsivedesignchecker.com/

f:id:sntkk3:20171217214849p:plain

[ 使い方 ]
1. Responsive Design Checker ( http://responsivedesignchecker.com ) にアクセスします。

2. 「Enter you URL here」 に対象サイトのURLを入力します。

3. 「GO」ボタンをクリックします。
f:id:sntkk3:20171217214901p:plain
※ 使用例としてニトリさん ( https://www.nitori-net.jp/store/ja/ec
)のサイト閲覧時の画像を使用させていただいております。


[ 特徴 ]
対応デバイスが豊富、任意サイズ指定にも対応可能。
MENUには、レスポンシブデザインの作り方解説あり。

任意サイズ指定にも対応可能

[ 一言コメント ]
こちらも前のツールと同様、
表示されるのは、HTMLページのサイトのようです。
※index.phpの表示はできないようです。


5) モバイルフレンドリーテスト

Googleが提供しているツールです。
URL: https://search.google.com/test/mobile-friendly

[ 使い方 ]
1. 画面中央のアドレスバーに確認したいサイトのURLを入力します。
f:id:sntkk3:20171217214828p:plain

2.「テストを実行」ボタンをクリックします。
 すると、以下のようにモバイル画面が表示されます。
f:id:sntkk3:20171217214921p:plain
※ 使用例としてニトリさん ( https://www.nitori-net.jp/store/ja/ec
)のサイト閲覧時の画像を使用させていただいております。

こちらのツールの場合、index.php のページも表示可能です。


6) Emmet Re:view

Chrome 拡張ツールです。
f:id:sntkk3:20180122195559p:plain

提供元: http://emmet.io/
ダウンロード元URL:https://chrome.google.com/webstore/detail/emmet-r
eview/epejoicbhllgiimigokgjdoijnpaphdp

[ 使い方 ]
1. 上記サイトにアクセスし、「Chromeに追加」を実行します。

2. 確認したいサイト表示中にこの拡張ツールを実行します。


[ 特徴 ]
機能的には、前述のXRespond に似ています。
Breakpoints View Device Wall (デバイスごとの横長表示一覧)の2通りの表示方法が可能です。
Presets では、標準選択肢にない任意デバイスの登録もできます。

[ Breakpoints View ]
f:id:sntkk3:20171217214841p:plain

[ Device Wall ]
f:id:sntkk3:20171217214941p:plain
f:id:sntkk3:20171217214949p:plain

※ 使用例としてニトリさん ( https://www.nitori-net.jp/store/ja/ec
)のサイト閲覧時の画像を使用させていただいております。


以上、レスポンシブサイト制作に役立つツール6選でした。