レスポンシブWEBデザインには相対的な値を使う
PC・スマートフォンに対応したデザインを作ることは割と増えてきています。
スマートフォンの普及率が増したり、タブレットの様に使えるパソコンが出てきたりと、閲覧する画面幅がユーザーの環境によってかなり変わるので、それに対応する為にレスポンシブWEBデザインが増えているからなんです。
レスポンシブWEBデザインでホームページを作ろうと思ったときに「00pxなどの絶対的な数値」で考えてしまうと、多くの問題に直面します。
またスマートフォン専用ページを作る場合でも同様です。画面を縦横に傾けると画面が切り替わったり、機種によってサイズが違うのでそれぞれにピッタリ合った綺麗なデザインを作るのは慣れるまで大変です。
そんな時には「00%などの相対的な数値」で作ることを心掛けることで、いろいろな問題が解決できるようになります。
横幅1000pxの要素に3列のブロックを作るとき
絶対的な数値で考えると、それぞれの要素の余白を20pxとすると一つのブロック幅は320pxになりますよね。
この値はPCで見る場合には問題になりませんが、タブレットやスマートフォンで見た場合はどうでしょう・・・
横スクロールが出てしまったり、画面に収まりきらないのでレイアウトが崩れてしまいますよね。
メディアクエリで都度値を変えてもいいですが、画面にピッタリ収まるようにデザインしようとすると、横幅が1px変わる毎にCSSを書き換えなければなりません・・・それは現実的ではありませんね・・・
でも相対的な数値「%」を使えばどうでしょうか
余白を2%・ブロック幅を32%と指定すれば、画面幅に対して余白・ブロック幅が変わるので、どの画面幅でも3列のブロックが出来上がります。
横幅1000pxに対しては余白20px・幅320pxになり、タブレットサイズくらいの横幅770pxに対しては余白15.4px・幅246.4px、スマートフォンくらいの横幅320pxに対しては余白6.4px・幅102.4pxになります。
このように「%」を指定することで画面幅が微妙に変わる毎にCSSを書く必要がないので、かなり現実的な方法に思えませんか？
実際にホームページをデザイン・作成する時にはかなり便利なので、私はよく使う考え方です。
以前は「px」で値を指定してばかりでしたが、今ではほとんどの物を「%」で値を指定しています。
レスポンシブWEBデザインやスマートフォン専用ページに限ったことではなく、パソコン対応のみのページ制作の場合でも横幅が1000pxだったり、1100pxだったり、2カラム構成でメインカラムが800pxだったり750pxだったりと横幅が案件によって変わってくるので、都度CSSを作っていましたが%指定で3列・2列のブロックを表現するCSSセットを一つ作っておくことで、様々な幅のデザインに応用できるのでとても便利です。
コンテンツの中身が増減しても崩れないデザインをする
例えば一覧ページのデザインをこんな風にしたとします。
日付があって、サムネイルとタイトル、一言コメントを付けて、クリックで詳細ページに移動するようなコンテンツですね。
この段階では綺麗に収まっていますが、入れる写真が縦長になったらどうでしょう・・・
また一言コメントが3行入っていますが、必ず3行分の文字が入るとは限りませんよね？場合によっては1行で終わってしまう事もありますし、3行以上になる事もあり得ます。
タイトルだって1行で収まらないこともあるでしょう。。。
なんだかレイアウトがガタガタと音を立てて崩れるような気がしませんか？
実際に運用していると崩れてしまいます・・・
数年前までデジタル形式で写真を撮影するにはデジカメでの撮影が一般的で、ほとんどの場合横長で撮影していましたが、現在ではスマートフォンが普及してきました。スマートフォン本体の形状も影響して縦長写真が多くなってしまう傾向があるように思います。
アテンドではお客様が撮影した写真や作成した文章を、お客様自身で更新できる「W.U.P.」というプログラムを使ってホームページ運用を提案しています。多くのお客様に利用していただいているのですが、投稿されるコンテンツに使われる写真の向きが横長から縦長へ変化していることを実感しています。
ひと昔前のコンパクトデジタルカメラと比べると、最新のスマートフォンの方がはるかに解像度も高く、保存する領域も多く使えたり、インターネットに接続してすぐに投稿したりできるので、利用率はこれからもどんどん変化していくのかもしれません。
縦横の比率が異なる写真がどんどん投稿されていく事を考えると、これは解決しておかないといけない問題です。
jqueryを活用して高さを整える
こんな時は要素事の高さをそろえてくれる「jquery」を活用してみましょう！
fixheight.jsやmatchHeight.jsなど、便利なjqueryがたくさんありますのでそれらを活用し、ボックス全体の高さやタイトル・コメントのブロックの高さを各行で揃えてあげる事でレイアウト崩れを防ぐ事ができます。
背景画像を指定する場合には、繰り返し表示できる画像を使う
背景に画像を入れて模様を入れたり、写真を入れたりするデザインを作る場合、ブロックの縦横が固定されていればきちんと収まるようなジャストサイズで背景画像を作ってはいませんか？それではブロックの幅や高さが変わるとおかしなことになってしまうかもしれません。
ブロックのサイズは変わる事を前提として、縦横が変わっても切れ目の無いように背景をデザインするように作る必要があります。
写真などで繰り返し表示が難しい場合は、CSSの「background-size」でブロックに収まる最大サイズに収まるように拡大縮小してくれる「contain」やブロックを完全に覆うサイズに拡大縮小してくれる「cover」を使うととても便利です。もちろん縦横の比率はきちんと維持してくれます。
また、縦横のサイズも指定する事ができるので、とても便利なCSSプロパティです。
画像は大きめに作る
レスポンシブWEBデザインでホームページを作るときありがちなパターンですが、PC表示でちょうどいいサイズの画像を作ってもタブレット・スマートフォン表示にした時に小さすぎて左右の余白が空きすぎるという事が時々あります。
特に2カラム構成にした時のサブコンテンツに入れるようなバナーでよく起こる現象です。
サブコンテンツの横幅を250pxにしていて、そこに収まる丁度いいサイズ、つまり横幅250pxでバナー画像を作ったとします。
でもタブレットサイズになると2カラム構成のページは画面幅的に収まりきらないので表示する領域が狭すぎます。スマートフォンの場合であればあり得ませんよね。そうなると、メインコンテンツの下にサブコンテンツを入れる事になります。
どうでしょう・・・サブコンテンツの横幅がメインと同じになりましたよね。
タブレットサイズを770px～480pxとすると、サブコンテンツの幅を250pxで想定していたPCサイズよりも大きくなっていまいます。
スマートフォンの場合でも最小320pxとしても幅が足りていませんね。
これでは余白が思いのほか大きくついてしまった。なんてことになりかねません。
パソコン表示用に作りこんだ画像が、スマートフォンで見るとサイズが足りない！なんてことは結構よくある現象なんです。
なのでタブレットの時はどう見えるかな？スマートフォンの時はサイズが足りるかな？と考えてみるようにしてみてください。
また文字のサイズについてもきちんと読める文字サイズであるかどうかを、実機で確認するクセを付けておくと更によくなるはずです。
まとめ
・pxなどの絶対値ではなく、%などの相対値を使う
・コンテンツ量が増えても崩れないデザインを考える
・縦横比率の異なる写真が掲載されるケースを想定しておく
・背景に使う画像は繰り返し表示させて切れ目のわからない画像を作る
・パソコン表示よりもタブレット表示の方が横幅が大きくなるケースもあるので、画像を作るときにサイズについて考えておく
