レスポンシブデザインについてですが、私自身、興味があったものの現在は、Webマーケティングの仕事をしていることから、あまり接点がなく放置していたんですが、最近では個人的な制作依頼でも普通に「レスポンシブでお願いします」と言われたりします。
ということで少し、レスポンシブデザインについて考えてみました。
レスポンシブに対応するための最低条件とは？
メディアクエリでcssの振り分け
まず大きく3つのデバイスに分けて…pc、タブレット、スマホのそれぞれに対応させたいcssを読み込ませます。横幅によって読み込むcssを変えるということです。※幅の区切りをブレイクポイントと呼びます。
もちろん、ひとつのcssにまとめて書いても大丈夫です。（メディアスクリーンで囲っていない箇所については共通のスタイルとなります）
/* ===========================================
pc
=========================================== */
@media screen and (min-width: 961px) {
/* 横幅961px以上の場合に適応させたいcssをここに */
}
/* ===========================================
タブレット
=========================================== */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/* 横幅641px以上、960px以下の場合に適応させたいcssをここに */
}
/* ===========================================
スマホ
=========================================== */
@media screen and (max-width: 640px) {
/* 横幅640px以下の場合に適応させたいcssをここに */
}
これを見てわかるように、タブレットは対応させないという場合は、ブレイクポイントを横幅640px以下はスマホ用、それ以上はpc用として設定します。
ビューポートの設定
先ほどのcssを各デバイスに振り分けるためには、下記タグをヘッダーに記述します。
<meta name="viewport" content="width=device-width">
これによって、「コンテンツの幅はデバイスの幅」と認識され、各デバイス用のcssが読み込まれるわけです。
“viewport”についてはフォントサイズなど色々と設定ができるので、また別で記事にしたいと思います。
大枠以外の固定幅に対しては、要素の固定幅 ÷ 大枠の固定幅 × 100で出た数値を%でwidthに入れる
こちらは、可変に対応させるということから、画像サイズや余白を%表示に変換させて対応します。このマージンの%表示をフルードグリッド、画像サイズの%表示をフルードイメージと呼びます。
さて、これで最低限レスポンシブデザインに対応したことになりますが、プレビュー表示してみると、フォントサイズなどは見やすくなったと思います。ですが次に問題なのはカラム対応です。
各デバイスに対応させるためには大きく2通りの方法があります。
1つは、元々htmlに書いてあったクラス名などをデバイスに振り分けたcssで書き換える方法です。例えば、
<header> <h1>ページタイトル</h1> </header>
とあった場合、cssを
@media screen and (min-width: 961px) {
header h1 {margin:10px 0 0 0;}
}
@media screen and (max-width: 960px) {
header h1 {text-align:center;}
}
と指定してみると、横幅が961px以上と、それ以下のデバイスに振り分けて表示させることができます。
もうひとつの方法は、同じクラス名でcssを構築することが困難な場合など、htmlの方で、pc用とスマホ用のそれぞれ記述して、振り分けたcssで表示させたくないクラスを非表示にする方法です。
@media screen and (min-width: 961px) {
header h1 {margin:10px 0 0 0; display:block;}
}
@media screen and (max-width: 960px) {
header h1 {display:none;}
}
以上がレスポンシブデザインに対応するかなりおおざっぱな概要ですが、これふまえて、こちらを見ていただきたい。
日本のネットショッピングにおけるモバイル使用率49％、世界的に見ても高い
こちらを見て、日本が他国と比べてスマホのシェアが多いことがおわかりいただけると思います。このことから今すぐでもスマホ対応にするべき！と思いますが、業種によってはスマホからの申し込みや購入のcvrが極端に低く、ほとんどがpcからのcvだとしたら…？困りますよね？
恐らくそれでもスマホに対応するべきだと私は思います。
ですが、その際に気をつけたいところが…
- サイトの訪問デバイスのシェアを調べる
- 各デバイスからのcvなどを考慮して、ユーザーをセグメント化する
- rssやPocketなどでpcにトラフィックを送ることを意識する
など、ただやみくもにレスポンシブに対応するのではなく、自身のサイトの状況をよく見て判断し、施策を打ち、レスポンシブに対応していけば、よりよい効果が獲られるのではないでしょうか？
