Web制作に役立つ、レスポンシブデザイン系CSSツールについてまとめました。Webデザイナーやエンジニアの方を中心に、日ごろの制作で活用していただければと思います。
レスポンシブデザインの基本
ツールの紹介に入る前に、レスポンシブデザインとはどういったものなのか簡単に復習しておきましょう。
レスポンシブデザインとは？
ご存じの通り、現在ではWebページをスマホ対応することは必須とも言えます。Googleなどの検索エンジンもスマホ対応してあるページを好みますし、スマホやタブレットが普及した現在ではユーザビリティの向上にもなるのです。
Webページをスマホ対応するにはいくつかの方法がありますが、その中でも最も有力な方法はレスポンシブデザインです。レスポンシブデザインとは、デバイスのディスプレイサイズ（横幅）によってページのデザインを切り替える方法のこと。ページあたりのHTMLは一つで、デバイスごとにCSSを切り替えているのです。
レスポンシブデザインを採用することには、いくつものメリットがあるのです。主なメリットは下の通り。
- HTMLが一つで済むため、制作工数が減らせる
- 修正箇所が減るため、改修にかかる工数が減らせる
- 制作コストが減らせることがある
- SNSでの拡散に強い
これだけでなく、検索エンジン最大手のGoogleもレスポンシブデザインを推奨しています。Googleはモバイルフレンドリーと呼ばれるスマホ対応の基準を公開しているのですが、スマホ対応の方法としてレスポンシブデザインが最適だと言っているのです。Googleの基準に合えば検索エンジンでの上位表示が狙えますから、そういった点でもレスポンシブデザインを採用すべきだと言えるでしょう。
なお本ブログでは、下記の記事でもレスポンシブデザインについて取り上げています。こちらの記事も参考にしていただければと思います。
レスポンシブデザインを導入する方法とは？
下の記事でも解説していますが、レスポンシブデザインを導入するにはCSS3のメディアクエリを使います。この方法については、下の記事で解説しています。
» レスポンシブデザインでスマホ対応させる方法（CSS3、メディアクエリ）
また上で述べたように、レスポンシブデザインはスマホ対応では最も利用されている方法です。レスポンシブデザインに対応したHTMLテンプレートや、WordPressテーマも多数知られています。ゼロからコードを書かなくても、そういったテンプレートを活用するのも手でしょう。
レスポンシブデザイン系のツール6選
レスポンシブデザインの基本や導入方法について解説をしてきました。上で述べたように、レスポンシブデザインを導入するにはCSSを書く必要があるのですが、そういった業務を効率化できる方法があります。ツールを活用するのです。
ここからは、レスポンシブデザインの制作に役立つツールの紹介をしていきます。案件の内容やご自身の開発スタイルに合わせて、積極的に活用していきましょう。
Responsive Image Breakpoints Generator
» Responsive Image Breakpoints Generator by Cloudinary
レスポンシブデザインでは、デバイスごとにCSSを書く必要があります。さらにCSSだけではなく、画像ファイルもデバイスごとに準備をしなければいけません。
Responsive Image Breakpoints Generatorは、画像をアップロードするとデバイスごとに画像ファイルとCSSコードを生成してくれます。
embedresponsively.com
Responsive Image Breakpoints Generatorは画像のためのツールでしたが、こちらは動画をレスポンシブに対応させるためのツールになります。
YouTubeやVimeo、Dailymotionなどの動画をページに埋め込む時に役立ちます。embedを使って動画にページを埋め込む時のコードを生成してくれます。
レスポンシブWebデザインチェックツール | LIQUID DESIGN
» レスポンシブWebデザインチェックツール | LIQUID DESIGN
レスポンシブデザインのデバイスごとの対応具合がチェックできるオンラインツールです。URLを入力するだけで、デバイスごとの表示を確認することができます。
対応している端末はApple系の端末のみなのですが、iPhone5以降の幅広いデバイスに対応しています。対応している端末をリストアップしておきましょう。
- iPhone5
- iPhone6
- iPhone6 plus
- iPad Air
- MacBook Air（11インチ）
Responsive Checker ｜ レスポンシブデザイン検証サービス
» Responsive Checker ｜ レスポンシブデザイン検証サービス
レスポンシブデザインのWebページを制作する時には、デバイスごとの表示を確認しながら進めることが多いです。その時に役立つのがResponsive Checkerです。デバイスごとの表示が確認できるツールで、使い方も簡単でURLを指定するだけです。
残念ながら対応している端末は最新の機種ではないのですが、ランドスケープモード（横画面）にも対応していることが特徴としてあげられます。対応している端末は、下記の通りです。
- iPhone5 縦
- iPhone5 横
- iPad mini 縦
- iPad mini 横
- iPad 縦
- iPad 横
- Galaxy Tab 10.1 縦
- Galaxy Tab 10.1 横
- Xperia AX SO-01E 縦
- Xperia AX SO-01E 横
- HTC Aria 縦
- HTC Aria 縦
Demonstrating Responsive Design
» Demonstrating Responsive Design
こちらもレスポンシブデザインの確認ができるツールなのですが、海外のツールになります。対応しているデバイスは、iPhone（縦/横）とiPad（縦/横）、デスクトップの3種類。
UIがシンプルで、非常に使いやすいつくりになっています。細かくチェックするというよりも、表示具合をサッと確認したいときに向いているツールと言えるでしょう。
モバイル フレンドリー テスト – Google Search Console
» モバイル フレンドリー テスト – Google Search Console
Googleもスマホ対応を重視していると述べましたが、こちらのツールはそのGoogleが提供しているものです。Google独自のスマホ対応の基準、モバイルフレンドリーに準拠しているかをチェックできます。
URLを入力するだけでチェックできるので、使い方は非常に簡単。問題点も確認できるので、レスポンシブデザインの改善点を知るのにも役立ちます。
あとがき
レスポンシブデザインの制作に役立つCSS系ツールを6つ取り上げてご紹介しました。レスポンシブデザインは今では必須の方法なので、ツールを活用するなどして効率的に取り組んでいくようにしましょう。