新人WEB担当者必見！今さら聞けないレスポンシブ
投稿者：セールスマーケティング部
2017/02/15 16:24
この記事は約4分で読むことができます。
「モバイルファースト」という言葉をご存知でしょうか？
これは、“ユーザーやコンテンツを第一に考えたサイトであること”、“サイトの使い勝手を考える際、モバイル（スマホ）での使いやすさを常に優先的に考えること”を指します。
では、そもそもなぜこのような考え方が出てきたのでしょうか？
2015年1月～9月のアクセス数を元に、月平均値を調査したところ、スマホからのサイトアクセルは6割を超えており、特に若年層をターゲットとするネットサービスのアクセスシェア率は、モバイルが7割や中には9割にも及ぶなど、モバイルユーザーが圧倒的に多いということがわかります。
このことから、PCを主体として考えるよりもモバイルユーザーを主体として考える「モバイルファースト」という考え方が浸透してきたということになります。
モバイルのシェア率をわかりやすく紹介！
（http://www.similar-web.jp/blog/archives/3985）
しかし、PCサイトの運用だけでも大変なのに、モバイルサイトもなんてムリ!!
という方も多いのではないでしょうか？
そこで、開発された技術が今回のテーマ「レスポンシブ」です。
レスポンシブって何ができるの？
レスポンシブデザインとは、ユーザーの各端末のウィンドウサイズに合わせて、自動的にページデザインを最適化する技術のことです。
前述したとおり、今はサイトを作ると一口に言っても、PCにやモバイル、タブレット、テレビ……と様々なサイズのディスプレイに合わせる必要が出てきています。
こう言われると難しく感じてしまいますが、すべての情報を表示していることには変わりなく、違いがあると言えばディスプレイサイズ（ウィンドウサイズ）の大小だけなのです。
つまり、横幅の違いを認識して表示方法を変更できれば解決なのです!!
レスポンシブってどうやって作るの？
レスポンシブは異なる横幅のディスプレイに合わせ、単一のHTMLの表示をCSSのmedia queriesで切り替えることによって、最適化します。
そのため、HTMLファイルやjsファイルは従来のように単一のものでよく、CSSの記述のみ、
横幅指定した範囲内にそれぞれ記載仕分けることになり、
運用上テキスト修正等が入ったとしても、複数修正する必要がなくなります（便利！）。
具体的なCSSの記述はこのようになります。
@media(min-width:769px){
横幅が770px以上のデザイン（PCデザイン等）
}
@media(max-width:768px) and (min-width: 321px){
横幅が320px以上、769px以下のデザイン（タブレット等）
}
@media(max-width:320px){
横幅が319px以下のデザイン（スマホの縦のデザイン等）
}
このように、CSSを書き換えることで管理していきます。
では実際レスポンシブで組まれたサイトを見てみましょう！
■ネクストカラーズ
http://nextcolors.com/
■タカサ
https://www.takasa.co.jp/
■十和田市現代美術館
http://towadaartcenter.com/
いかがでしょうか!?
このように表示の自由度も高く、ユーザーとしては見やすくておしゃれなサイトになっていますね（※注：動きのあるもに関しては、jsの記述変更が必要なものもあります）！
レスポンシブを組むためのフレームワークいろいろ
とは言っても、１から勉強して組むのは大変……
という方に便利なのが「フレームワーク」です！
その名の通り、レスポンシブを組むためのある程度のフレーム（テンプレのようなもの）を用意してくれており、それを流用して、ゼロから作るより簡単にレスポンシブコーディングができます。
種類もたくさんあり、それぞれ特徴があるので
あなたが使いやすいものを見つけてみてくださいね！
1.Bootstrap
http://getbootstrap.com/
ライセンス：MIT
2.Pure
http://purecss.io/
ライセンス： Yahoo BSD
3.Foundation
http://foundation.zurb.com/
ライセンス：MIT
4.Material UI
http://callemall.github.io/material-ui/#/
ライセンス：MIT
5.Web Starter Kit
https://developers.google.com/web/tools/starter-kit/
ライセンス: Apache License 2.0
【編集担当：鈴木】
