うちのサイトは後からレスポンシブ対応だけできるのか？
うちのホームページ、スマホで見ると右側が切れてる
何年も前に作ったホームページ。パソコンで見る分には特に問題ないのに、スマートフォンで開いてみたらページの右側が見切れている・・・
「これ、レスポンシブ（スマホ等での表示）対応だけ後から追加できないのかな?」
そう思ったことありませんか？
結論から言うと、できなくはないが、すんなりできるケースはむしろ稀。
なぜかというと、そもそもそのサイトが「レスポンシブ対応」を前提にデザイン・作成されていないからです。この記事では、なぜ後付けがそんなに大変なのか、それでもやりやすいケースはあるのか、実際にどう進めればいいのかを順番に解説していきます。
なぜ「画面幅を狭くするだけ」では済まないのか
レスポンシブ対応とは、パソコンで見てもスマホで見ても、画面の大きさに合わせて情報が正しく・見やすく表示される仕組みのことです。ここでのポイントは「どんな画面幅で見ても、ちゃんと情報が伝わる状態を保つ」ということです。
一方、パソコンでの表示だけを前提に作られたサイトは、そもそも「決まった横幅で綺麗に見える」ように作られています。これを無理やり画面幅だけスマホサイズに縮めると、何が起きるでしょうか。
- 文字がどんどん小さくなって、読めない大きさになる
- 写真や画像も一緒に縮んで、内容が分からなくなる
- 横に並べていた要素同士が窮屈になり、崩れて重なってしまう
- 冒頭の例のように、そもそも右側にはみ出して見切れる
つまり、「画面幅を狭くする」という指示を追加するだけでは解決しないんです。文字の大きさ、写真の配置、要素の並び方まで、画面幅に応じて作り変える必要が出てきます。そしてこの作り変えの範囲が大きくなったりすると、実は新規で作るのとそう変わらないボリュームになってしまうことがあるというわけです。
それでも「やりやすいケース」はある
とはいえ、すべてのサイトが同じように大変というわけではありません。以下に当てはまるサイトは、比較的やりやすい部類に入ります。
- サイトが比較的新しい時期に作られていて、要素の並びがシンプルな場合
- ページ数がそれほど多くない、もしくはどのページも似たデザインで統一されている
逆に、次のようなサイトは「後付け」よりも作り直しを検討した方が工数が抑えられやすいです。
- かなり古い時期に作られていて、<table>タグを使った枠組みでページ全体が組まれている
- 見出しやボタンの文字が、画像で作ってある場合(画像内の文字は画面幅に合わせて縮小できず、読めなくなる原因になりやすい)
- ページ数が非常に多く、ページごとにデザインがバラバラ
後付け対応の主な3つの方法
① 見た目の調整だけで対応できる場合
サイトの中身はほぼ変えず、見た目の指定を追加・修正する方法。土台がしっかりとつくってありシンプルなサイトであれば、これだけで十分収まることもありますが希です。
② ページの一部を作り直す(部分改修)
トップページや主要なページから優先的に、中身ごと作り直していく方法。冒頭のような「右側が見切れる」問題も、多くの場合はこの規模の対応が必要になります。
③ スマホ専用ページを別に用意する（非推奨）
今のサイトはそのままに、スマホでアクセスしたときだけ別のページに案内する方法。応急処置としては使えますが、サイトの管理が二重になり今後の運用コストや、検索エンジンの評価の面でもおすすめできません。
まとめ
- 「レスポンシブ対応だけ後付け」は、技術的にはできるが、すんなり終わるケースは稀
- 理由は、そもそもパソコン表示を前提に作られていて、画面幅を狭めるだけでは文字や写真、レイアウトが崩れてしまうから
- サイトの作られ方次第で難易度は変わるが、多くの場合は新規制作に近い工数を覚悟しておいたほうがよい
まずは自社サイトが今回挙げたどのパターンに近いか、確認してみるところから始めてみてください。