今、ホームページのスマホ対応化が急がれています。ほとんどの場合、デザインのフルリニューアルによりスマホ対応化を行いますが、私の場合は必ずしもそうではありません。
既存のデザインをそのまま活かしてレスポンシブでスマホ対応化を行うことがあります。
デザインそのままでスマホ対応を行うメリット・デメリット
メリットとしては、すでにホームページを利用しているお客様が混乱することなくスマホ対応化を行えます。
このたびの株式会社松元サービス様のホームページというのは、早くから自社でよく研究され、修正の余地のないようなホームページでした。
また、日々すでに多くのアクセスがあり、急ぎの依頼が多い運送の受注に使われることから、なるべくコンテンツの位置や動線を変えたくないと考えました。
［Before］http://www.matsumotoservice.jp/
［After］
［スマホ表示］
［Before］http://www.matsumoto-s.net/
［After］
［スマホ表示］
デメリットとしては、場合によっては工数が増えてコストがかかることがあります。
今回、依頼の打診を受けたときに、ソースをちらっと見て、これはそれほど難しくなさそうだと思ってご依頼を受けました。
しかしよく見てみると、なんとCSSファイルが30個もあったのです。ひとつのHTMLファイルに4つのCSSが紐付いていることもありました。
こうなると、どのCSSがどのデザインを指定しているのかを一つ一つ見ていかなくてはなりませんので、結構な時間がかかることになります。
かなり大変でしたが、とてもいい勉強になりました。もうこれで怖いものなしです。
レスポンシブとは？
レスポンシブとは、レスポンシブWebデザインの略で、ブラウザやデバイス（端末）の画面幅に応じて、自動的にホームページの表示を変える手法です。
HTMLファイルに <meta name=”viewport” content=”width=device-width “> を、
CSSに img { max-width: 100%; height:auto } を記述して、
widthのpxを%指定にして、
あとはメディアクエリで画面幅に応じた指定と微調整を行えば、だいたいスマホ対応化が行えます。
しかし、<table>タグでレイアウトしている、やや古いタイプのホームページでは、<table>を<div>に置き換える必要があり、工数が増えます。
レスポンシブのメリットは、URLひとつで複数のデバイスに対応できること。
よくある、スマホページを別に作成する手法では、パソコン用ページとスマホ用ページが別々に存在することになり、管理が2倍になります。SEOの面でも重複コンテンツにならないよう注意が必要です。
レスポンシブのデメリットは、スマホ用ページを別に作成するよりも、一般的には値段が高いのだそうです。
私は、レスポンシブしかやらないのですが…そうか、もうちょっと高くとってもいいんだ（笑）
今回は、既存のホームページをそのまま活かしたかったことと、自社ですでに利用されているサーバーがあったことから、このようなやりかたでスマホ対応化を行いました。
しかし、デザインを一新していいのであれば、Wixなどでホームページのリニューアルを行うのがもっとも得策です。
まだ未公開なので大きな声では言えませんが、Wixでは、SEOを意識している人なら誰もが待ち望んでいる、アレやコレやの機能がリリースを控えています。
ホームページのスマホ対応化で迷っているなら、ぜひご相談ください。
⇒ 問い合わせ
================================================
東京で、Wixセミナーを行います。SEOに関するお話も！
［バレンタイン企画］2時間で作成・公開！WixホームページとSEOセミナー
================================================
こちらのサイトを、レスポンシブ化したいです。
サイト内容は、制作中です。
費用と納期は、どれぐらいですか？
坂田さん、ただいま既存サイトのレスポンシブ化の承りを見送っております。何卒ご了承ください。