運営しているウェブサイトを後から「スマートフォン対応のホームページ」に仕上げる方法

今から20年前の2000年頃はインターネット通信費も高くパソコンを持っている人もあまりいませんでした。しかし、2005年にスマートフォンが登場し、2008年からiPhone3Gが発売され一気に普及していきました。今やスマホ普及率は80％を超えるとも言われており大半の方々が所有しています。

運営しているウェブサイトを後から「スマートフォン対応のホームページ」に仕上げる方法

技術的な話でウェブサイトをスマートフォン対応（スマホ対応）させることは一般的に“レスポンシブ化”と言われます。レスポンシブ化と言ってもさまざまな方法があるので手段は決して１つではありません。

どういった手法を選ぶとしても、大切なのは「色々なスマホ環境で閲覧ができるかどうか」です。せっかく運営中のウェブサイトをレスポンシブ対応させたとしても快適に見れなければ意味がありませんよね。

当チームには少し特殊なエンジニア（技術者）がいます。カンタンに言うと「まだスマホ対応していないウェブサイトを後からテコ入れして標準でスマホ対応させる」というスキルを持っています。

どうやってスマホ対応させるのか

ウェブサイトは基本的にCSSでレイアウトを組んでいます。つまり「スマホに非対応」のウェブサイト（ブログ・オウンドメディア・ホームページを含む）は“スマートフォン用のCSSが不足”しています。

ちなみに以下は「スマホ用のCSS」が不足している状態です。スマートフォンで開いてもPC用のレイアウトが表示されてしまうので画像（イメージ）や文字（テキスト）が小さくてまともに読めませんよね。

そこで技術者が「現状のhtml構造を元にスマホ対応が可能か？」を調査するわけです。メインビジュアルやグローバルナビゲーションやサイドバーのレイアウトをスマートフォンに最適化するための確認ですね。

もしhtml構造に無理がないと判断すれば専用のCSSをゼロから起こします。ちなみにスマホ用のみとするかタブレット用も同時に作成するかで『追加するCSSの記述ボリューム』は大きく異なってきます。

そして以下が実際にスマホ用のCSSを記述した例です。スマートフォンで最適化された表示になっていますね。

運営されているウェブサイトの状態によっては、CSSの中身が数千行〜数万行になることも多く決して楽な作業ではありません。たとえるなら「お住まいの自宅を新築リフォームする」といった感覚に近いです。

カンタンに言えばパソコンで表示されているページに影響を与えずスマホの解像度に応じて微調整をしていく技術です。大半の来訪者はスマホで閲覧しますので「見れる見れないは大きな問題」となります。

せっかくなのでもう１つ『スマホ非対応とスマホ最適化済みの例』を見てみましょう。まずはスマホ対応する前のページ（以下はスマートフォンで閲覧した状態）です。文字が小さくて読みづらくなっています。

そして以下が「後からスマホ対応」でレスポンシブ化したウェブサイトの例です。

運営中のウェブサイトに影響はないのか？

当チームでは一部のお客様に限り「後からレスポンシブ（スマホ対応）」という技術を提供しています。

その際は今運営中のウェブサイトを一旦完全クローンとして複製し、事前検証ができる環境を構築しています。そのため最終チェックを行うまでは運営中のウェブサイトが影響を受ける心配はありません。

＜運営中のウェブサイトURL例＞
https://example.com

＜事前検証用のウェブサイトURL例＞
https://demo.example.com

上記の通り、事前検証用のサブドメインを活用して“テスト環境を準備”させていただきます。サブドメインを使えば運営中のウェブサイトには一切影響がありませんので安心して作業が進められます。当然ですが、最終的には運営中のウェブサイトにCSSを追加するので晴れてスマホ対応となります。事前テストは慎重に行います。

スマホ対応になればどうなるの？

対応前は「スマホで自身のウェブサイトを開くとPC用の画面が表示」されますよね。そのウェブサイトがスマホ対応になることでスマートフォン閲覧時にスマホ最適化された状態でページが閲覧可能になります。

導入後は「スマートフォンの流入割合」が増えてきます。今まではPC（パソコン）でしか見れなかったページがスマートフォンでも快適に見れるようになるので来訪者が自然と増加するからです。

スマホでネットサーフィンをしていて「スマホ非対応のウェブサイト」が開いたらそのまま読みつづけますか？画像や文字が小さく内容が読めずに画面を閉じてしまった経験もあるかもしれませんね。

今すぐ「後からレスポンシブ（スマホ対応）」を導入したい方へ

まずは導入可能か現状のウェブサイトを調査させていただきます。ごく稀に後からレスポンシブに置き換えられないhtml構造でパソコン用のウェブサイトが仕上げられている場合があります。

目安としては「10年以上前に作成されたウェブサイト」は対応がむずかしい可能性が高いです。なお、導入に関する事前見積もりは完全無料で行なっておりますのでまずは一度お問い合わせくださいませ。

こんな方からご依頼を受けてます

これまで何度も対応してきた内容なので特殊と言っても特に新しくはありません。

・個人的な特典として配布するデータをスマホ対応にしてほしい
・運営中の個人日記ブログをスマホ最適化表示できれば嬉しい
・デザインを作り変えるほどの費用はないので手軽に済ませたい
・クライアントのウェブサイトをより強固な状態に仕上げたい
・SEO対策としてスマートフォンやタブレットにも対応させたい

最近は70才以上の方も半数（50％以上）がスマホを所有している時代へ突入しています。スマホ対応していないウェブサイトは少しずつ減っていますが、いまだ対応できていないウェブサイトもかなり多いです。まずはスマートフォン最適化を進めて１人でも多くのユーザーにページを閲覧してもらえる状態を目指しましょう。

まとめ

整理すると「スマホ対応のホームページを作る」には以下の２パターンがあります。

・ホームページのデザインを丸々スマホ対応で作り直す
・今のホームページを活かしたままスマホCSSを追加する

ホームページをゼロから作り直すのは費用が高いので、後からスマホ用のCSSを準備する人の割合が多いです。ただ、スマホ用のCSSを追加作成する「後からスマホ対応」もhtml構造によっては実現できません。

あと“スマホ対応の度合い”も大切です。たとえば、スマホ（smp.css）のみなのか？タブレット（tablet.css）でもレイアウトをしっかりと別けるのかどうか？も料金にダイレクトに影響する部分となります。

なるべくお金をかけずに“スマホ対応”したいのか？それとも来訪ユーザーの取りこぼしを最小限に抑えるためにしっかり作り込みたいのかでも“トータルの総コスト”は大きく異なります。現在のアクセス数や今後の運営方針も踏まえて将来的にどういったポジションを目指しているのかで変わってくるはずです。ぜひご検討ください。