HOME > blog > CSS > PCサイトをレスポンシブWeb化する際の悩みどころ

PCサイトをレスポンシブWeb化する際の悩みどころ

公開日: カテゴリー: CSS、HTML タグ: 、

少々前の話になるのですが、このサイトをレスポンシブWebにしてみました。実際の作業を通してPCサイトをレスポンシブWeb化する際に注意しておくべき点などについて整理しておきたいと思います。

CSS3にほとんど馴染みがない場合、どうしても知識のベースがCSS2に基づく事になると思うので、どことなくややこしそうな印象も抱えがちになりますが実装すること自体はとても簡単で、

  • CSS3で拡張された media queries で任意の条件を指定した上でその条件に当てはまる場合のCSSを記述する

大雑把にこれだけです。スマートフォン対応を想定する場合、スマホの画面領域に最適化させるためviewportの指定など、ほかにも手を加える箇所は出てきますが、レスポンシブWebに限ればこれだけで実現可能です。ただ、これだけでは意外と手順は少ないらしい以上の情報が含まれてないので、簡単な例を挙げてみましょう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>PCサイトをレスポンシブWeb化する際の要点&#64;UCWD-Studio.</title>
<link rel="stylesheet" href="./style.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="block_A"></div>
<div id="block_B"></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

body {
     margin: 0;
     padding: 0;
}

#block_A {
     float: left;
     width: 50%;
     height: 360px;
     background-color: #F33;
}

#block_B {
     float: left;
     width: 50%;
     height: 360px;
     background-color: #6FF;
}

@media (max-width: 768px) {
     #block_A {
          width: 100%;
          height: 150px;
          background-color: #F33;
     }
    
     #block_B {
          width: 100%;
          height: 150px;
          background-color: #6FF;
     }
}

これらのHTMLとCSSを用意してブラウザで表示させると、ブラウザの横幅が768px超過の場合、div#block_A (赤いブロック) と div#block_B (水色のブロック) はそれぞれ50%の横サイズで横並びになり、ブラウザの横幅が768px以下だと縦並びになります(サンプルを表示)。

参照サイト

細かくは既に色々なサイトで紹介されていて参考になります。

PCサイトのレスポンシブWeb化は表示要素の取捨選択が重要

一からサイトを構築する場合は今となってはスマートフォンなどからのアクセスを最初から考慮してコンテンツを構成することになるので実装段階で問題になることはないのですが、そうでないPCサイトが基盤になる場合ではスマートフォンなど小さな画面領域だとどうしてもページ長が大きくなりがちになります。

その結果、「伝えたいことと情報量のバランス」という視点で一度はOKを出した(あるいはOKをもらった)コンテンツを、より小さな画面環境でどのように扱うか?が大きな課題になります。

結局のところは

  • 何かしらの方法でページを構成する要素やコンテンツの一部を削ったり一時的に非表示にする
  • 様々な閲覧環境下で支障のないコンテンツの練り直しを行なう

のいずれかの選択になるのですが、状況が違うとは言え「伝えたいことを適切な情報量で表現できてる」と一度はOKを出している(あるいはOKをもらっている)ので取捨選択もコンテンツの作り直しも難しいものになります。

特にクライアントから制作・運用を委託されている案件の場合、早い段階でこうした作業が発生する旨を了承していただかないと内容や表現が変わったりクライアント側にも原稿を書き直す手間が出てくるので調整が難しくなるケースも出てきます。

スマートフォンやタブレット特有の対応が必要

まず一番最初に、何かしらのページ操作をユーザに求める(極端な話、リンクを辿ってもらう)場合、指で操作できるサイズを確保しておかないと操作の度に何かとストレスを感じさせてしまいます。

PC版サイトの場合はマウスでの操作が前提となることが多いですが、スマホなどの端末では指で操作するのが普通で、このデバイス特性の差によってPC版サイトでは期待できたイベント処理がスマホなどでは発生しない、というケースもあります。

その他、端末の向きで表示領域が変わることも自然に受け止めすぎてうっかりしやすい部分です。単純にテキスト表示をするだけのページなら主にビジュアルデザイン上の注意を払うだけで済みますが、モーダルウィンドウを表示させる処理など、横向きではウィンドウをクローズするボタンが画面外に逃げて閉じられなくなる、というのは十分あり得ることなので注意が必要です。

またスマートフォンやタブレットでは搭載OSや端末毎に向きが変わった場合の処理が異なる点も注意です。これらの端末の場合では向きで画面領域サイズが変わる上、OSや端末ごとに縦横各サイズが異なっていたり横向きにするとズームがかかって想定通りの横(あるいは縦)サイズが確保できずに内容の一部が画面領域外に隠れてしまう、というケースもあります。

参照URL

画像の扱いが面倒

サイト上で画像を扱っている場合、PC向けの画像ではスマホなどの端末では縦横サイズが大きくてそのまま使えないのでそういった端末向けに画像を改めて用意し直す必要が出てきます。また iPhone(あるいはiPadや最近のMac)ではRetinaディスプレイが採用された機種が増え、それらの端末でこれまで通りの画像を表示させるとぼけやて表示されてしまうという問題もあるので、ビジュアルのイメージを一定以上に保ちたい場合は対応が必要になるでしょう。

ただ、そうなるとこれまでのPC向け / スマホ向け(タブレットPCの画面サイズに合わせてサイトの最適化も検討している場合はそれについても)のほか、それぞれのRetinaディスプレイに向けた画像も必要になり、それぞれの端末に適した画像を表示させる手法ももちろんですが、画像の管理が問題として表面化してきます。

また、スマートフォンからのアクセスだからといって必ずしも3GやLTEとは限りませんが、そういったケースももちろん思慮から外すわけにもいかないわけで、単にスマホ向けの小画像であるだけでなく、ファイル容量的にも小さくする工夫が求められます。

参照URL

まとめ

レスポンシブWebは最初に挙げた通り実装すること自体はそう難しいわけではありません。また表示まわりに直接影響する手法なので「お、スマホで確認したらちゃんと意図通りのデザインで表示される!!」とか結果が分かりやすく、実際に利用するかどうかはともかく、ひとまずイマドキの技術を勉強してみたいと感じているなら色々試してみると面白いです。

また、そうした勉強を経てある程度のノウハウが身につくと一からPC向け/スマホ向けをそれぞれ独立して作成するよりはやや工数を減らせるのかも、という感じもあります。

ただ、それは一からサイト構築する際の話で、実際には

単一プラットフォーム向けサイト制作とは違うスキル必要
  • デザイン段階でHTML構造を考慮できないと難しい
  • HTML構造などによっては実装難度が上がる場合あり得る
  • 端末特性ごとの配慮を踏まえた上で設計段階での熟慮が必要
コンテキストに合わせたサイト設計が重要
  • 既存サイトからの拡張はコンテキストと実装の矛盾にハマって手間が増えるケースも往々にしてありえる

そんな印象があります。

参照URL