既存PC向けWebサイトをスマホ対応させるための4つの手法

res00

先日、2015年4月22日に検索エンジン最大手のGoogleが
モバイル(スマートフォン)向けの検索において
Webサイトがスマホ最適対応しているかどうかを
検索順位に影響させると発表した。

そして、事実、スマホでGoogle検索をした際に、
スマホ向けに最適化手法をとっていないWebサイトが
軒並み順位を落とすという事件が起きた。

検索順位なんて気にしない趣味のサイトだったら良いだろうが、
多くのWebサイトは人に見てもらうことを目的として
作っているわけだから、なるべく検索順位は
高い方が良いに決まっている。

したがって、今回の検索順位評価の影響を受けてしまった
サイトについては大至急スマホ最適対応を
検討したほうが良いかと思う。

そこで本記事では
既存PC向けWebサイトをスマホに対応させるための
「4つの手法」について解説するので
参考にしてみていただければ幸いだ。

1.デバイス別に専用サイトを用意する

res1

ひとつめの手法は、既存のPCサイトはそのままで、
新たにスマホ用のサイトを別個で構築するというものだ。

アクセスしてきたデバイスを判別し、
PHPやhtaccessなどの専用振り分けプログラムで
それぞれに最適なページへ自動誘導するのが一般的。

デバイスごとに内容やデザインなど全て自由に構築できるので、
ターゲットに合わせた情報発信が可能というのも利点だ。

ただし欠点としては、運用が面倒というのがある。

各デバイスのページを個別管理しなければならないため、
なにか修正が入った場合は全てのデバイス向けのページを
それぞれ編集しなければならないのだ。

また仮にデバイスごとに同じ内容のページを
用意していたとしても、
それぞれにURLが異なってしまう点も
場合によってマイナス面になることがあるだろう。

2.自動変換エンジンでコンバートする

res2

こちらは有料にはなるが
非常に簡単にスマホサイトが作れる方法だ。

これは業者が用意する専用の変換エンジンで、
既存PCサイトのソースを
スマホ向けテンプレートに
自動的にコンバートするという手法になる。

ようは、一度契約して形を決めれば
普段通りPCサイトを更新していくだけで良く
これまでと運用方法が変わらないで済む。

ただし、初めに述べたとおり
「有料」というところがミソ。

変換エンジン用の利用料および、
サーバ利用費などそれなりの運用コストが
契約している限りかかってくるのだ。

ある程度の費用を長期で掛けられる
余裕のあるビジネスが対象となるかと思う。

3.レスポンシブ ウェブ デザインで制作する

res3

こちらは結構オススメの手法であり、
私も仕事柄問い合わせを多く受けるものになる。

「レスポンシブ ウェブ デザイン」と呼ばれ、
Googleが推奨している手法ということでも有名だ。

コンテンツはあくまで一つ。

PC向け、スマホ向けとデバイスごとに作るのは
デザインだけなので、管理更新が楽なのも特徴だ。

具体的には、アクセスされたデバイスの
「画面幅」を見て、それに合わせたデザインを
出し分けるという方法になる。

厳密にPCだからPC向け、
スマホだからスマホ向け・・・としているわけではない。

PCでも画面が狭いものがあればスマホ表示になる。

ようは一般的にPCは画面が広く、スマホは画面が狭いので
必然的にスマホ向け(と決めた)画面が出るという話だ。
一度作ってしまえばかなり便利なのでオススメだが、
問題点として既存PCサイトの作り方によっては
既存サイトのプログラムソースにも大きく手を入れる必要があり、
最初の設計・構築に費用と時間がかかる場合があるということか。

また、PC向けの情報量をスマホでも読むことになるので、
気になるほどではないかもしれないが
スマホでの読み込みは少し重たくなるということが考えられる。

4.CMSのマルチデバイス機能で対応する

res4

もし、現在のサイトがCMSで作られている場合で
かつそのCMSがマルチデバイス対応であった場合は、
こちらもオススメの手法だ。

CMS側で指定された通りに、
スマホ向けのテンプレートを用意すれば良い。

コンテンツ自体はCMSでの一元管理となるので、管理運用も楽。

CMSにはよるが、PC向けは、コンテンツのこの部分、
スマホ向けはコンテンツのあの部分・・・と
表示内容さえも変えられる可能性がある。

ただし、あくまでCMSの仕組みを使うので
CMSの仕様上でしか構築が出来ない点はご注意を。

結論:結局どの手法が一番オススメか?

というわけで、以上4つの手法を解説したが、
実のところオススメはどれかプロの意見を聞きたいという
ご意見も多くあろうかと思う。

そこで私が良くお伝えしている答えをお伝えしよう。

基本的にそれぞれのサイトの特長などによって
状況が変わる場合もあるというのを前提にしていただいたうえで、
もしサイトがマルチデバイス対応CMSをしょっているなら、
上記の4番の手法。

そうでなければ3番のレスポンシブ ウェブ デザイン
というのが考えだ。

というのも、私の考えは
はじめに多少面倒でもしっかりと作って、
後の運用を楽にした方が良いというのがベースにあるからだ。

勘違いされている方が多いが
Webサイトは作って終わりではない。

その後も、しっかりと情報を更新し続け、
常に最新の正しい情報を伝えるのが
あるべき姿だと思っている。

その際に更新しにくい部分があると、
どうしても後々手が止まってしまう原因になりかねない。

それで、更新運用の方に比重を置いて
金銭的にも作業的にも負担の少ない方を
オススメとさせていただいている。

是非参考にしてみていただければと思う。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

新品価格
¥2,808から
(2015/6/10 16:32時点)

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

無料で簡単!ムームードメイン内で別ユーザーにドメイン譲渡する方法

Googleドライブで安全に動画をWeb公開、YouTubeに頼らない無料掲載方...

SEOに強い日本語レスポンシブWordPressテーマなら「el plano」が...

【ブクマ必至】プロが教えるWEB用写真素材オススメサイト(無料もあります!)

WEB制作会社がLancersを使って外注費を抑える方法

MODx(モドエックス)というCMSには手を出さない方が良い!