Webサイト制作の現場において、スマートフォン向けサイトは、もはや欠かせない存在となっています。スマートフォンの所有率はなんと76.0%（出典:総務省/2016年）。今後もニーズはさらに高まっていくでしょう。

既存のPCサイトをレスポンシブ化したい！というご相談が増えつつある

一から制作するよりも費用が抑えられるうえ、期間も手短に済むため、ご要望として多くあります。
元となるPCサイトの組みかたによって対策がまちまちなため、制作前に気づかなかった落とし穴にはまることがあります。

1.タブレット非対応の場合に崩れが発生！？

タブレット非対応にする場合、タブレットでの表示に課題が生まれます。

通常レスポンシブでは横幅が可変になるため、崩れが起きないように%で指定を行います。ですが、既存のPCサイトは多くの場合px幅固定でCSSが組まれています。
ブレークポイントを750pxの1点に設定した場合、タブレットでの表示がこんな風に…




コンテンツ幅が980pxなどのピクセルで指定してあるため、コンテンツが落ちてしまったり、画面に横スクロールが発生してしまい画面がぐちゃぐちゃに。これを解決するためには、元のPCサイトのCSSに手を加えないといけないんでしょうか？

解決 ⇒ viewportの設定を見直し！

こんな時はviewportの設定を見直します。
viewportのレスポンシブ向けの設定を検索した時、よく出てくるのが下記の記述。

これをそのまま使用してしまうと、タブレット端末でも画面幅に合わせてCSSが適用されてしまいます。
こう変更します。

同時に、CSSにも最小幅を追加します。数値はサイトの横幅に合わせてください。

CSSは、SP表示時にも適用されてしまうと今度はSP表示が横伸びしてしまうので、SP時はキャンセルするか、PC表示時にのみ効くようにメディアクエリなどで制限を設けてください。

initial-scaleについては解説すると記事ひとつ書けてしまうほどなので今回は割愛しますが、これでタブレット端末ではPC版のデザインで表示されるようになります。iPad Air2、Androidタブ端末にて確認済みです。

2.iPhoneXの横持ちの幅がブレークポイントを超えている！？

iPhoneXの画面サイズを調べると、なんと375×812。設定したブレークポイントを超えてしまいます。iPhoneXを横持ちにした時はPC表示になるのでしょうか。

解決 ⇒ Safari使用時は横幅が750pxを超えないように配慮してある

iPhoneXを横持ちでSafariを使用した場合、左右に疑似的な余白が生まれ、750px以下でもスマートフォン版が表示されるように工夫されています。この余白はブラウザ固有のものなので、どのサイトを閲覧してもこうなっています。

3.複雑なTABLEタグの扱いはどうすれば？

簡単な表であれば、CSSで縦組みにすれば大丈夫ですが、複雑な表は画像にするしかないんでしょうか。

解決 ⇒ TABLEの親要素にスクロールをかける

TABLEをdiv要素などでくくって、スクロールをかけて対処しましょう。
このように表示されます。



◆HTML

◆CSS

4.IE11で大きな画像を縮小すると画像が荒くなる

レスポンシブ用に作った大きな画像をIE11で縮小して表示すると、ドット欠けみたいな白いぶつぶつが出てしまい、綺麗に表示できない。

解決 ⇒ IEで綺麗に縮小できるサイズは2倍まで

特に人物が移る写真で顕著なのですが、IE11で2倍より大きな画像を縮小すると、表示が荒くなってしまう現象があります。これはIE11のレンダリング自信に問題があるらしく、CSSやソースの書き方で解決することはできません。backgroundに設定した場合も同じです。
対策としては、画像を2倍サイズまでにするか、IEの時だけ違う画像を表示するかの二択になります。

制作チェックポイントリスト

事前のすり合わせや見直しの際に改めてチェックしたいポイントをメモ。

• タブレットでの表示
  　⇒タブレット対応しないとなった際は、PC表示とスマートフォン表示のどちらに寄せるかは決めておきましょう。（前述）
• ブレークポイントの設定
  　⇒多くのサイトで750pxが採用されていると思いますが、意外と根拠を説明しづらく、稀にご納得いただけない場合があります。（気になる場合には768pxで切り分けたをお勧めします）
• ヘッダを固定にする
  　⇒ヘッダを固定にした際に不穏な動作になるのが「ページ内リンク」。既存サイト側での位置を動かせなかったりと、編集が困難な場合が多いため、JSで判定して、スクロール量を調整して乗り切りましょう。
• TABLEの扱い
  　⇒簡単なTABLE表は縦にするのが多いと思いますが、読みづらいと思われる方もいるようです。複雑なものはスクロールして確認できるようにしましょう。
• 画像の編集作業
  　⇒大きいサイズの画像の差し替えが必要との旨は事前に確認しておきましょう。元素材のご用意をお願いすることになりますし、早めの方が良いでしょう。
• IE11での画像表示
  　⇒前述しましたが、IE11で画像荒れが発生します。IE11はサポート期間もまだ残っていますし、ネックです。（対応ブラウザはもちろん要件として決めていらっしゃるとは思いますが…）
• スマートフォンを横持ちした時の表示
  　⇒横持ちした時に崩れが発生していないか、確認しましょう。ハンバーガーメニューを開いた時に縦に長くてタップできなくなっていたりしていませんか？
• 画像の拡大機能
  　⇒既存サイトに画像の拡大機能がついている場合、要不要を確認しましょう。スマートフォンサイトはピンチで拡大できてしまうので、あまり利用されません。
• 印刷対応
  　⇒印刷ボタンなどを搭載している場合、どのような動作を想定されているか確認しましょう。印刷用のCSSがある場合などは、レスポンシブ化で追加した要素が余計に印刷されないか注意して確認しましょう。
• Flash・動画
  　⇒スマートフォンに対応していない形式が使われていないか、確認しておきましょう。
• GoogleMAP
  　⇒MAPのバージョン、iframe、色々起こります。
• 今後の更新方法
  　⇒既存サイトを編集する形でレスポンシブ化した場合、納品後の更新において難易度が上がってしまうことのないよう、配慮する必要があります。

既存サイトのレスポンシブ化は制約が多く、ご相談しながら進めていく場合が非常に多いです。
そんな悩みの種を解決できれば幸いです。